ユーザーが新しい画面を開いたとき、「次にどこを見ればいいのか」「どこをクリックすれば進めるのか」が瞬時に分からないUIは、道案内のない巨大な交差点のようなものです。 ユーザーの視線があちこちへ飛び交い（ピンボール現象）、重要なメッセージやCTA（Call to Action）が見落とされます。結果として「探すのが面倒だから離脱する」という最悪の結末を招きます。
1. 原則の定義
「ユーザーの自然な眼球運動のパターン（ZパターンやFパターン）を予測し、要素の配置や視覚的なウェイト（重み）を使って、見せたい情報の順序通りに視線をコントロールする設計。」
本質は「ユーザーに無意識のレールを敷くこと」です。ユーザー自身は「自分の意志で画面を見ている」と感じていても、実際はデザイナーが意図した順序（見出し→画像→説明文→ボタン）で情報を消費していく状態を作ります。
2. いつ使うか（適用場面）
特に重要になるケース
- ランディングページ（LP）やヒーローエリア: 最初の数秒で「何のサービスか」を理解させ、コンバージョン（登録や購入）へ導きたい時。テキスト量の少ないページではZパターンが有効。
- テキスト量の多い一覧画面や記事ページ: 記事のリストやブログ記事など、テキストをスキャン・流し読みさせる時はFパターンが有効。
- 料金表や比較画面: 「最も売りたいプラン」へ自然と視線を集めたい時。
トレードオフが起きる場面
- 視線誘導 vs 情報の網羅性: 強い視線誘導（巨大な画像や派手なボタン）を作ると、その他の細かい情報（規約や補足）が読み飛ばされるリスクが高まります。あえて均等に読ませたい場合は、視線の「引っ掛かり」を減らす必要があります。
3. なぜ重要か（設計判断の核）
視線は「惹きつける」だけでなく、目的の場所まで「運ぶ」ものでなければならない。
設計判断の基準
- 「この画面を開いた瞬間、一番最初にどこに目がいくか？」→ その視線の「出発点（Focal Point）」が意図した場所（タイトルやメイン画像）になっているか。
- 「出発点から、最終的なゴール（ボタン）まで視線が途切れないか？」→ 途中に「視線を塞いでしまうノイズ（不要な線や強すぎる別の要素）」がないか。
優先順位の考え方
- 1. 出発点の創造: 最もコントラストが強く、大きな要素（画像や大見出し）を配置し、最初の視線を固定する。
- 2. レールの敷設: 人の顔（視線）、矢印、斜めのラインなど「方向性」を持つ要素を使い、次の情報へ視線をパスする。
- 3. ゴールの明示: 視線の終着点に、最も目立つCTAボタンを配置する。
4. 具体の設計ルール（チェックリスト）
最低ライン（Must - これ守らないと危険）
ここをクリアしていないと、ユーザーが画面上で迷子になります。
理想ライン（Better - できると強い/プロの品質）
UXをさらに高め、「読ませる」のではなく「自然に伝わる」UIにするための基準です。
5. UI例
視線が散らばるLP（ピンボール現象）と、Zパターンで見事にアクションへ誘導するLPの違いです。
改善プロセス
- コンテンツのプライオリティ付け: その画面でユーザーに「絶対に見てほしいもの」「その次に見てほしいもの」「最後に押してほしいボタン」の順序を決める。
- 型（パターン）の決定: 情報が少なめのLPなら視線をジグザグに落とす「Zパターン」、テキスト情報が多いブログや記事なら左から右へ読む「Fパターン」のレイアウト型を採用する。
- 視線のベクトル調整: 人の顔の向き、矢印、または三角形などの要素を使って、ユーザーの視線を「次の要素」へと物理的にパスする（向かわせる）調整を行う。
6. 関連リンク
※【注意】自動リンクのポップオーバーが暴発するのを防ぐため、このセクション内の見出し（ラベル）には「UX」などの用語集登録キーワードを含めないでください。（例：✕ UXリファレンス → ◯ 関連リファレンス）
- 関連リファレンス（理論）: 視覚的階層, F型パターン, Z型パターン
- 用語集（定義）: F型パターン, Z型パターン
- 関連するUI原則（横）: 整列 (Alignment), 近接 (Proximity)
7. まとめ
今日から直せる一手 トップページで人物写真を使っている場合、その人物が「画面の外」を向いていないか確認してください。もし外を向いていたら、画像を左右反転させるだけで、視線がメインコピーやボタンに向かい、コンバージョン率が改善する可能性があります。
チームに共有するなら一言 「ユーザーの視線を迷わせるな。美しいだけのUIは、標識のない交差点と同じだ。」
