hig-components-layout

Apple HIG: レイアウトとナビゲーションのコンポーネント

質問する前に .claude/apple-design-context.md を確認してください。既存のコンテキストを使用し、まだカバーされていない情報についてのみ質問してください。

主要な原則

1. 階層的に整理する。 情報を広いカテゴリから具体的な詳細へと構造化します。トップレベルのセクションにはサイドバー、閲覧可能な項目にはリスト、個々のコンテンツには詳細ビューを使用します。

2. 標準的なナビゲーションパターンを使用する。 同等のセクション間のフラットなナビゲーションにはタブバー（iPhone）。深い階層ナビゲーションにはサイドバー（iPad、Mac）。情報アーキテクチャとプラットフォームにパターンを適合させます。

3. 画面サイズに適応する。 iPad での 3 カラムは iPhone では 1 カラムに折りたたまれます。自動適応にはサイズクラスと適応型 API（NavigationSplitView）を使用します。

4. iPad でのマルチタスキングをサポートする。 Split View、Slide Over、Stage Manager に適切に対応します。すべての分割比率とサイズクラスの遷移でテストします。

5. visionOS で空間的な一貫性を維持する。 共有空間内のウィンドウ、ボリューム、オーナメント。予測可能な位置に配置します。コンテンツを遮ることなくツールバーとコントロールにオーナメントを使用します。

6. オーバーフローするコンテンツにはスクロールビューを使用する。 離散的なコンテンツ単位にはページングを有効にします。適切な場合はプル・トゥ・リフレッシュをサポートします。セーフエリアを尊重します。

7. ナビゲーションを予測可能に保つ。 ユーザーは常に自分がどこにいるのか、どうやってそこに来たのか、どう戻るのかを知っているべきです。戻るボタン、パンくずリスト、明確なセクションタイトルを使用します。

8. システムコンポーネントを優先する。 UINavigationController、UISplitViewController、NavigationSplitView、TabView は、組み込みの適応性、アクセシビリティ、状態復元を提供します。

リファレンスインデックス

リファレンス	トピック	主な内容
sidebars.md	サイドバー	ソースリスト、選択状態、折りたたみ可能なセクション、iPad/Mac のパターン
column-views.md	カラムビュー	Finder スタイルの閲覧、カラムを通じた段階的な情報開示
outline-views.md	アウトラインビュー	展開可能な階層、開閉用三角、ツリー構造
split-views.md	スプリットビュー	2/3 カラムレイアウト、NavigationSplitView、適応的な折りたたみ
tab-views.md	タブビュー	セグメント化タブ、ページスタイルのタブ、macOS のタブグループ化
tab-bars.md	タブバー	下部タブバー（iOS）、バッジカウント、タブの最大数
scroll-views.md	スクロールビュー	ページング、スクロールインジケーター、コンテンツインセット、プル・トゥ・リフレッシュ
windows.md	ウィンドウ	macOS/visionOS のウィンドウ管理、サイズ変更、フルスクリーン、復元
panels.md	パネル	インスペクタパネル、ユーティリティパネル、フローティングパネル、macOS の慣例
lists-and-tables.md	リストとテーブル	プレーン/グループ化/インセットグループ化スタイル、スワイプアクション、セクションヘッダー
boxes.md	ボックス	コンテンツグループ化コンテナ、ラベル付きボックス、macOS のグループ化
ornaments.md	オーナメント	visionOS のツールバー添付、配置、可視性

ナビゲーションパターンの選択

アプリの構造	推奨パターン	プラットフォームへの適応
対等な最上位セクションが3～5個	タブバー	iPhone：画面下部のタブバー。iPad：サイドバー（.sidebarAdaptable、iPadOS 18以降）。Mac：サイドバーまたはツールバーのタブ
階層が深いコンテンツ	サイドバー＋NavigationSplitView	iPhone：単一列のスタック。iPad：2列または3列。Mac：複数列すべてを表示
階層が深いファイル／フォルダツリー	カラム表示	Mac：Finderスタイル。iPad：適応可能。iPhone：プッシュナビゲーション
詳細を表示するフラットなリスト	分割ビュー（2列）	iPhone：プッシュ／ポップスタック。iPad／Mac：プライマリ列＋詳細列
インスペクタを備えたドキュメントベースのアプリ	ウィンドウ＋パネル	Mac：インスペクタ付きのメインウィンドウ。iPad：シートまたはポップオーバー
ツールを備えた空間アプリ	ウィンドウ＋オーナメント	visionOS：ウィンドウ上のオーナメント。その他のプラットフォーム：ツールバー

レイアウト適応チェックリスト

• コンパクト幅（iPhoneの縦向き）： ナビゲーションは単一のスタックに折りたたまれますか？タブバーは表示されますか？
• レギュラー幅（iPadの横向き、Mac）： ナビゲーションはサイドバー＋詳細表示に展開されますか？スペースを有効活用していますか？
• マルチタスク（iPad）： どの分割比率にも適応しますか？Slide Overで動作しますか？
• アクセシビリティ： あらゆるサイズでDynamic Typeに対応していますか？VoiceOverの読み上げ順は論理的ですか？
• 向き： 縦向きと横向きの切り替えに合わせてコンテンツが再配置されますか？
• visionOS： ウィンドウは操作しやすい位置に配置されていますか？オーナメントは利用しやすいですか？奥行きに意味がありますか？

出力形式

1. アプリの情報アーキテクチャに基づく、推奨ナビゲーションパターンとその根拠。
2. ルートコンテナから下位へたどるレイアウト階層（例：TabView > NavigationSplitView > List > Detail）。
3. 対象プラットフォームとサイズクラスに応じた適応方法。
4. 各切り替え時のサイズクラスの挙動。

確認事項

1. アプリの情報アーキテクチャはどのようなものですか？（セクション、階層の深さ、最上位カテゴリ）
2. 最上位セクションはいくつありますか？
3. 対象プラットフォームはどれですか？
4. iPadでマルチタスクに対応する必要がありますか？
5. SwiftUIとUIKitのどちらを使いますか？

関連スキル

• hig-foundations -- レイアウトの間隔、マージン、セーフエリア、配置
• hig-platforms -- プラットフォーム固有のナビゲーション規則
• hig-patterns -- マルチタスク、フルスクリーン、起動のパターン
• hig-components-content -- レイアウトコンテナ内に表示されるコンテンツ

---

制作：Raintree Technology · その他の開発者ツール