SVGを使った面白そうなテキストのアニメーションを再現してみました

<p>デザインをする上で、遠近法が助けになることは少なくありません。<br />
遠近法といえば、一点透視図法や二点透視図法で有名な幾何学遠近法が真っ先に思い浮かぶ方は多いと思いますが、<br />
遠近法は他にもいろいろ存在します。</p>
<p>いろいろな遠近法について、<a href="http://blog.livedoor.jp/kokinora/archives/1008065272.html" target="_blank">説明くださっているサイト</a>がありましたので、<br />
そちらを参考に、遠近法を試してみました。</p>
<p>&nbsp;</p>
<h2>重畳遠近法</h2>
<p><a href="/uploads-archive/2016/03/d548bb9e050520e0a0808c6b22859773.jpg" rel="attachment wp-att-9845"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9845" src="/uploads-archive/2016/03/d548bb9e050520e0a0808c6b22859773.jpg" alt="重畳遠近法" width="656" height="480" srcset="/uploads-archive/2016/03/d548bb9e050520e0a0808c6b22859773.jpg 656w, /uploads-archive/2016/03/d548bb9e050520e0a0808c6b22859773-300x220.jpg 300w, /uploads-archive/2016/03/d548bb9e050520e0a0808c6b22859773-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>最もシンプルな遠近法です。<br />
２つ以上のものが重なっているとき、前よりも後ろの物のほうが遠くに見えるという遠近法です。</p>
<h2>上下遠近法</h2>
<p><a href="/uploads-archive/2016/03/5c5472227ef85d54bb7f42aed50523e2.jpg" rel="attachment wp-att-9847"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9847" src="/uploads-archive/2016/03/5c5472227ef85d54bb7f42aed50523e2.jpg" alt="上下遠近法" width="656" height="480" srcset="/uploads-archive/2016/03/5c5472227ef85d54bb7f42aed50523e2.jpg 656w, /uploads-archive/2016/03/5c5472227ef85d54bb7f42aed50523e2-300x220.jpg 300w, /uploads-archive/2016/03/5c5472227ef85d54bb7f42aed50523e2-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>水平線に向かって、上にあるものほど遠くに見えるという遠近法です。</p>
<h2>大小遠近法</h2>
<p><a href="/uploads-archive/2016/03/4455c8c2061f88082884efe5b4ddd993.jpg" rel="attachment wp-att-9849"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9849" src="/uploads-archive/2016/03/4455c8c2061f88082884efe5b4ddd993.jpg" alt="大小遠近法" width="656" height="480" srcset="/uploads-archive/2016/03/4455c8c2061f88082884efe5b4ddd993.jpg 656w, /uploads-archive/2016/03/4455c8c2061f88082884efe5b4ddd993-300x220.jpg 300w, /uploads-archive/2016/03/4455c8c2061f88082884efe5b4ddd993-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>大きなものほど近く、小さなものほど遠くに見えるという遠近法です。</p>
<h2>空気遠近法</h2>
<p><a href="/uploads-archive/2016/03/57ff4cc0370ffed9deaf284cc22ba0f2.jpg" rel="attachment wp-att-9844"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9844" src="/uploads-archive/2016/03/57ff4cc0370ffed9deaf284cc22ba0f2.jpg" alt="空気遠近法" width="656" height="480" srcset="/uploads-archive/2016/03/57ff4cc0370ffed9deaf284cc22ba0f2.jpg 656w, /uploads-archive/2016/03/57ff4cc0370ffed9deaf284cc22ba0f2-300x220.jpg 300w, /uploads-archive/2016/03/57ff4cc0370ffed9deaf284cc22ba0f2-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>遠くのものは大気の影響で霞んでいくことから、<br />
彩度、コントラストが弱いものほど遠くに見えるという遠近法です。</p>
<h2>色彩遠近法</h2>
<p><a href="/uploads-archive/2016/03/891ac6b6a9d43baad2361e08c6541c42.jpg" rel="attachment wp-att-9848"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9848" src="/uploads-archive/2016/03/891ac6b6a9d43baad2361e08c6541c42.jpg" alt="色彩遠近法" width="656" height="480" srcset="/uploads-archive/2016/03/891ac6b6a9d43baad2361e08c6541c42.jpg 656w, /uploads-archive/2016/03/891ac6b6a9d43baad2361e08c6541c42-300x220.jpg 300w, /uploads-archive/2016/03/891ac6b6a9d43baad2361e08c6541c42-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>色彩が寒色系に近づくほど遠く、暖色系に近づくほど近くに見えるという遠近法です。</p>
<h2>消失遠近法</h2>
<p><a href="/uploads-archive/2016/03/db2bbcef7b5fbd7a6d2940b36cc645d1.jpg" rel="attachment wp-att-9846"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9846" src="/uploads-archive/2016/03/db2bbcef7b5fbd7a6d2940b36cc645d1.jpg" alt="消失遠近法" width="656" height="480" srcset="/uploads-archive/2016/03/db2bbcef7b5fbd7a6d2940b36cc645d1.jpg 656w, /uploads-archive/2016/03/db2bbcef7b5fbd7a6d2940b36cc645d1-300x220.jpg 300w, /uploads-archive/2016/03/db2bbcef7b5fbd7a6d2940b36cc645d1-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>焦点に由来する遠近法で、<br />
焦点がぼやけたところほど遠くに見えるという遠近法です。</p>
<h2>幾何学遠近法(透視図法)</h2>
<p><a href="/uploads-archive/2016/03/f8c7578620dd360fa20c8aa3e3868548.jpg" rel="attachment wp-att-9843"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9843" src="/uploads-archive/2016/03/f8c7578620dd360fa20c8aa3e3868548.jpg" alt="幾何学遠近法(透視図法)" width="656" height="480" srcset="/uploads-archive/2016/03/f8c7578620dd360fa20c8aa3e3868548.jpg 656w, /uploads-archive/2016/03/f8c7578620dd360fa20c8aa3e3868548-300x220.jpg 300w, /uploads-archive/2016/03/f8c7578620dd360fa20c8aa3e3868548-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p><a href="/uploads-archive/2016/03/9cae0087df9d97d3d1bcf40d1a1b9b23-1.jpg" rel="attachment wp-att-9864"><img decoding="async" class="alignnone wp-image-9890 size-full" src="/uploads-archive/2016/03/9cae0087df9d97d3d1bcf40d1a1b9b23-1.jpg" alt="" width="100%" srcset="/uploads-archive/2016/03/9cae0087df9d97d3d1bcf40d1a1b9b23-1.jpg 656w, /uploads-archive/2016/03/9cae0087df9d97d3d1bcf40d1a1b9b23-1-300x220.jpg 300w, /uploads-archive/2016/03/9cae0087df9d97d3d1bcf40d1a1b9b23-1-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>一番有名な遠近法ですが、一番難易度の高い遠近法です。<br />
消失点に近いものほど小さく、遠く見えるというもので、<br />
一点透視図法、二点透視図法、三点透視図法などがあります。</p>
<p>&nbsp;</p>
<p>思っていた以上に多くの遠近法があることを知ることができました。<br />
必要に応じて使い分けたり、デザインのヒントにしていきたいです。</p>
<h2>参考サイト</h2>
<p><a class="link" href="http://blog.livedoor.jp/kokinora/archives/1008065272.html" target="_blank">遠近法について知っておこう ー概要ー : ノラの絵画の時間</a></p>


db2bbcef7b5fbd7a6d2940b36cc645d1.jpg

いろんな遠近法

<p>デザインでイラストを入れたり、絵を描いたりするとき、<br />
質感を出来るだけ短時間で出すことが求められる機会は多いと思います。</p>
<p>この質感を出す上で、一つのポイントとなることがあるのが、<br />
目が見ている色と、脳が見ている色にはズレが出てくることがあることを意識することです。</p>
<p>今回はその中でも影と色の関係についての、基本的な部分についてご紹介いたします。</p>
<p>&nbsp;</p>
<p><a href="/uploads-archive/2016/03/shadow-color_2.jpg" rel="attachment wp-att-9782"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9782" src="/uploads-archive/2016/03/shadow-color_2.jpg" alt="shadow-color_2" width="656" height="480" srcset="/uploads-archive/2016/03/shadow-color_2.jpg 656w, /uploads-archive/2016/03/shadow-color_2-300x220.jpg 300w, /uploads-archive/2016/03/shadow-color_2-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>↑こちらのいらすとの、下にある白黒のチェックですが、<br />
円柱の影になっている箇所は、実際には↓のように、影になっていない黒の部分よりも暗い色なのですが、<br />
白として認識できると思います。</p>
<p><a href="/uploads-archive/2016/03/shadow-color.jpg" rel="attachment wp-att-9783"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9783" src="/uploads-archive/2016/03/shadow-color.jpg" alt="shadow-color" width="656" height="480" srcset="/uploads-archive/2016/03/shadow-color.jpg 656w, /uploads-archive/2016/03/shadow-color-300x220.jpg 300w, /uploads-archive/2016/03/shadow-color-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>実際は暗い色なのですが、<br />
影と色の関係から、脳が再処理を行ってくれるため、<br />
影になった部分も白としてみることができます。</p>
<p>&nbsp;</p>
<p>もうひとつですが、</p>
<p><a href="/uploads-archive/2016/03/shadow-color02.jpg" rel="attachment wp-att-9785"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9785" src="/uploads-archive/2016/03/shadow-color02.jpg" alt="shadow-color02" width="656" height="480" srcset="/uploads-archive/2016/03/shadow-color02.jpg 656w, /uploads-archive/2016/03/shadow-color02-300x220.jpg 300w, /uploads-archive/2016/03/shadow-color02-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>こちらのような立方体があった場合、<br />
一つ一つの面が一色で構成されていると見ることができます。</p>
<p>しかし、実際には下のイラストのように床からの反射光で、側面はグラデーションになっています。</p>
<p><a href="/uploads-archive/2016/03/shadow-color02_2-1.jpg" rel="attachment wp-att-9802"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9802" src="/uploads-archive/2016/03/shadow-color02_2-1.jpg" alt="shadow-color02_2" width="656" height="480" srcset="/uploads-archive/2016/03/shadow-color02_2-1.jpg 656w, /uploads-archive/2016/03/shadow-color02_2-1-300x220.jpg 300w, /uploads-archive/2016/03/shadow-color02_2-1-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>しかし、脳はこの反射光を省いた状態を計算して、<br />
一面が一色になっていると認識します。</p>
<p>日常で生活する場合、<br />
この脳の働きが、色や影の実際の状態を知る手助けになりますが、</p>
<p>デザインをしたり絵を描いたりする場合は、<br />
脳が省いた情報を再現することが、質感を高める場合が多くなります。</p>
<p>こちらのことを意識することで、<br />
作品の作り込みやアイディアを増やすヒントにしていきたいです。</p>
<p>&nbsp;</p>
<h2>参考文献</h2>
<p><a class="link" href="http://www.amazon.co.jp/dp/4862461530" target="_blank">カラー&amp;ライト ~リアリズムのための色彩と光の描き方 2012/1/30 ジェームス・ガーニー(James Gurney) (著)</a></p>


目が見る色と頭が見る色

<h2>IE10以前はもう古い！？</h2>
<div style="padding-left: 15px;">
  Web屋の鬼門(？)のIEのサポート状況が大きく変わりました。</p>
<p>  サポートが終了すると何が変わるのか？<br />
  、、、と言いますと、公式から配布されていた<br />
  セキュリティ脆弱性対策バッチが今後なくなる。</p>
<p>  つまり脆弱性をついたスクリプトに対して無防備となってしまうと言う事です。
</p></div>
<h2>各OS別 サポート状況まとめ</h2>
<div style="padding-left: 15px;">
  Windows Vista : IE7, IE8 ともに2016年1月13日で終了。IE9は2017年4月12日に終了。<br />
  Windows 7 : IE8, IE9, IE10 ともに2016年1月13日で終了。IE11は2020年1月15日に終了。<br />
  Windows 8 : OSそのものが2016年1月13日にてサポート終了。<br />
  Windows 8.1 : IE11 のみ。2023年1月11日に終了。<br />
  Windwos 10 : IE11 2025年10月15日に終了。(MS Edgeと同じ)</p>
<p>  ※ その他Windows Serverなどについては<a href="http://www.atmarkit.co.jp/ait/articles/1503/11/news134.html">こちら</a>参照のこと
</div>
<h2>総評</h2>
<div style="padding-left: 15px;">
  未だにシステム移管などのコスト節減のために旧システムを<br />
  使用したままの企業やコンシューマーが多いのが現状。</p>
<p>  しかしセキュリティ面やブラウザでの新機能／汎用性の高いサービス向上のため<br />
  適度なシステム移行が好ましいと感じられた。</p>
<p>  ※ ただし新システム移行を無理強いするのはその限りではない。
</p></div>


ブラウザ事情の変化

<p>今年もこの季節がやってまいりました</p>
<p><a href="http://designmodo.com/web-design-trends-2016/" target="_blank">http://designmodo.com/web-design-trends-2016/</a></p>
<p>&nbsp;</p>
<p>自分の英語の勉強も兼ねて翻訳・要約してみた</p>
<p>&nbsp;</p>
<h2>縦スクロールとそのパターン</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9069" src="/uploads-archive/2016/01/2016webtrend_1.jpg" alt="2016webtrend_1" width="900" height="496" srcset="/uploads-archive/2016/01/2016webtrend_1.jpg 900w, /uploads-archive/2016/01/2016webtrend_1-300x165.jpg 300w, /uploads-archive/2016/01/2016webtrend_1-768x423.jpg 768w, /uploads-archive/2016/01/2016webtrend_1-228x126.jpg 228w" sizes="(max-width: 900px) 100vw, 900px" /></p>
<p><a href="http://www.beoplay.com/products/beoplayh7" target="_blank">http://www.beoplay.com/products/beoplayh7</a></p>
<p>モバイル端末からのアクセスが増えているので、今後ユーザーは縦スクロールの頻度が増え、 デザイナーは縦スクロールのユーザーインターフェイスをデザインすることの重要度が高まる</p>
<p>&nbsp;</p>
<h2>もっと、カード型デザイン</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9065" src="/uploads-archive/2016/01/2016webtrend_2.jpg" alt="2016webtrend_2" width="900" height="494" srcset="/uploads-archive/2016/01/2016webtrend_2.jpg 900w, /uploads-archive/2016/01/2016webtrend_2-300x165.jpg 300w, /uploads-archive/2016/01/2016webtrend_2-768x422.jpg 768w, /uploads-archive/2016/01/2016webtrend_2-228x125.jpg 228w" sizes="(max-width: 900px) 100vw, 900px" /></p>
<p><a href="http://block16omaha.com/" target="_blank">http://block16omaha.com/</a></p>
<p>マテリアルデザインから生まれたカード型デザインはアプリ、ウェブサイト、紙媒体などあらゆる場所で使われている。</p>
<p>カード型デザインはユーザーフレンドリーに情報整理ができ、作るのも楽しい。</p>
<p>更に、カード型デザインはデバイスを問わず動作するというメリットがある</p>
<p>&nbsp;</p>
<h2>ヒーロービデオヘッダー</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9066" src="/uploads-archive/2016/01/2016webtrend_3.jpg" alt="2016webtrend_3" width="900" height="490" srcset="/uploads-archive/2016/01/2016webtrend_3.jpg 900w, /uploads-archive/2016/01/2016webtrend_3-300x163.jpg 300w, /uploads-archive/2016/01/2016webtrend_3-768x418.jpg 768w, /uploads-archive/2016/01/2016webtrend_3-228x124.jpg 228w" sizes="(max-width: 900px) 100vw, 900px" /></p>
<p><a href="http://follow-your-intuition.com/" target="_blank">http://follow-your-intuition.com/</a></p>
<p>ウェブデザインは映画制作のようになるだろう。</p>
<p>回線速度やモジュールの発展により映画のような体験をサイトに盛り込むことができるようになってきている。</p>
<p>ウェブ上の動画は、小さなものからフルカットへと進化し、高解像度で、くっきりとさくさく動作する。</p>
<p>これはユーザーに新しい体験だが、テレビでお馴染みの体験といえる</p>
<p>&nbsp;</p>
<h2>微細なアニメーション</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9067" src="/uploads-archive/2016/01/2016webtrend_4.jpg" alt="2016webtrend_4" width="900" height="487" srcset="/uploads-archive/2016/01/2016webtrend_4.jpg 900w, /uploads-archive/2016/01/2016webtrend_4-300x162.jpg 300w, /uploads-archive/2016/01/2016webtrend_4-768x416.jpg 768w, /uploads-archive/2016/01/2016webtrend_4-228x123.jpg 228w" sizes="(max-width: 900px) 100vw, 900px" /></p>
<p><a href="http://labs.convoy.me/camper/#!/landing" target="_blank">http://labs.convoy.me/camper/#!/landing</a></p>
<p>アニメーションは2015年からの最も大きなトレンドの1つだ。</p>
<p>ヒーローヘッダのようなサイトの顔から、見逃してしまうほど小さいものまで、<br />
アニメーションは至る所に存在している。</p>
<p>アニメーションを使う上で最も重要なことは、なぜこのアニメーションを作り、何を想定しているかといった<br />
目的を明らかにすることだ。</p>
<p>&nbsp;</p>
<h2>インタラクションデザイン</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9068" src="/uploads-archive/2016/01/2016webtrend_5.jpg" alt="2016webtrend_5" width="900" height="473" srcset="/uploads-archive/2016/01/2016webtrend_5.jpg 900w, /uploads-archive/2016/01/2016webtrend_5-300x158.jpg 300w, /uploads-archive/2016/01/2016webtrend_5-768x404.jpg 768w, /uploads-archive/2016/01/2016webtrend_5-228x120.jpg 228w" sizes="(max-width: 900px) 100vw, 900px" /></p>
<p><a href="http://www.wove.com/" target="_blank">http://www.wove.com/</a></p>
<p>アニメーションと同時に活用されているのがインタラクションデザインだ。</p>
<p>インタラクションデザインはアプリやモバイルサイトにおいて、ユーザーとデバイスをつなぐ軸である。</p>
<p>良いインタラクションデザインはごくわずかな場合もあるが、ユーザーに価値を与えている。</p>
<p>メッセージ受信時のアラームから、ゲーム中にあなたの番が来た時の短い音など、<br />
ほんの小さなインタラクションデザインが人々とデバイスのやりとりを形作っている</p>
<p>&nbsp;</p>
<h2>更に美しいタイポグラフィ</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9059" src="/uploads-archive/2016/01/2016webtrend_6.jpg" alt="2016webtrend_6" width="900" height="488" srcset="/uploads-archive/2016/01/2016webtrend_6.jpg 900w, /uploads-archive/2016/01/2016webtrend_6-300x163.jpg 300w, /uploads-archive/2016/01/2016webtrend_6-768x416.jpg 768w, /uploads-archive/2016/01/2016webtrend_6-228x124.jpg 228w" sizes="(max-width: 900px) 100vw, 900px" /></p>
<p><a href="http://www.viens-la.com/" target="_blank">http://www.viens-la.com/</a></p>
<p>合理化されたインターフェイスは美しいタイポグラフィへと導く。</p>
<p>大きくて太いタイポグラフィは他のトレンドとマッチすることから、今後も継続するだろう。</p>
<p>このシンプルな字体は他の要素との空間を広げ、高い可読性によりメッセージを伝えることができる。</p>
<p>単に読み易い書体のペアや、楽しくて珍しいものはぜひ挑戦したい小技だ</p>
<p>&nbsp;</p>
<h2>イラストとスケッチ</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9060" src="/uploads-archive/2016/01/2016webtrend_7.jpg" alt="2016webtrend_7" width="900" height="489" srcset="/uploads-archive/2016/01/2016webtrend_7.jpg 900w, /uploads-archive/2016/01/2016webtrend_7-300x163.jpg 300w, /uploads-archive/2016/01/2016webtrend_7-768x417.jpg 768w, /uploads-archive/2016/01/2016webtrend_7-228x124.jpg 228w" sizes="(max-width: 900px) 100vw, 900px" /></p>
<p><a href="http://orangeyouglad.com/" target="_blank">http://orangeyouglad.com/</a></p>
<p>イラストやスケッチはサイトに気まぐれで楽しい要素を与える。</p>
<p>これらは全てのサイトに当てはまり、決して子供向けのサイトだけのものではない。</p>
<p>イラストは、アイコンやその他の要素などサイトの細かな部分から人気が高まってきている<br />
イラストはサイトにパーソナルな印象を持たせるという点が良い。</p>
<p>手書きのイラストやスケッチアイコンはユーザーに個性を感じさせ、ユーザーとの長いつながりに貢献するだろう</p>
<p>&nbsp;</p>
<h2>大胆で明るい色調 (80&#8217;sな雰囲気)</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9061" src="/uploads-archive/2016/01/2016webtrend_8.jpg" alt="2016webtrend_8" width="900" height="477" srcset="/uploads-archive/2016/01/2016webtrend_8.jpg 900w, /uploads-archive/2016/01/2016webtrend_8-300x159.jpg 300w, /uploads-archive/2016/01/2016webtrend_8-768x407.jpg 768w, /uploads-archive/2016/01/2016webtrend_8-228x121.jpg 228w" sizes="(max-width: 900px) 100vw, 900px" /></p>
<p><a href="http://circlesconference.com/" target="_blank">http://circlesconference.com/</a></p>
<p>大胆で明るい色調はフラットデザインとともに増加してきている。</p>
<p>Googleの&#8221;Material Design documentation&#8221;も協議が進んでおり、&#8221;Dribbble&#8221;を見ると色が散々としている。</p>
<p>これらはキーとなる指標であり、この色は年内にされに大きくなるだろう。</p>
<p>大胆な色使いにおいての幾つかの変化として、これらの色を使った文字がトレンドとなるだろう。</p>
<p>2015年はモノトーンが主流でしたが、80年代な大胆で明るい色使いが増えてくるだろう</p>
<p>&nbsp;</p>
<h2>ハンバーガーメニューと図解</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9062" src="/uploads-archive/2016/01/2016webtrend_9.jpg" alt="2016webtrend_9" width="900" height="425" srcset="/uploads-archive/2016/01/2016webtrend_9.jpg 900w, /uploads-archive/2016/01/2016webtrend_9-300x142.jpg 300w, /uploads-archive/2016/01/2016webtrend_9-768x363.jpg 768w, /uploads-archive/2016/01/2016webtrend_9-228x108.jpg 228w" sizes="(max-width: 900px) 100vw, 900px" /></p>
<p><a href="http://www.primeit.pt/en/" target="_blank">http://www.primeit.pt/en/</a></p>
<p>多くのデザイナーが楽しいアイコンや、簡単にアイコンを作れるキットをリリースしている。</p>
<p>その他に重要な点として、SVGの普及により巨大なアイコンを実験的に使用するデザイナーが出現していることだ</p>
<p>&nbsp;</p>
<h2>リアルと空想の融合</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9062" src="/uploads-archive/2016/01/2016webtrend_9.jpg" alt="2016webtrend_9" width="900" height="425" srcset="/uploads-archive/2016/01/2016webtrend_9.jpg 900w, /uploads-archive/2016/01/2016webtrend_9-300x142.jpg 300w, /uploads-archive/2016/01/2016webtrend_9-768x363.jpg 768w, /uploads-archive/2016/01/2016webtrend_9-228x108.jpg 228w" sizes="(max-width: 900px) 100vw, 900px" /></p>
<p><a href="http://bluestag.co.uk/" target="_blank">http://bluestag.co.uk/</a></p>
<p>次のゲーミフィケーションとデザインのステップは、リアルと空想(ウェブデザインにより作られたもの)の境界をぼかすことだ。</p>
<p>バーチャルリアリティからウェブサイトまで、これらはあなたに新しい要素を見つける選択肢を与え、ユーザーはこのタイプのカスタマイズを好む傾向にある</p>
<p>&nbsp;</p>
<h2>スライダー</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9064" src="/uploads-archive/2016/01/2016webtrend_11.jpg" alt="2016webtrend_11" width="900" height="494" srcset="/uploads-archive/2016/01/2016webtrend_11.jpg 900w, /uploads-archive/2016/01/2016webtrend_11-300x165.jpg 300w, /uploads-archive/2016/01/2016webtrend_11-768x422.jpg 768w, /uploads-archive/2016/01/2016webtrend_11-228x125.jpg 228w" sizes="(max-width: 900px) 100vw, 900px" /></p>
<p><a href="http://yearinreview.fb.com/2015/us-presidential-election/" target="_blank">http://yearinreview.fb.com/2015/us-presidential-election/</a></p>
<p>まずはじめに、スライダーはウェブサイトの枠の中で画像を動かし複数見せることができた。</p>
<p>次の変化はフルスクリーンスライドだ。</p>
<p>それぞれのスライドは切替によって新たな内容を表示できる。クリック、スクロールや時間による処理もできる。<br />
ユーザーは前後のコンテンツに直感的に移動することができる。</p>
<p>このようなコンセプトは、数ヶ月のうちにさらに多く見かけることになるだろう</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>ちなみに、以下は自分が昨年6月に2015年上半期のトレンドをまとめた記事</p>
<blockquote data-secret="znXQr4BvIU" class="wp-embedded-content"><p><a href="/officer/%e3%80%90web%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%80%912015%e5%b9%b4-%e4%b8%8a%e5%8d%8a%e6%9c%9f%e3%81%ae%e3%83%88%e3%83%ac%e3%83%b3%e3%83%89.html">【Webデザイン】2015年 上半期のトレンド</a></p></blockquote>
<p><iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="display:none;" src="/officer/%e3%80%90web%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%80%912015%e5%b9%b4-%e4%b8%8a%e5%8d%8a%e6%9c%9f%e3%81%ae%e3%83%88%e3%83%ac%e3%83%b3%e3%83%89.html/embed#?secret=znXQr4BvIU" data-secret="znXQr4BvIU" width="500" height="282" title="埋め込まれた WordPress の投稿" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe></p>
<p>&nbsp;</p>
<p>そんなに変わってない気がするのは自分だけだろうか。</p>
<p>モバイルファーストや動画は当たり前、あとはマテリアルデザインとSVGが着々と広まってきているといった印象だ</p>


【Webデザイント】2016年に流行しそうなレンド11選

Sphinxで充実ドキュメントライフを！

<p>フォントがわからない時、例えば似てるフォント使っといてと言われたときや自分で作ったのに何のフォントを使ったか思い出せないという時があると思う。</p>
<p>そんな時の対処法を2点</p>
<h2>WhatTheFont</h2>
<p><a href="http://www.myfonts.com/WhatTheFont/" target="_blank">http://www.myfonts.com/WhatTheFont/</a></p>
<p><a href="/uploads-archive/2015/10/launchcart.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8317" src="/uploads-archive/2015/10/launchcart.jpg" alt="launchcart" width="500" height="100" srcset="/uploads-archive/2015/10/launchcart.jpg 500w, /uploads-archive/2015/10/launchcart-300x60.jpg 300w, /uploads-archive/2015/10/launchcart-228x46.jpg 228w" sizes="(max-width: 500px) 100vw, 500px" /></a><br />
まずはフォントを調べたい画像を用意する</p>
<p><a href="/uploads-archive/2015/10/2.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8318" src="/uploads-archive/2015/10/2.png" alt="2" width="656" height="374" srcset="/uploads-archive/2015/10/2.png 656w, /uploads-archive/2015/10/2-300x171.png 300w, /uploads-archive/2015/10/2-228x130.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a><br />
それを選択してアップロード<br />
Continueをクリック</p>
<p><a href="/uploads-archive/2015/10/3.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8319" src="/uploads-archive/2015/10/3.png" alt="3" width="656" height="575" srcset="/uploads-archive/2015/10/3.png 656w, /uploads-archive/2015/10/3-300x263.png 300w, /uploads-archive/2015/10/3-228x200.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a><br />
するとシステムで解析、判断したそれぞれの文字が出てくる。<br />
空欄であれば何の文字かを、間違っていれば修正してContinueをクリック</p>
<p><a href="/uploads-archive/2015/10/4.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8320" src="/uploads-archive/2015/10/4.png" alt="4" width="656" height="558" srcset="/uploads-archive/2015/10/4.png 656w, /uploads-archive/2015/10/4-300x255.png 300w, /uploads-archive/2015/10/4-228x194.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a><br />
15件も近しいフォントがマッチした<br />
実際にはSteinerというフォントだったのだが、この中に正解は無かった<br />
ただ、似ているフォントを探すという意味ではすごく有用だと思われる</p>
<p>ただ、難点としては日本語フォントに対応していないということ</p>
<p>残念ながら日本語フォントに対応している類似のサイトは見つからず<br />
identifontというサービスを使うのが良さそう</p>
<h2>Identifont</h2>
<p><a href="http://www.identifont.jp/" target="_blank">http://www.identifont.jp/</a></p>
<p>形状別、名称別、スタイル別などでフォントを手動で検索できる</p>
<p>冒頭のようなケースでは形状別が良さそうだ</p>
<p><a href="/uploads-archive/2015/10/51.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8321" src="/uploads-archive/2015/10/51.jpg" alt="5" width="300" height="300" srcset="/uploads-archive/2015/10/51.jpg 300w, /uploads-archive/2015/10/51-150x150.jpg 150w, /uploads-archive/2015/10/51-228x228.jpg 228w" sizes="(max-width: 300px) 100vw, 300px" /></a><br />
小塚ゴシック で試してみた</p>
<p><a href="/uploads-archive/2015/10/6.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8322" src="/uploads-archive/2015/10/6.jpg" alt="6" width="656" height="2172" srcset="/uploads-archive/2015/10/6.jpg 656w, /uploads-archive/2015/10/6-91x300.jpg 91w, /uploads-archive/2015/10/6-309x1024.jpg 309w, /uploads-archive/2015/10/6-228x755.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>正解！</p>
<p>ただ、あまりメジャーではないフォントは対応していないようだ</p>


画像のフォントが何かを調べる方法

<p>WEBデザインとして定番として使われているものの中には、</p>
<p>実はユーザーにとって、ストレスの元になっているものがいくつかあることを最近知りましたので、</p>
<p>そういったユーザーをいらだたせている定番のWEBデザインについてご紹介させていただきます。</p>
<p><span style="display:block;margin-bottom:-15px">&nbsp;</span></p>
<p>今回紹介するものはスマホの時に特に問題となるものが多いです。</p>
<p>PCでご覧の方でDEMOページをご覧になる方は、スマホからご覧になることをお勧めいたします。</p>
<p>↓このページのQRコード<br />
<img decoding="async" class="alignnone wp-image-8006 size-full" src="/uploads-archive/2015/08/qr1.png" alt="" width="120" srcset="/uploads-archive/2015/08/qr1.png 175w, /uploads-archive/2015/08/qr1-150x150.png 150w" sizes="(max-width: 175px) 100vw, 175px" /></p>
<p>&nbsp;</p>
<h2>予告のないポップアップ・別タブ表示(特にスマホ)</h2>
<p>通常リンクと区別のない唐突な別タブでのリンクや、</p>
<p>ページ訪問時のポップアップでの情報掲載などは、</p>
<p>ユーザーが意図していない動作であることが多く、ユーザーをいらだたせる原因となります。</p>
<p>スマホではタブ操作がやや面倒な場合が多いため、別タブでのリンクの表示もストレスのもととなります。</p>
<p><a class="demo" href="/demo/ninomiya/82/demo01-01.html">DEMO</a></p>
<p>&nbsp;</p>
<h3>改善策</h3>
<ul>
<li>リンク先を別タブで表示するときは、リンクに別タブで開くことをアイコンなどで明示する。</li>
<li>ページ訪問時の情報の載せ方は、突然表示するのではなく、<br />
明示的なボタンを置くなど、ユーザーのタイミングで表示できるように工夫する。</li>
</ul>
<p><a class="demo" href="/demo/ninomiya/82/demo01-02.html">DEMO</a></p>
<p>&nbsp;</p>
<h2>スクロール操作による特殊な動作(パララックスなど; 主にPC)</h2>
<p>パララックスのような、スクロールしたときの動作をブラウザ本来の動きとは違う動きにするデザインは、</p>
<p>ユーザーが本来行いたい操作を妨害するため、ユーザーをいらだたせる原因となります。</p>
<p><a class="demo" href="/demo/ninomiya/82/demo06-01.html">DEMO</a></p>
<p>&nbsp;</p>
<h3>改善策</h3>
<ul>
<li>スクロール操作は基本的にデバイス本来の動きに合わせていないとストレスになるため、パララックスなどの操作は避ける事が望ましい。</li>
<li>どうしても演出としてパララックスなどの効果が必要とされる場合は、スクロール感がデバイス本来の動きに近づくように厳密な調整をおこなう。</li>
</ul>
<p><a class="demo" href="/demo/ninomiya/82/demo06-02.html">DEMO</a></p>
<p>&nbsp;</p>
<h2>ページ内のスクロール可能な箇所(主にスマホ)</h2>
<p>ページの中に高さを固定してスクロールできるようにした場所があると、</p>
<p>ページ全体のスクロールを妨害することになるため、ユーザーをいらだたせてしまします。</p>
<p>特にスマホでは画面が小さいため、深刻になってくることが多いです。</p>
<p><a class="demo" href="/demo/ninomiya/82/demo02-01.html">DEMO</a></p>
<p><a class="demo" href="/demo/ninomiya/82/demo03-01.html">DEMO</a></p>
<p>&nbsp;</p>
<h3>改善策</h3>
<ul>
<li>スマホでの表示のときは、SNSのタイムラインの表示は諦める(SNSページヘのリンクバナーなどに置き換える)。</li>
<li>マップは画面の横幅いっぱいに表示せず、横幅は画面の1/2〜2/3程度に抑え、代わりにマップへのリンクを置く。</li>
<li>記事の表示領域を狭めておきたい場合は、折りたたみなどの方法を使う。</li>
</ul>
<p><a class="demo" href="/demo/ninomiya/82/demo02-02.html">DEMO</a></p>
<p><a class="demo" href="/demo/ninomiya/82/demo03-02.html">DEMO</a></p>
<p>&nbsp;</p>
<h2>スライダー等の自動スライド</h2>
<p>自動で動くスライダーは、製作者が見せたいと思うものを目立たせたり、</p>
<p>限られたスペースで見せたいコンテンツへ誘導する手段としてよく使われていますが、</p>
<p>これはユーザー自身が操作する場合には、操作を妨害したり、誤操作を招く原因となってしまうため、</p>
<p>実はユーザーにストレスを感じさせてしまいます。</p>
<p><a class="demo" href="/demo/ninomiya/82/demo04-01.html">DEMO</a></p>
<p>&nbsp;</p>
<h3>改善策</h3>
<ul>
<li>スライダーの操作はユーザーに託し、操作可能であることがわかりやすいデザインにすることで、ユーザーによる操作を促す。</li>
</ul>
<p><a class="demo" href="/demo/ninomiya/82/demo04-02.html">DEMO</a></p>
<p>&nbsp;</p>
<h2>スマホ表示でのHTMLのviewport設定による拡大縮小の制限(スマホの場合)</h2>
<p>HTMLの&lt;head&gt;内で、以下のようにviewportの設定をすると、スマホでのユーザーによる拡大縮小の操作を制限することができます。</p>

		<div id="crayon-649540158ad9c774140592" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;meta name='viewport' content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no'&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540158ad9c774140592-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540158ad9c774140592-1"><span class="crayon-h">&lt;</span><span class="crayon-e">meta </span><span class="crayon-i">name</span>=<span class="crayon-s">'viewport'</span><span class="crayon-h"> </span><span class="crayon-i">content</span>=<span class="crayon-s">'width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no'</span><span class="crayon-h">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p><a class="demo" href="/demo/ninomiya/82/demo05-01.html">DEMO(スマホご覧ください)</a></p>
<p>この設定は製作者が予期しない動作を制限する目的で行われることが多いのですが、</p>
<p>ユーザーが画像や小さな文字を拡大して確認するという操作を妨げますので、</p>
<p>場合によってはユーザーに不便な思いをさせてしまうことになります。</p>
<p>&nbsp;</p>
<h3>改善策</h3>
<ul>
<li>viewportによる拡大縮小の制限をしない</li>
</ul>
<p></p>

		<div id="crayon-649540158ada1502367698" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540158ada1502367698-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540158ada1502367698-1"><span class="crayon-h">&lt;</span><span class="crayon-e">meta </span><span class="crayon-i">name</span>=<span class="crayon-s">"viewport"</span><span class="crayon-h"> </span><span class="crayon-i">content</span>=<span class="crayon-s">"width=device-width, initial-scale=1.0"</span><span class="crayon-h">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p><a class="demo" href="/demo/ninomiya/82/demo05-02.html">DEMO(スマホご覧ください)</a></p>
<p>&nbsp;</p>
<h2>まとめ (ユーザーをいらだたせるWEBデザインの共通点と新たなWEBデザインを考える場合のポイント)</h2>
<p>ユーザーをいらだたせてしまうWEBデザインの共通点は、</p>
<p>ユーザーが意図していない動作をさせたり、ユーザーの操作を妨害してしまうという点です。</p>
<p>&nbsp;</p>
<p>製作者がどうしてもユーザーに見せたいという思いが強すぎると、</p>
<p>ついついユーザーの使い勝手を忘れて、</p>
<p>ユーザーにとっては不便なデザインとなってしまう場合があります。</p>
<p>せっかく見せたいと思って工夫をこらしても、</p>
<p>それがユーザーのストレスになってしまう場合は、</p>
<p>それらはユーザーにとって「邪魔なもの」として捉えられてしまうことになってしまいます。</p>
<p>&nbsp;</p>
<p>「見せたい」の前に「使いやすい」を前提にすることが、</p>
<p>新たなWEBデザインを考えだす上で必要なことだと感じました。</p>
<p>&nbsp;</p>
<h2>参考図書</h2>
<p><a class="link" href="http://www.amazon.co.jp/dp/4862462650/" target="_blank" rel="noopener">「デザイニングWebアクセシビリティ &#8211; アクセシブルな設計やコンテンツ制作のアプローチ」 2015.7.27 太田良典(著), 伊原力也(著)</a></p>
<p><a class="link" href="http://www.amazon.co.jp/dp/4861009383/" target="_blank" rel="noopener">「融けるデザイン ―ハード×ソフト×ネット時代の新たな設計論」 2015.1.21 渡邊恵太(著)</a></p>

ユーザーをいらだたせる定番のWEBデザイン５個とその改善策(スマホ向け多め)

<p>2015年上半期も本日が最終日</p>
<p>2015年のWebデザインを振り返った記事があったのでまとめ</p>
<p>&nbsp;</p>
<h2>1. はじめに</h2>
<p>1-1. ファーストビューよりスクロールを重視するデザインに</p>
<p>1-2. シンプルなレイアウト構成</p>
<p>&nbsp;</p>
<p>ユーザーがスクロールに慣れたなめ「サイトが表示されたらとりあえず下にスクロール」という動きが普通になっているという</p>
<p>なのであまりファーストビューにこだわらなくなってきてるとのこと</p>
<p>&nbsp;</p>
<h2>2. 今流行りのweb デザイントレンド13選</h2>
<p>2-1 背景にビデオ動画活用</p>
<p>端末のスペックやネット環境が良くなっていけばそれにともなってコンテンツもリッチになっていく</p>
<p>動画が一般化し始めるのがまさに今のようだ</p>
<p>将来はゴリゴリの3Dが軽快に描画できるスペックのPCが安価になったりするのだろう</p>
<p>&nbsp;</p>
<p><a href="http://my.austria.info/" target="_blank">http://my.austria.info/</a></p>
<p><a href="http://www.kalexiko.com/" target="_blank"> http://www.kalexiko.com/</a></p>
<p>&nbsp;</p>
<p>2-2 カード・レイアウト（タイル・レイアウト）</p>
<p>この言葉を知らなかったが、要はFacebookのタイムラインのように1記事をブロックで囲っている感じのレイアウトとのこと</p>
<p>わかりやすくレスポンシブにもし易いのが良いらしい</p>
<p>&nbsp;</p>
<p><a href="http://www.google.com/landing/now/" target="_blank">http://www.google.com/landing/now/</a></p>
<p>※私の環境ではカード・レイアウトが再現できず</p>
<p>&nbsp;</p>
<p>2-3 シングルページ</p>
<p>今後は後述のゴーストボタンやマイクロインタラクションと組み合わせて進化するらしい</p>
<p><a href="http://www.kirinichiban.com/" target="_blank"> http://www.kirinichiban.com/</a></p>
<p>&nbsp;</p>
<p>2-4 パララックス・エフェクト</p>
<p>今後もこのトレンドは続き、更に進化するらしい</p>
<p><a href="http://www.lexusls.asia/" target="_blank"> http://www.lexusls.asia/</a></p>
<p>&nbsp;</p>
<p>2-5 アニメ化されたストーリー性</p>
<p>以下の参考サイトはSVGとjsでできているとのこと</p>
<p><a href="https://www.boldking.com/" target="_blank"> https://www.boldking.com/</a></p>
<p>&nbsp;</p>
<p>2-6 フラットデザイン</p>
<p>当面はこのトレンドが続くらしい</p>
<p><a href="http://www.huffingtonpost.com/2012/02/19/logos-past-future-corporate_n_1285622.html" target="_blank"> http://www.huffingtonpost.com/2012/02/19/logos-past-future-corporate_n_1285622.html</a></p>
<p><a href="http://purgotea.com/" target="_blank"> http://purgotea.com/</a></p>
<p>&nbsp;</p>
<p>2-7 マテリアル・デザインの増加</p>
<p>今後の動向が気になるマテリアルデザイン</p>
<p>以下のサイトでが勉強になるらしい</p>
<p><a href="http://material.cmiscm.com/" target="_blank"> http://material.cmiscm.com/</a></p>
<p>&nbsp;</p>
<p>2-8 インタラクティブ・デザイン</p>
<p>サンプルがすごすぎて圧巻だが、もっと小さい範囲でもアイデア次第ではおもしろいものができそう</p>
<p><a href="https://insideabbeyroad.withgoogle.com/en" target="_blank"> https://insideabbeyroad.withgoogle.com/en</a></p>
<p><a href="http://www.blitzagency.com/" target="_blank"> http://www.blitzagency.com/</a></p>
<p>&nbsp;</p>
<p>2-9 マイクロ・インタラクション</p>
<p>要はいいねボタンなどのことらしい</p>
<p>簡単なAjaxでのお問い合わせフォームなどもこれに当たる模様</p>
<p><a href="http://www.buzzfeed.com/zachkornfeld/try-guys-robot-babies#.kjJkrp6RPk" target="_blank"> http://www.buzzfeed.com/zachkornfeld/try-guys-robot-babies#.kjJkrp6RPk</a></p>
<p>&nbsp;</p>
<p>2-10 トレンドのメニューバー</p>
<p>もう飽きた気もするが引き続きトレンドなようだ</p>
<p><a href="http://bitcoinfoundation.org/" target="_blank"> http://bitcoinfoundation.org/</a></p>
<p>&nbsp;</p>
<p>2-11 ゴーストボタン</p>
<p>この言葉は知らなかったが、要は背景が透けているボタンのことらしい</p>
<p><a href="http://www.iuvo.si/" target="_blank"> http://www.iuvo.si/</a></p>
<p>&nbsp;</p>
<p>2-12 アニメーション効果</p>
<p>おそらく作成ツールの充実や作成者の技術向上により今後は当たり前になっていきそう</p>
<p><a href="http://ja.wix.com/blog/2014/05/%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E5%8A%B9%E6%9E%9C%E3%81%AE%E9%AD%85%E5%8A%9B%E3%82%92%E5%BE%B9%E5%BA%95%E7%B4%B9%E4%BB%8B/" target="_blank"> http://ja.wix.com/blog/2014/05/%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E5%8A%B9%E6%9E%9C%E3%81%AE%E9%AD%85%E5%8A%9B%E3%82%92%E5%BE%B9%E5%BA%95%E7%B4%B9%E4%BB%8B/</a></p>
<p>&nbsp;</p>
<p>2-13 モバイル・ファースト</p>
<p>スマホ割合が年々増えている中で当然の対応</p>
<p><a href="http://www.channelnewsasia.com/" target="_blank"> http://www.channelnewsasia.com/</a></p>


【Webデザイン】2015年 上半期のトレンド

<p>この仕事を始めていこうずっと、webデザインを作成するときはPhotoshopを使っており、<br />
今は、Photoshop CCを使用しております。<br />
<a href="http://www.adobe.com/jp/products/photoshop.html" target="_blank">http://www.adobe.com/jp/products/photoshop.html</a><br />
これのフォトグラフィプランですね(以前キャンペーンで期間限定的な感じだったのに、今もうプランとして固定されてる・・・)</p>
<p>Dreamweaverは数年前に辞め、<br />
Adobe製品はこれ以外には、時々illustratorを使うくらいなので、<br />
Photoshopをやめたら、脱Adobeになってしまうかもしれません。</p>
<p>とはいえ、Photoshopを辞めることなんて早々無いだろうと思っていたのですが、<br />
最近いろいろな情報を見ていると、Photoshopに劣らないであろう製品がいくつかあるようです。</p>
<p>よく目にする3つをご紹介します。</p>
<h2>Photoshop以外の画像編集ツール</h2>
<h3>Sketch 3</h3>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7378" src="/uploads-archive/2015/05/Bohemian-Coding-Sketch-3-1024x621.jpg" alt="Bohemian Coding - Sketch 3" width="630" height="382" srcset="/uploads-archive/2015/05/Bohemian-Coding-Sketch-3-1024x621.jpg 1024w, /uploads-archive/2015/05/Bohemian-Coding-Sketch-3-300x182.jpg 300w, /uploads-archive/2015/05/Bohemian-Coding-Sketch-3-228x138.jpg 228w, /uploads-archive/2015/05/Bohemian-Coding-Sketch-3.jpg 1164w" sizes="(max-width: 630px) 100vw, 630px" /><br />
mac向けで、webサイトのデザインやプレゼンテーションスライドの作成ができるようです。<br />
$99ですが、trialも出来るので試してみて良かったら購入できますね！</p>
<p>cssへワンクリックで書き出せるとか、<br />
起動が早いとかあるみたいで、</p>
<p>以下でしっかりまとめられてるのでご覧ください！<br />
<a href="http://matome.naver.jp/odai/2140584105966404801">デザイナー必見！今注目のツール「Sketch3」の使い方を勉強できるサイト &#8211; NAVER まとめ</a></p>
<p>私もTrialをダウンロードしましたが、今だ試せずにいます。</p>
<p><a class="link" href="http://bohemiancoding.com/sketch/" target="_blank">Bohemian Coding &#8211; Sketch 3</a></p>
<h3>Pixelmator</h3>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7380" src="/uploads-archive/2015/05/Pixelmator-1024x621.jpg" alt="Pixelmator" width="630" height="382" srcset="/uploads-archive/2015/05/Pixelmator-1024x621.jpg 1024w, /uploads-archive/2015/05/Pixelmator-300x182.jpg 300w, /uploads-archive/2015/05/Pixelmator-228x138.jpg 228w, /uploads-archive/2015/05/Pixelmator.jpg 1164w" sizes="(max-width: 630px) 100vw, 630px" /><br />
こちらもmac向けですが、価格は3600円と安め。<br />
Photoshopと機能性はほぼ同じくらいでpsdファイルとの連携も問題ないそうです。<br />
最近iPhone用のアプリも発売されたようです。</p>
<p><a href="http://blockworks.jp/pixelmator/" target="_blank">Pixelmator入門</a></p>
<p><a class="link" href="http://www.pixelmator.com/" target="_blank">Pixelmator</a></p>
<h3>GIMP</h3>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7379" src="/uploads-archive/2015/05/GIMP-The-GNU-Image-Manipulation-Program-1024x621.jpg" alt="GIMP - The GNU Image Manipulation Program" width="630" height="382" srcset="/uploads-archive/2015/05/GIMP-The-GNU-Image-Manipulation-Program-1024x621.jpg 1024w, /uploads-archive/2015/05/GIMP-The-GNU-Image-Manipulation-Program-300x182.jpg 300w, /uploads-archive/2015/05/GIMP-The-GNU-Image-Manipulation-Program-228x138.jpg 228w, /uploads-archive/2015/05/GIMP-The-GNU-Image-Manipulation-Program.jpg 1164w" sizes="(max-width: 630px) 100vw, 630px" /><br />
もう何年も前からあるソフトで、こちらはwindowsでも使用できます。<br />
こちらは基本無償で、簡単な写真加工ならこれで充分できるようです。<br />
初心者で試しに・・・という人にこちらはオススメです！！</p>
<p><a href="http://synclogue-navi.com/category/gimp" target="_blank">GIMPの使い方</a><br />
<a class="link" href="http://www.gimp.org/" target="_blank">GIMP &#8211; The GNU Image Manipulation Program</a></p>


Photoshop以外の画像編集ツールでついにAdobe脱却！？

<p>マテリアルデザイン(material design)は昨年2014年7月にGoogleから提唱された、</p>
<p>WEB端末向けの新たなデザイン体系です。</p>
<p>&nbsp;</p>
<p>Google関係のアプリをはじめ、少しずつ見かける機会は増えているものの、</p>
<p>具体的にどんなものなのか知らずにいました。</p>
<p>私は単純にフラットデザインのひとつの形に過ぎないと想像していましたが、</p>
<p>実際には別物だということを知り、</p>
<p>今後のためにもちゃんと調べようと思ったので、</p>
<p><a href="http://www.google.com/design/spec/material-design/introduction.html" target="_blank">Googleが公開しているマテリアルデザインのガイドライン</a>を調べて、</p>
<p>内容をまとめてみました。</p>
<p>&nbsp;</p>
<p>公式のガイドライン</p>
<p><a class="link" href="http://www.google.com/design/spec/material-design/introduction.html" target="_blank">Introduction &#8211; Material design &#8211; Google design guidelines</a></p>
<p>&nbsp;</p>
<h2>マテリアルデザインの基本</h2>
<h3>マテリアルデザインに用いられる単位(dp)について</h3>
<p>ガイドラインでは、度々dpという単位が使われています。</p>
<p>この単位は解像度が160dpiの場合の1pxを基本としています。</p>
<p>解像度が240dipなら1dpは1.5px、320dpiなら1dpは2pxになります。</p>
<p>(ちなみにiPhone4-6の解像度は326dpiです。ノートパソコンは100〜150dpiくらい)</p>
<p>&nbsp;</p>
<p>まず、マテリアルデザインの核となる部分</p>
<h3>３次元空間(3D)を意識する</h3>
<p><a class="link" href="http://www.google.com/design/spec/what-is-material/environment.html" target="_blank">参考: Environment &#8211; What is material? &#8211; Google design guidelines</a></p>
<p>縦方向と横方向の平面上にレイアウトすることを意識したフラットデザインと違い、</p>
<p>マテリアルデザインは、縦方向と横方向に加えて、画面の奥行きを意識したデザインになっています。</p>
<p><a href="/uploads-archive/2015/04/axis.png"><img decoding="async" loading="lazy" class="alignnone wp-image-7299 size-full" src="/uploads-archive/2015/04/axis.png" alt="axis" width="656" height="480" srcset="/uploads-archive/2015/04/axis.png 656w, /uploads-archive/2015/04/axis-300x220.png 300w, /uploads-archive/2015/04/axis-228x167.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>&nbsp;</p>
<p>マテリアルデザインの一つの大きな特徴であるシャドウ(shadow)は、</p>
<p>この奥行きを視覚的に知らせることを目的としています。</p>
<p>そのため、このシャドウはそれまでにもあった装飾としてのシャドウとは違い、</p>
<p>その要素の奥行の状態に合わせて変化させる必要があります。</p>
<p>また、そのシャドウの位置・方向や濃さを決めるために、光源(light)を意識することも必要になります。</p>
<p>&nbsp;</p>
<p>重要な要素についてはその奥行が決められていて、</p>
<p>デバイスによっても、その奥行が変化します。</p>
<p><a href="/uploads-archive/2015/04/3d_space1.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-7302 size-full" src="/uploads-archive/2015/04/3d_space1.jpg" alt="3d_space" width="656" height="480" srcset="/uploads-archive/2015/04/3d_space1.jpg 656w, /uploads-archive/2015/04/3d_space1-300x220.jpg 300w, /uploads-archive/2015/04/3d_space1-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p><a class="link" href="http://www.google.com/design/spec/what-is-material/objects-in-3d-space.html#objects-in-3d-space-elevation-android-" target="_blank">参考: Objects in 3D space &#8211; What is material? &#8211; Google design guidelines</a></p>
<p>&nbsp;</p>
<h3>各要素の基本的な素材は紙のようなものをイメージする</h3>
<p><a class="link" href="http://www.google.com/design/spec/what-is-material/material-properties.html#material-properties-movement-of-material" target="_blank">Material properties &#8211; What is material? &#8211; Google design guidelines</a></p>
<p>マテリアルデザイン上では、各要素を薄い紙として扱います。</p>
<p>ただ、実際の紙と違って、その紙は様々に変形することが許容されています。</p>
<p>とはいえ、別の奥行きにあった要素が貫通してしまうような変形や、</p>
<p>折りたたむ、<ruby>捲<rp>(</rp><rt>めく</rt><rp>(</rp></ruby>るといった変形は許されていません。</p>
<p>形が変わる（円から四角形になるなど）、伸び縮みする、融合・分離する、回転するなどが許容されている変形です。</p>
<p>&nbsp;</p>
<h3>アニメーションの基本</h3>
<p>マテリアルデザインの重要な特徴として、アニメーションを多く利用するというものがあります。</p>
<p>そのアニメーションにももちろんルールがあります。</p>
<p>通常のアニメーションのイージングは基本的にはAsymmetric(非対称：開始と終了の動きが時間的に対象になっていない)なイージングがより自然な動きということで、推奨されています。</p>
<p><a href="/uploads-archive/2015/04/responsive-reaction1.png"><img decoding="async" loading="lazy" class="alignnone wp-image-7328 size-full" src="/uploads-archive/2015/04/responsive-reaction1.png" alt="responsive-reaction" width="656" height="480" srcset="/uploads-archive/2015/04/responsive-reaction1.png 656w, /uploads-archive/2015/04/responsive-reaction1-300x220.png 300w, /uploads-archive/2015/04/responsive-reaction1-228x167.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>&nbsp;</p>
<p>ただ、もともと画面上になかった要素が入ってきたり、出て行ったりする場合は、</p>
<p>入ってくるときは徐々に減速、出て行く時は徐々に加速させるようなイージングが推奨されています。</p>
<p>ただ最終的には、製作者により、より自然な動きになるように調整することが求められています。</p>
<p>&nbsp;</p>
<h3>Responsive interaction</h3>
<p>ユーザーがタッチしたことを明確に知らせ、操作感の改善を目指したものです。</p>
<p>マテリアルデザインのアニメーションの中で最も特徴的といえる効果です。</p>
<p>日本では波紋エフェクトとも呼ばれています。</p>
<p>タッチした場所を中心に、波紋のようなアニメーションを表示することで、</p>
<p>タッチした場所を知らせ、触ったという視覚効果を明確に表現しています。</p>
<p><a href="/uploads-archive/2015/04/surface-reaction.png"><img decoding="async" loading="lazy" class="alignnone wp-image-7305 size-full" src="/uploads-archive/2015/04/surface-reaction.png" alt="surface-reaction" width="656" height="480" srcset="/uploads-archive/2015/04/surface-reaction.png 656w, /uploads-archive/2015/04/surface-reaction-300x220.png 300w, /uploads-archive/2015/04/surface-reaction-228x167.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>&nbsp;</p>
<p>タッチした場所を起点に、要素が飛び出してきたり、収納されたりするような視覚効果もそのひとつです。</p>
<p>&nbsp;</p>
<h3>視覚的な連続性のあるアニメーション</h3>
<p>マテリアルデザインの中で、私が最も共感するアニメーションルールですが、</p>
<p>タッチした要素と遷移先の要素を視覚的に同一視できるような効果をつけるというものです。</p>
<p>例えば記事の一欄があった場合、</p>
<p>一覧から記事を選ぶと、タッチした要素が画面いっぱいに広がるようにして、</p>
<p>記事の詳細のページヘ遷移するというアニメーションをつけます。</p>
<p>一覧に戻るときにも、記事が一覧に戻っていくようなアニメーションをつけます。</p>
<p>そうすることで、情報の連続性を視覚的にユーザーに知らせることができ、</p>
<p>ユーザーも現在の場所を見失うことなく、ページを遷移することが可能になります。</p>
<p><a href="/uploads-archive/2015/04/responsive-reaction.png"><img decoding="async" loading="lazy" class="alignnone wp-image-7315 size-full" src="/uploads-archive/2015/04/responsive-reaction.png" alt="responsive-reaction" width="656" height="480" srcset="/uploads-archive/2015/04/responsive-reaction.png 656w, /uploads-archive/2015/04/responsive-reaction-300x220.png 300w, /uploads-archive/2015/04/responsive-reaction-228x167.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>&nbsp;</p>
<p>その他、公式のガイドラインには、色やアイコンの作り方など、細かなルールが決められていて、</p>
<p>マテリアルデザインという枠を超えてデザインの勉強になると思います。</p>
<p>動画を使ってわかりやすく説明がされているので、ページ量は多いですが、とても読み進めやすいです。</p>
<p>興味のある方は是非、<a href="http://www.google.com/design/spec/material-design/introduction.html" target="_blank">公式のガイドライン</a>をご覧になってください。</p>


マテリアルデザイン(material design)の基本の基本についてまとめてみました

<p>昨今のwebサイトデザインにはアイコンが欠かせないと言っていいかと思います。<br />
テキストより絵で視覚的に訴える方が強いです。</p>
<p>しかし、アイコンを制作していたら時間がかかってしまいます。<br />
ましてやそんなアイコンを作る絵心・センスがない・・・<br />
お客さんには費用がかかってしまう・・・</p>
<p>そんな時には、フリーで使えるアイコンを使用するのが良いかと思います。<br />
僕はアイコンつくれないので、必死に探して、適切なものを使用しています。</p>
<p>早速紹介したいと思います。</p>
<h2>FLAT ICON DESIGN</h2>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7208" src="/uploads-archive/2015/03/20150331-1024x616.jpg" alt="20150331" width="640" height="385" srcset="/uploads-archive/2015/03/20150331-1024x616.jpg 1024w, /uploads-archive/2015/03/20150331-300x181.jpg 300w, /uploads-archive/2015/03/20150331-228x137.jpg 228w, /uploads-archive/2015/03/20150331.jpg 1289w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p>流行り(?)のフラットデザインのアイコンが豊富にあります！<br />
しっかりしたアイコンなのに無料！<br />
ai,eps,jpg,png,svgの形式でダウンロードできます。</p>
<p>&nbsp;</p>
<p><a class="link" href="http://flat-icon-design.com/" target="_blank">FLAT ICON DESIGN -フラットアイコンデザイン-</a></p>
<h2>Endless Icons</h2>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7209" src="/uploads-archive/2015/03/Endless-Icons-Free-Icon-Library-1024x616.jpg" alt="Endless Icons  Free Icon Library" width="640" height="385" srcset="/uploads-archive/2015/03/Endless-Icons-Free-Icon-Library-1024x616.jpg 1024w, /uploads-archive/2015/03/Endless-Icons-Free-Icon-Library-300x181.jpg 300w, /uploads-archive/2015/03/Endless-Icons-Free-Icon-Library-228x137.jpg 228w, /uploads-archive/2015/03/Endless-Icons-Free-Icon-Library.jpg 1289w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p>シルエット的なシンプルなアイコンが揃っています。<br />
Tag付されており、探しやすいです！</p>
<p>&nbsp;</p>
<p><a class="link" href="http://www.endlessicons.com/" target="_blank">Endless Icons | Free Icon Library</a></p>
<h2>アイコン配布中！</h2>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7210" src="/uploads-archive/2015/03/cab8670d0bc3a71b540517ac73af0e34-1024x616.jpg" alt="リアルアイコン一覧　～TOUCH＆SLIDEが運営する編集可能なアイコンがダウンロードできる「アイコン配布中！」～" width="640" height="385" srcset="/uploads-archive/2015/03/cab8670d0bc3a71b540517ac73af0e34-1024x616.jpg 1024w, /uploads-archive/2015/03/cab8670d0bc3a71b540517ac73af0e34-300x181.jpg 300w, /uploads-archive/2015/03/cab8670d0bc3a71b540517ac73af0e34-228x137.jpg 228w, /uploads-archive/2015/03/cab8670d0bc3a71b540517ac73af0e34.jpg 1289w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p>今はもうあんまりなくなってしまったかもしれない・・・リアルなアイコン、<br />
そしてシルエットアイコンをダウンロードできます。<br />
リクエストも受付しているようです！</p>
<p>&nbsp;</p>
<p><a class="link" href="http://icon.touch-slide.jp/real/" target="_blank">リアルアイコン一覧　～TOUCH＆SLIDEが運営する編集可能なアイコンがダウンロードできる「アイコン配布中！」～</a></p>
<p>&nbsp;</p>
<p>一昔前ならこのクオリティのアイコン達は無料なんかでゲット出来なかったのですが、<br />
いい時代になりました・・・（みんな同じアイコンばっかり使って画一的になりそう気もしますが・・・）</p>
<p>本当は自分でサッと作れたらいいなぁ。。。</p>


フラットアイコンやシンプルなアイコンを無料でダウンロードできるサイト

<p>背景に動画を設置しているサイトをよく見ると思います。</p>
<p>ページ全体に表示するのはcssだけでできるので、実装はかなりシンプルにできます。</p>
<h2>videoで動画を挿入する</h2>
<p></p>

		<div id="crayon-649540158539e622024199" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;video autoplay loop poster="image/sampleposter.jpg" id="sampleVideo"&gt;
&lt;source src="video/shinjuku.mp4" type="video/mp4"&gt;
&lt;source src="shinjuku.webm" type="video/webm"&gt;
&lt;source src="shinjuku.ogv" type="video/ogv"&gt;
&lt;/video&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540158539e622024199-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158539e622024199-2">2</div><div class="crayon-num" data-line="crayon-649540158539e622024199-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158539e622024199-4">4</div><div class="crayon-num" data-line="crayon-649540158539e622024199-5">5</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540158539e622024199-1"><span class="crayon-h">&lt;</span><span class="crayon-e">video </span><span class="crayon-e">autoplay </span><span class="crayon-e">loop </span><span class="crayon-i">poster</span>=<span class="crayon-s">"image/sampleposter.jpg"</span><span class="crayon-h"> </span><span class="crayon-i">id</span>=<span class="crayon-s">"sampleVideo"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158539e622024199-2"><span class="crayon-h">&lt;</span><span class="crayon-e">source </span><span class="crayon-i">src</span>=<span class="crayon-s">"video/shinjuku.mp4"</span><span class="crayon-h"> </span><span class="crayon-i">type</span>=<span class="crayon-s">"video/mp4"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-649540158539e622024199-3"><span class="crayon-h">&lt;</span><span class="crayon-e">source </span><span class="crayon-i">src</span>=<span class="crayon-s">"shinjuku.webm"</span><span class="crayon-h"> </span><span class="crayon-i">type</span>=<span class="crayon-s">"video/webm"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158539e622024199-4"><span class="crayon-h">&lt;</span><span class="crayon-e">source </span><span class="crayon-i">src</span>=<span class="crayon-s">"shinjuku.ogv"</span><span class="crayon-h"> </span><span class="crayon-i">type</span>=<span class="crayon-s">"video/ogv"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-649540158539e622024199-5"><span class="crayon-h">&lt;</span>/<span class="crayon-i">video</span><span class="crayon-h">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>autoplayにしておいて、videoに対応していないブラウザの為にposterを設定しておきます。</p>
<p>動画素材はブラウザによって形式が異なるので、mp4、webmの２つを用意する必要があります。</p>
<p>各ブラウザへの対応状況は以下を参考にしてください。</p>
<p><a href="/uploads-archive/2015/03/mp4.png"><img decoding="async" loading="lazy" class="alignnone  wp-image-7166" src="/uploads-archive/2015/03/mp4.png" alt="mp4" width="326" height="190" srcset="/uploads-archive/2015/03/mp4.png 642w, /uploads-archive/2015/03/mp4-300x175.png 300w, /uploads-archive/2015/03/mp4-228x133.png 228w" sizes="(max-width: 326px) 100vw, 326px" /></a></p>
<p><a href="http://caniuse.com/#search=mp4">http://caniuse.com/#search=mp4</a></p>
<p><a href="/uploads-archive/2015/03/webm.png"><img decoding="async" loading="lazy" class="alignnone  wp-image-7167" src="/uploads-archive/2015/03/webm.png" alt="webm" width="322" height="196" srcset="/uploads-archive/2015/03/webm.png 642w, /uploads-archive/2015/03/webm-300x183.png 300w, /uploads-archive/2015/03/webm-228x139.png 228w" sizes="(max-width: 322px) 100vw, 322px" /></a></p>
<p><a href="http://caniuse.com/#search=WebM">http://caniuse.com/#search=WebM</a></p>
<p>ファイルフォーマットの変換は編集ソフトで吐き出す際に変換できる場合もありますが、フリーのコンバーターも結構あるので探してみて下さい。</p>
<h2>動画を背景に設定する</h2>
<p></p>

		<div id="crayon-64954015853a2854513256" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">CSS</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
#sampleVideo {
  position: fixed; right: 0; bottom: 0;
  min-width: 100%; min-height: 100%;
  width: auto; height: auto; z-index: -10;
  background: url(image/sampleposter.jpg) no-repeat;
  background-size: cover;
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64954015853a2854513256-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015853a2854513256-2">2</div><div class="crayon-num" data-line="crayon-64954015853a2854513256-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015853a2854513256-4">4</div><div class="crayon-num" data-line="crayon-64954015853a2854513256-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015853a2854513256-6">6</div><div class="crayon-num" data-line="crayon-64954015853a2854513256-7">7</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64954015853a2854513256-1"><span class="crayon-k ">#sampleVideo </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015853a2854513256-2"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">position</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">fixed</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-e ">right</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">0</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-e ">bottom</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">0</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64954015853a2854513256-3"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">min-width</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">100%</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-e ">min-height</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">100%</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015853a2854513256-4"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">width</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">auto</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-e ">height</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">auto</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-e ">z-index</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">-10</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64954015853a2854513256-5"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">background</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">url</span><span class="crayon-sy">(</span><span class="crayon-i ">image/sampleposter.jpg</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-i ">no-repeat</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015853a2854513256-6"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">background-size</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">cover</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64954015853a2854513256-7"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>videoを右下に設置して、幅と高さをauto、さらに最少値をどちらも100%にします。</p>
<p>対応していないブラウザためにbackgroundに静止画を設置します。</p>
<p>&nbsp;</p>
<p>今回使用した動画はNHKのライブラリー（フリー）から持ってきたのでかなり粗いのですが、通常背景に設置する場合はHDで撮影した動画の方が良いと思います。</p>
<p>&nbsp;</p>
<p><a class="demo" href="/demo/makabe/01/01demo.html">DEMO</a></p>

動画：cssでvideoを背景に使う

<p>GoogleからMaterial Designが提唱され、しばらく経ち広まっているかどうかは定かではないのですが、制作にするのに便利なサービスを発見したので、紹介したいと思います。</p>
<p>まずは、Material Designとはなにかということは以下のサイトからご覧ください。<br />
<a href="http://www.google.com/design/spec/material-design/introduction.html">Introduction &#8211; Material design &#8211; Google design guidelines</a></p>
<p>&nbsp;</p>
<h2>フレームワーク</h2>
<p>&nbsp;</p>
<h3>MUI</h3>
<p>&nbsp;</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7069" src="/uploads-archive/2015/03/MUI-Material-Design-CSS-Framework-1024x605.jpg" alt="MUI - Material Design CSS Framework" width="620" height="366" srcset="/uploads-archive/2015/03/MUI-Material-Design-CSS-Framework-1024x605.jpg 1024w, /uploads-archive/2015/03/MUI-Material-Design-CSS-Framework-300x177.jpg 300w, /uploads-archive/2015/03/MUI-Material-Design-CSS-Framework-228x135.jpg 228w, /uploads-archive/2015/03/MUI-Material-Design-CSS-Framework.jpg 1105w" sizes="(max-width: 620px) 100vw, 620px" /><br />
ひと通りのコンポーネントが揃っているかと思います。</p>
<p><a class="link" href="https://www.muicss.com/" target="_blank">MUI &#8211; Material Design CSS Framework</a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3>Materialize</h3>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7065" src="/uploads-archive/2015/03/Documentation-Materialize-1024x605.jpg" alt="Documentation - Materialize" width="620" height="366" srcset="/uploads-archive/2015/03/Documentation-Materialize-1024x605.jpg 1024w, /uploads-archive/2015/03/Documentation-Materialize-300x177.jpg 300w, /uploads-archive/2015/03/Documentation-Materialize-228x135.jpg 228w, /uploads-archive/2015/03/Documentation-Materialize.jpg 1105w" sizes="(max-width: 620px) 100vw, 620px" /><br />
上記のサイトよりも豊富で、jQueryの動きもけっこうあります。</p>
<p><a class="link" href="http://dogfalo.github.io/materialize/" target="_blank">Documentation &#8211; Materialize</a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3>Material UI</h3>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7068" src="/uploads-archive/2015/03/Material-UI-Material-Design-React-Components-1024x605.jpg" alt="Material UI - Material Design React Components" width="620" height="366" srcset="/uploads-archive/2015/03/Material-UI-Material-Design-React-Components-1024x605.jpg 1024w, /uploads-archive/2015/03/Material-UI-Material-Design-React-Components-300x177.jpg 300w, /uploads-archive/2015/03/Material-UI-Material-Design-React-Components-228x135.jpg 228w, /uploads-archive/2015/03/Material-UI-Material-Design-React-Components.jpg 1105w" sizes="(max-width: 620px) 100vw, 620px" /></p>
<p>こちらもひと通りのコンポーネントが揃っています。<br />
&nbsp;<br />
<a class="link" href="http://material-ui.com/#/" target="_blank">Material UI &#8211; Material Design React Components</a><br />
&nbsp;<br />
&nbsp;<br />
どのフレームワークもひと通りコンポーネントは揃っており、アニメーションでそれぞれ少しづつ違う感じです。<br />
パッと見て良さそうなのは、Materializeかなと思います。</p>
<p>&nbsp;</p>
<h2>配色ツール</h2>
<p>&nbsp;</p>
<h3>Material Palette</h3>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7066" src="/uploads-archive/2015/03/Material-Design-Color-Palette-Generator-Material-Palette-1024x597.jpg" alt="Material Design Color Palette Generator - Material Palette" width="620" height="361" srcset="/uploads-archive/2015/03/Material-Design-Color-Palette-Generator-Material-Palette-1024x597.jpg 1024w, /uploads-archive/2015/03/Material-Design-Color-Palette-Generator-Material-Palette-300x175.jpg 300w, /uploads-archive/2015/03/Material-Design-Color-Palette-Generator-Material-Palette-228x133.jpg 228w, /uploads-archive/2015/03/Material-Design-Color-Palette-Generator-Material-Palette.jpg 1120w" sizes="(max-width: 620px) 100vw, 620px" /><br />
こちらは２つの色を選ぶと、<br />
その色に合わせて簡単なカラーパレットを教えてくれます。</p>
<p><a class="link" href="http://www.materialpalette.com/" target="_blank">Material Design Color Palette Generator &#8211; Material Palette</a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3>Material UI Colors</h3>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7067" src="/uploads-archive/2015/03/Material-UI-Material-Design-Material-UI-Colors-1024x597.jpg" alt="Material UI  Material Design  Material UI Colors" width="620" height="361" srcset="/uploads-archive/2015/03/Material-UI-Material-Design-Material-UI-Colors-1024x597.jpg 1024w, /uploads-archive/2015/03/Material-UI-Material-Design-Material-UI-Colors-300x175.jpg 300w, /uploads-archive/2015/03/Material-UI-Material-Design-Material-UI-Colors-228x133.jpg 228w, /uploads-archive/2015/03/Material-UI-Material-Design-Material-UI-Colors.jpg 1120w" sizes="(max-width: 620px) 100vw, 620px" /><br />
色数が豊富で、色情報をいろんな形式でコピーすることができます。</p>
<p><a class="link" href="http://www.materialui.co/colors" target="_blank">Material UI | Material Design | Material UI Colors</a></p>
<p>今後どんどん便利なサービスが出てくるかと思います。<br />
これらを上手いこと使いながら良いサイトを作りたいですね！！</p>


Material Designの制作に便利なwebサービス5つ

最近見かけるCSS3アニメーションを使ったトグルのメニューボタンを再現してみた

<p class="single-first-p">I would like to feature and summarise an article I read in the <a href="http://www.webdesignerdepot.com/2015/01/4-essential-layout-trends-for-2015/" target="_blank">Web designer depot</a> about this year layout trends.</p>
<p class="single-first-p">If we looked back 10 years we will find that the web had the same go-to pattern consisted of a header, footer, sidebar and content area. It was the expected layout for the web. Current web design you will no doubt notice that the fundamental structure for web pages is anything but fixed. The new norm as it were, is that there appears to be no fixed formula at all.</p>
<p>Although we can observe several trends in layout design representing unusual layouts, unusual as they don’t follow a strict formula. But they are trends because there&#8217;s hundreds of examples for each category.</p>
<p>This blend of trends will hopefully be an inspiration for your  future projects.</p>
<h2></h2>
<p>&nbsp;</p>
<h2>SPLIT SCREENS</h2>
<p>The sites that split the screen using a vertical divide.</p>
<p><a href="http://eightandfour.com/"><img decoding="async" loading="lazy" class="alignundefined wp-image-6843 " src="/uploads-archive/2015/02/161.jpg" alt="161" width="717" height="453" /></a></p>
<p>You can use it when you either want to promote two things, two elements of equal importance. Or to remark trough two elements what defines the company, which is the duality that gives the core strengths.</p>
<p>This approach allows the user to rapidly select between the two elements and easily explain the corporate identity of the company and give a lasting impression.</p>
<h2></h2>
<h2></h2>
<p>&nbsp;</p>
<h2>NO DECORATIONS!</h2>
<p>A common trend now, which I specially like, is to remove all of this extra containing elements (boxes, borders, shapes, etc,) that we usually use to separate the content of a page (header, footer,&#8230;). Check these sites.</p>
<p><a href="http://www.br-time.jp/"><img decoding="async" loading="lazy" class="alignundefined wp-image-6844 " src="/uploads-archive/2015/02/02.jpg" alt="02" width="669" height="380" /></a></p>
<p>In this example, you can appreciate no limitation between header and footer. It feels more like an interactive kiosk instead. The hierarchy of content is done through a left to right division. As a consequence the beautiful products shine through.</p>
<p><a href="http://foreword.io/"><img decoding="async" loading="lazy" class="aligncenter wp-image-6850 " src="/uploads-archive/2015/02/131.jpg" alt="131" width="658" height="425" srcset="/uploads-archive/2015/02/131.jpg 928w, /uploads-archive/2015/02/131-300x194.jpg 300w, /uploads-archive/2015/02/131-228x147.jpg 228w" sizes="(max-width: 658px) 100vw, 658px" /></a></p>
<p>&nbsp;</p>
<p>Here, the content is greatly emphasized. Instead of reading a header first, you read the name of the company and the statement about what they do (and where they do it). Followed by the global navigation.</p>
<p>It is a good way to emphasise the brand, and make a good first impact,  before getting people to navigate. Very neat.</p>
<h2></h2>
<p>&nbsp;</p>
<h2>MODULAR OR GRID BASED</h2>
<p>This trend is not exactly new, we have used it in the past too indeed. Little by little it&#8217;s gaining notoriety thanks to the introduction of responsive web design. The layout built on modular or grid-like structures can flex based on the screen size.</p>
<p><a href="http://www.teambadcompanyrowing.com/"><img decoding="async" loading="lazy" class="alignnone  wp-image-6853" src="/uploads-archive/2015/02/04.jpg" alt="04" width="692" height="422" /></a></p>
<p>This example perfectly demonstrates the idea. The design is completely responsive. As the screen size changes each module adapts and sizes to fit the space.</p>
<p><a href="http://madagascar.dreamworks.com/"><img decoding="async" loading="lazy" class="alignnone  wp-image-6854" src="/uploads-archive/2015/02/19.jpg" alt="19" width="732" height="537" /></a></p>
<p>&nbsp;</p>
<p>In this example there is an important design element at work here, which the previous example lacked. The size of the modules vary to reflect the order of importance and its place in the hierarchy.</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h2>SINGLE SCREEN</h2>
<p>When the design adapts to completely fill the screen, without scrolling, which means that the content has to be extremely focused, and the hierarchy of content clearly established.</p>
<p><a href="http://hatchcollective.co.uk/"><img decoding="async" loading="lazy" class="alignnone  wp-image-6855" src="/uploads-archive/2015/02/09.jpg" alt="09" width="725" height="518" /></a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>


LAYOUT TRENDS FOR 2015

<p>なんてタイトルですが、<br />
設定していないわけではないんですよね。</p>
<p>基本的には大抵横幅960pxと設定してサイトのデザインをするのですが、<br />
そうではなく、ウィンドウ幅に合わせてサイトをデザインしているサイトのご紹介になります。</p>
<p>ちなみに、すべてレスポンシブです。(このデザインでは当たり前ですね・・・)</p>
<h2>CKD 空気圧機器 制御機器 自動機械装置 総合メーカー</h2>
<p><a href="http://www.ckd.co.jp/" target="_blank"><img decoding="async" loading="lazy" class="alignnone wp-image-6651" src="/uploads-archive/2015/01/adc21716ea7107c1e81ce6f6606b5748-1024x704.jpg" alt="CKD 空気圧機器 制御機器 自動機械装置 総合メーカー" width="600" height="413" srcset="/uploads-archive/2015/01/adc21716ea7107c1e81ce6f6606b5748-1024x704.jpg 1024w, /uploads-archive/2015/01/adc21716ea7107c1e81ce6f6606b5748-300x206.jpg 300w, /uploads-archive/2015/01/adc21716ea7107c1e81ce6f6606b5748-228x156.jpg 228w, /uploads-archive/2015/01/adc21716ea7107c1e81ce6f6606b5748.jpg 1101w" sizes="(max-width: 600px) 100vw, 600px" /></a></p>
<p><a class="link" href="http://www.ckd.co.jp/" target="_blank">CKD 空気圧機器 制御機器 自動機械装置 総合メーカー</a></p>
<h2>二本松物流株式会社</h2>
<p><a href="http://www.nihonmatsu.co.jp/" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-large wp-image-6653" src="/uploads-archive/2015/01/df99cf4351e17c302856aa4718f41d2b-1024x704.jpg" alt="チルド配送 小口配送 食品流通｜二本松物流株式会社" width="600" height="413" srcset="/uploads-archive/2015/01/df99cf4351e17c302856aa4718f41d2b-1024x704.jpg 1024w, /uploads-archive/2015/01/df99cf4351e17c302856aa4718f41d2b-300x206.jpg 300w, /uploads-archive/2015/01/df99cf4351e17c302856aa4718f41d2b-228x156.jpg 228w, /uploads-archive/2015/01/df99cf4351e17c302856aa4718f41d2b.jpg 1101w" sizes="(max-width: 600px) 100vw, 600px" /></a></p>
<p><a href="http://www.nihonmatsu.co.jp/" target="_blank" class="link">チルド配送 小口配送 食品流通｜二本松物流株式会社</a></p>
<h2>WENT Coffee Co.</h2>
<p><a href="http://went.tokyo/" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-large wp-image-6652" src="/uploads-archive/2015/01/WENT-Coffee-Co.-1024x704.jpg" alt="WENT Coffee Co." width="600" height="413" srcset="/uploads-archive/2015/01/WENT-Coffee-Co.-1024x704.jpg 1024w, /uploads-archive/2015/01/WENT-Coffee-Co.-300x206.jpg 300w, /uploads-archive/2015/01/WENT-Coffee-Co.-228x156.jpg 228w, /uploads-archive/2015/01/WENT-Coffee-Co..jpg 1101w" sizes="(max-width: 600px) 100vw, 600px" /></a></p>
<p><a href="http://went.tokyo/" target="_blank" class="link">WENT Coffee Co.</a></p>
<h2>産科婦人科 佐川クリニック</h2>
<p><a href="http://www.sagawa-clinic.com/" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-large wp-image-6655" src="/uploads-archive/2015/01/11ae9f919045eb3d93e0c6235608142f-1024x704.jpg" alt="産科婦人科 佐川クリニック" width="600" height="413" srcset="/uploads-archive/2015/01/11ae9f919045eb3d93e0c6235608142f-1024x704.jpg 1024w, /uploads-archive/2015/01/11ae9f919045eb3d93e0c6235608142f-300x206.jpg 300w, /uploads-archive/2015/01/11ae9f919045eb3d93e0c6235608142f-228x156.jpg 228w, /uploads-archive/2015/01/11ae9f919045eb3d93e0c6235608142f.jpg 1101w" sizes="(max-width: 600px) 100vw, 600px" /></a></p>
<p><a href="http://www.sagawa-clinic.com/" target="_blank" class="link">産科婦人科 佐川クリニック</a></p>
<h2>47株式会社</h2>
<p><a href="http://47co.jp/" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-large wp-image-6650" src="/uploads-archive/2015/01/bbf335ff0c9ee09eb10cce23d1e0291a-1024x704.jpg" alt="47株式会社  もっと暮らしやすくなるための日本づくり" width="600" height="413" srcset="/uploads-archive/2015/01/bbf335ff0c9ee09eb10cce23d1e0291a-1024x704.jpg 1024w, /uploads-archive/2015/01/bbf335ff0c9ee09eb10cce23d1e0291a-300x206.jpg 300w, /uploads-archive/2015/01/bbf335ff0c9ee09eb10cce23d1e0291a-228x156.jpg 228w, /uploads-archive/2015/01/bbf335ff0c9ee09eb10cce23d1e0291a.jpg 1101w" sizes="(max-width: 600px) 100vw, 600px" /></a></p>
<p><a href="http://47co.jp/" target="_blank" class="link">47株式会社 | もっと暮らしやすくなるための日本づくり</a></p>
<h2>KITOTE</h2>
<p><a href="http://kitote.jp/" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-large wp-image-6656" src="/uploads-archive/2015/01/836e34f27a4ed5e6b0a8edab4b6b3cca-1024x704.jpg" alt="天然木と手仕事の建具『KITOTE』" width="600" height="413" srcset="/uploads-archive/2015/01/836e34f27a4ed5e6b0a8edab4b6b3cca-1024x704.jpg 1024w, /uploads-archive/2015/01/836e34f27a4ed5e6b0a8edab4b6b3cca-300x206.jpg 300w, /uploads-archive/2015/01/836e34f27a4ed5e6b0a8edab4b6b3cca-228x156.jpg 228w, /uploads-archive/2015/01/836e34f27a4ed5e6b0a8edab4b6b3cca.jpg 1101w" sizes="(max-width: 600px) 100vw, 600px" /></a></p>
<p><a href="http://kitote.jp/" target="_blank" class="link">天然木と手仕事の建具『KITOTE』</a></p>
<h2>株式会社アトラエ</h2>
<p><a href="http://atrae.co.jp/" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-large wp-image-6654" src="/uploads-archive/2015/01/dd73a0b7be8e988f2053dfff0048e2aa-1024x695.jpg" alt="株式会社アトラエ  Atrae, Inc." width="600" height="413" /></a></p>
<p><a href="http://atrae.co.jp/" target="_blank" class="link">株式会社アトラエ | Atrae, Inc.</a></p>


横幅なんて設定しない！ウィンドウ幅ピッタリのサイト7つ

<p>In terms of creating a website (corporate or personal) it do not have to be coded from scratch anymore. Thanks to many kind and generous designers / developers, high quality web templates are distributed freely over the Internet.</p>
<p>There are tonnes of templates sites out there, that makes searching for a free yet high quality templates hard and tedious, so I attempted to collect and showcase you some of really good ones. Here, I present 8 High Quality Free Web Templates and Layouts.</p>
<p>I&#8217;m sure you&#8217;ll a find a gem or two that will absolutely ease your workflow!</p>
<p>&nbsp;</p>
<p><a href="https://dribbble.com/shots/1819180-Free-Dashboard-Ecommerce-Admin"><strong>ECommerce Dashboard Template</strong></a>  (PSD).</p>
<p><a href="/uploads-archive/2015/01/monthly_freebie_dc_23.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-6614 " src="/uploads-archive/2015/01/monthly_freebie_dc_23.jpg" alt="monthly_freebie_dc_23" width="660" height="260" /></a></p>
<p>&nbsp;</p>
<p><a href="https://www.behance.net/gallery/21521941/Creative-Agency-Web-Template"><strong>Creative Agency Web Template</strong></a>  (PSD).</p>
<p><a href="/uploads-archive/2015/01/Screen-Shot-2015-01-13-at-16.00.36.png"><img decoding="async" loading="lazy" class="alignnone wp-image-6626 " src="/uploads-archive/2015/01/Screen-Shot-2015-01-13-at-16.00.36-1024x582.png" alt="Screen Shot 2015-01-13 at 16.00.36" width="663" height="372" /></a></p>
<p><a href="http://graphicsbay.com/item/bj-rn-multipurpose-landingpage/380"><strong>BJÖRN Multipurpose Landing Page</strong></a>  (PSD).</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-6613 " src="/uploads-archive/2015/01/monthly_freebie_dc_20.jpg" alt="monthly_freebie_dc_20" width="660" height="266" srcset="/uploads-archive/2015/01/monthly_freebie_dc_20-300x120.jpg 300w, /uploads-archive/2015/01/monthly_freebie_dc_20-228x91.jpg 228w" sizes="(max-width: 660px) 100vw, 660px" /></p>
<p><a href="https://dribbble.com/shots/1802406-Freebie-Moderno-Creative-Simple-Portfolio-Page"><strong>Moderno Creative Simple Portfolio Page</strong></a>  (PSD).</p>
<p><a href="/uploads-archive/2015/01/monthly_freebie_dc_24.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-6615 " src="/uploads-archive/2015/01/monthly_freebie_dc_24.jpg" alt="monthly_freebie_dc_24" width="658" height="278" /></a></p>
<p><a href="http://www.mightydeals.com/deal/free-resume-template-by-fernando-bez.html"><strong>Resume Template</strong></a>  (PSD).</p>
<p><a href="/uploads-archive/2015/01/monthly_freebie_dc_21.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-6616 " src="/uploads-archive/2015/01/monthly_freebie_dc_21.jpg" alt="monthly_freebie_dc_21" width="655" height="340" /></a></p>
<p><a href="http://www.robertbrodziak.com/en/free-wordpress-themes/daily-theme/"><strong>Daily</strong></a>  (WordPress Theme).</p>
<p><a href="/uploads-archive/2015/01/monthly_freebie_dc_25.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-6617 " src="/uploads-archive/2015/01/monthly_freebie_dc_25.jpg" alt="monthly_freebie_dc_25" width="655" height="263" srcset="/uploads-archive/2015/01/monthly_freebie_dc_25.jpg 750w, /uploads-archive/2015/01/monthly_freebie_dc_25-300x120.jpg 300w, /uploads-archive/2015/01/monthly_freebie_dc_25-228x91.jpg 228w" sizes="(max-width: 655px) 100vw, 655px" /></a></p>
<p><a href="http://www.daniel-klose.com/online-services/life-is-good-wordpress-theme/"><strong>Life Is Good</strong></a>  (WordPress Theme).</p>
<p><a href="/uploads-archive/2015/01/monthly_freebie_dc_26.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-6618 " src="/uploads-archive/2015/01/monthly_freebie_dc_26.jpg" alt="monthly_freebie_dc_26" width="655" height="242" /></a></p>
<p><a href="http://themehybrid.com/themes/yarn"><strong>Yarn</strong></a>  (WordPress Theme).</p>
<p><a href="/uploads-archive/2015/01/monthly_freebie_dc_27.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-6619 " src="/uploads-archive/2015/01/monthly_freebie_dc_27.jpg" alt="monthly_freebie_dc_27" width="653" height="279" /></a></p>
<p><a href="https://themeisle.com/themes/zerif-lite/"><strong>Zerif Lite</strong></a>  (WordPress Theme).</p>
<p><a href="/uploads-archive/2015/01/monthly_freebie_dc_28.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-6620 " src="/uploads-archive/2015/01/monthly_freebie_dc_28.jpg" alt="monthly_freebie_dc_28" width="649" height="273" /></a></p>
<p>&nbsp;</p>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - タグ: #デザイン

2016/03/26

2016/03/09

2016/03/02

2016/01/13

2016/01/06

2015/12/25

2015/10/23

2015/08/26

2015/06/30

2015/05/13

2015/04/22

2015/04/01

2015/03/25

2015/03/11

2015/02/27

2015/02/11

2015/01/14

2015/01/14