効果的にコンテンツを配置する代表的な3つのレイアウトとは

ウェブデザインでもよく使用される、ユーザーの視線の動きを予測し、効果的にコンテンツを配置する代表的な3つのレイアウト、グーテンベルグ ダイアグラム、Zパターン、Fパターンを紹介します。

サイトのキャプチャ

3 Design Layouts: Gutenberg Diagram, Z-Pattern, And F-Pattern

[ad#ad-2]

下記は各ポイントをピックアップして意訳したものです。

グーテンベルグ ダイアグラム

グーテンベルグ ダイアグラムとは、均等に配置された同種の情報を見るときの視線の動きを一般的なパターンにしたものです。
これは特に、テキストの比重が高いコンテンツにはまります。

サイトのキャプチャ

グーテンベルグ ダイアグラム

グーテンベルグ ダイアグラムは4つの象限に分けられます。

Primary optical area
一番重要なエリア、位置:上左
Strong fallow area
強い休閑エリア、位置:上右
Weak fallow area
弱い休閑エリア、位置:下左
Terminal area
終点エリア、位置:下右

視線の動きは青いラインを中心に、水平運動を伴って、下部へ移動します。そのため、重要なエレメントはこのラインに沿って、配置します。例えば、ロゴ、見出しなどは上左に配置し、画像や重要なコンテンツは中央に配置し、アクションボタンやコンタクト情報などは下右に配置します。また、休閑エリアには視覚的に強調されるものを配置しない限り、注目は最小限となります。

[ad#ad-2]

Zパターン レイアウト

Zパターン レイアウトとは、上左から水平に上右に移動し、斜め下に移動し、最後に水平に移動し下右で終わります。グーテンベルグ ダイアグラムとの大きな違いは、休閑エリアを通過するかしないかです。

サイトのキャプチャ

Zパターン レイアウト

Zパターン レイアウトは、シンプルなデザインのために少数のエレメントを扱うのが得意です。
また、Zパターンからの派生で、ジグザグ パターン、黄金三角形 パターンがあります。

サイトのキャプチャ

ジグザグ レイアウト

サイトのキャプチャ

黄金三角形 レイアウト

Fパターン レイアウト

Fパターン レイアウトとは、上左から始まり、水平に上右へ移動し、そして左端に一旦戻り、下に移動し、また水平に移動します。

サイトのキャプチャ

Fパターン レイアウト

Fパターン レイアウトのポイント

  • 重要な情報は、一般的に読まれるであろうデザインの上部に横切って配置されるべきです。
  • あまり重要ではない情報は、左のエッジに沿って、水平の動きに合わせて配置されるべきです。
  • 人々は読むのではなく、流し読みすることを忘れずに。

Pattern of Focal Points -情報の階層化

テキストの比重が高いものがデザインエレメントに異なるビジュアルのウエイトを与えはじめ、階層と流れをつくりはじめると、上記のパターンは適用されず、コントロールをすることが難しくなります。
そういった場合、最も大きいビジュアルのウエイトを持っているエレメント(またはエリア)を中心にレイアウトを構成します。それが、「Pattern of Focal Points」です。

サイトのキャプチャ

Pattern of Focal Points -情報の階層化

人々の目は本当にデザインを通して、FやZあるいは斜めのラインを追うのでしょうか? 情報を階層化し、流れを生みだすことはこれらのパターンのいずれにおいても優先すべきことだと思います。

sponsors

top of page

©2018 coliss