Apple HIG: Layout and Navigation Components
HIGナビゲーションパターンで適応型Appleアプリレイアウトを設計する
複数のAppleプラットフォーム向けアプリを開発するには、複雑なナビゲーションパターンとレイアウト適応を理解する必要があります。このスキルでは、サイドバー、スプリットビュー、タブバーなど、公式のApple Human Interface Guidelinesを提供し、アプリがプラットフォームの規則に従うことを保証します。
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「Apple HIG: Layout and Navigation Components」を使用しています。 インスペクターパネルを持つドキュメントエディタを開発しています。サイドバーとパネルのどちらを使用すべきですか？
期待される結果:
インスペクターパネルを持つドキュメントエディタには、macOSでパネル（サイドバーではなく）を使用してください。サイドバーはセクション間の主ナビゲーション用であり、パネルはメインコンテンツを補完するセカンダリコントロールとプロパティ用です。iPadでは、インスペクターをポップオーバーまたはシートとして表示します。参照：panels.md（インスペクターパターン）、sidebars.md（主ナビゲーションパターン）
「Apple HIG: Layout and Navigation Components」を使用しています。 トップレベルセクションが6つある場合、タブバーをどのように処理しますか？
期待される結果:
iOSタブバーは最大5つの表示可能なタブをサポートします。6つのセクションがある場合は、追加のセクションに「More」タブを使用してください。ただし、6つのトップレベルセクションが、iPadでのサイドバーまたはネストされたナビゲーションで再構築する機会を示しているかどうかを検討してください。iPadOS 18+では、.sidebarAdaptableを使用して、iPadでは自動的にサイドバー、iPhoneではタブバーを表示できます。参照：tab-bars.md（タブ数ガイダンス）、sidebars.md（代替パターン）
セキュリティ監査
安全This skill contains only documentation markdown files referencing Apple Human Interface Guidelines. All 768 static analysis findings are false positives: backtick patterns are markdown code blocks with API names, URLs link to official Apple Developer documentation, and cryptographic/C2 keywords are spurious text matches in design documentation. No executable code, network calls, or system commands present.
品質スコア
作れるもの
iOSアプリナビゲーションデザイン
初めてiPadアプリを開発する開発者が、ナビゲーションにタブバーとサイドバーのどちらを使用するか決定する必要があります。このスキルでは、各パターンをいつ使用するか、NavigationSplitViewがサイズクラス間でどのように適応するかを説明します。
クロスプラットフォームレイアウト戦略
iPhone、iPad、Macでローンチするチームは統合されたナビゲーション戦略を必要とします。このスキルは、レスポンシブレイアウトを計画するための適応チェックリストとパターン選択テーブルを提供します。
visionOSスペースレイアウト
初めてvisionOSアプリを作成する開発者は、Windows、Volumes、Ornamentsを理解する必要があります。このスキルでは、空間的配置とオーナメント接続パターンを説明します。
これらのプロンプトを試す
ホーム、検索、ライブラリ、設定の4つのメインセクションを持つアプリを開発しています。iPhoneとiPadでどのナビゲーションパターンを使用すべきですか？
アプリではiPadで3カラムレイアウトを使用していますが、iPhoneでは崩れます。NavigationSplitViewを使用してどのように適応させるべきですか？
macOSサイドバーとiPadサイドバーの違いは何ですか？各パターンをいつ使用すべきですか？
iPadアプリがSplit View、Slide Over、Stage Managerをサポートする必要があります。テストすべきサイズクラス遷移と、それらを処理する方法は？
ベストプラクティス
- 質問する前に既存のapple-design-context.mdを必ず確認する - 既に使用可能な情報を使用する
- 情報構造の深さに応じてナビゲーションパターンを一致させる：浅い構造にはタブバー、深い階層にはサイドバー
- すべてのサイズクラス遷移とiPadマルチタスク比率でレイアウト適応をテストする
回避
- 深い階層により良い対応ができる場合にiPadでタブバーを使用する
- コンパクトvsレギュラーサイズクラスに適応しない固定幅レイアウトを構築する
- Apple Vision Proをターゲットにする際にvisionOSスペース規則を無視する