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

Post on:2011年2月9日

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

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

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

グーテンベルグダイアグラムは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」です。