視線を自然に導くレイアウト:グーテンベルク・ダイアグラムで構築するLPとバナーの視覚ヒエラルキー
Webサイトやランディングページ(LP)、あるいはWeb広告のバナーをデザインするとき、「どこにロゴを置き、どこにキャッチコピーを配置し、どこにコンバージョンボタン(CTA)を置くべきか」に頭を悩ませるデザイナーは少なくありません。
デザインにおける視線誘導のモデルとして、Nielsen Norman Groupのアイトラッキング研究 で有名な「Fパターン」や「Zパターン」がよく知られていますが、もう一つ、均等なテキスト主体のレイアウトにおいて極めて有効な古典的法則があります。それが「グーテンベルク・ダイアグラム(Gutenberg Diagram)」です。
出典: www.kaboompics.com / Pexels
グーテンベルク・ダイアグラムとは
グーテンベルク・ダイアグラムは、情報の重要度が均等に配置された平面(特にテキストやドキュメント)を人が見るとき、視線がどのように移動するかを示すグリッドモデルです。
この法則によると、西洋の書字習慣(左から右、上から下へ読む)を持つユーザーは、画面を次の4つの象限に無意識に分割し、特定の順序で視線を流します。
- 第1象限(左上):主要開始領域(Primary Optical Area) 視線が最初に留まる場所です。ユーザーが「ここから読み始める」ためのアイキャッチやブランドロゴなどを配置するのに最適です。
- 第2象限(右上):強い休止領域(Strong Fallow Area) 視線は左上から右へ流れますが、ここは読書の流れにおける一種の「一時停止」エリアになります。補助的な情報や二次的なナビゲーションを置くべき領域です。
- 第3象限(左下):弱い休止領域(Weak Fallow Area) 左上から右下へ対角線上に視線がスキップされるため、左下のエリアは最も視認されにくい「盲点」になりやすい領域です。重要度の低い補足情報や装飾要素を置くのに適しています。
- 第4象限(右下):最終終着領域(Terminal Area / Terminal Anchor) 視線がページの読み込みを終え、次のアクションに移る「出口」のエリアです。ここに配置された要素は行動を喚起しやすいため、CTA(購入・登録ボタン)を置くべき絶対的なポジションとなります。
なぜこのレイアウト原則が重要なのか
グーテンベルク・ダイアグラムの最も重要な示唆は、「対角線上の重力(Diagonal Gravity)」の存在です。ユーザーの視線は、左上(始まり)から右下(終わり)に向けて、斜めに滑り落ちるように移動する傾向があります。
これは、Webのスクロール行動にも強く適合します。ユーザーはページのすべての文字を一字一句読むのではなく、スキャン(走査)しています。この視線の重力の流れに逆らったレイアウトにしてしまうと、ユーザーに無駄なスクロールを強いることになり、認知負荷を高めて離脱の原因になります。
LPとバナーへの実践的なデザイン応用
では、この原理を実務のデザインにどう落とし込むべきでしょうか。
ランディングページのファーストビュー(FV)
ファーストビューは、ユーザーがページを読み進めるかどうかを決める最も重要な秒単位の勝負です。
- 左上(第1象限): 最も伝えたいメインのキャッチコピーや、製品のロゴを配置して「何のページか」を一瞬で理解させます。
- 右上(第2象限): ログインボタンや、信頼性を担保する実績バッジ(「満足度No.1」など)を補助的に添えます。
- 左下(第3象限): ここは死角になりやすいため、メインコピーを補足する小さな製品画像や背景グラフィックにとどめ、テキストは極力排除します。
- 右下(第4象限): 視線の終着点。ここに目立つ配色を施した「今すぐ申し込む」などのCTAボタンを配置します。
バナー広告
限られた正方形や長方形のスペースでも、グーテンベルクの法則は活きます。 たとえば、横長のカルーセルバナーやバナー広告では、左端に人物の写真やアイキャッチ画像を置き、そこから右へ視線を流して、右下に割引率の表記や「詳細はこちら」といったボタンを配置することで、情報のスムーズな消化とクリック率の向上を両立できます。
デジタルデザインにおける限界と注意点
グーテンベルク・ダイアグラムは強力な法則ですが、どんなページにも適用できるわけではありません。 画像が画面の半分以上を占める場合や、ビジュアル要素の強弱が激しい場合は、ユーザーの視線は重力よりも「ビジュアルヒエラルキー(視覚的階層)」に引っ張られます。大きな画像やビビッドな色彩が画面の中央にあれば、視線はまずそこに向かいます。
したがって、グーテンベルク・ダイアグラムを適用するべきなのは、**「テキストとシンプルな図表で構成された、均等で読み物的なページやカードレイアウト」**です。
古典的な紙媒体のエディトリアルデザインから脈々と受け継がれてきた「人間の読む癖」を理解し、無理のない自然な情報設計を心がけましょう。
お役立ち情報
- Nielsen Norman Group - F-Shaped Pattern for Reading Web Content Webページの読まれ方を視線の動き(F字型)から実証した、世界的なデザイン調査機関による基本研究コラム。
- chot.design - グーテンベルク・ダイアグラム 日本語によるグーテンベルク・ダイアグラムの基本レイアウトと、デザイン実務における視線誘導の適用方法のやさしい解説。