ios-hig-design

iOS Human Interface Guidelines のデザインスキル

直感的で一貫性があり、Apple のデザイン哲学に沿ったネイティブ iOS インターフェイスを設計するためのフレームワークです。Apple の Human Interface Guidelines に基づいています。これは、iPhone、iPad、Apple エコシステムとシームレスに統合するアプリの決定版リソースです。

基本原則

Apple の iOS デザイン哲学は、3 つの柱に基づいています。明瞭さ（すべての要素が読みやすく、目的が明確であること）、従属（インターフェイスが表示するコンテンツを決して覆い隠さないこと）、奥行き（レイヤー、トランジション、現実的な動きで階層や空間的な関係を伝えること）です。

基盤： 優れた iOS アプリは、HIG のルールを機械的に守るのではなく、この哲学を内面化しています。ネイティブコンポーネント、システムの慣習、プラットフォームの一貫性は制約ではありません。iOS ユーザーが、その一部だと感じられるアプリを信頼し、楽しめる理由です。

スコアリング

目標：10/10。 クイック診断の各項目（6 項目）を満たすごとに 1 点を加算し、ネイティブな慣習に応じて最大 4 点を加算します。セマンティックカラーとテキストスタイルを全体で使用（ハードコードされた値なし）：+1、カスタムで再実装する代わりにシステムコントロールを使用：+1、標準ジェスチャと意味のある触覚フィードバック：+1、SF Symbols と正しいアプリアイコンの形状：+1。評価基準：9-10 = ネイティブで、アクセシブルで、ダークモードと Dynamic Type に適応し、異質なパターンがない、5-6 = 動作するが、Android の慣習が混在するか、色やサイズがハードコードされている、<=3 = セーフエリア、タッチターゲット、または VoiceOver に問題がある。必ずスコアと、10/10 に到達するために必要な具体的な改善点を記載してください。

iOS デザインフレームワーク

1. レイアウトとセーフエリア

基本概念： iOS デバイスには固有の画面サイズ、セーフエリアのインセット、ハードウェアの出っ張り（ノッチ、Dynamic Island、ホームインジケータ）があり、すべてのレイアウトでこれらに配慮する必要があります。

重要なポイント：

• 最小画面（幅 375pt の iPhone SE）を基準に設計します
• セーフエリアは、ノッチ、Dynamic Island、ホームインジケータからコンテンツを保護します。インタラクティブな要素をその下に配置しないでください
• コンテンツの標準マージン：画面端から 16-20pt、間隔の単位：8 / 16 / 24pt
• タッチターゲットとリスト行の最小高さ：44pt

製品への適用：

コンテキスト	レイアウトパターン	例
ステータスバー	従来型は 20pt、Dynamic Island 搭載デバイスでは 44-54pt	時刻、電波、バッテリー領域
ナビゲーションバー	標準行は 44pt + 大きなタイトルは約 52pt（合計約 96pt）	戻るボタン、タイトル、アクション
コンテンツ領域	柔軟でスクロール可能、セーフエリアを尊重	アプリのメインコンテンツ
タブバー	高さ 49pt、ぼかしのある半透明表示	2-5 個の主要な移動先
ホームインジケータ	下部に 34pt のインセット	システムジェスチャ領域

コードパターン：

• デフォルトでセーフエリアを尊重する VStack { } を使用します
• .ignoresSafeArea() は背景や装飾にのみ使用し、インタラクティブなコンテンツには使用しないでください
• iPhone SE や Pro Max を含む、複数の画面サイズでテストします

画面構成を設計する際は、references/navigation.md を参照してください。ナビゲーションバーとタブバーの正確な寸法、大きなタイトルの動作、分割表示のルールが記載されています。

2. タイポグラフィと Dynamic Type

中核となるコンセプト： iOS では San Francisco（SF Pro）書体とセマンティックなテキストスタイルを使用し、Dynamic Type によってアクセシビリティに合わせて自動的に拡大縮小します。セマンティックスタイルにより、プラットフォーム全体で一貫した階層構造を保てます。Dynamic Type を使えば、レイアウトを崩さずにユーザーが好みのサイズで読めるようになります。

主なポイント：

• Large Title：34pt Bold、Title：17pt Medium、Body：17pt Regular、Caption：12〜13pt、セカンダリテキスト：不透明度 60％で 15pt
• 最小テキストサイズは 11pt（キャプション／セカンダリテキストのみ）
• 行の高さはフォントサイズの 1.3 倍以上にします。モバイルでの最適な行の長さは 35〜50 文字です
• テキストは常に左揃えにし、両端揃えは使用しません

プロダクトでの適用例：

コンテキスト	タイポグラフィパターン	例
画面タイトル	.largeTitle または .title スタイル	大きなタイトルはスクロール時に折りたたまれます
本文コンテンツ	.body スタイル、17pt	リスト項目、説明
セカンダリ情報	.subheadline または .footnote	タイムスタンプ、メタデータ
タブラベル	10pt の SF テキスト	タブバー項目のラベル
ボタン	.body のセミボールドウェイト	主要なアクションのテキスト

記述パターン：

• 固定サイズの代わりに .font(.title)、.font(.body)、.font(.caption) を使用します。拡大縮小するカスタムの間隔には @ScaledMetric を使います
• 階層構造には、極端なサイズ差よりもウェイトや色の変化を優先します
• すべてのレイアウトを Dynamic Type の最大サイズでテストします

デザインを正確な仕様に合わせる際は、references/typography.md を参照してください。スタイルごとの HEX 値と、ダークモードにおけるテキストカラーの対応表を確認できます。

3. カラーとダークモード

中核となるコンセプト： iOS にはセマンティックなシステムカラーが用意されており、コントラストと階層構造を保ちながらライト表示とダーク表示に自動で適応します。

主なポイント：

• ハードコードした色の代わりに Color(.label)、Color(.secondaryLabel)、Color(.systemBackground) を使用します
• デフォルトのティントには Color(.systemBlue)、破壊的なアクションには .systemRed、成功を示す場合には .systemGreen を使います
• ダークモードでは、テキストカラーを反転させ、階層構造を保ちながら背景を暗くします。アクセントカラーは、際立たせるために明度を下げ、彩度を上げる必要があります
• どちらのモードでもコントラスト比 4.5:1 を維持します。開発中は両方のモードでプレビューします

プロダクトでの適用例：

コンテキスト	カラーパターン	例
主要なテキスト	Color(.label)	モードに応じて白／黒に適応
セカンダリテキスト	Color(.secondaryLabel)	どちらのモードでも不透明度 60％
背景	Color(.systemBackground) / .secondarySystemBackground	レイヤーによる奥行き
破壊的なアクション	Color(.systemRed)	削除ボタン、警告
インタラクティブなティント	アプリのアクセントカラーまたは .systemBlue	リンク、トグルの状態

記述パターン：

• プレビューで .preferredColorScheme(.light) と .dark を使い、両方のモードを並べてテストします
• カスタムカラーはコード内ではなく、Asset Catalog でライト／ダークのバリエーションを定義します
• 背景が白または黒だと決めつけず、「コントラストを上げる」を有効にしてテストします

コントラストを確認する際は、references/colors-depth.md を参照してください。通常のテキスト、大きなテキスト、UI コンポーネントを対象とした WCAG 比率の一覧と、tertiary／グループ化背景のトークンを確認できます。

4. ナビゲーションパターン

基本概念： iOS では階層型のナビゲーションモデルを採用しています。主要な画面にはタブバー、階層を掘り下げる操作にはナビゲーションスタック、特定の作業にはモーダルを使います。ユーザーはこれらのパターンを頼りに現在地や戻り方を把握するため、独自のパターンに置き換えると、アプリに違和感を覚えます。

主なポイント：

• タブバー：主要な画面を2〜5個配置し、常に表示します。タブごとに状態を保持します
• ナビゲーションバー：戻るボタン（左上）、タイトル（中央または大きく表示）、アクション（右上）を配置します。大きなタイトルはスクロールすると縮小します
• 特定の作業にはモーダルを使い、下方向へのスワイプまたは明示的な閉じるボタンで閉じられるようにします
• ハンバーガーメニューは使わないでください。iOS ユーザーはタブバーを期待しています
• 検索バーはナビゲーションバーの下に配置し、下方向に引き出すまで非表示にできます

プロダクトでの活用例：

コンテキスト	ナビゲーションパターン	例
アプリの構成	3〜5個のタブを持つタブバー	ホーム、検索、プロフィール
コンテンツの階層	プッシュナビゲーション（階層を掘り下げる）	一覧 > 詳細 > 編集
特定の作業	モーダル表示	作成、設定、フィルター
検索	下方向に引き出す検索バー	Spotlight 形式の検索
分割表示	iPad のサイドバー + 詳細画面	iPad のメール、メモ

文言のパターン：

• 戻るボタンには「戻る」ではなく、前の画面のタイトルを表示します
• タブのラベルは単語一つ（「ホーム」「検索」）にし、モーダルのタイトルには作業内容（「新規メッセージ」「プロフィールを編集」）を示します
• SwiftUI では、非推奨の NavigationView ではなく NavigationStack を使います

5. コントロールと入力

基本概念： iOS には、ユーザーがすでに使い方を理解し、使い慣れているネイティブコントロール（ボタン、リスト、トグル、ピッカー、メニュー、テキストフィールド）が豊富に用意されています。

効果がある理由： ネイティブコントロールにはアクセシビリティ、触覚フィードバック、習得済みの操作パターンが組み込まれています。カスタムコントロールは操作の妨げになり、Apple がすでに解決している特殊なケースへの対応も漏れがちです。

主なポイント：

• 画面単位のアクションはナビゲーションバー（上部）またはアクションバー（下部）に配置します
• 主ボタンはテーマカラーで塗りつぶし、副ボタンはアウトラインまたはテキストのみで表示します
• 破壊的なアクションには赤色を使い、取り消せない操作では確認を求めます
• リスト（テーブルビュー）は、iOS の基本的なコンテンツパターンです
• 入力内容に合ったキーボードタイプ（.emailAddress、.phonePad、.URL）を指定し、オートフィルには .textContentType を使います

プロダクトでの活用例：

コンテキスト	コントロールパターン	例
フォーム	適切なキーボードタイプを指定したネイティブテキストフィールド	@ キーのあるキーボードを使うメールアドレス欄
設定	トグルと開示インジケーターを備えたグループ化リスト	iOS の「設定」スタイル
選択	ピッカー、セグメントコントロール、またはアクションシート	日付ピッカー、並べ替えオプション
破壊的なアクション	赤いボタン + 確認アラート	「アカウントを削除」のフロー
コンテキストアクション	長押しメニューまたはスワイプアクション	行の編集、共有、削除

文言のパターン：

• .keyboardType(.emailAddress) と .textContentType(.emailAddress) を組み合わせます
• システム標準の確認機能（.alert() または .confirmationDialog()）を優先し、リストの行には .swipeActions を使います
• 主アクションのボタンは、親指が届く画面下部に配置します

倫理的な境界： 広告をネイティブコントロールに見せかけたり、破壊的なアクションを誤って実行しやすくしたりしてはいけません。

特定のコントロールを実装する際は、references/components.md を参照してください。ボタンのスタイル、リスト／セクションのバリエーション、ピッカーとセグメントコントロールの選び方、確認ダイアログの設定について説明しています。フォームを実装する際は、references/keyboard-input.md を参照してください。キーボードタイプの一覧、入力アクセサリビュー、ハードウェアキーボードのショートカットについて説明しています。

6. アクセシビリティ

中核となる考え方： iOS には世界最高水準のアクセシビリティ機能（VoiceOver、Dynamic Type、スイッチコントロール、音声コントロール）が備わっており、すべてのアプリで最優先事項として対応する必要があります。支援技術では使えないアプリは、App Store の審査で却下される可能性があります。

重要なポイント：

• すべてのインタラクティブな要素に .accessibilityLabel を設定します。状態には .accessibilityValue、操作の効果には .accessibilityHint を使用します
• 関連する要素は .accessibilityElement(children: .combine) でグループ化します
• Dynamic Type のすべてのサイズに対応し、最大サイズでテストします
• 44 x 44pt のタッチターゲット（セクション 1）と、最低 4.5:1 のコントラスト比（セクション 3）を、見た目のデフォルトではなくアクセシビリティ要件として守ります
• 色だけで意味を伝えないでください

製品への適用例：

コンテキスト	アクセシビリティのパターン	例
アイコン	.accessibilityLabel("Favorite")	ラベル付きのハートアイコン
スライダー	.accessibilityValue("\(Int(volume * 100))%")	音量コントロール
ボタン	.accessibilityHint("Shares this item")	共有ボタン
グループ	.accessibilityElement(children: .combine)	アバターと名前の行
画像	装飾用：.accessibilityHidden(true)	背景パターン

文言のパターン：

• ラベルには名詞（「Favorite」「Settings」など）を、ヒントには操作（「Shares this item with others」など）を使用します
• VoiceOver だけを使って、アプリの全フローをテストします
• Xcode のアクセシビリティインスペクタを使って、コントラストとラベルを確認します

最終確認の前に references/accessibility.md を参照してください。VoiceOver 実装の詳しいパターンと、アプリを対象に実施する出荷前アクセシビリティチェックリストが記載されています。

7. アイコンと画像

中核となる考え方： iOS では SF Symbols が標準のアイコンシステムとして採用されており、アプリアイコンは指定サイズで用意する必要があります。特徴的なスーパー楕円（「スクワークル」）マスクは自動で適用されます。SF Symbols は San Francisco のテキストと視覚的に調和し、Dynamic Type に合わせて拡大縮小するため、どのウェイトやサイズでも位置が揃い、鮮明に表示されます。

重要なポイント：

• 標準アイコンにはすべて SF Symbols（Image(systemName:)）を使用します。テキストに合わせて拡大縮小します
• アプリアイコンは 1024x1024px の正方形で書き出します。iOS はスクワークルマスク（角の半径＝辺の長さ x 0.222、スムージング 61%）を適用します
• iOS 18 以降では、ライト、ダーク、色合い付きのアイコンバリエーションに対応しています
• アプリアイコンにテキストを入れず、認識しやすいシルエットを使ったシンプルなデザインにします

製品への適用例：

コンテキスト	アイコンのパターン	例
タブバー	SF Symbols。選択時は塗りつぶしバリエーション	house.fill、magnifyingglass
ナビゲーションバー	レギュラーウェイトの SF Symbols	gear、plus、ellipsis
リストのアクセサリ	セカンダリカラーの SF Symbols	chevron.right、checkmark
アプリアイコン	1024px の正方形、シンプルで大胆なデザイン	認識しやすい単一のグリフ

文言のパターン：

• Image(systemName: "heart.fill") を使用し、複数の色で奥行きを出すには .symbolRenderingMode(.hierarchical) を適用します
• .imageScale(.large) または .font() を使い、テキストに合わせてシンボルのサイズを調整します
• Apple が無料で提供する SF Symbols アプリでシンボルを確認します

倫理上の境界： 存在しない機能を示唆したり、iOS の慣習に反したりするアイコンは使用しないでください（ゴミ箱は削除を表し、アーカイブを表すものではありません）。

アプリアイコンの書き出し時には references/app-icons.md を参照してください。コンテキスト別のサイズ一覧、スクワークルの正確な計算方法、iOS 18 のライト／ダーク／色合い付きバリエーションの要件が記載されています。

8. ジェスチャと触覚フィードバック

基本概念： iOS には、標準ジェスチャ（戻るスワイプ、引っ張って更新、コンテキストメニューを表示する長押し）と、必ず尊重し、決して上書きしてはならない触覚フィードバックのパターンが定義されています。ジェスチャは筋肉の記憶に刻まれるため、戻るスワイプや引っ張って更新を別の用途に使うとユーザーは戸惑います。触覚フィードバックは、操作が認識されたことを目に見えない形で伝えます。

主なポイント：

• 上書き禁止：画面端から右にスワイプ（戻る）、モーダル上で下にスワイプ（閉じる）、リスト上で下に引っ張る（更新）
• 行を左にスワイプするとアクションが表示され、長押しするとコンテキストメニューが表示されます。ピンチ操作で画像や地図を拡大します
• 触覚フィードバックは次の3種類です：インパクト（物理的な操作）、通知（結果）、選択（UI の変更）
• 触覚フィードバックは控えめで意味のあるものにします。常に発生したり、煩わしくなったりしてはなりません

プロダクトでの活用例：

コンテキスト	ジェスチャ／触覚フィードバックのパターン	例
ナビゲーション	左端から右にスワイプ	システムの戻るジェスチャ
モーダル	下にスワイプして閉じる	シートを閉じる
リスト	下に引っ張って更新、スワイプしてアクションを表示	コンテンツを更新、行を削除
確認	完了時に.success触覚フィードバック	支払い完了
選択	切り替え／選択時に選択の触覚フィードバック	ピッカーホイールのスクロール

実装パターン：

• 物理的な操作にはUIImpactFeedbackGenerator(style: .medium)、UI の状態変更にはUISelectionFeedbackGenerator()を使用します
• 結果のフィードバックには、.success、.warning、.errorを指定してUINotificationFeedbackGenerator()を使用します
• 遅延を最小限に抑えるため、触覚フィードバックを実行する前に.prepare()を呼び出します

ジェスチャやアニメーションを組み込む際は、references/gestures.mdを参照してください。予約済みジェスチャの完全な一覧、触覚フィードバックジェネレーターのレシピ、標準的なアニメーションのタイミングとカーブが記載されています。

よくある間違い

間違い	問題となる理由	修正方法
標準ジェスチャを上書きする	戻るスワイプや引っ張って更新の筋肉の記憶を損ないます	システムジェスチャは本来の用途で使用し、カスタムジェスチャは補助的な操作にのみ使用します
タッチターゲットが44pt未満	誤タップや不満につながり、アクセシビリティ上の問題が発生します	すべての操作可能な要素を少なくとも44 x 44ptにします
セーフエリアを無視する	コンテンツがノッチ、Dynamic Island、ホームインジケーターの背後に隠れます	セーフエリアのインセットを尊重し、.ignoresSafeArea()は背景にのみ使用します
iOS で Android のパターンを使用する	ハンバーガーメニュー、上部のタブ、FABは場違いに感じられます	タブバー、ボトムシート、iOS ネイティブのコンポーネントを使用します
ダークモードを省略する	ダークモードユーザー向けのレイアウトが崩れたり、テキストが読みにくくなったりします	セマンティックカラーを使用し、両方の外観でテストします
フォントサイズを固定する	Dynamic Type が機能せず、弱視のユーザーを排除します	全体を通してセマンティックなテキストスタイル（.title、.body、.caption）を使用します
テキストのコントラストが低い	WCAG AA に準拠せず、日光の下で読めなくなります	最低4.5:1を維持し、「コントラストを上げる」を有効にしてテストします
実機でテストしない	シミュレーターではパフォーマンス、触覚フィードバック、セーフエリアの端のケースを見落とします	最小サイズと最大サイズの実機でテストします

簡易診断

あらゆる iOS インターフェースデザインを監査します：

質問	いいえの場合	対応
すべてのデバイスサイズでレイアウトがセーフエリアを尊重していますか？	コンテンツがハードウェアの背後に隠れます	iPhone SE と Pro Max で監査し、インセットを修正します
すべてのタッチターゲットが少なくとも44 x 44ptですか？	誤タップやアクセシビリティ上の問題が発生します	タップ領域を広げます：.frame(minWidth: 44, minHeight: 44)
アプリはダークモードで完全に動作しますか？	ダークモードユーザー向けの UI が崩れたり、読めなくなったりします	固定色をセマンティックなシステムカラーに置き換えます
Dynamic Type に応じてテキストが適切に拡大縮小されますか？	弱視のユーザーを排除します	セマンティックなテキストスタイルを使用し、最大設定でテストします
VoiceOver ユーザーはすべてのタスクを完了できますか？	アプリを視覚障害のあるユーザーが利用できません	すべての操作可能な要素にラベル、値、ヒントを追加します
ナビゲーションパターンは iOS ネイティブですか？	アプリが場違いに感じられます	ハンバーガーメニューをタブバーに置き換え、標準のプッシュ／モーダルナビゲーションを使用します

コア UI 以外

上記の8つのフレームワークのセクションでは、それぞれ必要な箇所に詳細リファレンスへのリンクを記載しています。さらに、画面上の UI の範囲外にあるシステム領域を扱うリファレンスが3つあります。

• アプリがカメラ、位置情報、連絡先、または保護されたリソースへのアクセスを要求する場合は、references/privacy-permissions.md を参照してください。アクセス要求のタイミング、許可要求前の説明画面、使用目的の文言、許可が拒否された場合の復旧手順について説明しています。
• ホーム画面ウィジェット、App Clip、Live Activity、または共有／アクション拡張機能を作成する場合は、references/widgets-extensions.md を参照してください。対応サイズと、各領域における設計上の制約について説明しています。
• アプリを OS に統合する場合は、references/system-integration.md を参照してください。Siri／Shortcuts のインテント、Handoff、ドラッグ＆ドロップ、ユニバーサルリンク、Spotlight のインデックス作成について説明しています。

さらに読む

ガイドラインの全文、プラットフォーム固有のガイダンス、最新情報については、以下をご覧ください。

• Apple Human Interface Guidelines --- すべての Apple プラットフォームに関する決定版リファレンス
• SF Symbols --- Apple のアイコンシステム。5,000 種類以上のカスタマイズ可能なシンボルを収録
• Apple Design Resources --- 公式の Figma／Sketch テンプレートと UI キット
• WWDC Design Sessions --- デザイン原則と新機能に関する動画
• 「Designed by Apple in California」 --- Apple のデザインプロセスを紹介する写真集（絶版。Apple での販売は終了しています）
• Don Norman 著 「The Design of Everyday Things」 --- Apple に影響を与えた、人間中心設計の書籍
• William Lidwell、Kritina Holden、Jill Butler 著 「Universal Principles of Design」 --- iOS に応用できる125の原則

著者について

Apple Human Interface Guidelines は、テクノロジー分野で最も影響力のあるデザイン組織の一つである、Apple の Human Interface Design チームが執筆・管理しています。1984年に初代 Macintosh とともに初版が公開された HIG は、ダイレクトマニピュレーション、一貫性、ユーザーによる操作といった、グラフィカルインターフェイスのデザインを定義する原則を確立し、iPhone、iPad、Apple Watch、Vision Pro を通じて発展してきました。Apple プラットフォームに不可欠なリファレンスとして、developer.apple.com で引き続き無料で公開されています。