premium-ui-revamp-skill

プレミアムな UI への刷新

既存のインターフェースを、信頼感があり、意図の明確なプロダクトへと作り変えます。機能している部分は維持し、プロダクトの背景に基づいてデザインを導き出し、既存の技術スタックで改善を実装して、提案だけで終わらせず、実際に表示された結果を検証します。

基本原則

• 「プレミアム」とは、特定のビジュアルスタイルではなく、明瞭さ、節度、一貫性、完成度、目的への適合性を指すものとして捉えます。
• プロダクト、対象ユーザー、コンテンツ、ブランドの手がかり、利用状況からデザインの方向性を導きます。すべてのプロジェクトに同じ暗いグラデーション、グラスモーフィズム、角丸カードの美学を押し付けないでください。
• ユーザーからより広範な変更を求められない限り、機能、ルート、データフロー、文言、既存のデザインシステムの慣例を維持します。
• 多くの装飾効果を加えるより、影響の大きい構造上の判断をいくつか優先します。
• インターフェースに意図を感じさせます。明確なビジュアルのアイデアをひとつ定め、タイポグラフィ、構成、色、画像、インタラクションに一貫して反映させます。
• 現在のフレームワークとスタイリングシステムを使います。導入する利点が明確で、プロジェクト内に代替手段がない場合に限り、依存関係を追加します。
• 実際のコンテンツと現実的な状態を使います。弱い構造を、仮の文言、過剰に広い空白、装飾的なグラフィックで覆い隠さないでください。

ワークフロー

1. 実際の画面を把握する

編集を始める前に、リポジトリを調査します。次の項目を特定します。

• アプリのフレームワーク、エントリーポイント、対象ルート、コンポーネントツリー。
• グローバルスタイル、デザイントークン、テーマ、コンポーネントライブラリ、アイコン、フォント、ブランドアセット。
• 既存のレスポンシブ対応と重要なインタラクション状態。
• ビルド、Lint、テスト、プレビューのコマンド。
• 既存の慣例を維持すべき近接画面。

可能な場合はインターフェースを実行します。代表的なデスクトップとモバイルのサイズで、変更前の状態をキャプチャするか確認します。ユーザーが分析のみを求めた場合は、監査と提案の後で終了します。それ以外の場合は、実装と検証まで進めます。

刷新を容易にするためだけに、技術スタックを置き換えたり、無関係なコンポーネントを書き換えたり、新しいブランドを考案したり、プロダクトの動作を変更したりしないでください。

2. 簡潔なデザインブリーフを作成する

スタイルを変更する前に、方向性を数行でまとめます。

• プロダクトとユーザー： このインターフェースが、誰のどのような目的達成を支援するのか。
• 望ましい印象： 精密、落ち着いた、エディトリアル、技術的、温かみのある、控えめ、活気のある、などの有用な属性から二つまたは三つ選びます。
• ビジュアルの軸： プロダクトを印象づける、構成または美学の中心となるアイデアをひとつ特定します。
• 情報の優先順位： 主要なアクション、主要な情報、補足コンテンツを明記します。
• 制約： 既存のブランド、アクセシビリティ、コンテンツ、フレームワークに関する要件を記録します。

ユーザーから提示されていない場合は、コードとプロダクトの背景からこれらを推測します。判断の欠如が結果を大きく左右する場合に限り、質問します。

3. 装飾する前に監査する

現在のインターフェースを評価する場合や、変更の優先順位を決める場合は、references/quality-rubric.md を読みます。

調査結果を次の三段階に分類します。

1. 構造： 階層の破綻、情報設計の混乱、コンテンツ順序の不備、不適切な情報密度、レスポンシブな構成の弱さ。
2. システム： タイポグラフィ、余白、色、角丸、シャドウ、コンポーネントのバリエーション、状態の不統一。
3. 仕上げ： 視覚的な位置合わせ、アイコンの扱い、境界線、マイクロコピー、トランジション、細部の仕上げ。

この順に修正します。装飾では、構造の分かりにくさを解消できません。

4. 意図的な方向性を選ぶ

UI がありきたり、テンプレート頼み、または明らかに AI 生成に見える場合は、references/premium-patterns.md を読んでください。

流行の表現をすべて組み合わせるのではなく、プロダクトに合った方向性を選びます。次の項目を明確に決めてください。

• コンテンツ幅とグリッドの動作；
• 情報密度と垂直方向のリズム；
• 文字の役割、サイズ、ウェイト、行長；
• ニュートラルな配色、アクセントの使い方、コントラストの階層；
• 境界線、角丸、エレベーション、サーフェスのルール；
• アセットがある場合の画像やイラストの扱い；
• プロダクトに適している場合は、控えめなシグネチャーモチーフを 1 つ；
• モーションの目的、継続時間、動きを減らす設定への対応。

既存のブランドアセットと優れたコンポーネントを再利用します。プロダクト上の根拠がない装飾的な表現は取り除きます。

5. 基礎から順に実装する

次の順序で変更を適用します。

1. セマンティックな構造とコンテンツの順序を正します。
2. 文字、間隔、色、角丸、エレベーション、モーションのトークンまたは共有変数を定義します。
3. ページグリッド、コンテナー、主要領域、レスポンシブブレークポイントを修正します。
4. タイポグラフィとコントロールを整えます。
5. 繰り返し使われるコンポーネントとインタラクション状態を統一します。
6. ビジュアルの方針を支える画像、細部、モーションだけを追加します。

固定されたモックアップ座標よりも、可変サイズ、柔軟なグリッド、コンテンツに応じたブレークポイントを優先します。セマンティック HTML を使用し、キーボード操作を維持してください。プロダクト画面で必要な場合は、ホバー、フォーカス可視、アクティブ、選択済み、無効、読み込み中、空、エラー、成功の各状態を含めます。

コードベースに見合った規模の抽象化にとどめます。繰り返し使われる値やパターンは再利用しますが、1 ページの仕上げのために大規模なデザインシステムのレイヤーを作らないでください。

6. ありきたりな UI の特徴を取り除く

次の点を意識的に確認してください。

• 曖昧なマーケティング文句を添えた、過度に大きなグラデーション見出し；
• プロダクトとの関連性がない発光するブロブ、装飾的なグリッド背景、ガラス風パネル；
• 過剰なピル型要素、角丸の長方形、入れ子状のカード、あらゆるサーフェスへのシャドウ；
• 大きな中央揃えのヒーローの後に、入れ替え可能な機能カードが並ぶ構成；
• 根拠のない紫や青のアクセント、統一感のないアイコン円、グラデーション塗りのプライマリボタン；
• エフェクトに隠れた弱いタイポグラフィ；
• 注目を高めるのではなく情報価値を下げる、過剰な余白；
• 小さな灰色の文字、コントラストの低い境界線、プレースホルダー風のメタデータ；
• 意味のある状態変化ではなく、あらゆる場所に適用されたモーション；
• 一貫性のない間隔や、場当たり的な値の多用。

このリストにあるという理由だけで、表現を取り除かないでください。ブランドを表現している、またはインタラクションに役立っている場合は残し、意図的かつ一貫性のあるものにします。

7. レンダリング結果を検証する

利用可能な中で最適なブラウザーまたはスクリーンショットのワークフローを使います。少なくとも次を検証してください。

• 代表的なデスクトップ幅；
• 狭いモバイル幅；
• レイアウトが大きく変わるブレークポイント；
• 利用可能な場合は、長いコンテンツ、空のコンテンツ、エラー／読み込み中の状態；
• キーボードフォーカス、ラベル、タップ対象、読みやすいコントラスト、動きを減らす設定；
• オーバーフロー、クリッピング、予期しない折り返し、レイアウトシフト。

関連するビルド、型チェック、Lint、対象を絞ったテストを実行します。実際に測定していない限り、アクセシビリティへの準拠を主張しないでください。確認した内容を報告します。

最終的なレンダリング結果をベースラインと比較します。階層、密度、配置、コントラスト、レスポンシブ対応にまだ課題がある場合は、改善を繰り返してください。リニューアルが成功したかどうかは、一目で明らかに良くなり、細部まで見ても一貫性があるかで判断します。

完了基準

ユーザーが分析のみを求めている場合を除き、ムードボードや CSS の提案リストだけでなく、動作する実装を提供してください。次の点を要約します。

• デザインの方向性と、それがプロダクトに適している理由；
• 構造面とビジュアル面での主な変更；
• 実施した検証と残っている制約。

細かな CSS の調整をすべて列挙するのは避けてください。プロダクト全体にとっての改善点を最初に示します。