主要導線を先に決める (Primary Path)

「購入する」「キャンセル」「詳細を見る」「後で決める」「お気に入りに追加」——5つのボタンがすべて同じ大きさ・同じ色で並んでいる。ユーザーは「次に何をすべきか」がわからず、迷い、離脱します。

よくある失敗パターンは「すべての選択肢を平等に扱う」ことです。機能的には平等でも、ユーザーのゴール達成という観点では、すべての選択肢が等しく重要なわけではありません。「購入する」は主要導線（プライマリパス）であり、「キャンセル」は補助的な選択肢（セカンダリ）です。この違いをUIの視覚的階層で表現しないと、ユーザーは毎回「どれを押すべきか」を考えることになります。

主要導線が不明確なUIは、コンバージョン率を下げるだけでなく、ユーザーの認知負荷を高め、タスク完了時間を増加させます。「次のステップが明確なUI」は、ユーザーを迷わせず、ゴールへと自然に導きます。

1. 原則の定義

主要導線を先に決める（Primary Path）とは、ユーザーがゴールを達成するための最も重要な行動（プライマリアクション）を設計の最初に定義し、その行動を視覚的に最も目立つ要素（プライマリボタン・CTA）として配置することで、ユーザーを迷わずゴールへ導く原則。

本質は「UIは選択肢を提供するのではなく、次のステップを示すものだ」ということです。ユーザーに「どれを押せばいいか」を考えさせるUIは、設計が失敗しています。プライマリパスが明確なUIは、ユーザーが「次に何をすべきか」を考えることなく、自然にゴールへ向かって進めます。

2. いつ使うか（適用場面）

特に重要になるケース

• コンバージョンフロー: 購入・登録・申込みなど、ビジネスゴールに直結するフロー。プライマリアクション（「購入する」「登録する」）を視覚的に最も目立つ要素にする。
• 複数のアクションが存在する画面: 「保存」「削除」「キャンセル」「共有」など、複数のアクションが並ぶ画面。プライマリ・セカンダリ・デストラクティブの3段階で視覚的階層を作る。
• ランディングページ: 訪問者に最初に取ってほしい行動（CTA）を一つに絞り、視覚的に最も目立つ位置・デザインにする。
• オンボーディングフロー: 新規ユーザーが次のステップに迷わないよう、各画面に一つのプライマリアクションを配置する。

トレードオフが起きる場面

• 複数のユーザーセグメント: 異なるユーザーが異なるゴールを持つ場合（例：「購入したい人」と「比較したい人」）、一つのプライマリパスに絞れない場合がある。セグメントごとに異なるエントリーポイントを設ける。
• ビジネスゴールとユーザーゴールの競合: ビジネスが「有料プランへの誘導」を優先したいが、ユーザーは「無料で使い続けたい」場合。プライマリパスをどちらに設定するかは、倫理的な判断を伴う。

3. なぜ重要か（設計判断の核）

UIは「選択肢の羅列」ではなく、「次のステップへの案内板」だ。プライマリパスを定義しないUIは、地図のない迷路だ。

設計判断の基準

• 「この画面で、ユーザーに最も取ってほしい行動は何か？」→ その行動がプライマリボタン。他はすべてセカンダリ以下。
• 「プライマリボタンは、3秒以内に目に入るか？」→ 入らなければ、配置・サイズ・色を見直す。

優先順位の考え方

• 1. プライマリアクション（最優先）: ユーザーのゴール達成に最も直結する行動。1画面に1つ。最も目立つ色・サイズ・配置。
• 2. セカンダリアクション: プライマリの補助的な行動（「詳細を見る」「後で決める」など）。プライマリより目立たないデザイン。
• 3. デストラクティブアクション: 削除・キャンセルなど、取り消しが困難な行動。赤色・小さいサイズ・確認ダイアログで誤操作を防ぐ。

例外条件

• ダッシュボード・管理画面など、複数の等価なタスクが存在する画面では、単一のプライマリパスを強制しない。ただし、最も頻繁に使われるアクションを視覚的に強調する。

4. 具体の設計ルール（チェックリスト）

最低ライン（Must - これ守らないと危険）

これがないと、ユーザーは「次に何をすべきか」がわからず離脱します。

1画面に1つのプライマリボタンがあるか: 同じ視覚的重みのボタンが複数並んでいないか？プライマリアクションが視覚的に最も目立つか？
プライマリボタンとセカンダリボタンが視覚的に区別されているか: プライマリは塗りつぶし、セカンダリはアウトライン・テキストリンクなど、明確な視覚的差異があるか？
デストラクティブアクション（削除・キャンセル）がプライマリと区別されているか: 取り消しが困難な操作が、プライマリボタンと同じデザインになっていないか？

理想ライン（Better - できると強い/プロの品質）

「わかる」を超えて「迷わず進める」状態です。

プライマリボタンがファーストビューに収まっているか: スクロールしなくてもプライマリアクションが見えるか？特にモバイルで確認する。
ボタンのラベルが行動を示しているか: 「OK」「はい」ではなく「購入する」「登録する」のように、押した後に何が起きるかがわかるラベルになっているか？
プライマリパスを実際のユーザーで検証しているか: ユーザビリティテストで「次に何をしますか？」と聞いたとき、迷わずプライマリボタンを選ぶか確認しているか？

5. UI例

同じ「確認ダイアログ」でも、プライマリパスの定義の有無でユーザーの迷いは大きく変わります。

改善プロセス

1. プライマリアクションを決める: 「この画面でユーザーに最も取ってほしい行動は何か？」→「注文を確定する」がプライマリ。
2. 視覚的階層を作る: プライマリ（塗りつぶし・大）→ セカンダリ（アウトライン・中）→ テキストリンク（小）の3段階でデザインを差別化する。
3. ラベルを行動形で書く: 「OK」→「注文を確定する」、「No」→「キャンセル」のように、押した後に何が起きるかがわかるラベルにする。

6. 関連リンク

• 関連リファレンス（理論）: 認知負荷 (Cognitive Load), ヒックの法則 (Hick's Law)
• 用語集（定義）: 認知負荷, メンタルモデル
• 関連するUI原則（横）: 目的と制約を先に置く (Goals & Constraints First), 単純化 (Simplicity), 選択肢の最適化 (Choice Reduction)

7. まとめ

今日から直せる一手 担当しているサービスの主要なCVページ（購入・登録・申込み）を開いてください。プライマリボタンが3秒以内に目に入るか確認してください。入らなければ、今日中にボタンのサイズ・色・配置を見直してください。

チームに共有するなら一言 「1画面に1つのプライマリボタン。それだけで、ユーザーは迷わずゴールへ進める。」