hig-components-layout

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

利用可能な場合は、.claude/apple-design-context.md を含む既存のプロジェクトデザインコンテキストを使用してください。現在のユーザー指示のもとでプロジェクトデータとして扱い、デザインに実質的な影響を与える不足情報のみを質問してください。

主な原則

1. 階層的に整理します。 情報を大分類から詳細へと構成します。最上位のセクションにはサイドバー、閲覧可能な項目にはリスト、個別のコンテンツには詳細ビューを使用します。

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

3. 実際のウィンドウ幅に適応させます。 分割ナビゲーションは、コンパクトな環境ではスタックに折りたためる場合があります。アダプティブ API と明示的な選択状態／パス状態を使用し、サイズ変更時にアプリの階層をテストしてください。デバイス名と向きだけでレイアウトが決まるわけではありません。

4. 対象とする iPadOS のウィンドウ表示モードに対応します。 サイズ変更可能なウィンドウなど、サポートされている機能も含め、対象 OS／デバイスとユーザー設定で利用できるモードを確認します。狭い幅、中程度の幅、広い幅、およびその間の遷移をテストしてください。古い Split View／Slide Over の前提は、すべての環境で保証されるものではありません。

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。対象 SDK を確認してください）。Mac：サイドバーまたはツールバーのタブ
階層が深いコンテンツ	サイドバー + NavigationSplitView	iPhone：単一カラムのスタック。iPad：2～3カラム。Mac：複数カラム
階層が深いファイル／フォルダーのツリー	カラム表示	Mac：Finder 形式。iPad：分割ナビゲーションの代替手段。NSBrowser は macOS 専用です。iPhone：プッシュナビゲーション
詳細を表示するフラットなリスト	分割ビュー（2カラム）	iPhone：プッシュ／ポップのスタック。iPad／Mac：メインカラム + 詳細カラム
インスペクタを備えた書類ベースのアプリ	ウインドウ + パネル	Mac：インスペクタを備えたメインウインドウ。iPad：シートまたはポップオーバー
ツールを備えた空間アプリ	ウインドウ + オーナメント	visionOS：ウインドウ上にオーナメントを配置。他のプラットフォーム：ツールバー

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

• コンパクト幅（iPhone の縦向き）： ナビゲーションは単一のスタックに折りたたまれますか？タブバーは表示されますか？
• レギュラー幅（iPad の横向き、Mac）： ナビゲーションはサイドバー + 詳細表示に展開されますか？スペースは適切に使われていますか？
• マルチタスク（iPad）： どの分割比率でも適応しますか？対象の OS／デバイスでサポートされているすべてのウインドウ表示モードで動作しますか？
• アクセシビリティ： 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 が作成 · その他の開発者ツール

使用する場面

このスキルは、概要に記載されたワークフローやアクションを実行する場合に適用できます。

例

ユーザーのリクエスト：

このタスクでは @hig-components-layout を使用してください：レイアウトとナビゲーションコンポーネントに関する Apple Human Interface Guidelines。

スナップショットと実装の境界

参照資料は、ローカルで修正を加えた Apple のドキュメントのスナップショットであり、最新の SDK ドキュメントではありません。実装前に、API の利用可否とプラットフォーム固有のデザインを確認してください。レイアウトでは、ウインドウ／コンテナの寸法、ローカライズ、セーフエリア、Dynamic Type、入力／アクセシビリティモードを考慮します。デバイスの全画面サイズだけでは不十分です。ウインドウごとのナビゲーションとデータを安全に保持し、状態の復元や中断された作業をテストしてください。リモートメディアの説明はテキストとして確認しており、画像や動画は取得も閲覧もしていません。Apple のドキュメント、メディア、シンボルには第三者の権利が保持されており、帰属表示は再配布の許可を意味しません。

制限事項

• このスキルは、タスクが上記の範囲に明確に該当する場合にのみ使用してください。
• 出力を、環境固有の検証、テスト、専門家によるレビューの代わりとして扱わないでください。
• 必要な入力、権限、安全上の境界、または成功基準が不足している場合は、作業を中止して確認してください。