polish

必須の事前準備

frontend-design を読み、コンテキスト収集プロトコルに従ってください。利用可能なコンテキストを再利用し、成果に大きく関わる不足事項についてのみ質問してください。さらに、求める品質水準（MVP かフラッグシップ機能か）を確認してください。

---

細部まで丁寧に最終確認し、良い仕上がりと素晴らしい仕上がりを分ける小さな点をすべて見つけてください。リリース可能な状態から、磨き上げられた状態への違いです。

仕上げによって、既存の階層構造やシステムをより正確にしてください。基盤の弱さを飾りで補うために使ってはいけません。

データがゼロの画面そのものにデザイン作業が必要な場合は、empty-state スキルを参照してください。より広範なアクティベーションフロー、アハモーメント、初回利用時の戦略が本当の課題である場合は、onboard を使用してください。

根拠、再利用可能な知見、最終ステータスについては、視覚的検証を使用してください。会話内の該当する批評や、使用を許可された保存済みレポートを再利用してください。実行に移す前に対象とベースラインを確認し、古い知見や別のルートに対する例外をそのまま適用しないでください。

仕上げ前の評価

現在の状態と目標を把握してください。

1. 完成度を確認する：

   • 機能的に完成していますか？
   • 維持すべき既知の問題はありますか（TODO を付けて示してください）？
   • 求める品質水準は何ですか（MVP かフラッグシップ機能か）？
   • いつリリースしますか（仕上げにどれくらい時間をかけられますか）？

2. 仕上げる領域を特定する：

   • 視覚的な不整合
   • 余白や配置の問題
   • インタラクション状態の不足
   • 文言の不整合
   • エッジケースとエラー状態
   • 読み込みや遷移の滑らかさ

重要：仕上げは最初のステップではなく、最後のステップです。機能的に完成していないものを仕上げないでください。

体系的に仕上げる

以下の観点に沿って、手順を踏んで作業してください。

グレースケールテスト、アクションの階層、ラベルと値の扱いについては、階層チェックリストを参照してください。 行の長さ、行の高さ、配置、ベースライン、タイトルの抑制については、テキスト階層と可読性を参照してください。 アクションが適切に目立つ、または控えめになっているかを確認するときは、アクションの階層を参照してください。 アラート、ステータス、色味を付けたセマンティックサーフェスを確認するときは、セマンティックカラーを参照してください。 仕上げの問題が局所的な細部なのか、システムとのずれなのかを判断するときは、デザインシステムとの整合性を参照してください。 境界線、カード、影、重なり、背景の変化が煩雑または不統一に感じられるときは、サーフェスの分離を参照してください。 スクリーンショット、アイコン、メディアが不自然、読みにくい、または適切に収まっていないときは、画像の扱いを参照してください。 標準の UI 要素、アクセント、装飾的な背景をより意図的に整える必要があるときは、仕上げの細部を参照してください。

視覚的な配置と余白

• ピクセル単位で揃える：すべてをグリッドに合わせます
• 余白を統一する：すべての間隔をスペーシングスケールに合わせます（13px のような場当たり的な間隔は使いません）
• 光学的に調整する：視覚的な重みに合わせて調整します（アイコンを視覚的に中央に見せるため、位置をずらす場合があります）
• レスポンシブ時の一貫性：すべてのブレークポイントで余白と配置が適切に保たれるようにします
• グリッドに準拠する：要素をベースライングリッドに合わせます
• グループを明確にする：グループ内よりもグループ間の余白を広くします
• サーフェスの分離：境界線、影、カード、背景の変化を、同時にすべて使うのではなく、意図的に使い分けます

確認項目：

• グリッドオーバーレイを有効にして、配置を確認する
• ブラウザーのインスペクターで余白を確認する
• 複数のビューポートサイズでテストする
• しっくりこない要素がないか確認する

タイポグラフィの調整

• 階層の一貫性：同じ要素には、全体を通して同じサイズとウェイトを使用します
• 行の長さ：本文は45〜75文字にします
• 行の高さ：フォントサイズと文脈に合わせて適切に設定します
• ウィドウとオーファン：最終行に単語が1つだけ残らないようにします
• ハイフネーション：言語とカラム幅に合わせて適切に設定します
• カーニング：必要に応じて文字間隔を調整します（特に見出し）
• フォントの読み込み：FOUT／FOITによるちらつきを発生させません
• ベースラインの揃え方：同じ行に異なるサイズのテキストを並べる場合、きれいに揃えます
• リンクの抑制：副次的なリンクを、メインの導線と競合するほど目立つ色にしません
• 数値の配置：比較が重要な場合、数値のカラムを右揃えにします
• タイトルの抑制：セクション見出しは内容を支え、内容を圧倒しないようにします

色とコントラスト

• コントラスト比：すべてのテキストがWCAGの基準を満たすようにします
• トークンの一貫した使用：色をハードコードせず、すべてデザイントークンを使用します
• テーマの一貫性：すべてのテーマバリエーションで適切に表示されるようにします
• 色の意味：同じ色には、全体を通して同じ意味を持たせます
• アクセシブルなフォーカス：十分なコントラストのフォーカスインジケーターを見えるようにします
• ブランドのニュートラルカラー：承認済みのグレー、黒、白のトークンを維持します。パレットに制約がない場合に限り、色味を加えることを検討します
• 色付き背景上のテキスト：実際の背景に対するレンダリング後のコントラストと強調を確認します
• パレットの規律：サーフェスとアクセントには、即興で作った個別の色合いではなく、定義済みの色の段階を使用します

インタラクションの状態

各コントロールに関連する状態を確認します。シンプルなナビゲーションリンクに、使用しないローディング、エラー、成功の動作を追加しないでください。

• デフォルト：通常時の状態
• ホバー：控えめなフィードバック（色、拡大縮小、影）
• フォーカス：キーボードフォーカスインジケーター（代替を用意せずに削除しないでください）
• アクティブ：クリック／押下時のフィードバック
• 無効：操作できないことが明確な状態
• ローディング：非同期アクションのフィードバック
• エラー：検証エラーまたはエラーの状態
• 成功：処理が正常に完了した状態

状態が不足すると、混乱や使いにくさにつながります。

状態が変化しても、アクションの階層が保たれるようにしてください。ホバー、フォーカス、アクティブ、ローディング、無効の各状態でも、プライマリアクションがプライマリとして認識できるようにします。

マイクロインタラクションとトランジション

• トランジション：動きによってフィードバックが明確になる場合に限り、状態の変化をアニメーション化します。既存のモーションシステムに合わせます
• イージングの一貫性：意図されたプロジェクトの動きを維持し、作業を妨げる場合は気が散るオーバーシュートを取り除きます
• ぎこちなさの防止：問題のある動きを最適化する前に測定します。効果に適している場合は、transformとopacityを優先します
• 適切なモーション：モーションは装飾ではなく、目的のために使用します
• 動きの低減：prefers-reduced-motionに対応します

コンテンツと文言

• 用語の一貫性：同じものには、全体を通して同じ名称を使用します
• 大文字・小文字の一貫性：タイトルケースとセンテンスケースを一貫して適用します
• 文法とスペル：誤りがないようにします
• 適切な長さ：冗長すぎず、簡潔すぎないようにします
• 句読点の一貫性：ラベルではなく文には句点を付けます（すべてのラベルに句点を付ける場合を除く）

アイコンと画像

• スタイルの一貫性：すべてのアイコンを同じファミリーのもの、またはスタイルが一致するものにします
• 適切なサイズ：用途に合わせてアイコンのサイズを一貫させます
• 適切な配置：アイコンを隣接するテキストに見た目上きれいに揃えます
• 代替テキスト：情報を伝える画像には有用なテキストによる代替を用意します。装飾画像の代替テキストは空にします
• 読み込み時の状態：画像によるレイアウトシフトを防ぎ、適切なアスペクト比を設定します
• Retina対応：高DPI画面向けに2倍のサイズのアセットを用意します
• スクリーンショットの視認性：スクリーンショットを縮小しすぎて、構造が読み取れなくならないようにします
• アイコンサイズの管理：小さなアイコンを拡大して不格好な塊にしたり、細部の多いアイコンを縮小して判別できなくしたりしないようにします

フォームと入力

• ラベルの一貫性：すべての入力に適切なラベルが付いている
• 必須項目の表示：明確で一貫している
• エラーメッセージ：役立つ内容で一貫している
• タブ順序：キーボード操作の順序が論理的
• 自動フォーカス：適切に設定されている（多用しない）
• 検証のタイミング：一貫している（フォーカスを外したときか、送信時か）

エッジケースとエラー状態

• 読み込み状態：すべての非同期アクションで読み込み状況がフィードバックされる
• 空の状態：空白のままにせず、役立つ表示がある
• エラー状態：明確なエラーメッセージと復旧手段がある
• 成功状態：アクションの成功を確認できる
• 長いコンテンツ：非常に長い名前や説明などを適切に処理できる
• コンテンツなし：データがない場合も適切に処理できる
• オフライン：適切なオフライン対応がある（該当する場合）
• 空の状態の階層：空の状態には明確な次のアクションがあり、不要な操作不能のコントロールを放置しない

レスポンシブ対応

• すべてのブレークポイント：狭い、中程度、広いレイアウトをテストする
• ポインターのターゲット：粗いポインターのコンテキストでは最小44x44px
• 読みやすいテキスト：コンパクトなレイアウトでも14px未満のテキストを使わない
• オーバーフロー：意図しないページのオーバーフローを避ける。意図的なテーブルやギャラリーは、スクロール可能で使いやすい状態にする
• 適切なリフロー：コンテンツが論理的に適応する

パフォーマンス

• 初期読み込みの高速化：クリティカルパスを最適化する
• レイアウトシフトなし：読み込み後に要素が跳ねない（CLS）
• スムーズな操作：遅延やカクつきがない
• 画像の最適化：適切な形式とサイズを使用する
• 遅延読み込み：画面外のコンテンツを遅延読み込みする

コード品質

• 変更によって発生したエラーを修正し、プロジェクトに既存の関連チェックを実行してください。
• この作業で追加された未使用のインポートや一時的なデバッグコードを削除してください。意図的なログ出力や有用なTODOは保持してください。
• 変更した動作に影響する場合は、安全でない型指定に対処してください。包括的な禁止事項に合わせるために、無関係な型や依存関係を書き換えないでください。
• セマンティックHTML、アクセシブルな名前、エラー処理を維持してください。

仕上げチェックリスト

順を追って確認してください。

• 該当するビューポートサイズで配置を確認した
• スペーシングにデザイントークンを一貫して使用している
• タイポグラフィの階層に一貫性がある
• 該当するインタラクティブな状態を実装し、確認した
• 該当するトランジションを確認した。パフォーマンスに関する主張は測定結果に裏付けられている
• 文言に一貫性があり、洗練されている
• アイコンに一貫性があり、適切なサイズである
• すべてのフォームに適切なラベルと入力検証がある
• エラー状態が役立つ
• 読み込み状態が明確である
• 空の状態が親しみやすい
• 粗いポインターのターゲットが最小44x44pxである
• コントラスト比がWCAG AAを満たしている
• キーボード操作が機能する
• フォーカスインジケーターが見える
• コンソールエラーや警告がない
• 読み込み時にレイアウトシフトがない
• テストしたブラウザーを明記し、残りのブラウザー対応状況を報告した
• 動きの軽減設定を尊重している
• 無関係なクリーンアップをしていない。意図的なTODOやログ出力を保持している

重要：仕上げは細部が大切です。拡大して確認してください。目を細めて見てください。自分でも使ってみてください。小さなことが積み重なります。

絶対にしてはいけないこと：

• 機能が完成する前に仕上げに取りかかる
• 30分後にリリースされるものに、優先順位を見極めず何時間も仕上げに費やす
• 仕上げ中にバグを持ち込む（十分にテストする）
• 体系的な問題を無視する（あらゆる箇所でスペーシングがずれているなら、システムを修正する）
• ほかを粗雑なままにして、ひとつだけを完璧にする（品質レベルを一貫させる）
• 未解決の階層の問題を隠すために、ボーダー、影、色の装飾を使う
• もっと控えめな区分けのほうが適している場面で、明るいリンク色、ボーダーの乱用、装飾的な重なりを使う

最終確認

視覚的な検証に従ってください。変更したインタラクションを再確認し、関連する視覚状態を再キャプチャしてください。引き継いだ指摘事項ごとに、現在の根拠を添えて、解決済み、一部解決、未解決、または未検証と報告してください。

利用可能でタスクに適している場合は、実機または追加のレビュアーを使用してください。それ以外の場合は、検証上の制限を明記してください。承認された作業を完了するために、他の人やサブエージェントへの依頼を必須にしないでください。

実装した変更、実施したチェック、残っている重要な指摘事項を報告してください。対象を絞った仕上げ作業で、アプリケーション全体を検証したと主張しないでください。