ナビゲーション · ナビゲーション
星座図・天体図風のサイトナビゲーション
夜空の星座と天体観測カタログを再構築したサイトナビゲーション。各ページを"恒星"、カテゴリを"星座"として配置し、現在地を北極星（Polaris）の脈動で示す、神秘的で詩的な尖った設計。
プレビュー
概要
人類は何千年ものあいだ、夜空のばらばらの光点を線で結び、星座という物語を与えてきました。星座は天文学的な実在ではなく、人間が記憶しやすいように作った「意味の地図」です。サイトナビゲーションを星座図として描くのは、この「無秩序な点を、覚えやすい形に結ぶ」という人類最古の情報デザインを借用する試みです。
効率の地図と、詩情の地図
サイト構造を可視化するナビゲーションには、二つの方向性があります。ひとつは路線図のような、インフラ的で効率を重視するアプローチ。もうひとつが、この星座図——神秘性と情緒を重視するアプローチです。同じ「全体を俯瞰させる地図」でも、訪問者に与える感情はまったく違う。星座図ナビは、ページへの遷移を「機能の選択」ではなく「星を選ぶ」という詩的な行為に変えます。
神秘性が「特別な体験」の枠を作る
夜空という舞台装置には、それだけで「特別なものを見ている」という感覚を喚起する力があります。脈動する北極星で現在地を示し、ページを恒星に、カテゴリを星座に見立てると、サイトの回遊そのものが小さな天体観測になる。高級ブランド、文学・詩のプラットフォーム、天文・科学メディアのように「神秘」や「物語性」が価値になる文脈で、この様式は強く効きます。
仕上げの判断軸
星の配置は完全な無秩序でも、機械的な格子でもなく、「星座らしい疎密のリズム」を狙うこと。重要なページを明るい一等星に、補助的なページを淡い星にして、光の強弱で階層を表現します。線（星座線）は引きすぎず、本当に意味のある繋がりだけを結ぶ。神秘性を優先する様式なので、緊急性や効率が最優先のサイト——ECの購入フローなど——には不向きです。
使いどころ
- 高級ブランド・ジュエリー・天文機材ブランド
- サイエンスメディア・天文台・プラネタリウム
- ポエトリー・文学系プラットフォーム
- 深い構造を持つコンテンツサイトの全体マップ
- 大規模なポートフォリオ・実績集の章立て可視化
このデザインの分類
- カテゴリ
- ナビゲーション
- スタイル
- ダーク / ミニマル / エレガント / エディトリアル / ラグジュアリー
背景と狙いどころ
AIへの指示文
プロダクトサイトの全体ナビゲーションを、星座図・天体観測カタログのフォーマットで作ってください。
要件:
- 配色: 深宇宙 #06070d / #0d1024 + 恒星白 #f8f4dc + 黄金 #f5b938 + ティール #4dd9ff + 薔薇 #ff5f8a。
- 全画面に微弱な多層ラジアル（青・薔薇・金）+ ランダムな星屑（radial-gradient を 12カ所、サイズと色を変えて点描）。body::before に固定。
- 上部バー: ブランド名「Astra」（イタリック大文字）+ サブ「OBSERVATORY」 / 右に天文表記（RA / DEC / MAG）。
- 中央見出し: 大型イタリック明朝（Cormorant Garamond / Hiragino Mincho ProN）「あなたの行き先は、夜空の中にある。」最後の語のみ立体直立。
- 星図ボックス（aspect 16:9）:
- 背景は微妙な radial gradient（中心薄明）
- SVG で星座線を描画（細い stroke、dashed accent）
- 主三角形 + 内部の補助線 + 末端への放射
- 黄金の点線で「推奨ルート」を示す
- 現在地（Polaris）に脈動円（SMIL animate r/opacity）
- 上に絶対配置の星ノード（10個）
- 各ノード = 円形 point + 名前（イタリック明朝）+ ローマ字ラベル（モノスペース）
- α/β/γ の階級でサイズを差別化（major/normal）
- twinkle アニメ（opacity + scale）+ orbit ring（dashed border 回転）
- hover で point が金色に発光、name が金色に
- 下部レジェンド: α MAJOR STAR / β BRIDGE / γ SATELLITE / ★ YOU ARE HERE の4区分を1pxボーダーで囲む。
- 装飾: 星屑（CSS radial-gradient point の集まり）、orbit リングのrotate animation。
- フォント: 見出し Cormorant Garamond italic、本文 Garamond / Hiragino Mincho、コード JetBrains Mono、サブ Helvetica Neue。
- JS不要、フルレスポンシブ（モバイルはノード配置を縦長に組み替え）。
バリエーション
星座カタログ書籍風
背景を黒紺ではなく古紙 #f3ead6、線を墨黒に反転。 見出しを古典書体（EB Garamond）に。星はインク刺繍風に。
SF・スタートレック風
ティール #4dd9ff 主体に振り切り、HUD ライク。マグネタイズドノードに置換。 フォントを Eurostile / Orbitron 系へ。
よくある質問
ノードを絶対配置するとレスポンシブが大変
星座線は SVG 一本で描く？
詩的すぎてビジネス用途に向かないのでは？
関連するデザイン
東京メトロ路線図風のサイトナビゲーション
東京メトロ・大江戸線などの路線図グラフィックを再構築したサイトナビゲーション。各カテゴリを"路線"、各ページを"駅"として見立て、駅ナンバリングや路線記号で迷わせない尖った設計。
すりガラス調の追従ナビゲーション
半透明のすりガラス越しに背景のパステルが透けて見える、カプセル型の追従ナビゲーション。スクロール時もコンテンツの世界観を壊さず、モダンなSaaSやプロダクトサイトの上部に向きます。
美術館展覧会ポスター風のヒーロー
国立美術館の特別展ポスターを再構築したヒーローセクション。明朝大型タイトル・赤の差し色・許可印・バーコードまで作り込み、「文化的権威」と「会期限定の希少性」を同時に演出する尖った設計。