Works/Journal

実績ご紹介/スタッフブログ 視線誘導のABC、ならぬZFN。

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

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

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




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

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

1. Zの法則
2. Fの法則
3. Nの法則



✏︎ 1.「Z」の法則

Zの法則は、チラシなどの紙媒体で、下図のように紙面を左上→右上→左下→右下…というふうに「Z」の字に見ていくという法則です。

なのでこの導線上に伝えたい情報を置くと効果的。と言われています。
紙媒体のみならず、自販機やスーパー・コンビニなどの商品の陳列などにもこの法則が使われています。


✏︎ 2.「F」の法則

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

なので、ただただフラットに情報を流してしまうのではなく、この導線上に“見出し”や“写真・グラフィック”などの【アイキャッチ要素】を置くことが大切です。


✏︎ 3.「N」の法則

正確には「逆N」の法則ですが、こちらは“縦書きの文化”特有の法則かもしれません。わかりやすく言えば、「英語の教科書は“Zの法則”、国語の教科書は“逆Nの法則”。」といった感じでしょうか。
当社創業当時の会社案内や看板も、この法則が当てはまります。

え?社向一?

いえいえ、“逆Nの法則”で「株式会社 一向社」です。(この看板、個人的にはめっちゃ味があって好きです。)
戦前はこのように、横書きでも“逆Nの法則”を用いて、右から左へ表記していました。
【レトロでモダンな感じのデザイン】の演出として、ごくたまにこの法則を用いて文字をレイアウトしたりしますが、だいたいは「読みにくい!」と却下されます(笑)


✏︎ さいごに

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

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



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




Tags
#視線誘導#情報伝達#レイアウト術#ハウツー#ほんださすけ#Zの法則#Fの法則#逆Nの法則
  • このエントリーをはてなブックマークに追加

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