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