ui-aesthetics

UI の美しさ

意図

このスキルは、Web UI の出力をよりプロフェッショナルで、安定感があり、製品として完成度の高いものにするために使用します。

デフォルトの目標：

• ユーザーが求める成果物の範囲とコンテンツ量を維持する
• 装飾を加える前に、バランスの取れた構成にする
• 階層がひと目でわかるようにする
• 色を控えめにしつつ、高級感を持たせる
• 影、ぼかし、グロー、ハイライトは奥行きを明確にする場合にのみ使用する
• 動きは短く、滑らかで、役に立つものにする
• スタイリングより先に、コンポーネントの精度を高める
• 状態、動き、奥行きを、一貫したシステムの中に収める

このスキルは特定のフレームワークに依存しません。ページ構成だけでなく、コンポーネントの精度、状態の挙動、動きの文法、奥行きの扱いも評価してください。まずデザイン上の判断を行い、その後に実装します。

タスクの振り分け

作業に取りかかる前に、依頼を分類します。

1. 生成 ユーザーが新しいページ、セクション、またはコンポーネントを求めている場合に使用します。
2. レビュー ユーザーが UI に対する批評、問題点、または見栄えが弱い原因の診断を求めている場合に使用します。
3. リファクタリング ユーザーが既存の実装を直接書き換えるよう求めている場合に使用します。
4. コンポーネントの仕上げ 構造は問題ないものの、コントロール、カード、テーブル、モーダル、オーバーレイがまだありきたりで安っぽく感じられる場合に使用します。
5. 状態／動きの調整 ホバー、フォーカス、押下、選択、読み込み、成功、エラー、トランジションが雑然としていたり、弱かったり、演出過剰に感じられる場合に使用します。
6. 奥行き／ライティングの調整 影、ハイライト、グロー、ぼかし、ダークモードでの分離を、より慎重に扱う必要がある場合に使用します。

レビューとリファクタリングが混在する依頼では、まず診断し、編集前に書き換えの範囲を決めます。

必須事項

• 求められた範囲を厳守します。コンポーネントはコンポーネントのまま、カードセットは限定されたモジュールのまま、セクションはセクションのままにします。ページとして求められた場合にのみ、ページを作成します。
• 実装に手を加える前に、ビジュアルの方針を決めます。
• スタイリングの前に成果物の種類を確定します。カード、ウィジェット、モーダル、パネル、セクションの依頼を、ランディングページ全体やダッシュボードに変えてはいけません。
• 品質の大部分を、レイアウト、余白、タイポグラフィの階層で表現します。
• 余白で関係性を表現できる場合は、既定の枠線よりも空間的なグルーピングを優先します。
• 「高級感」とは、視覚的な雑音ではなく、節度、一貫性、精度であると捉えます。
• コンテナー、アクセント、同時に使うアイデアの数を減らします。
• 成果物がページの場合は、小さな中央寄せのキャンバスではなく、画面幅いっぱいに広がるビューポート全体の構成をデフォルトにします。
• プラットフォーム、マーケットプレイス、EC、ポータル形式のページでは、デフォルトで全幅のページ構造を使い、全体を中央の単一パネルに閉じ込めず、内部コンテンツの幅を意図的に調整します。
• デフォルトでは、ユーザーの情報密度とコピー量を維持します。
• 依頼に必要な場合を除き、ヒーローコピー、マーケティング文、ナビゲーション、フッター、機能セクション、バッジ、CTA のまとまりを追加しません。
• 通常のカードは簡潔にします。創作した説明文よりも、わかりやすいラベル、値、簡潔な補足テキストを優先します。
• デフォルトでは、クリアなニュートラル、またはやや寒色寄りのニュートラルな面を優先します。クリーム色、ベージュ、アイボリー、暖色系のオフホワイトを、高級感の定番として使ってはいけません。
• コンポーネントの仕上げは、ページ構成より優先度を下げます。
• 関連するコントロールは、共通の幾何学的・動作的システムの一部として扱います。
• デフォルトの状態は視覚的に控えめにし、強い強調はインタラクション状態や意味的な状態に限定します。
• 緊張感、非対称性、視覚的な挑発よりも、バランスと安定感のあるレイアウトを優先します。
• テンプレートに見えないようにすることだけを目的に、非対称性や誇張したコントラストを加えてはいけません。
• 持続する選択状態と、一時的なアクティブ状態や押下時のフィードバックを区別します。
• 奥行きは、レイヤー構造、素材の分離、フォーカスを説明する場合にのみ使います。
• グローは例外的な表現とし、構造として使ってはいけません。
• モバイルでは、デスクトップ版を無理に縮小するのではなく、レイアウトを再構成します。
• そのままリリースでき、保守しやすい成果物にします。

優先順位

タスクで明確に異なる順序が求められていない限り、次の順に作業します。

1. 要求された範囲と成果物の境界
2. 構成と構造のバランス
3. 余白のリズムと情報密度
4. タイポグラフィとコピーの収まり
5. コンポーネントの作り込み
6. インタラクションの状態と動作
7. カラーシステムと意味に基づいた抑制
8. 奥行きの手がかり：境界線、影、ぼかし、ハイライト
9. モーション、フィードバック、トランジション

グレースケールで見てもページに問題があるなら、構造はまだ解決されていません。

ワークフロー

生成

1. 要求された成果物の種類と厳密な範囲（単一のコンポーネント、コンポーネントセット、セクション、ページ全体）を特定します。
2. 範囲を拡大せず、その範囲内での役割、対象ユーザー、情報密度を推測します。
3. calm product clarity、enterprise polish、quiet precision など、目指す印象を短いフレーズで表します。
4. マークアップを書く前に、安定した主ブロックと補助モジュールを選びます。
5. カードやコンポーネントが求められている場合は、明確に提示するために必要な最小限の周辺領域だけを使います。
6. コンテンツ設計を求められていない限り、コピーの分量を維持します。必要に応じて文言を簡潔にしますが、説明文を勝手に追加しないでください。
7. ページが求められている場合は、特に指定がなければ外側のレイアウトを狭い中央の板状に浮かせず、ビューポート全体に広げます。
8. プラットフォームや E コマースのページでは、まずページの骨格を広げます。ナビゲーション、ヒーローのフレーミング、カテゴリーレール、キャンペーン領域、商品ストリームがビューポート全体に広がるようにしてから、個々のモジュールをカード化します。
9. 色のロジックを定めます。まずニュートラルカラー、次にアクセントカラーを選びます。
10. 洗練さを加える前に、コンポーネントの寸法、状態、動作に一貫性を持たせます。
11. 静的な構成が機能してから、奥行きとモーションを加えます。
12. 要求された成果物がデスクトップとモバイルの両方に及ぶ場合は、それぞれの動作を明示します。

ビジュアルの方向性がまだ曖昧な場合は、references/design-principles.md を読みます。 パレットが派手すぎる、平坦すぎる、または安っぽく見える場合は、references/color-system.md を読みます。 コントロール、フォーム、カード、テーブル、オーバーレイが中心の依頼では、references/component-aesthetics.md を読みます。 ホバー、フォーカス、アクティブ、選択済み、読み込み中、成功、エラーの動作が重要な場合は、references/interaction-states.md を読みます。 モーション全般の指針については、references/motion-principles.md を読みます。 トランジション、ホバーの動作、または表示アニメーションをより細かく制御する必要がある場合は、references/motion-patterns.md を読みます。 影、ハイライト、グロー、ぼかし、またはダークモードでの奥行きのロジックをより細かく制御する必要がある場合は、references/depth-lighting-system.md を読みます。 ユーザーがより具体的なビジュアルの個性を求めている場合は、references/style-archetypes.md を読みます。

レビュー

1. CSS の細かな問題ではなく、最も大きな構造上の問題から着手します。
2. 問題が階層、密度、コンポーネントの品質、状態の動作、パレット、奥行き、モーションのどれにあるかを説明します。
3. 各指摘を、読みやすさ、信頼感、注目の向けやすさ、または操作の明確さに結び付けます。
4. 一般的な好みの表現より、具体的な修正案を優先します。

指摘を整理するには、references/review-rubric.md を使います。 UI が AI 生成のように見える、または表面的にしか高級感がない場合は、references/anti-patterns.md を使います。 主な弱点がパレットの統制やアクセントカラーの誤用にある場合は、references/color-system.md を使います。 主な弱点がコントロール、カード、テーブル、オーバーレイの品質にある場合は、references/component-aesthetics.md を使います。 主な弱点がホバー、フォーカス、アクティブ、選択済み、読み込み中、エラーの動作にある場合は、references/interaction-states.md を使います。 主な弱点がアニメーションの品質、タイミング、またはフィードバックの動作にある場合は、references/motion-principles.md と references/motion-patterns.md を使います。 主な弱点が影のぼやけ、グローの誤用、レイヤーの弱さ、またはダークモードでの奥行きにある場合は、references/depth-lighting-system.md を使います。

リファクタリング

1. light polish、medium restructure、full rebuildから選択します。
2. コンポーネントの見た目を整える前に、レイアウトとグルーピングを修正します。
3. 階層が不明瞭な場合は、弱いスタイルを取り除き、グレースケールの構造に戻します。
4. 見た目を整える前に、コンポーネントの寸法と状態ロジックを再構築します。
5. インターフェースに必要な色、奥行き、動きだけを再び取り入れます。
6. デスクトップの構造をそのまま適用できない場合は、モバイル向けに意図的に再構築します。
7. 編集を始める前に、書き換えのレベル、根本的な問題、目指す方向を明示します。

大幅なビジュアル変更の前に、references/rewrite-playbook.mdを参照します。 コントロールやオーバーレイを大幅に書き換える前に、references/component-aesthetics.mdを参照します。 状態ごとの動作を変更する前に、references/interaction-states.mdを参照します。 雑然とした配色を書き換える前に、references/color-system.mdを参照します。 トランジションの追加や簡略化の前に、references/motion-principles.mdとreferences/motion-patterns.mdを参照します。 エレベーション、グロー、ハイライトのロジックを追加または削除する前に、references/depth-lighting-system.mdを参照します。

アンチパターンの方針

次のような出力は避けてください。

• コンポーネントの依頼を、ページ全体、ダッシュボードのシェル、ランディングページのレイアウトへと不必要に拡大する
• 依頼されていない説明文、バッジ、統計情報、CTAブロックを追加し、装飾的なコピーを膨らませる
• コンテンツ上の理由がないのに、ページ全体のレイアウトを不必要に狭い中央配置のシェルに閉じ込める
• プラットフォームやECサイトのページを、全幅のページ構造を使わず、巨大な中央配置カード1つに閉じ込める
• テンプレートのような、中央にヒーローを積み、その下にカードグリッドを並べるレイアウト
• 緊張感を演出するために、不安定なレイアウトや無理のある非対称レイアウトを使う
• 明確な読み順のない、同じ強さのモジュール
• サーフェス、枠線、ピル、角丸を使いすぎる
• 「高級感」を手っ取り早く演出するために、クリーム色、ベージュ、アイボリー、暖色系のオフホワイトをデフォルトのニュートラルカラーとして使う
• 不安定なニュートラルカラーの上に、派手なアクセントカラーを置く
• デフォルト状態ですでに強調しすぎている
• ホバー、押下、または表示の挙動が、操作を演出過剰なものにする
• クリック時のフィードバックのように見える選択状態
• 洗練されて見せるためにグロー、シャドウ、ぼかし、グラデーションを使う
• 視覚を誘導するのではなく、アニメーション自体を目立たせる
• すべてが同時に浮いているように見える奥行き表現
• 明確さより先に印象づけることを狙った、ビジュアル重視の表現
• 強調の組み直しをせず、単に列を折りたたむだけのモバイルレイアウト

仕上がりは洗練されているのに安っぽく感じられる場合は、references/anti-patterns.mdを参照します。

自己批評

最終出力の前に、以下を確認してください。

• 結果は、依頼された範囲内に収まっており、依頼されていないページを作り出していませんか？
• 最初の3秒で、内容が明確に伝わりますか？
• グラデーションや影がなくても、レイアウトに説得力があり、バランスが取れていますか？
• ページの場合、デフォルトで構成が画面幅を実際に使っていますか？
• プラットフォームやECサイトのページの場合、内側のコンテンツ領域だけを制限し、外側の骨格はビューポート全体に広がっていますか？
• 特に一般的なカードでは、コピーを可能な限り短くしていますか？
• アクセントカラーが意味を持つように、ニュートラルカラーは落ち着いていて、一貫性がありますか？
• コンテンツ上の理由もなく、クリーミーな色や温かみのあるオフホワイトを高級感の演出に使っていませんか？
• 関連するコントロールの高さ、パディングの考え方、角丸のルールは統一されていますか？
• フォーカス、アクティブ、エラーの各状態を際立たせる余地が残るよう、デフォルト状態は控えめですか？
• 選択状態と押下状態は明確に区別できますか？
• コンポーネント同士に統一感がありながら、すべてが同じ強さになっていませんか？
• 影やハイライトは、ぼんやりとした印象を生むのではなく、奥行きを表現していますか？
• ダーク UI では、ぼかしや影より先に、サーフェスの階層とエッジの定義で奥行きを表現していますか？
• グローは、意味を保てる程度に控えめですか？
• モーションのタイミングは、制御されていて短く感じられますか？
• モーションは演出過剰にならず、インタラクションのロジックを補強していますか？
• 構成は目を引こうとしすぎず、バランスを保っていますか？
• モバイルで最初に表示される画面でも、主要なメッセージやアクションが維持されていますか？
• 改善によって、スタイルを追加するのではなく、ノイズを取り除いていますか？

参考資料

• デザインの基本原則：references/design-principles.md
• カラーシステムのルール：references/color-system.md
• コンポーネントの仕上げに関するルール：references/component-aesthetics.md
• インタラクション状態のルール：references/interaction-states.md
• モーションの原則：references/motion-principles.md
• モーションパターンのルール：references/motion-patterns.md
• 奥行きとライティングのルール：references/depth-lighting-system.md
• スタイルの類型：references/style-archetypes.md
• アンチパターン：references/anti-patterns.md
• レビューの構成：references/review-rubric.md
• 書き直しの深さと出力要件：references/rewrite-playbook.md
• 判断例の要約：references/distilled-examples.md