「グーテンベルクダイヤグラムって何？」
「ユーザーの視線を誘導するデザインにはどのようなものがあるの？」
グーテンベルクダイヤグラムは、ユーザーの視線を意識した視線誘導パターンのひとつです。視線誘導の考え方はグーテンベルクダイヤグラムだけではありません。そのためどのパターンをどのタイミングで使うべきかを理解しておく必要があるでしょう。
そこで本記事ではデザイン・エンジニアリング両面からサービスの設計・開発を行っているFlowzが以下の内容について詳しく解説します。
【本記事で分かること】
- グーテンベルクダイヤグラムの意味
- グーテンベルクダイヤグラムに近い3つの視線誘導パターン
- ユーザーの視線を誘導するテクニック7選
グーテンベルクダイヤグラムの意味はもちろん、視線誘導の考え方をデザインにどのように生かしていくのかについても解説するので、ぜひ参考にしてみてください。
なおFlowzではデジタル領域でのサービス設計、プロダクト開発の視点からお客様のビジネスをサポートしています。お困りごとがある方はぜひお気軽にご相談ください！
目次
グーテンベルクダイヤグラムとは
まず、グーテンベルクダイヤグラムについて基本となる考え方を解説します。
- グーテンベルクダイヤグラムは視線誘導の基礎となる考え方
- グーテンベルクダイヤグラムの4領域
- それぞれの領域に適した役割
1. グーテンベルクダイヤグラムは視線誘導の基本的な考え方
グーテンベルクダイヤグラムは、ユーザーの視線を誘導するデザイン手法で、Webサイトや広告などのレイアウトを決定する際の本質的な考え方の一つです。人の視線は左上から右下に向かって移動する傾向があるという考え方に基づいています。
レイアウトを左上・右上・左下・右下の4つの領域に分け、何の要素をどの領域に配置するのかを論理的に決定していくのがグーテンベルクダイヤグラムの手法です。
例えば、ユーザの目に留まりやすい領域に最重要事項を配置したり、注目されにくい領域には優先度が低い情報を載せたり。ユーザーに伝えたいことを効果的に伝えるために、グーテンベルクダイヤグラムの考え方は応用されています。
2. グーテンベルクダイヤグラムにおける4つの領域
グーテンベルクダイヤグラムは以下の4領域に分けられます。
| 領域 | 位置 | 重要度 |
|---|---|---|
| 最初の視覚領域 | 左上 | 高い |
| 強い休閑領域 | 右上 | 低い |
| 弱い休閑領域 | 左下 | 低い |
| 終着領域 | 右下 | 高い |
左上にある最初の視覚領域には最重要事項を配置します。タイトルやロゴ、商品の写真などユーザーに最も印象付けたい要素は左上に配置しましょう。
次に右上の強い休閑領域には、補足情報を掲載します。この領域にはある程度ユーザーの目が留まるので、日付や値段などの目立たせるほどではないけどユーザーに目を通して欲しい要素を配置しましょう。
そして左下の弱い休閑領域は注目されにくいので、注意書きなどの補足事項を配置します。読み飛ばされても問題ない内容は左下の休閑領域に置くと良いでしょう。
右下の終着領域には、申込みボタンや購入ボタンなどユーザーの行動を促す要素を配置します。グーテンベルクダイヤグラムの考え方に基づくと、ユーザーの目線は左上から右下に向かって流れるため、右下は視線の終着点です。そのため視線が落ち着いた先に行動を促すボタンを配置することで、成果につながりやすくなると言えるでしょう。
このようにグーテンベルクダイヤグラムの考え方に基づけば、それぞれ4つの領域にユーザーの注目度に合わせた要素を配置できるため、合理的にレイアウトを決定できます。
3. グーテンベルクダイヤグラムに基づいたレイアウト例
このグーテンベルクダイヤグラムの考え方は、ECサイトなどでも広く普及しています。例えば、Amazonの商品販売ページを見てみましょう。
出典：Amazon
この商品販売ページは、グーテンベルクダイヤグラムの考え方に基づいていることがわかります。まず左上の最初の視覚領域では最も強調したい商品画像が配置されています。次に、右下の終着領域には「カートに入れる」や「今すぐ買う」などの購入を促すボタンが配置されていることがわかるでしょう。
また右上の強い休閑領域には値段、左下の弱い休閑領域には購入オプションなどの最も優先度の低い情報が配置されています。
このようにグーテンベルクダイヤグラムに基づいてWebサイトやアプリのレイアウトを組めば、ユーザーにとって直感的に分かりやすいデザインになると言えるでしょう。
グーテンベルクダイヤグラムに似ている視線誘導3パターン
次に、グーテンベルクダイヤグラムの考え方に近いレイアウトを組む際の考え方を3つ紹介します。
- Zの法則
- Fの法則
- Nの法則
1. Zの法則
Zの法則は、視線の動きがアルファベットの「Z」を描くように動くという仮定に基づいてレイアウトを決定する考え方です。左上→右上→左下→右下の順にユーザーの視線が移動するため、そのラインに沿って重要なコンテンツを配置します。
テキストが少なく画像が多いサイトなどでは、Z型に基づいてレイアウトを決めるケースが多い傾向があります。
Zの法則のポイントは以下のとおりです。
- 重要な情報は左上に配置
- 画像や表などの目立たせたい情報は四隅に配置
- 右下にユーザーの行動を促す要素を配置
最重要要素は左上、ユーザーの行動を促す要素は右下に配置する点に着目すると、Zの法則はグーテンベルクダイヤグラムと共通点が多い考え方と言えるでしょう。
2. Fの法則
Fの法則は、ユーザーの視線はアルファベットの「F」を描くように動くという考え方です。具体的には、視線を左上から右上に移動させたあと、少し下に視線をずらし再び左から右へと移っていきます。
実際、まとまった量の文章を読む際はF型に視線が動くことが研究でも示されています。
引用：F-Shaped Pattern For Reading Web Content (original study) by J.Nielsen
特にニュースやX（旧Twitter）などのテキストベースの情報を読み取るときに、Fの字に沿って視線を移動させる傾向があるようです。
Fの法則におけるポイントは以下の通り。
- 重要な情報は見出し部分に配置
- 読まれない可能性があるため、右下には重要な情報は配置しない
Zの法則と異なりFの法則の場合、右下の要素は目に留まりにくくなる点に注意が必要です。画像がメインのコンテンツにはZの法則、テキストがメインのコンテンツにはFの法則の相性が良いことをおさえておきましょう。
3. Nの法則
Nの法則は、ユーザーの視線はアルファベットの「N」を描くように動くという考え方。主に縦書きのレイアウトまたは左開きの書籍に適用されます。
Zの法則を、右に90度回転させたような視線の動きと考えると分かりやすいでしょう。
Nの法則に置けるポイントは以下の通りです。
- 重要な要素は右上に配置
- 読まれない可能性があるため、左下には重要な情報は配置しない
Nの法則がグーテンベルクダイヤグラムやほかの視線誘導の法則と根本的に異なる点は、重要な要素を右上に配置する点です。どの法則にも共通するのは、重要な要素はユーザーの目が最初に留まるエリアに配置することです。このルールは全ての法則に共通していると言えるでしょう。
グーテンベルクダイヤグラム以外の視線誘導の手法7選
視線誘導のパターンはグーテンベルクダイヤグラムやZの法則だけではありません。そのほかにもユーザーの視線を効果的に誘導する手法はいくつか存在します。そこでここでは、視線を誘導する細かなテクニックを7つ紹介します。
- 大小
- 数字の順番
- グルーピング
- 同形・同色
- グレーアウト
- 人物の目線
- 先細り効果
それぞれ詳しく見ていきましょう。
1. 大小
人間は最初に大きいものに着目し、そのあとに小さいものへ視線を移す傾向があります。つまりユーザーに注目してほしいものを他の要素より大きくすることで、視線を誘導できるのです。
画像や文字などの要素をどのようなサイズにするかを決めるときは「何を一番強調したいか」を基準にすると良いでしょう。
一方すべての文字が同じサイズ感の場合、ユーザーはどこに注目したら良いか分からなくなってしまいます。特に重要なものは大きく、そうでないものは小さくすることでユーザーに伝えたいことが伝わりやすくなるでしょう。
2. 数字の順番
要素に数字を振れば、ユーザーの視線を誘導できます。各要素がきれいに整列できていなくても、数字を振ればどの順番で目を通せばよいのかを直感的に理解できるのです。
とはいえ、最低限左から右や上から下のような流れは守って数字をふっていきましょう。何の脈絡もなく番号が振られていると、ユーザーに数字を探す手間をかけてしまうため、それ以上見てもらえなくなる可能性があるからです。
3. グルーピング
人は近くにあるものを同じ要素として認識する傾向があります。そのため、関連する要素は近くにまとめて配置するようにしましょう。
全ての要素を等間隔で並べるよりも、要素をグルーピングすることで直感的に理解しやすくなります。要素を配置する際は、要素同士のまとまりにも意味を持たせるようにするとより洗練されたデザインに近づくでしょう。
4. 同形・同色
人は、同じ形や同じ色を追いかける性質があります。つまり同じ系列の要素の色や形を揃えることで、ユーザーの視線を誘導できるのです。
また同形同職を意識すればデザイン全体としての統一感も演出することにもつながります。色や形は多用せず、それぞれに意味を持たせて使うようにしましょう。
5. グレーアウト
グレーアウトは選択肢を狭める際に使われます。ECサイトなど、ユーザーの操作が必要なWebページで多用される手法です。
出典：Apple公式サイト
選択肢として存在しているものの、現時点では選べない要素をグレーにしておけば「選択できない」ことを直感的にユーザーに伝えられます。
またユーザーの操作によって選択肢が解放される場合、グレーの選択肢を黒に戻せば「選択できるようになった」ことが分かりやすくなります。
6. 人物の目線
人は、人物が見つめている先に視線が向いてしまうことをレイアウトに活用する手法もあります。人物の写真やイラストの目線を注目させたい要素にむけることで、ユーザーの視線を効果的に誘導できるのです。
また人物が右を向いている場合は未来を連想させ、一方左を向いている場合は過去を連想させる効果があります。
このような細かなテクニックを活用すれば、微妙なニュアンスもユーザーに伝えられるでしょう。
7. 先細り効果
先細り効果とは、人は太い所から細いところに向かって視線が流れる傾向があることを活用した視線誘導の手法です。
ユーザーはサイズが大きい部分から読み始め、徐々にサイズが小さくなっていく方向へ読み進めることで視線を誘導できます。
左から右や上から下などの一般的な動き以外の方向へユーザーの視線を誘導したいときに、使える手法と言えるでしょう。
まとめ：グーテンベルクダイヤグラムをはじめとする視線誘導の技法を活用しよう！
以上、グーテンベルクダイヤグラムはユーザーの視線を効果的に誘導する考え方の一つです。それぞれ4つの領域に最適な要素を配置することで、伝えたいことを効果的に伝えられるのがグーテンベルクダイヤグラムを使う利点と言えます。
グーテンベルクダイヤグラムだけでなく取り扱う要素の性質に合わせて、Zの法則やFの法則などの視線誘導パターンを使い分けることも大切な考え方です。
なおFlowzではデジタル領域でのサービス設計、プロダクト開発の視点からお客様のビジネスをサポートしています。UXデザインを自社サービスでも活かしたい方は、ぜひFlowzにご相談ください！
