iOS 部品と画面レシピ

確認日: 2026-09-05。対象: mobile-app の iOS / iPadOS。基盤は mobile-ios-foundations.md、直接操作は mobile-ios-motion.md、入口・Android対応は mobile-app.md。動かせるiOS見本 で部品と画面遷移を確認する。

この文書の部品の組合せ・配置・業務上の振舞いは FP採用規約。各節の「Apple公式」は参照した役割・慣習の要約。HTML の表示・操作は構造を説明する近似で、SwiftUI のネイティブ実装そのものではない。

1. 部品の選び方

2. ナビゲーション・ツールバー

Apple公式: Tab bar は最上位の行先に使い、各行先のナビゲーション状態を保つ。アイコンに短いラベルを付ける。Toolbar は戻る・タイトル・操作を扱い、機能と頻度でまとまりを分ける。Tab bars、Toolbars

FP採用:

• 標準は 3 タブ「概要 / 案件 / 設定」。案件ごとに 3〜5 の主要な行先へ整理する。タブに「新規作成」「削除」を入れない。
• iOS 見本では全タブを同じ navigation shell に置き、選択中だけを tint と形で示す。glyph とラベルを両方残す。
• 一覧入口は Large Title、詳細は標準 inline title を使い分ける。画面内に同じ大きなタイトルを重複させない。
• trailing の主操作は一つを基本とし、低頻度の処理は More メニューなどへ整理する。戻る操作を独自アイコンの意味に変更しない。
• HTML でバー高や丸角を近似しても、その値を iOS の固定寸法として転記しない。

3. 一覧・設定行・選択

Apple公式: テキスト主体の情報は一覧に向く。階層を掘り下げる行には disclosure indicator、選択する行にはその結果を示す表示を使う。Lists and tables

FP採用: 同じ意味の行は一つの grouped surface にまとめる。section header はグループ名、footer は選択の影響を説明する。すべての行を独立した影付きカードにしない。値だけの行や switch 行に chevron を付けない。親行の tap と子の switch が競合する入れ子ボタンを作らない。副題が長ければ行を伸ばし、文字を切って高さを維持しない。

狭い幅・大きい文字で label が accessory に圧迫される場合は、label を上段、value / accessory を下段にする。詳細 toolbar の題名も必要なら折り返し、固定一行のために主ラベルを縮小・省略しない。

4. ボタン・トグル・セグメント

Apple公式: 標準ボタンは操作状態と外観への適応を備える。重要度はサイズの差よりスタイルで分け、独自ボタンにも押下状態を持たせる。Toggle は二つの反対の状態、segmented control は近い選択肢をまとめる用途。Buttons、Toggles、Segmented controls

FP採用:

• 主操作は一つを基本とし、複数の選択肢は同程度の操作サイズで比較できるようにする。HTML ボタンの幅は親より大きくしない。
• 設定用 switch は即時反映する。通信に失敗したら表示を戻し、理由と再試行を伝える。編集 sheet 内の switch はドラフトへの変更であり、sheet の保存時に確定することを区別する。
• HTML見本のswitchは共通の --fpm-switch-duration: 320ms / --fpm-switch-ease: cubic-bezier(.22,1,.36,1) でつまみ移動と背景色を同期する。終盤で減速し、連打時も現在表示位置から反転する。押下は即座の明度変化と小さなつまみの変形で伝え、値・aria-checked はclick時に確定する。入力ロックや完了待ちを入れない。これらはFPのWeb近似値で、標準Toggleの固定値ではない。Reduce Motionでは移動・変形を省き、値と色のfeedbackを保つ。
• segment は 2〜3 個を基本とする。長いラベルや大きい文字で収まらない場合は Picker / メニュー等へ変える。文字だけ縮めない。全アプリの行先には用いない。
• HTMLのsegmentとtabはグループごとに1枚の .fpm-selection-indicator を持ち、選択buttonの実測位置・サイズへ320msで移動する。文字・glyph・フォーカスは動かさず、選択と結果は即時更新する。初回/再表示/resizeは静的配置、同じ選択は再描画せず押下反応だけ。詳細な適用範囲は短い操作の規約を参照。
• 無効状態の理由は必要な文脈で読めるようにする。見た目だけの disabled にせず、操作も防ぐ。処理中に同じ保存・削除を二重に開始しない。
• 押下時はすぐに feedback を見せ、保存・削除・値の変更は通常の activate で確定する。pointer-down を click の代わりにせず、drag-away / pointercancel と keyboard 操作を含めて確認する。動きと操作 §3

5. 検索・フォーム

Apple公式: 検索範囲を分かるようにし、可能なら入力中に結果を更新する。候補・履歴・フィルターは見つけやすさを補う。検索が主要な機能なら目立つ場所から利用できるようにする。Search fields、Searching

FP採用: 一覧に属する検索の対象は「案件名」と明示する。非同期検索では古いリクエストが新しい結果を上書きしないように扱う。入力文字と選択segmentを組み合わせ、0件と通信失敗を別の画面状態で表す。「条件をクリア」で元に戻せるようにする。

placeholder は検索範囲の補助には使えるが、業務入力欄のラベルを置き換えない。編集時のエラーは該当欄の近くに理由を表示し、入力値を保持する。Apple HIG: Text fields

FP採用: 初回の文字入力中に毎文字エラーを告げず、blur 等で入力が区切られた時点で検証する。既にエラーがある欄は再入力で修正を反映する。IME composition 中は割り込まず、保存時の最終検証も残す。上流の inline validation は、このプロファイルに合わせて採用する。

6. シート・アラート・進捗

Apple公式: Sheet は現在の文脈に近い短い作業に向く。単一画面の iOS sheet は leading に Cancel、trailing に Done。複雑な作業は別の表示方法を検討し、メイン画面からシートを何枚も重ねない。Sheets

FP採用: 編集 sheet は入力内容に合う高さを選び、必要に応じ medium / large を使う。キーボードや大きい文字で領域が足りなければ大きい表示へ広げる。detent の高さ・sheet の角丸は OS に任せる。HTML 見本は中・大の切替でこの関係を示す。下方向スワイプや Escape 等も含め、未保存のドラフトを黙って破棄しない。キャンセルの追加選択は confirmation dialog で扱う。保存成功は親画面を更新し、毎回 alert を出さない。

HTML 見本の grabber は medium / large の間を動かし、drag では閉じない。途中の掴み直し、速度による行先予測、soft bounds、キーボードの代替を 動きと操作 §5 に定める。未変更の close は途中で掴み直して取り消せる。保存・明示的な破棄はデータの確定を優先する。ネイティブ標準 sheet の gesture を独自 controller に置き換える規約ではない。

Apple公式: Alert は重大な情報や取り消せない操作に絞る。通常の取り消せる操作や、情報を知らせるだけの場面で乱用しない。破壊的な操作には取消の選択肢を提供する。Alerts

FP採用: この業務見本の案件削除では、対象名・削除される範囲・取り消せるかを説明し、「キャンセル / 削除」で選ぶ。HTML では dialog の名前・説明、内部フォーカス、背景の操作抑止、閉じた後のフォーカス復帰を実装する。これはブラウザでのアクセシビリティ実装であり、SwiftUI に同じ DOM 処理を求めるものではない。

Apple公式: 進捗が分かる処理には確定進捗、不明なら不確定進捗を使う。進捗の値は実際の状態に対応させ、処理が止まった場合も説明を加える。Progress indicators

7. 画面レシピ

以下はこのブランドの業務アプリを作るための FP採用レシピ。部品を並べるだけでなく、データ・操作・戻り先を一組として実装する。

A. 案件一覧 → 詳細

1. Tab「案件」に NavigationStack を置く。入口は Large Title「案件」、trailing に追加操作を置く。
2. グループ化したリストに主ラベル・副題・状態を載せる。階層を進む行だけに chevron を付ける。
3. 行を選ぶと詳細へ push。詳細は inline title、戻る操作、主要な情報、trailing に「編集」。
4. 編集から帰ると同じ案件の内容を更新。戻ると元の検索条件・segment・位置を保つ。
5. 行が消えた場合や取得できない場合は説明と戻る手段を表示する。空の詳細画面へ置き去りにしない。

受入: 一覧→詳細→戻る、詳細→別タブ→元タブ、保存後の値更新、消失したデータからの回復。

B. 検索と絞込み

1. 一覧に検索を付け、対象を「案件名」と示す。検索欄の最終配置は標準 .searchable と OS に任せる。
2. 「すべて / 進行中 / 完了」の一択segmentを結果と近い位置に置く。
3. 文字と状態の条件を両方満たす結果を表示。未入力では通常一覧、0件では理由と「条件をクリア」。
4. 読込中は状態を示し、通信失敗は再試行できる表示にする。空データと障害を同じ文言にしない。

受入: 検索→segment変更→0件→clear、読込→失敗→retry、条件を保持した詳細往復。

C. 設定

1. Large Title「設定」と grouped Form。通知などの項目を意味ごとに section 分けする。
2. 二値は switch、一択は picker、詳細設定は chevron 付き遷移行、読むだけの情報は値行。
3. 「更新の通知」switch は即時反映し、section footer で意味を説明する。設定保存専用の大きい CTA を常設しない。
4. OS の文字・外観・透明度設定への追従は製品側の既定動作とする。カタログ用の外観スイッチは製品設定と分ける。

受入: on/off の状態と読み上げ、失敗時の復帰、別タブ往復後の設定保持、設定行の種類が操作に合うこと。

D. 編集 sheet

1. 詳細の「編集」から、選択中データのドラフトを sheet に読み込む。キャンセルは leading、保存する「完了」は trailing。
2. 名前・状態・メモを Form に配置。入力後も分かるラベル、必要な補足を残す。
3. blur 後の inline 検証と、エラー欄の再入力時の修正反映を用意する。保存時にも最終検証し、空欄・文字数等のエラーでは sheet を閉じず、値と修正方法を残す。
4. 保存中は二重実行を防ぎ、成功時だけ一度確定して閉じる。失敗はドラフトを維持して再試行可能にする。
5. 未変更のキャンセルはそのまま閉じる。変更後は破棄 / 編集継続を選び、選択に応じた戻り先へ移る。

受入: 編集→キャンセル、編集→破棄取消、エラー→修正→保存、保存失敗→再試行、閉じた後のフォーカスとデータ整合。

8. 共通状態と検証

各画面は content / loading / empty / error、各入力は idle / editing / invalid / disabled、書込みは draft / saving / saved / failed を明示して設計する。全画面に全ての状態を機械的に表示するのでなく、その画面で起こる状態を実装する。

• Dynamic Type の最大サイズで主な作業を終えられる。数値・ラベル・操作が重ならない。
• VoiceOver に名前・役割・値・選択・無効を伝え、読み順が視覚順と合う。意味のない装飾は読ませない。
• タブ、push/pop、sheet、alert の関係が分かり、閉じた後に元の文脈へ戻る。
• スワイプ・長押し以外にも同じ操作へ到達できる。
• light / dark / increased contrast / reduced transparency / reduced motion を確認する。
• HTML 見本は狭幅・200%文字・キーボード・フォーカス・ダイアログ復帰を確認する。ネイティブの実機適合確認の代わりにはしない。