視線誘導とデザイン
itsukinoblog樹－createの渡邊です。皆さんは桜の花見はいきましたか？私は奥さんと万博記念公園へ桜祭りの時期に行ってきました。天気も抜群で、桜も満開だったのでとても綺麗でした。そちらの方はまた別の記事で書かせていただこうと思いますが、今日は視線誘導とデザインについての記事を書こうと思います。
視線誘導とはサイトや紙媒体のチラシとかもそうですが、人間の目がどのように動くかに着目してデザインに落とし込んでいく考え方です。
視線誘導は作りたいサイトや言語で様々
一言に視線誘導と言いますと簡単なようですが、作るサイトや例えば広告チラシ（紙媒体）、言語によって考え方や使う法則が異なります。今日はその中でも代表的なZの法則、Fの法則、Nの法則、グーテンベルクダイヤグラムについて説明しようと思います。
なんだか難しそうに聞こえるかもしれませんが内容を読んでみると結構面白かったり、なるほどと思う部分があると思いますので是非最後までお付き合いください。
Zの法則
Zの法則は、ウェブサイトや紙媒体などの平面コンテンツ（横長）において、人間の視線が左上～右上～左下～右下を描いて移動する傾向が高いことを意識してデザインする考え方です。
どちらかと言えば横型長方形（パソコンや）、広告チラシ、ランディングページ、商品購入ページなどでよく見かけられるデザインの考え方です。もっとも最初に視線が行く左上に強いキャッチコピーやコーポレートサイトであればロゴデザインなどが配置されます。商品ページなどを例にすると右上や左下には商品の特徴や効能、機能、価格情報、その他レコメンド情報素子いて右下にはカートボタンが配置されます。
Fの法則
Fの法則は、どちらかと言えば文章が横に流れている一覧ページなどによくみられるデザインで、ブログ一覧、検索一覧がわかりやすい例でしょうか、スマホの縦型のデザインで、文章量が多い場合もこのケースが多いと思います。
こちらは、視線の動きが左上から下に下がり、左上から右へ又その下側の左から右へと移る視線の動きを利用しています。
個人的には、少し昔にはやった3カラムや２カラム時代のデザインに多かったような気がします。サイトで言えばトップページよりむしろ下層ページで使われる感じでしょうか
Nの法則
Nの法則は、特に縦型のデザイン（日本語を使った）コンテンツでよくみられるデザインの考え方です。
日本語の縦型の場合、右から左へと読み進めるため自然と右上～右下～左上～左下へと視線が動くのを利用したで残の考え方です。
必然的に強い要素が右上に配置されます。ホームページだけでなく縦書きのポスターやバナーデザインなどでも多く見られます。
グーテンベルクダイヤグラム
グーテンベルクダイヤグラムは先に説明したZの法則に近いものですが、新聞や書籍のデザインに関する法則であり、ユーザーの目がページ上で特定のパターンで移動することを示します。グーテンベルクダイヤグラムでは４つの領域に分割して考えます。
- 最初の視覚領域(上部左側)
- 強い休閑領域(上部右側)
- 弱い休閑領域(下部左側)
- 終着領域(下部右側)
このダイヤグラムを理解することで、ウェブサイトにおいてもコンテンツの配置を最適化し、ユーザーの注目を集めることが可能です。
今回は「Ｚの法則」、「Ｆの法則」、「Ｎの法則」、「グーテンベルクダイヤグラム」に絞って説明しましたが、その他にもグーグルが提唱するマテリアルデザインも視線誘導の考えがかかわっていますのでまた別の機会に記事に書こうと思います。一見何気なくデザインされているものでも実は色々と考えられデザイン設計されていることが分かったのではないでしょうか
樹－create｜豊中市（大阪府）の個人事業主様応援！お気軽にお問い合わせください。｜あいおいニッセイ同和損保 賠償総合保険加入済090-9895-2496受付時間 9:00-18:00 [ 土・日・祝日除く ]
お問い合わせ