全画面を golden で PNG 化して Apple HIG 監査する仕組み

「ぽんっ！」（旧称：でいりんぐ）のUIを、Apple の Human Interface Guidelines（HIG）とアクセシビリティの観点で全画面まとめて監査しました。ポイントは、静的な見た目は実機なしで PNG 化して比較し、実機が要るものだけ実機に回す、という切り分けです。その仕組みを残します。

背景（当時の状況）

2026-07-21、UI 全体を Apple の HIG と「流れるような動き」の観点で一度きちんとレビューしようと決めました。ただ全画面を毎回実機で見るのは大変なので、静的な見た目は golden で PNG 化して一望する仕組み（全画面ハーネス）を新しく作り、そこから見つかった指摘を 1 件ずつ潰していきました。

手法: 静的は golden、動的は実機

• 静的な画面構成（配色・レイアウト・文言・コントラスト）は、golden テストのハーネスで全画面を 両ロール（こども/おとな）× ライト/ダークでレンダリングして PNG に書き出す。実機不要。
• アニメーション・触覚は golden では見えないので実機で確認する。
• カメラ必須画面やタイマー主体の画面は golden 化できないので対象外にする。

全画面を一括で PNG 化できると、「どの画面のどのモードで問題があるか」を一望でき、修正後は再生成して before/after を比較できます。

golden 監査で見えた問題

実機を触る前に、PNG を眺めるだけで次々と問題が見えました。

• 配色トークンのコントラスト不足（横断・最重要）: メインのオレンジは白背景・紙背景のどちらでも WCAG AA（4.5:1）に届いていなかった。塗り（大面積）は今の色を維持しつつ、文字・リンク・選択タブ用に AA を満たす濃いオレンジを別トークンとして追加して解消。
• 完了項目が打ち消し線＋極薄で判読不可: アルバムの完了項目に line-through が付き、色も薄すぎた。打ち消し線を撤廃し、判読できる濃度に。
• reduced-motion 非対応: 達成時の揺れや弾む演出が、OS の「視差効果を減らす」を無視していた。MediaQuery.disableAnimations を参照して、演出を抑制するように。
• 触覚フィードバック皆無: スタンプ・達成・育成・トグルに HapticFeedback が入っていなかった。
• IT 用語の残存: 設定などに「タスク」が残っていた（「ぽんっ！」では「やること」に統一する規約）。
• Semantics ラベル無し: 育成キャラ画像やスタンプ画像、タップ要素にスクリーンリーダー用のラベルが無かった。

配色は「単一ソース + 生成」で直す

配色の直し方が特に効きました。色をコード各所にハードコードするのではなく、デザイン定義ファイル（DESIGN.md）を単一ソースにして、そこからテーマのコード（ColorScheme）を生成しています。

• コントラスト不足を直すときは、DESIGN.md にトークンを1つ足して再生成するだけ。塗り用の色（大面積）は維持したまま、文字用に AA を満たすトークンを追加できる。
• 生成物を経由するので、色の食い違いが起きない。「この画面だけ違う色」が構造的に発生しません。

1指摘 = 1PR で潰す

見つかった指摘は、1 指摘 = 1 issue = 1 PR の粒度で順に潰しました。粒度を揃えると、レビューも差し戻しもしやすく、before/after もハーネスを再生成するだけで確認できます。

まとめ

• UI 監査は、静的（配色・レイアウト・文言）は golden で PNG 化して一望、動的（アニメ・触覚）は実機、と切り分けると速い。
• 配色は単一ソース + 生成にしておくと、コントラスト是正が「トークン追加 + 再生成」で済み、色の食い違いも起きない。
• reduced-motion・触覚・Semantics ラベルは忘れられがちだが、golden とチェックリストで機械的に洗い出せます。