Category · ナビゲーション
ナビゲーションのデザイン例とAIプロンプト
ヘッダーやグローバルナビ、ハンバーガーメニュー、スクロール追従ナビなど、サイト全体を回遊させる要素のAIプロンプト集。
ナビゲーションについて
サイト全体の回遊率を決める基盤UI。ヘッダーのグローバルナビ、モバイル用ハンバーガー、スクロール追従型、メガメニュー、サイドバー型など、サイト規模と用途で最適解が変わります。検索エンジンも内部リンク構造として評価するため、SEO観点でも重要です。2クリック以内に目的ページへ到達できる設計が基本。階層メニューは今いる枝しか見せないので、全体像を持たせたい大型サイトでは地図型の可視化が効きます。状態は色だけでなくウェイトや記号でも区別してください。
aria-current を併記します。よく使われる場面
- 大型コーポレートサイトのメガメニュー
- SaaSダッシュボードのサイドバー
- ECサイトのカテゴリドリルダウン
- メディアサイトの複数階層カテゴリ
- モバイルファーストなBtoCサービス
成功のポイント
- モバイルは親指の届く範囲にCTAを配置
- スクロール時に縮小して本文の邪魔をしない
- アクティブ項目は明示的にハイライトする
- 主要メニューは5-7個までに絞る
- ブランドロゴは必ずトップへの戻り導線にする
このカテゴリのデザイン
星座図・天体図風のサイトナビゲーション
夜空の星座と天体観測カタログを再構築したサイトナビゲーション。各ページを「恒星」、カテゴリを「星座」として配置し、現在地を北極星（Polaris）の脈動で示す、神秘的で詩的な尖った設計。
東京メトロ路線図風のサイトナビゲーション
東京メトロ・大江戸線などの路線図グラフィックを再構築したサイトナビゲーション。各カテゴリを「路線」、各ページを「駅」として見立て、駅ナンバリングや路線記号で迷わせない尖った設計。
すりガラス調の追従ナビゲーション
半透明のすりガラス越しに背景のパステルが透けて見える、カプセル型の追従ナビゲーション。スクロール時もコンテンツの世界観を壊さず、モダンなSaaSやプロダクトサイトの上部に向きます。