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

最近の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

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