Polish (ポリッシュ)
概要
トークン、構造、アンチスロップの後、レンダリングされたサーフェスでUIの感触を良くするためにマイクロクラフトを適用します。ここでの数値レシピは、標準またはプロジェクトのトークンが所有していない限り、ヒューリスティックです。
使用するタイミング
/uiビルドの仕上げ（anti-slop-designの後）/polish/ 「詳細を微調整」 / 「何かがおかしい」- ホバー、押下、出入り、アイコン切り替えのマイクロインタラクション
スキップするタイミング
- 構造的なグリッド/スペーシング/階層 →
design-foundations - レンダリング方向の比較 / 全状態の強調 →
prototype - ネストされた半径/エレベーション言語 →
design-surfaces - タイプの役割、折り返し、切り詰め →
design-typography - 適合性（コントラスト、名前、キーボード） →
accessibility - モーションシステム / 名前付きファミリー →
motion - コピーのみ / 「AIによる文章」 / 空の状態の文言 →
content-design - 「コードを綺麗に」 / 生成された実装 →
anti-slop-code - レンダリングされたUIの変更がないバックエンドのみの編集
MUST
| ルール | 詳細 |
|---|---|
| レンダリングされた証拠 | ソースのみではなく、レンダリングされたUIから折り返し、配置、押下、半径を判断する |
| トークンを優先 | --radius、スペーシング、タイプトークンを使用する。トークンが存在する場合、一回限りの値を発明しない |
| レシピを分類 | 0.96、スタガーms、および同様の数値をヒューリスティックとしてラベル付けする |
| 最も安価な有効な修正 | 装飾を削除 → ネイティブCSS → プロジェクトトークンを再利用 → その後抽象化を追加 |
| モバイルクラフト | 768px未満で全幅のプライマリCTA。スティッククロームにsafe-area。親指で届くアクション |
transition: all 禁止 | プロパティを指定する。Tailwindの裸のtransitionはスキップする |
| コントロールジオメトリの証明 | 光学的位置合わせを受け入れる前に、保留中/ローディング中および該当するLTR/RTLを含む完全なコントロールマトリックスをレンダリングする |
クラフト（開始点）
| 関心事 | 開始点 | 分類 | 引き継ぎ先 |
|---|---|---|---|
| ネストされたコーナー | 曲線が中心を共有する場合、外側 ≈ 内側 + インセット | ヒューリスティック | design-surfaces |
| コントロール内のアイコン | 幾何学的中心よりも光学的な微調整 | 推奨 | — |
| セクションの奥行き | プロジェクトの境界線/エレベーション言語 | プロジェクトデフォルト | design-surfaces |
| ホバー/トグル | 中断可能なCSSトランジション | 推奨 | 振り付けがある場合は motion |
| 押下 | 押下フィードバックが必要な場合 scale(0.96) | ヒューリスティック | — |
| 動的数値 | tabular-nums | 推奨 | design-typography |
| 短いタイトル | text-wrap: balance | 推奨 | design-typography |
| ヒットエリア | 44×44px タッチ / ≥40px 高密度デスクトップ | 推奨 | WCAG 2.5.8 (24px) については accessibility |
例外: ピル/円形、高密度ツールバー（押下スケールを無効にする）、動きの軽減、非同心のブランド言語、アウトラインが不要な画像。
コントロールジオメトリ
- レンダリングされた光学バリアントマトリックス: テキストのみ、先頭アイコン、末尾アイコン、アイコンのみ、保留中/ローディング中。
幾何学的センタリング（inline-flex / items-center / justify-center）は必要ですが、証明にはなりません。普遍的なピクセルオフセットはありません。最初にレンダリングされたマトリックスを比較し、次に固定アイコンスロットまたはグリフ内に最小限の補正を適用します。
アイコンとラベルの組み合わせコンテンツグループとその知覚される視覚的重みが、バリアントと状態間でバランスが取れ、中央に配置されているかどうかを判断します。ラベルのベースライン/キャップハイトとアイコンの関係を別途評価します。ラベル自体は、アイコン+テキストのバリアントでコントロールの中心を占める必要はありません。アイコンの視覚的重み、トークンギャップ、対称的なトークンパディング、フォーカス、ヒットエリア、無効、保留中/ローディング中を一緒に確認し、意図しないコンテンツグループまたはコントロール幅のシフトがないことを確認します。製品がサポートしている場合は、LTRとRTLの両方を含めます。
デフォルトは安定した保留中ジオメトリです。明示的な測定されたモーフ例外（references/component-patterns.md）については、両方のエンドポイントとターゲット再生を検査し、隣接するアクションが安定していることを確認し、証拠とともに例外を報告します。意図的なモーフは、偶然のスピナーシフトやアクセシブルな名前の欠落を許容しません。
ワークフロー
- スコープ — サーフェスに名前を付けます。構造的またはトークンシステムの作業はスキップします。
- スキャン — 1x/2x、ライト/ダーク、ホバー/押下/フォーカス、モバイル幅でレンダリングします。
- コントロールマトリックス — レンダリングされたサイズで、テキストのみ、先頭/末尾アイコン、アイコンのみ、保留中/ローディング中、該当するLTR/RTLを比較します。
- 修正 — 最も安価な有効な変更。値をトークンにマッピングします。光学補正をアイコンスロット内に維持します。
- 報告 — 原則ごとにグループ化されたBefore/Afterテーブル。未検査の状態は「未確認」とマークします。
境界
- 決定してよいこと: 光学的微調整、名前付きトランジション、tabular-nums、折り返しヘルパー、プロジェクトに押下フィードバックがない場合の押下フィードバック。
- してはならないこと:
0.96、バウンス0、同心円半径を普遍的な法則として扱うこと。壊れたレイアウトの上でポリッシュすること。ブランドフォントを置き換えること。
チェックリスト
- ネストされた半径が光学的に検証された（または
design-surfacesに引き継がれた） - 見た目がずれているアイコンが光学的に中央に配置された
- 完全なレンダリングコントロールマトリックスが確認された: テキストのみ、先頭/末尾アイコン、アイコンのみ、保留中/ローディング中、該当する場合はLTR/RTL
- アイコンとラベルの組み合わせグループ/知覚される視覚的重みが中央に配置され、ラベルのベースライン/キャップハイト関係、アイコンの視覚的重み、トークンギャップ/パディングが確認された
- フォーカス、ヒットエリア、無効、ローディングが、ラベルや幅のシフトなしにジオメトリを維持する
-
transition: allがないこと。ホバー/押下が中断可能であること - 動的数値は、ジッターする可能性がある場所で
tabular-numsを使用する - 見出しは
text-balance、短いコピーは必要に応じてtext-pretty - ヒットエリアは、重なりなしに44/40のガイダンスを満たす
- モバイルクラフト: 768px未満で全幅のプライマリ、safe-area、親指ゾーン
- ヒューリスティックがラベル付けされている。テストされていない状態は「未確認」とマークされている
詳細
完全な例: references/polish.md。
関連: design-surfaces、design-foundations、design-typography、motion、accessibility、references/evidence-policy.md。