expo-ios-hig

Expo iOS HIG ベストプラクティス

Apple のヒューマンインターフェイスガイドラインに準拠し、真にネイティブな使い心地を実現する iOS 26 アプリを Expo（React Native） で構築するための設計ルールです。ネイティブらしさと HIG への準拠に与える影響の大きさに応じて優先順位付けされた、8 カテゴリにわたる 46 のルールを収録しています。すべての例は TSX/Expo です。Swift ではなく、React Native と TypeScript での設計判断を扱います。

核となる考え方は、React Native アプリは JavaScript で iOS を再実装するのではなく、システムのナビゲーションコントローラー、システムコントロール、セマンティックカラー、SF Symbols、本物の触覚フィードバック、システムの共有シートなど、プラットフォームの機能を活用することでネイティブらしくなるということです。これらのルールでは、どの設計判断がネイティブらしさにつながり、どの判断がそれをひそかに損なうのかを説明します。

適用する場面

次のような場合に、これらのガイドラインを参照してください。

• Expo アプリで iOS の画面、ナビゲーション、リスト、フォームを構築またはレビューする
• ナビゲーションを選ぶ：Expo Router のネイティブスタックと JS スタック、ネイティブタブ、シート、モーダル、大きなタイトル
• コントロールを選ぶ：ネイティブの Alert、ActionSheetIOS、日付ピッカー、Switch、SF Symbols をいつ使うか、または @expo/ui に切り替えるか
• プラットフォームに合わせてスタイルを設定する：セーフエリア、ダークモード、セマンティックカラー、iOS の文字サイズスケール、余白、Liquid Glass
• 操作をネイティブらしくする：タッチターゲット、押下フィードバック、スワイプアクション、プルして更新、ジェスチャー、触覚フィードバック
• アニメーション、読み込み中・空の状態、アクセシビリティ、権限、起動時の仕上げを追加する

このスキルを使用しない場面

• @expo/ui コンポーネント API — @expo/ui/swift-ui コンポーネント、Host の境界、モディファイアの使い方については、expo-ui スキルを使用してください。このスキルでは、アプリをネイティブにするための設計判断を説明し、SwiftUI に切り替えるのが適切な場合に @expo/ui を案内しますが、その API を改めて説明するものではありません。
• クロスプラットフォームのデザインシステムそのもの — 共有する Unistyles テーマ、デザイントークン、バリアント駆動のコンポーネント API、iOS だけでなく web でもコンポーネントをネイティブらしくする方法については、expo-design-system スキルを使用してください。このスキルは iOS のネイティブらしさを扱い、もう一方は 2 つのフロントエンドで共有するトークンとコンポーネントのアーキテクチャを扱います。
• ネイティブ Swift / SwiftUI — ネイティブ Swift のコードベースで HIG に準拠する方法については、ios-hig または ios-design を使用してください。このスキルの例はすべて React Native/TSX です。
• Android — これらのルールは iOS の慣習を対象としています。Android ではプラットフォームに応じたコードを使用して Material に準拠させ、iOS の慣習を適用しないでください。

優先度別のルールカテゴリ

優先度	カテゴリ	影響度	接頭辞
1	ネイティブナビゲーションアーキテクチャ	CRITICAL	nav-
2	ネイティブコンポーネントの忠実度	CRITICAL	native-
3	レイアウトと適応性	HIGH	layout-
4	タッチ、ジェスチャー、触覚フィードバック	HIGH	touch-
5	ビジュアルシステムと Liquid Glass	HIGH	visual-
6	アニメーションとフィードバック	MEDIUM-HIGH	motion-
7	アクセシビリティ	MEDIUM-HIGH	acc-
8	システム連携と仕上げ	MEDIUM	system-

クイックリファレンス

1. ネイティブナビゲーションアーキテクチャ（CRITICAL）

• nav-native-stack — 画面階層には Expo Router のネイティブ Stack を使用する
• nav-native-tabs — 最上位のセクションにはネイティブタブを採用する
• nav-large-titles — 最上位の画面では大きなタイトルを有効にする
• nav-sheet-detents — 副次的なタスクは detent を指定したシートとして表示する
• nav-push-vs-present — 階層構造にはプッシュを、独立したタスクには表示を使用する
• nav-search-in-header — 検索をナビゲーションバーに配置する
• nav-system-back — システムの戻るボタンとスワイプで戻るジェスチャーを維持する

2. ネイティブコンポーネントの忠実性（CRITICAL）

• native-avoid-material-ui — iOSではMaterial Designのコンポーネントキットを避けます
• native-sf-symbols — アイコンにはSF Symbolsを使用します
• native-system-alert — 確認にはネイティブのアラートを使用します
• native-action-sheet — アクションの選択にはアクションシートを使用します
• native-datetime-picker — ネイティブの日付と時刻のピッカーを使用します
• native-switch-toggle — ブール値の設定にはプラットフォームのSwitchを使用します

3. レイアウトと適応性（HIGH）

• layout-safe-area-insets — セーフエリアコンテキストを使用してセーフエリアのインセットを尊重します
• layout-edge-to-edge — スクロール可能なコンテンツを半透明のバーの下まで広げます
• layout-keyboard-avoidance — キーボードの上に入力欄が表示されるようにします
• layout-dark-mode-semantic — アクティブなカラースキームに基づいて色を設定します
• layout-content-inset-under-bars — リストのコンテンツをタブバーとホームインジケーターの先までインセットします
• layout-readable-width-ipad — iPadや大画面では読みやすい幅に制限します

4. タッチ、ジェスチャー、触覚フィードバック（HIGH）

• touch-hit-target — タッチターゲットを少なくとも44ptにします
• touch-pressable-feedback — すべてのコントロールに即時の押下フィードバックを与えます
• touch-swipe-actions — リスト行にスワイプアクションを用意します
• touch-pull-to-refresh — 引っ張って更新する操作にはRefreshControlを使用します
• touch-gesture-handler-thread — インタラクティブなジェスチャーはGesture Handlerで処理します
• touch-haptics-on-outcome — 意味のある結果に触覚フィードバックを組み合わせます

5. ビジュアルシステムとLiquid Glass（HIGH）

• visual-semantic-colors — ハードコードした16進数カラーの代わりに、セマンティックなシステムカラーを使用します
• visual-system-font — インターフェースのテキストにはシステムフォントを使用します
• visual-type-scale — テキストスタイルをiOSの文字スケールに対応させます
• visual-spacing-rhythm — ひとつの基準単位からスペーシングを導きます
• visual-liquid-glass-gated — バージョンで条件分岐するネイティブビューを通じてLiquid Glassを適用します
• visual-tint-discipline — インタラクティブな要素にアクセントのティントを限定して使用します

6. モーションとフィードバック（MEDIUM-HIGH）

• motion-ui-thread-animation — アニメーションをUIスレッドで実行します
• motion-virtualized-lists — 長いリストは仮想化リストで描画します
• motion-loading-states — 読み込み中はコンテンツの形状に合わせたプレースホルダーを表示します
• motion-empty-states — 次の操作を促す空の状態を設計します
• motion-optimistic-updates — ユーザー操作に対して楽観的な更新を適用します

7. アクセシビリティ（中〜高）

• acc-roles-labels — VoiceOver で操作可能なコントロールやアイコンのみのコントロールにラベルを付けます
• acc-dynamic-type — Dynamic Type に応じてテキストを拡大できるようにします
• acc-reduce-motion — 視差効果を減らす設定を尊重します
• acc-state-and-hint — 支援技術にコントロールの状態を伝えます
• acc-grouping-focus — 関連する要素をグループ化して、論理的なフォーカス順序を設定します

8. システム連携と仕上げ（中）

• system-permissions-jit — 理由を説明したうえで、必要なタイミングで権限をリクエストします
• system-status-bar — 背景のコンテンツに合わせてステータスバーのスタイルを設定します
• system-keyboard-type — 各テキストフィールドの内容に合わせて設定します
• system-share-sheet — システムの共有シートから共有します
• system-app-icon-launch — 実際のアプリアイコンと起動画面を設定します

使い方

詳しい説明とコード例については、各リファレンスファイルをお読みください。

• セクションの定義 — カテゴリの構成と影響度
• ルールのテンプレート — 新しいルールを追加するためのテンプレート
• リファレンスファイル：references/{prefix}-{slug}.md

各ルールファイルには、ネイティブらしい操作感にとって重要な理由の簡単な説明、Incorrect（ネイティブではない）TSX の例、それを最小限の差分で修正したCorrect（ネイティブ）な例、および信頼できる参考 URL が含まれています。該当する場合は、「このパターンを使用しない場合」または「代替案」のセクションも追加されています。

関連スキル

• expo-ui — @expo/ui/swift-ui コンポーネント API リファレンスです。ここにあるルールでネイティブの SwiftUI コンポーネントが案内されている場合に使用します。
• ios-hig / ios-design — ネイティブの Swift／SwiftUI コードベース向けの HIG と Apple のデザイン原則です。
• expo — Expo React Native のパフォーマンス最適化です。ここにあるモーションやリストに関するルールを補完します。