iOS 基盤：文字・色・レイヤー・寸法
確認日: 2026-09-05。対象: mobile-app の iOS / iPadOS。入口は mobile-app.md、部品・画面構成は mobile-ios-components.md、直接操作・spring は mobile-ios-motion.md。
値の扱い
| 区分 | 意味 | 実装での扱い |
|---|---|---|
| Apple公式 | HIG に記載された原則・標準条件での数値 | 対象 OS と設定を明記し、標準 API を使う |
| FP採用 | このブランド・業務アプリ向けの選択 | 標準動作を壊さない範囲で適用する |
| HTML近似 | ブラウザで部品の関係を確認するための再現値 | CSS px / rem。実機の pt、SF フォント、Liquid Glass の再現保証ではない |
HTML 見本の名前空間は .fpm-kit / .fpm-* / --fpm-*。スタイルの実体は mobile-ios.css。現在の CSS は .fpds の子孫に .fpm-kit を置く構造を前提とし、tokens.css → components.css → mobile-ios.css の順に読む。内側の文字・色・操作部品は mobile 用に指定する。Web 用の全リンク下線・角丸・余白をネイティブ部品へ機械的に継承しない。
1. タイポグラフィ
Apple公式: 次の表は iOS / iPadOS の Dynamic Type が Large（default）の場合。数値はサイズ / leading の pt。xLarge・アクセシビリティサイズ・watchOS の値を混ぜない。ネイティブでは固定数値ではなく右列の意味スタイルを指定する。Apple HIG: Typography
| スタイル | サイズ / leading | 通常のウェイト → 強調 | SwiftUI | FPでの主な用途 |
|---|---|---|---|---|
| Large Title | 34 / 41 | Regular → Bold | .largeTitle |
最上位画面の見出し |
| Title 1 | 28 / 34 | Regular → Bold | .title |
コンテンツ内の大見出し |
| Title 2 | 22 / 28 | Regular → Bold | .title2 |
詳細内の主要見出し |
| Title 3 | 20 / 25 | Regular → Semibold | .title3 |
カード・小グループの見出し |
| Headline | 17 / 22 | Semibold → Semibold | .headline |
行タイトル・操作ラベル |
| Body | 17 / 22 | Regular → Semibold | .body |
本文・通常の設定行 |
| Callout | 16 / 21 | Regular → Semibold | .callout |
文脈に近い補足 |
| Subhead | 15 / 20 | Regular → Semibold | .subheadline |
付加情報 |
| Footnote | 13 / 18 | Regular → Semibold | .footnote |
行の副題・セクションの補足 |
| Caption 1 | 12 / 16 | Regular → Semibold | .caption |
図・メディアのキャプション |
| Caption 2 | 11 / 13 | Regular → Semibold | .caption2 |
強い空間制約がある補足 |
FP採用:
- 最上位見出しは Large Title の強調、通常行は Body、副題は Footnote を基本とする。見出しをすべて同じ大きさ・太さにしない。
- 通常行に 13 pt を採用して詰め込まない。Caption は補足用で、主操作や判断に必要な本文へ広げない。
- システムフォントと日本語フォールバックを優先する。Outfit はブランドロゴ等に限定し、アプリの全ラベルには使わない。
- Dynamic Type の最大アクセシビリティサイズで、副題・値・操作を縦積みに変える。単一行への固定、主ラベルの省略、文字縮小で収める処理を避ける。
- 数値の進捗や日付の整列には
.monospacedDigit()を検討し、本文全体を等幅にしない。 - optical sizing は対応するシステム字体に任せる。tracking はサイズと言語に合わせ、Latin の大見出し用の負値を日本語本文へ一括適用しない。HTML でも
font-optical-sizing: autoの対応有無を前提に、基準となる字体・行高を保つ。
HTML近似: Large Title は 34px / 41px と Bold、Body は 17px / 22px、Headline は 17px / 22px と 600、Footnote は 13px / 18px を起点に rem 化する。日本語の長い説明文は FP の近似として行高 1.5 に広げる。これは標準の文字サイズ条件を示す見本。カタログの「文字拡大」は HTML の倍率比較であり、Dynamic Type の非線形なサイズ表そのものではない。11 段階すべてに CSS token があるという意味ではなく、ブラウザの部品は必要なスタイルだけを実装している。
2. 色は役割で指定する
Apple公式: 背景・文字・区切りなどの意味色は外観とアクセシビリティ設定に適応する。固定 HEX の転写や用途の入替えを避ける。独自色には light / dark と、それぞれの increased contrast を用意する。Apple HIG: Color
| FPの役割 | iOS の意味 / UIKit API | SwiftUI の対応例 | 使用先 |
|---|---|---|---|
| 標準背景 | systemBackground |
Color(uiColor: .systemBackground) |
読物・詳細の基本面 |
| グループ背景 | systemGroupedBackground |
Color(uiColor: .systemGroupedBackground) |
設定・グループ化した一覧の外側 |
| グループの面 | secondarySystemGroupedBackground |
対応色または標準 List / Form |
同種の行を束ねる面 |
| グループ内の階層 | tertiarySystemGroupedBackground |
対応色。必要なときのみ | 入れ子になった領域 |
| 主要ラベル | label |
.foregroundStyle(.primary) |
項目名・本文・数値 |
| 補助ラベル | secondaryLabel |
.foregroundStyle(.secondary) |
日付・副題・説明 |
| 低優先ラベル | tertiaryLabel |
文脈に合う標準スタイル | 非主要な追加情報 |
| プレースホルダー | placeholderText |
標準 TextField / .searchable |
入力前の例・検索範囲 |
| 区切り | separator / opaqueSeparator |
標準 Divider / List の separator |
行間。操作境界とは区別 |
| フィル | systemFill 系 |
標準 control の背景 | 検索・選択等の制御面 |
| アクセント | 独自 AccentColor |
.tint(...) |
主要ボタン・選択状態 |
| 破壊・失敗 | 標準 destructive role / systemRed |
Button(role: .destructive) 等 |
削除・保存失敗 |
FP採用: ブランド元色 #0066FF と #7FD300 は保持する。操作 tint はブルー系を使い、ライムはブランドの印やコンテンツの装飾に留める。選択・成功・警告・未読をライム一色で表さない。タブ全体や本文全体をブランド色で塗らず、選択箇所と主要操作に強弱を付ける。
ブラウザ見本の近似色
次は HTML近似の採用値。Apple が全バージョンで返す RGB の一覧ではない。実ネイティブでは上の API へ置き換える。
| 役割 | ライト | ダーク |
|---|---|---|
| グループ背景 | #F2F2F7 |
#000000 |
| グループの面 | #FFFFFF |
#1C1C1E |
| 本文 | #1C1C1E |
#F5F5F7 |
| 副題 | #636366 |
#B1B1B7 |
| 操作 tint | #0059D6 |
#73AEFF |
ネイティブのコントラスト強調時には、本文・補助文字・区切りの識別性を確認する。HTML近似の実体・派生状態は CSS を参照し、ブラウザの強制カラーモードと Apple の Increase Contrast は同じ機能とみなさない。通常文字は 4.5:1 以上、識別に必要な UI・選択状態は 3:1 以上を FP の受入基準とする。色だけで状態を伝えず、チェック・文字・位置を併用する。
Dark Mode は OS に追従する。背景の単純な反転を使わず、前面に現れた sheet 等の階層も意味色に任せる。カタログのテーマ切替は比較のための操作であり、製品の設定画面に独自のテーマ設定を必須追加する規約ではない。Apple HIG: Dark Mode
3. 素材と階層
Apple公式: Liquid Glass は操作・ナビゲーションの層、標準 material はコンテンツ内の階層化に使う。通常は legibility を保つ regular を選び、透明度の高い clear は写真・動画など視覚的に豊かな背景上での用途に絞る。標準部品は対応 OS の material を取り込む。Apple HIG: Materials
| 層 | FPの扱い | ネイティブ実装 | HTML近似 |
|---|---|---|---|
| 背景 | 画面全体の土台 | system background | 単色の canvas |
| コンテンツ | 情報を読む不透明面 | List / Form / 標準 background |
grouped surface と inset separator |
| ナビゲーション | 内容から区別した操作層 | 標準 toolbar / tab bar | 限定した半透明・blur・境界 |
| 一時的な作業 | 親の文脈を残す | 標準 .sheet |
ブラウザ内の dialog / sheet 表現 |
| 重大な判断 | 現在の作業を中断 | 標準 .alert |
名前と説明のある modal dialog |
FP採用:
- 全リスト行にガラス・大きい影・グラデーションを入れない。多くの行は同じ面に並べ、細い区切りと文字の階層で読ませる。
- ネイティブ標準バーに独自 blur を重ねない。旧 OS 向けに Liquid Glass を手作りして再現しない。
- 「透明度を下げる」「コントラストを上げる」設定で背景と文字が読めるようにする。HTML 見本の低透明モードでは操作層を不透明にする。
- 低透明・高コントラスト・動きを減らす設定は独立して合成する。blur の毎 frame の変化や全 sheet の透過は必須化しない。動きと操作 §6〜7 を参照する。
- 重なった背面コンテンツも含めて確認する。動く素材・影だけで選択状態や境界を示さない。
4. レイアウトと寸法
Apple公式: safe area・システムの margin・layout guide を尊重する。コンテンツの端までの描画と、操作や重要情報の安全領域を分ける。Apple HIG: Layout
Apple Accessibility の表は iOS / iPadOS の Default control size が 44×44 pt、Minimum control size が 28×28 pt。Buttons は一般則として 44×44 pt 以上の hit region を示す。FP採用は原則 44×44 pt 以上とする。Apple HIG: Accessibility、Buttons
| 対象 | FP採用・独自部品の開始点 | 標準部品を使うとき |
|---|---|---|
| 操作領域 | 44×44 pt 以上 | 標準 hit region を縮めない |
| 関連する文字間 | 4 pt | 標準スタック・baseline を優先 |
| 行内の要素間 | 8〜12 pt | accessory / symbol の標準配置を優先 |
| 独自コンテンツの左右余白 | 16 pt | safe area に加え標準 margin を使う |
| 独自グループ間 | 24 pt | List / Form の section spacing を優先 |
| 独自の通常行 | min-height 56 pt | 固定しない。複数行や文字拡大で成長 |
| 副題を持つ独自行 | min-height 68 pt | 同上 |
これらは Apple の全コンポーネント共通寸法ではない。標準 List の行高、角丸、toggle の幅、toolbar / tab bar の高さ、sheet の角丸は OS に任せる。HTML 見本の枠幅・角丸・switch サイズ・バー高も公式寸法として転用しない。
FP採用: キーボード出現後も編集中欄と完了操作に到達できること。Dynamic Type 拡大では value と label を縦積みへ変え、行の高さを伸ばす。iPad では NavigationSplitView 等へ適応し、iPhone の一列をそのまま横に引き伸ばさない。
5. アイコンと動き
iOS の操作アイコンは SF Symbols を優先し、対象 OS での存在を確認する。アイコンは意味・ウェイト・文字サイズと整合させる。シンボルのロゴ・アプリアイコン・商標用途や、制限された Apple 製品シンボルの改変を避ける。Apple HIG: SF Symbols
FP採用: tab は短いラベルと意味の分かる glyph、戻るには標準の back、階層遷移する行には disclosure。HTML は独自 SVG を用い、SF Symbols の書出しを共通 Web / Android アセットへ転用しない。
Reduce Motion では不要な拡大縮小・自動反復・視差を減らす。動き・音・振動だけで情報を伝えない。Apple HIG: Accessibility
FP採用: 画面遷移は push / pop、短い編集は sheet、選択は標準状態変化で表す。独自の直接操作は現位置・速度・行先を持ち、途中の再操作に応じる。動きと操作 に上流17節の採用範囲と今回の HTML spring 値を定める。それらは FP の近似値であり、OS の spring パラメータを規定するものではない。
確認証跡
2026-09-05、Apple 公式ページを対象に Web 検索し、本文と表を確認。Typography は Large (default) の見出し以下を採用した。通常のページ取得が JavaScript 必須表示になる場合があるため、検索本文も参照した。44 / 28 の取得方法は同日の Accessibility / Mobility 節の検索本文。FP独自寸法と HTML近似値は、公式数値と別の表に置いた。