![レイアウトにおける視線の誘導─Z型・N型・F型|デザインの基礎知識|デザインのイロハ 第3回](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto,c_scale/https://www.ddc.co.jp/dtp/images/20181102-design-no-iroha-03-01.png)
新人デザイナー、シンコが先輩とともに一人前のデザイナーを目指す物語。
2人の掛け合いを見ながら、デザインの知識を紹介していきます。
みなさんもシンコと一緒に、新人デザイナーになってデザインを知ろう!
![先輩](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/20181102-design-no-iroha-03-19.png)
先輩
新人デザイナーシンコの先輩。
いつも丁寧に物事を教えてくれる。知らないこともある。
子供の頃はマジシャンに憧れていたらしい。
徹夜明けでテンションが高くなっているご様子。
![シンコ](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/20181102-design-no-iroha-03-20.png)
シンコ
先輩のもとでデザインを勉強中の新人。
目に見えるものを信じて疑わない。
だけど非常にカンが鋭い女の子。
昨夜はSNSで大喜利大会をして盛り上がっていたらしい。
![新人デザイナー シンコ](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-shinko-01.png)
おっはよーございまーす
ってあれ?誰もいない・・・
![←あっちだよ](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/20181102-design-no-iroha-03-02.png)
![新人デザイナー シンコ](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-shinko-01.png)
むむっ、こんなところに矢印が!
あっちだよ・・・?
![こっちだよ→](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/20181102-design-no-iroha-03-03.png)
![新人デザイナー シンコ](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-shinko-01.png)
むむむっ!
今度はこっちだよ??
![ギフトボックス](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/20181102-design-no-iroha-03-04.png)
![新人デザイナー シンコ](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-shinko-01.png)
こんなところに大きな箱が!
何が入っているのかな・・・?
よーし、開けてみ
・
・
・
・
・
・
・
・
・
・
・
・
![先輩登場!](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/20181102-design-no-iroha-03-05.png)
![先輩デザイナー](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-senpai-01.png)
ジャーン! 先輩でしたーっ!!
おはようシンコ!
![新人デザイナー シンコ](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-shinko-01.png)
よーっ!? って先輩ー!?
何やってるんですかーっ!?
![先輩デザイナー](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-senpai-01.png)
うむ! まずシンコ!
君はいま、矢印に誘導されてここまできたよね?
人は矢印に誘導されてしまう生き物・・・それはレイアウトにも言えることなんだ!
というわけで今回は「レイアウトにおける視線の誘導」について説明したいと思う!
![新人デザイナー シンコ](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-shinko-01.png)
先輩!・・・この説明の為にこんな面倒くさい演出を・・・!
今回はレイアウト関係の話ですが、前回の「レイアウトの4つの基本原則」をまだ読んでいない人は先に読んでおこう!
レイアウトにおける視線の誘導
![先輩デザイナー](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-senpai-01.png)
さーて「レイアウトにおける視線の誘導」について説明するぞー!
![新人デザイナー シンコ](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-shinko-01.png)
先輩、まず箱から出ましょう
![先輩デザイナー](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-senpai-01.png)
そうだな!(よいしょ)
レイアウトする時にまず気をつけたいことは、見る人の目の動きを考えてあげることなんだ
![新人デザイナー シンコ](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-shinko-01.png)
???目の動きを考えるとは???
![先輩デザイナー](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-senpai-01.png)
言葉で説明するよりイラストを見せた方がわかりやすいな!
ではこれを見て欲しい!
![ンイザデPTD](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/20181102-design-no-iroha-03-06.png)
![先輩デザイナー](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-senpai-01.png)
この言葉、なんて読むか分かるかい?
![新人デザイナー シンコ](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-shinko-01.png)
ん・・・い、ざ、で、PT・・・D?
聞いたことがない言葉ですね・・・
![先輩デザイナー](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-senpai-01.png)
そうだよなー
じゃあこれに矢印を加えてみよう
さあどうかな?
![ンイザデPTD←](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/20181102-design-no-iroha-03-07.png)
![新人デザイナー シンコ](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-shinko-01.png)
あっ、矢印が方向を指示してくれるようになって・・・
あーっ、「DTPデザイン」ですね?
![先輩デザイナー](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-senpai-01.png)
はい正解~!
普段、僕たちは文字を左から右に読むことが多いけど、矢印をつけることによってこの言葉を読むことができるようになったよね?
これがレイアウトにおける視線の誘導ってやつだ!
![新人デザイナー シンコ](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-shinko-01.png)
なるほど!
でも先輩、レイアウトでいちいち矢印をつけてたら変になるんじゃないですか?
![先輩デザイナー](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-senpai-01.png)
鋭い!
確かにデザインに矢印をつけて読む順番を案内していたら大変なことになってしまうなー
![運動会→](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/20181102-design-no-iroha-03-08.png)
![新人デザイナー シンコ](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-shinko-01.png)
わー! かっこ悪い!
いくらなんでもこれはかっこ悪い!! シンコちゃんの芸術センサーは何も反応しないです!
![先輩デザイナー](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-senpai-01.png)
これは極端な例だから真似しちゃダメだぞ!
デザインをするときはこんな矢印を使わなくても見る人が自然と順番通りに読めるようにレイアウトすることが重要になってくるんだ
![新人デザイナー シンコ](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-shinko-01.png)
えぇ~? なんか今回はすごく難しくなりそうな予感がします・・・わかるかなぁ?
![先輩デザイナー](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-senpai-01.png)
ところがどっこい! 意外と難しくないんだなー!
視線の誘導というものはあるものを利用することでとてもわかりやすくなるんだ
![新人デザイナー シンコ](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-shinko-01.png)
そのあるものとは・・・?
ゴクリ・・・
![先輩デザイナー](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-senpai-01.png)
そのあるものとは!
人間の心理効果ってやつを利用するのだーっ!!
![新人デザイナー シンコ](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-shinko-01.png)
し、し、し、心理効果ですってぇ・・・!?(わざとらしく)
視線の動き【Z型】
![先輩デザイナー](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-senpai-01.png)
人は左上から右下にかけて目を動かしちまう生き物なのさ・・・
![キリッ](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/20181102-design-no-iroha-03-09.png)
![新人デザイナー シンコ](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-shinko-01.png)
ちょっと何言ってるのかわかりません
![先輩デザイナー](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-senpai-01.png)
はっ!? すまん! ついキザになってしまった!
人間の心理で多くの人はモノを見るとき、左から右へ、上から下へ見てしまうものなんだ
それをざっくり矢印で表すとこうなる!
![Z型](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/20181102-design-no-iroha-03-10.png)
![新人デザイナー シンコ](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-shinko-01.png)
あぁ~! 見ますね!
広告や雑誌を見る時は大体こんな感じで見ますよワタシ!
![先輩デザイナー](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-senpai-01.png)
ババーン! これが視線の動き【Z型】ってやつだ!
Z型は横組みの文章を読む時の視線の動きでよく使われるよ
多くのレイアウトにはこのZ型を意識して作るんだ!
![新人デザイナー シンコ](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-shinko-01.png)
なるほど・・・ざっくりZでレイアウトですね?
![先輩デザイナー](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-senpai-01.png)
うーん!
その覚え方はよしておいた方がいいな!
視線の動き【N型】
![先輩デザイナー](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-senpai-01.png)
では次に視線の動き【N型】について!
こんな感じだ!
![N型](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/20181102-design-no-iroha-03-11.png)
![新人デザイナー シンコ](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-shinko-01.png)
N型の視線の流れ・・・
わかった! これは小説などに使われる縦組みの文章に使われるものですね!?
![先輩デザイナー](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-senpai-01.png)
大っ正っ解だ! シンコ!!
そう! N型は古くから日本で使われる縦組みの文章の時に使われる、右上から左下へ流れていく視線の流れなんだ
国語の教科書も縦組みだよね?
![新人デザイナー シンコ](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-shinko-01.png)
先輩、さっき人は左上から右下にかけて目を動かしちまう生き物なのさ・・・(キリッ)
とか言ってませんでした?
![先輩デザイナー](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-senpai-01.png)
むむっ! またまた鋭い!
・・・・・・・・・・・・・・・・・・
さっ、次は【F型】というものをを説明するぞ!
![新人デザイナー シンコ](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-shinko-01.png)
ああーっ! 逃げた・・・!
視線の動き【F型】
![F型](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/20181102-design-no-iroha-03-12.png)
![先輩デザイナー](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-senpai-01.png)
さてさてシンコ
視線の動き【F型】を説明したいと思うんだけど、すでにシンコはF型を表現している
いやむしろ出演しています!
![新人デザイナー シンコ](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-shinko-01.png)
えぇっ!? どういう事ですか!?
![先輩デザイナー](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-senpai-01.png)
答えはそう、読者のみなさんが今、この記事を見ているモニターやスマートフォンです・・・!!
![新人デザイナー シンコ](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-shinko-01.png)
ま、まさかこのブログ記事の読み方が、え、F型の視線の動き・・・!?
![F型!?](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/20181102-design-no-iroha-03-13.png)
![先輩デザイナー](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-senpai-01.png)
その通りさぁーーーー!
ホームページなどは構造上の特徴としてこのF型の視線誘導が多く使われている!
このブログの読み方も実はF型なのだー!
![新人デザイナー シンコ](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-shinko-01.png)
読者のみなさーーーーーん!
このブログ記事はF型の視線誘導ですってよーーーーーーーー!
![先輩デザイナー](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-senpai-01.png)
横組みのデザインにはZ型
縦組みにはN型
WEBにはF型
って感じで、作る用途に合わせて視線の動き【Z型・N型・F型】を意識するんだ
読みやすいレイアウトを作れるぞ!
![Z型/N型/F型](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/20181102-design-no-iroha-03-14.png)
大きさの視線誘導
![先輩デザイナー](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-senpai-01.png)
さて、視線の動き【Z型・N型・F型】を紹介したけど、他にも色々な視線の誘導方法があるんだ
例えばさっきのコレ!
![ンイザデPTD](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/20181102-design-no-iroha-03-15.png)
![新人デザイナー シンコ](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-shinko-01.png)
さっきのンイザデPTDですね
やっぱり逆だと読みづらいですね・・・
![先輩デザイナー](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-senpai-01.png)
僕たちは大きいものから小さいものに視線が流されやすいと言われていて、自然と大きいものから見てしまうんだなー
そこでこの文字の大きさを一部変えてみるとどうなるか!![小ンイザデPTD大](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/20181102-design-no-iroha-03-16.png)
![新人デザイナー シンコ](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-shinko-01.png)
おおお!? ついつい大きい文字から読んじゃいますね!
なんか読めちゃいそうです!
![運動会](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/20181102-design-no-iroha-03-17.png)
![新人デザイナー シンコ](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-shinko-01.png)
確かに! 一番大きい文字にまず目がいっちゃいますね!
大きさの差をつけることでも視線誘導ができるんですね!
![先輩デザイナー](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-senpai-01.png)
うむ! 作る内容によってやり方はいっぱいあるけど、この視線の誘導の基本をもとに読みやすいレイアウトを作ってほしいな!
今回はこれでおしまい!
![新人デザイナー シンコ](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-shinko-01.png)
先輩! 今回の視線の動き【Z型・N型・F型】ですけどいい覚え方を思いついちゃいました!
![先輩デザイナー](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-senpai-01.png)
へえー? どんなのだい?
![新人デザイナー シンコ](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-shinko-01.png)
【Z】ざっくり!
【N】ニワトリの!
【F】フライドチキン!
![【Z】ざっくり!【N】ニワトリの!【F】フライドチキン!](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/20181102-design-no-iroha-03-18.png)
![先輩デザイナー](https://res.cloudinary.com/yoshida-print/image/fetch/f_auto,q_auto/https://www.ddc.co.jp/dtp/images/face-senpai-01.png)
さっきからずっと考えてたな・・・?
(意外と覚えやすそう・・・そして美味しそう)