技能 Apple HIG: Layout and Navigation Components
📦

Apple HIG: Layout and Navigation Components

安全

HIGナビゲーションパターンで適応型Appleアプリレイアウトを設計する

複数のAppleプラットフォーム向けアプリを開発するには、複雑なナビゲーションパターンとレイアウト適応を理解する必要があります。このスキルでは、サイドバー、スプリットビュー、タブバーなど、公式のApple Human Interface Guidelinesを提供し、アプリがプラットフォームの規則に従うことを保証します。

支持: Claude Codex Code(CC)
🥉 73 青铜
1

下载技能 ZIP

2

在 Claude 中上传

前往 设置 → 功能 → 技能 → 上传技能

3

开启并开始使用

测试它

正在使用“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(代替パターン)

安全审计

安全
v1 • 2/25/2026

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.

12
已扫描文件
1,169
分析行数
0
发现项
1
审计总数
未发现安全问题
审计者: claude

质量评分

45
架构
100
可维护性
87
内容
50
社区
100
安全
65
规范符合性

你能构建什么

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スペース規則を無視する

常见问题

サイドバーとタブバーのどちらを使用すべきですか?
3〜5つの同等のトップレベルセクションを持つ場合はiPhoneでタブバーを使用し、多くのセクションがある場合または深い階層ナビゲーションにはiPad、Macでサイドバーを使用してください。iPadOS 18+は.sidebarAdaptableをサポートしており、iPadでは自動的にサイドバー、iPhoneではタブバーを表示します。
レイアウトをiPhoneとiPadの両方で動作させるには?
NavigationSplitViewやSizeClass修飾子などの適応型コンポーネントを使用してください。コンパクト幅(iPhone)を最初にデザインし、その後、レギュラー幅(iPad/Mac)に展開してください。すべてのサイズクラス遷移でテストし、スキル内の適応チェックリストを使用してください。
タブバーで表示できるタブの最大数は?
iOSタブバーは最大5つのタブを表示できます。追加のアイテムは「More」セクションに入ります。5つ以上のトップレベルセクションが必要な場合は、サイドバーまたはネストされたナビゲーション階層での再構築を検討してください。
iPadマルチタスク(Split View、Slide Over)をサポートするには?
狭いから広いまでのすべてのスプリット比率でアプリをテストしてください。コンテンツが適切にリフローし、ナビゲーションが適応することを確認してください。固定寸法の代わりにオートレイアウトとサイズクラスを使用してください。参照:split-views.mdとwindows.md(マルチタスクガイダンス)
visionOSのOrnamentsとは何ですか?
Ornamentsは、Windowsに接続されたツールバーとコントロール用のvisionOS UI要素で、コンテンツを遮蔽しません。ウィンドウの端(上下左右)に表示されます。メインコンテンツを表示しながら永続的なコントロールにオーナメントを使用してください。参照:ornaments.md。
ナビゲーションコンポーネントにSwiftUIとUIKitのどちらを使用すべきですか?
SwiftUIは、NavigationSplitView、TabView、NavigationStackを提供し、サイズクラス変更を自動的に処理する組み込みの適応性を提供します。UIKitでは、UISplitViewControllerとUINavigationControllerでより手動作業が必要です。新規アプリの場合、特定のUIKit要件がない限り、SwiftUIを優先してください。