name: ui-polish description: フロントエンド UI の質感とインタラクション詳細に関するエンジニアリングパラメータ仕様（色階層、フォントウェイト補正、ストリーミングテキスト、スプリングモーション、コンポーネント選定境界）。ユーザーがフロントエンドインターフェースの作成・変更、ページ/コンポーネント/スタイル/アニメーションの作成、UIの「質感/洗練さ/安っぽさ」の最適化、モーダルやフィードバックシーン向けのコンポーネント選定を要求する場合に使用。React+AntD、Vite、HTML/CSS など任意のフロントエンドスタック対応。Engineering-grade UI polish rules: color-tier layering, font-weight compensation, streaming text, spring motion parameters, and component selection boundaries.
UI 質感仕様
インターフェースの「高級感」は定量化可能な細部パラメータに由来します。本仕様に従ってスタイルとアニメーションを作成。プロジェクト既存の design token / AntD テーマと競合する場合は、プロジェクトを優先。デュアルテーマは常に html[data-theme] スコープの CSS 変数で実装し、light-dark() は使用しない（旧カーネル互換性の落とし穴のため）。
一、質感の鉄則
- レイヤリングにボーダーを使わない: 階層は 1%～3% の明度差の背景色階で表現。純粋な黒
#000は禁止。- ライト: ページ背景
#f5f5f3/ カード#fcfcfb; ダーク:#0b0b0a/#151515/#1a1a19/#20201e（暗から明への階層階段） - AntD プロジェクトは token（colorBgLayout/colorBgContainer）に合わせ、色値を個別にハードコードしない
- ライト: ページ背景
- フォーカスはアウトラインではなくシャドウで: 入力フィールド/カードのフォーカス時は二重リング
box-shadow（内側リングはベタ色の輪郭 + 外側リングは低透明度のプライマリカラーグロー）で「噛み合い感」を演出。デフォルトの outline は削除するが、:focus-visibleの可視フォーカスは必ず保持 - ダークモードでのフォントウェイト補正: ダークモードではフォントウェイトを一段階下げる（400→300、可変フォントでは正確に 360）。白文字の膨張によるハロー効果を相殺。テーマに応じて CSS 変数で切り替え
- ストリーミングテキストの墨にじみ効果: 1 文字 90ms、
blur(6px)+ 半透明から鮮明に遷移。イージングcubic-bezier(.215,.61,.355,1)。隣接文字は 30ms ずらしてにじませる。文字単位の硬直した出現や段落全体のフラッシュ表示は禁止 - インラインアイコンの垂直配置:
vertical-align: -0.125em、または flex +align-items: centerでラップ - 数字のガタつき防止: 統計数字/時刻/価格は常に
font-variant-numeric: tabular-numsを使用。更新や変更時に幅が変動しないようにする - スムーズな折りたたみ: 高さアニメーションに JS での計算は不要。
display: grid+grid-template-rows: 0fr → 1frで遷移（内側はoverflow: hidden） - 一行あたりの文字数調整: 本文は
text-wrap: pretty、見出しはtext-wrap: balance - アニメーションの性格付け:
- ドラッグ/スナップ/配置: 過減衰スプリング（stiffness 1200 / damping 80）または
cubic-bezier(.2,0,0,1)、リバウンドなし、一度で固定 - いいね/チェックマーク/成功フィードバック: 不足減衰（380 / 18）、小さなリバウンド一回、弾力感
- 出現 150～250ms、退場 100～150ms、速くかつ控えめ
- ドラッグ/スナップ/配置: 過減衰スプリング（stiffness 1200 / damping 80）または
- フィードバックの自動消滅: コピー/保存などの一時的なフィードバックは 2～2.5 秒表示後、自動的にフェードアウトして元の状態に戻る。ユーザーによる手動クローズは不要
二、安っぽさの逆引きリスト（セルフチェック）
いずれかが該当する場合は修正:
- 1px のボーダーですべての領域を区切っている; 広範囲にわたる純黒/純白の背景
- フォーカス時にブラウザデフォルトの青い outline
- ダークモードでライトモードと同じフォントウェイトを使用（白文字が太くなる）
- ストリーミング出力で文字が硬直して出現するか段落全体がフラッシュ表示される
- 数字の変化時にガタつく; すべてのアニメーションが同じ ease を共有し、速度の性格が異ならない
- 一時的なフィードバックが消えず、手動クローズが必要
- 情報量のない装飾の過剰使用: ALL-CAPS の小見出し、中点で区切られた文字列、ボタン接尾辞の
→、ありとあらゆるグラデーショングロー
三、コンポーネント選定の境界（モーダルとフィードバック）
| シナリオ | 使用するもの | 要点 |
|---|---|---|
| ボトムハーフ画面でのコンテンツ閲覧、高さ調整可能（モバイル） | Bottom Sheet（AntD Drawer placement="bottom"） | 減衰ジェスチャー、段階的スナップ、高さ 3 段階 peek/half/full ≈ 25/50/90% |
| 少数の排他的アクションの選択（モバイル） | Action Sheet | フラットボタン、独立したキャンセル項目、危険アクションは赤色で表示しキャンセルとは分離 |
| 操作後の軽い通知、取り消し可能 | Snackbar（AntD message + 取り消しボタン） | 下部に表示されるフローティングバー、タイムアウトで自動消滅、取り消しは操作を実際に元に戻せること |
| 高リスク/ブロッキング確認 | AlertDialog（AntD Modal） | 背景マスクでロック; 不可逆操作の場合のみ Esc を無効にし、それ以外は保持 |
| 新機能/初心者ガイド | Tour（AntD Tour） | ハイライト位置指定 + ステップツアー、スキップ可能 |
| 画像/メディア拡大 | Lightbox（antd-image または自作） | スクロールズーム、Esc で閉じる |
| フォームフィールドバリデーション | Inline Alert（AntD Form バリデーション） | 入力フィールド下に赤文字、即時バリデーション、修正で即座に消える; グローバル message でフィールドエラーを報告しない |
ブロッキング度（低→高）: Snackbar < Inline Alert < Sheet < Action Sheet < Dialog。デスクトップでは Modal/message 優先、モバイルでは Sheet 系優先。迷ったらブロッキング度の低い方を選ぶ。
四、アニメーション性格ライブラリ（必要に応じて使用、すべてを一度に使わない）
- 完了フィードバックボタン: クリック後、円形に縮小 → チェックマークをストロークで描画 → パーティクルが発散、300～400ms
- チェックボックス連動: チェック → プログレスリングが成長 + 数字がスクロール + 上部背景が進捗に応じて変化
- カードスタック展開: カード群が順次展開（各カード 50ms ずつずらし）、再度クリックで折りたたんでスタックに戻す
- スナップカード + ライン描画: 横スワイプで手を離すと、最も近いカード位置にスナップ（スプリング 1200/80）。切り替え時にタイムラインを
stroke-dashoffsetで順次描画 - 慣性スクロールホイール: ピッカーが慣性回転 → 減速 → 目盛りにスナップ。スワイプオーバー時にリバウンド（不足減衰 380/18）
- 円形拡散トランジション: 指/カーソルが押された位置から
clip-path: circle()で拡散して全面を覆う、400～500ms
実装は CSS transition/animation と Web Animations を優先。スプリングパラメータは framer-motion のセマンティクス（stiffness/damping）に準拠。すべてのアニメーションに prefers-reduced-motion によるフォールバックが必要（直接切り替え/フェードインで可）。
五、納品セルフチェック
- レイヤリングは色階に依存。純黒/純白の大面積背景なし、全面ボーダーでの区切りなし
- キーボードフォーカスが可視（二重リングシャドウ）、タッチターゲット ≥ 44px
- ダークモードでフォントウェイト補正済み
- 数字は
tabular-nums; 本文はtext-wrap: pretty - アニメーションは 2 段階の性格、時間は指定範囲内;
prefers-reduced-motionにフォールバックあり - 一時的なフィードバックは 2～2.5 秒で自動消滅; フォームエラーはインラインヒントで表示
出典
パラメータは 3 つの抖音動画（2026-10）から抽出: Ludi「大企業の AI クライアントソースコードを解析、質感はこの 5 つのテクニック」「6 つの隠れたエースコンポーネント」、西瓜同学「第 14 集: AI が作ったアプリをより洗練させる 6 つのインタラクション」。