Webデザインの基本が身につく!ページのグリッド・レイアウト・要素配置の効果的な使い方のまとめ
Post on:2015年11月20日
最近のWebサイトで見かけるさまざまなレイアウト、レスポンシブ対応のレイアウトの構成、縦長ページ・横長ページでグリッドの効果的な使い方、ランディングページの要素の配置など、デザインの勉強になるインフォグラフィック・リソースを紹介します。
![Webデザインに効果的なグリッド・ページレイアウトの勉強になるまとめ](http://coliss.com/wp-content/uploads-201503/2015112001.png)
![リソースのキャプチャ](http://coliss.com/wp-content/uploads-201503/2015112002-01.png)
スマホ・タブレット・デスクトップのそれぞれでレイアウトがどのように変化させるかのまとめ。
![リソースのキャプチャ](http://coliss.com/wp-content/uploads-201503/2015112002-02.png)
Responsive Layouts, Responsively Wireframed
ページのレイアウト・ワイヤーフレームがレスポンシブでどのように変化するかアニメーションで楽しめます。
![リソースのキャプチャ](http://coliss.com/wp-content/uploads-201503/2015112002-03.png)
Using Layout Grids Effectively
縦長ページ・横長ページで効果的なグリッドの使い方。雑誌ベースですが、Webデザインにも効果的です。
![リソースのキャプチャ](http://coliss.com/wp-content/uploads-201503/2015112002-04.png)
最近のWebデザインでよく採用されているレイアウト・UIパターン72種類が収録されたPSD, AI, Sketchの無料素材。
![リソースのキャプチャ](http://coliss.com/wp-content/uploads-201503/2015112002-05.png)
ユーザーフローの72種類のパターンをまとめたものやサイトフローがダウンロード(有料)できます。キャプチャは、78種類のマイクロインタラクションをまとめたもので興味深いですね。
![リソースのキャプチャ](http://coliss.com/wp-content/uploads-201503/2015112002-06.png)
ランディングページのレイアウト・必要な要素をまとめたもので、それぞれの役割や注意点が網羅されています。
![リソースのキャプチャ](http://coliss.com/wp-content/uploads-201503/2015112002-07.png)
The Anatomy of a High Converting Landing Page
ランディングページで高いコンバージョンを獲得するための施策がまとめられています。
![リソースのキャプチャ](http://coliss.com/wp-content/uploads-201503/2015112002-08.png)
Webページを構成する際に重要な12の要素についての解説。
![リソースのキャプチャ](http://coliss.com/wp-content/uploads-201503/2015112002-09.png)
The Anatomy of an Optimal Local Landing Page
ランディングページに必要な要素とそれぞれの重要度を示したもので、要素の必要性や配置の参考になります。
sponsors