視線誘導のABC、ならぬZFN。

  • このエントリーをはてなブックマークに追加

最近、作業用BGMとして『Get Wild(globeバージョン)』ばかり聴いているので、カバー画像がシティーハンター風になってしまいました。ikkoshaのチーフデザイナーほんださすけです。

今回は、僕たちがデザイン・レイアウトをする上で常に意識している、“人の視線の動き”についてのお話です。




人の視線の動きには法則がある


紙媒体やWebに関わらず、普段の生活の中で多くの情報が目に飛び込んできます。
僕たちはその情報を、だいたい以下の3つの法則でもって捉えています。

①Zの法則
②Fの法則
③Nの法則



①「Z」の法則


Zの法則は、チラシなどの紙媒体で、下図のように紙面を左上→右上→左下→右下…というふうに「Z」の字に見ていくという法則です。
なのでこの導線上に伝えたい情報を置くと効果的。と言われています。
紙媒体のみならず、自販機やスーパー・コンビニなどの商品の陳列などにもこの法則が使われています。


②「F」の法則


こちらの法則は、Webサイトで重要視されている法則です。
紙媒体の場合はどうしても紙面に限りがありますが、Webの場合、言ってしまえば紙面に限りはなく、情報をズラーッと下へ下へ流すことができます。そのため、紙媒体と比べると情報量が多くなる傾向にあります。
ですが、ユーザーはその情報の全てを追っているわけではなく、サーッと全体を流して見つつ【自分が得たい情報】を見つけた時に深く読み込む。という、下図のような視線の動きとなります。
なので、ただただフラットに情報を流してしまうのではなく、この導線上に“見出し”や“写真・グラフィック”などの【アイキャッチ要素】を置くことが大切です。


③「N」の法則


正確には「逆N」の法則ですが、こちらは“縦書きの文化”特有の法則かもしれません。わかりやすく言えば、「英語の教科書は“Zの法則”、国語の教科書は“逆Nの法則”。」といった感じでしょうか。
当社創業当時の会社案内や看板も、この法則が当てはまります。
え?社向一?
いえいえ、“逆Nの法則”で「株式会社 一向社」です。(この看板、個人的にはめっちゃ味があって好きです。)
戦前はこのように、横書きでも“逆Nの法則”を用いて、右から左へ表記していました。
【レトロでモダンな感じのデザイン】の演出として、ごくたまにこの法則を用いて文字をレイアウトしたりしますが、だいたいは「読みにくい!」と却下されます(笑)


さいごに


僕たちのようにデザインをお仕事としている人以外でも、最近ではSNSやブログで発信したり、予算の都合上、チラシなどの紙媒体を自分で作らなければならない。といったように“レイアウト”に関わる機会というのが身近になってきてるように思います。
そんな場合に、この“視線誘導のZFN”を思い出してもらえれば。と思います。

もし、紙媒体・Webなどの各種デザインレイアウトに関してXYZ(=あとがない)な方は、ぜひお気軽にご相談・お問い合わせください。



ご相談・お問い合わせはコチラ!
───────────────────




この記事を書いた人

ほんだ さすけPROFILE
できること:
悪いようにはいたしません。

自己紹介文:
チープデザイナー、四十路まっしぐら一児の父。
2000年9月からikkoshaにジョインし、ワークとライフのバランスがわからないまま、あれよあれよと社歴20年。
ロゴ制作が好きです。というよりも、ロゴ制作の過程で『お相手の想いに触れられる』ことが好きです。もちろん、チラシやポスター、パンフレットも好きですが、8P以上のページものになると集中力が持続できないので、すぐ周りの人を巻き込もうとします。
最近では、サイトページのデザインレイアウトもやっていますが、コーディングは社内や社外のコーダーさんに任せています。
  • このエントリーをはてなブックマークに追加

この記事を読んだ人は、こちらの記事も読んでいます。