デザインをきれいに分かりやすく見せるための視線誘導「Z」「F」「N」を知ろう!

こんにちは!現役デザイン学生のなかあ(@nakablog_)です!
デザインの大学に通いながらブログを書いたりTwitter発信をしたりしています。

今回はデザインをきれいに分かりやすく見せるコツとして、デザインの視線誘導「Z」「F」「N」とはなにか解説していきます!

デザイン勉強中以外の人でもこの法則を知っていると、簡単な画像制作だったり資料制作でおおいに役立つのでぜひ覚えていってください!

分かりやすくいくよ!

視線誘導とは

視線誘導とは読者に読んでほしい順番に視線を誘導するためのレイアウトのことを指します。
「Z」「F」「N」は読み手の視線の移動のかたちのことです。

視線誘導の目的

視線誘導する目的は、

  • より多くの情報を伝えるため
  • 不快感を与えないため

です。
そもそも発信する目的は「なんらかの情報を伝えたい」なので
あなたの伝えたいことはできれば100%相手に届いてほしいですよね。

この視線誘導がうまくできていないと見落としが生まれて、伝えたいことが伝えられなくなります。そして、どこから見ていいのか分からない、視線迷子の状態を読み手に与えてしまうと不快感に繋がります。

ちゃんと読んでもらう、不快感を与えないために「視線誘導」を意識しましょう。

視線誘導「Z・F・N」の前に

グーテンベルグ・ダイアグラムといって「均一に配置された情報を見る時、視線は左上から右下に流れていくように習慣づけられている」という考え方があり、基本的に視線は

左上→右下

に移動していきます。

これが前提にあります。

視線誘導「Z」

視線誘導の「Z」とは、読み手の視線が左上→右上→左下→右下の順に移動することです。
グーテンベルグ・ダイアグラムと同じで、情報の強度が均一であるときに効果が表れます。

主に紙媒体で雑誌や広告チラシなど「画像+テキスト」のレイアウトでよく使われています。
全体をよく読んでもらいたい、見てもらいたいときに使います。

視線誘導「F」

視線誘導の「F」とは、読み手の視線が左上→右上→左下→右下からの順に移動することです。
Zとあまり変わりませんが、左上から右上に視線を移動させたあと次は少し下に向かって視線を移動させてまた同じように左から右に見ていきます。
その後は下に向かって読み進めていくという特徴があります。

Webサイトでよく使われています。Twitterの画面とかもこれですね。

視線誘導「N」

視線誘導の「N」とは、読み手の視線が右上→右下→左上→左下からの順に移動することです。
日本語で書かれた新聞や雑誌、縦組みの書籍などによく使われています。

教科書でも使われているので結構慣れ親しんでいますよね。

まとめ

視線誘導する目的は、

  • より多くの情報を伝えるため
  • 不快感を与えないため

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

  • 視線移動は左上→右下がきほん

視線誘導「Z」

  • 主に紙媒体
  • 雑誌や広告チラシなど「画像+テキスト」のレイアウト

視線誘導「F」

  • 主にWeb媒体

視線誘導「N」

  • 日本語で書かれた新聞や雑誌、縦組みの書籍など

視線誘導の意識がないデザインは読み手にやさしくなく、不快感を与えます。
視線誘導を常に意識してデザインしていきましょう!

それでは!

Twitterやってます!フォロー待ってます~

タイトルとURLをコピーしました