レイアウトにおける視線の誘導─Z型・N型・F型｜デザインの基礎知識｜デザインのイロハ 第3回

さーて「レイアウトにおける視線の誘導」について説明するぞー！

そうだな！（よいしょ）

レイアウトする時にまず気をつけたいことは、見る人の目の動きを考えてあげることなんだ

言葉で説明するよりイラストを見せた方がわかりやすいな！

ではこれを見て欲しい！

この言葉、なんて読むか分かるかい？

そうだよなー

じゃあこれに矢印を加えてみよう

さあどうかな？

はい正解～！

普段、僕たちは文字を左から右に読むことが多いけど、矢印をつけることによってこの言葉を読むことができるようになったよね？

これがレイアウトにおける視線の誘導ってやつだ！

鋭い！

確かにデザインに矢印をつけて読む順番を案内していたら大変なことになってしまうなー

これは極端な例だから真似しちゃダメだぞ！

デザインをするときはこんな矢印を使わなくても見る人が自然と順番通りに読めるようにレイアウトすることが重要になってくるんだ

ところがどっこい！　意外と難しくないんだなー！

視線の誘導というものはあるものを利用することでとてもわかりやすくなるんだ

そのあるものとは！

人間の心理効果ってやつを利用するのだーっ！！

人は左上から右下にかけて目を動かしちまう生き物なのさ・・・

はっ！？　すまん！　ついキザになってしまった！

人間の心理で多くの人はモノを見るとき、左から右へ、上から下へ見てしまうものなんだ

それをざっくり矢印で表すとこうなる！

ババーン！　これが視線の動き【Z型】ってやつだ！

Z型は横組みの文章を読む時の視線の動きでよく使われるよ

多くのレイアウトにはこのZ型を意識して作るんだ！

うーん！

その覚え方はよしておいた方がいいな！

では次に視線の動き【N型】について！

こんな感じだ！

大っ正っ解だ！　シンコ！！

そう！　N型は古くから日本で使われる縦組みの文章の時に使われる、右上から左下へ流れていく視線の流れなんだ

国語の教科書も縦組みだよね？

むむっ！　またまた鋭い！

・・・・・・・・・・・・・・・・・・

さっ、次は【F型】というものをを説明するぞ！

さてさてシンコ

視線の動き【F型】を説明したいと思うんだけど、すでにシンコはF型を表現している

いやむしろ出演しています！

答えはそう、読者のみなさんが今、この記事を見ているモニターやスマートフォンです・・・！！

その通りさぁーーーー！

ホームページなどは構造上の特徴としてこのF型の視線誘導が多く使われている！

このブログの読み方も実はF型なのだー！

横組みのデザインにはZ型

縦組みにはN型

WEBにはF型

って感じで、作る用途に合わせて視線の動き【Z型・N型・F型】を意識するんだ

読みやすいレイアウトを作れるぞ！

さて、視線の動き【Z型・N型・F型】を紹介したけど、他にも色々な視線の誘導方法があるんだ

例えばさっきのコレ！

僕たちは大きいものから小さいものに視線が流されやすいと言われていて、自然と大きいものから見てしまうんだなー

ふふーん、そうだろう？

レイアウトではタイトル文字など一番目立たせたいものを大きくすることで、そこをスタート地点として読ませることができるんだ！

うむ！　作る内容によってやり方はいっぱいあるけど、この視線の誘導の基本をもとに読みやすいレイアウトを作ってほしいな！

今回はこれでおしまい！

へえー？　どんなのだい？

さっきからずっと考えてたな・・・？

（意外と覚えやすそう・・・そして美味しそう）