Webデザインの基本が身につく！ページのグリッド・レイアウト・要素配置の効果的な使い方のまとめ

最近のWebサイトで見かけるさまざまなレイアウト、レスポンシブ対応のレイアウトの構成、縦長ページ・横長ページでグリッドの効果的な使い方、ランディングページの要素の配置など、デザインの勉強になるインフォグラフィック・リソースを紹介します。

Multi-Device Layout Patterns

スマホ・タブレット・デスクトップのそれぞれでレイアウトがどのように変化させるかのまとめ。

Responsive Layouts, Responsively Wireframed

ページのレイアウト・ワイヤーフレームがレスポンシブでどのように変化するかアニメーションで楽しめます。

Using Layout Grids Effectively

縦長ページ・横長ページで効果的なグリッドの使い方。雑誌ベースですが、Webデザインにも効果的です。

UI Tiles

最近のWebデザインでよく採用されているレイアウト・UIパターン72種類が収録されたPSD, AI, Sketchの無料素材。

Flow Patterns

ユーザーフローの72種類のパターンをまとめたものやサイトフローがダウンロード（有料）できます。キャプチャは、78種類のマイクロインタラクションをまとめたもので興味深いですね。

Landing Page Design

ランディングページのレイアウト・必要な要素をまとめたもので、それぞれの役割や注意点が網羅されています。

The Anatomy of a High Converting Landing Page

ランディングページで高いコンバージョンを獲得するための施策がまとめられています。

12 Cirtical Elements

Webページを構成する際に重要な12の要素についての解説。

The Anatomy of an Optimal Local Landing Page

ランディングページに必要な要素とそれぞれの重要度を示したもので、要素の必要性や配置の参考になります。