wip: ナビゲーション設計ドキュメントを追加

モデルベースUIデザインにおけるナビゲーション設計の
基本概念と手法についてのドキュメントを作成中。

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: gn-t-k

docs/model-based-ui-design/navigation-design/README.md

@@ -0,0 +1,67 @@
+# ナビゲーション設計
+
+## ナビゲーション設計の目的
+
+モデルベースUIデザインにおける「ナビゲーション構造設計」は、UIにおいて適切な情報の粒度の変化を表現し、ユーザーを目的のコンテンツまで導く経路を形作ることを目的としています。UIの構成要素を「骨格」と「動き方」に例えるならば、ナビゲーション構造はこの骨格とその動き方にあたります。骨格をしっかりと設計することで、その後のUIの表層に近い部分（見た目や質感など）の設計も矛盾なく成り立たせることが可能になります。
+
+## ナビゲーション設計のプロセス
+
+モデルベースUIデザインでは、従来の「画面遷移図」や「サイトマップ」のようにUIの具体的な部品やレイアウトが決定した後にナビゲーションを設計するのではなく、レイアウトを決定するよりもずっと前の段階から着手することを推奨しています。これにより、レイアウトやコンテンツの変更があった際の手戻りを最小限に抑え、効率的な設計プロセスを実現できます。
+
+ナビゲーション設計は、主に以下の二段階に分けて進められます。
+
+### 1. 全体像を大まかに決定する設計
+
+この段階は、コンテンツ構造の設計と同時期に行われ、設計上の矛盾を解消することを目指します。成果物としては、ナビゲーションの全体的な流れを示す図表が考えられます。
+
+### 2. 詳細な状態遷移を決定する設計
+
+この段階は、レイアウトなどの詳細を決定する際に着手します。
+
+## 「画面」単位から「ビュー」単位への認識の転換
+
+ナビゲーション設計において、UIを「画面」という単位で捉えることは曖昧さを生じさせ、設計の品質低下や設計者間の認識齟齬の原因となるため、モデルベースUIデザインでは「ビュー」単位で考えることを推奨しています。
+
+「画面」という言葉は、WebサイトのHTMLページ、無限スクロールのような動的な表示、あるいはモーダルビューなど、文脈によって指す範囲が不明瞭です。モバイルアプリでは、Webのような静的な構造単位が少なく、物理的なスクリーンを指すこともあり、さらに曖昧になります。
+
+対して「ビュー」は、グラフィックツールのレイヤーのように、スクリーン上に現れるすべての可視要素を指す概念です。これらは入れ子構造を取りながらUIを構成します。とくに「単位ビュー」は、ユーザーが意味のあるまとまりとして認識できる範囲や、スクリーン幅の影響を受ける、またはナビゲーション時に表示が切り替わる範囲として定義されます。
+
+## ナビゲーションの基本構造
+
+### 概要一覧・詳細表示（List-Detail / Main-Detail）
+
+### 兄弟間のナビゲーション
+
+## ナビゲーションの表現パターン
+
+### ドリルダウン
+
+### ステップ型
+
+### フラット型
+
+### ピラミッド型（ビルディング型）
+
+### ハブ・アンド・スポーク
+
+### オーバーレイ（Overlay）
+
+### 状態変化・入れ替え型
+
+### コンテンツ主体の非線形ナビゲーション
+
+## ナビゲーションを補足する仕組み
+
+## ナビゲーション設計の基本方針と工程
+
+### 1. 目標地点を1つか2つに設定する
+
+### 2. 多重度からのナビゲーションパターン検討
+
+### 3. 芋蔓式に概念オブジェクトを釣り上げるイメージで考える
+
+### 4. 二方向からのナビゲーション設計と挟み込み戦術
+
+## その他のナビゲーション設計テクニック
+
+## 避けるべき設計の落とし穴