視線の流れ：Z型・F型レイアウト

視線は「パターン」で動く

人の目は何もない状態では、ある程度予測可能なパターンで動きます。
このパターンを理解することで「見てほしい順番に情報を届ける」レイアウトが設計できます。

人は「左から右、上から下」という読み順の習慣を持っています。
アイトラッキング研究によって、テキストの多いページではFパターン、
画像・ビジュアル中心のページではZパターンに近い動きが確認されています。

Z型レイアウト

Z型の視線の流れは「左上 → 右上 → （対角線）左下 → 右下」です。
テキスト量が少なく視線を誘導したい場面（広告・バナー・LPのファーストビュー・チラシ・SNS投稿）に向いています。

この流れを踏まえると、左上にはロゴ・ブランド名、
右上にはサービス名・キャッチコピー、左下には説明・補足、
右下にはCTA（行動を促すボタン・申し込み情報）を置くと自然な視線誘導になります。

F型レイアウト

F型の視線の流れは「最初の行（左→右）→ 2行目（左→右、
短め）→ 左端を縦に流し読み」です。テキスト量が多くスキャン読みをする場面（ブログ・ニュースサイト・テキスト多めのLP・レポート）に向いています。

F型を意識する上で重要なのは、重要情報は必ず左側・上側に配置することです。
右端・下部は見落とされやすい場所です。各段落の冒頭（左端）に最重要キーワードを持ってくると読まれやすくなります。

どちらを選ぶか

コンテンツ量が少ない（バナー・チラシ・SNS）ならZパターン、
コンテンツ量が多い（記事・LP・資料）ならFパターンが適しています。

どちらでも共通のルールは「重要情報は左側・上側に置く」ことです。
右下は最後に見られる場所、またはそもそも見られない場所だと覚えておきましょう。

デザイナーが実際に活用するポイントを補足します。
Zパターンの場合は、最も伝えたいメッセージ（CTA・価格・キャッチコピー）を④の位置（右下）に置くのが定石です。
視線が①→②→③→④と流れたとき、最後に目に入るものが「行動を促す要素」であれば、
自然な誘導が生まれます。Fパターンの場合は、各段落の冒頭（左端の最初の1〜2語）にキーワードを置く「F型ライティング」と組み合わせることで、
スキャン読みでも要点が伝わるコンテンツになります。

まとめ

視線のパターンを理解すれば、「重要情報をどこに置くか」を論理的に決められます。
少ないコンテンツにはZ型、多いコンテンツにはF型を基本に、
左上・左端に重要情報を集める習慣をつけましょう。

NEXT STEP