デザインする際に意識する視線の流れ「Z型・F型・N型」の法則

デザイナーではない人がホームページやチラシを作ると、どうしても「視線の流れが考慮されていない」レイアウトになりがちです。

ホームページやチラシ、バナー広告、アイキャッチ画像を作る際は、人がどのように視線を動かすのかを理解しておくと印象に残りやすいデザインになります。

人の視線の動き「Z型・F型・N型」の法則

代表的な視線パターンは「Z型」「F型」「N型」の3種類です。

Z型の法則

• 視線が「Z」を描くように、左上 → 右上 ↓ 左下 → 右下へ動く
• 主にチラシやカタログ、ランディングページ、デザイン性の高いトップページに使われる
• 全体の流れを把握しやすく、キャッチコピーやお申し込み方法などを自然に目に入れられる

印刷物を作る際は、基本的にZ型でレイアウトすることが多いです。デザイン性が高いものはZ型にすると見てもらいやすくなります。

F型の法則

• 視線が「F」を描くように、上部を横に → その下を横に → 左端を縦 ↓ に流す
• 主にブログやニュース記事などテキストメインのページで使われる
• 読者は自分に必要な部分だけを拾いやすく、見出しや重要な情報は左寄せにすると読みやすくなる

ブログ記事一覧などは、典型的なF型になります。私のブログ記事一覧もよく見られていますが、あえてF型になるようにレイアウトしています。そのほうが読者が取捨選択をしやすくなります。

N型の法則

• 視線が「N」を描くように、左上 ↓ 右上 ↑ 斜めに左下 ↓ 右下へ動く
• 新聞・雑誌・教科書・漫画など、情報量が多く順を追って読ませたい場面に適している
• 中吊り広告やアイキャッチなど、全体をまんべんなく読ませたい場合に使うと効果あり

N型にする場合は、情報量が多い他に、背景画像を活かしたい（空間を活かしたい）時にも使います。「秋山と喋ってヤロー会」のアイキャッチ画像は画像を活かしたいので、N型にしています。

ホームページ・バナー・アイキャッチの使い分け

ホームページ・バナー広告・アイキャッチ画像を作る際は、「Z型」「F型」「N型」を使い分けます。

ホームページ

• トップページは「Z型」を意識し、全体の流れを自然に掴ませる
• 記事ページは「F型」を意識し、タイトルや見出し、リストを左に寄せ、流し読みでも理解できるようにする

バナー広告

• 一瞬で伝えたいなら「Z型」や「N型」がおすすめ
• 視線の流れに沿って「タイトルや画像 → 補足情報 → 導線へのリンク」を配置すると反応があがりやすい

アイキャッチ画像

• 文章と画像を組み合わせてデザインするなら「Z型」か「N型」
• 強調したいフレーズやキーワードを視線の動く上に置くと印象に残りやすい

---

どんなに良い内容でも「見づらい」「読みづらい」デザインでは見てもらえませんし、読んでもらえません。

逆に、視線の流れを整えるだけで、人の反応は確実に変わります。

ホームページやバナー、アイキャッチ画像を見てもらうために、視線の動きを意識して「Z型・F型・N型」を意識してレイアウトしてください。

画像のレイアウトや文章の構成まで教えているので、人に見てもらえるデザインになっていない、人に読んでもらえる構成になっていないなら、いつでも相談してください。

デザイナー歴20年以上の私が人の視線を考慮しながら、あなたのホームページや画像を一緒に整えますよ。

→ あなただけの「今すぐできる改善ポイント」を個別相談で提案します

→ あなたの頑張りが成果に繋がらない理由はこちらへ