UI美学 (UI Aesthetics)
意図 (Intent)
このスキルを使用して、Web UIの出力をよりプロフェッショナルで安定したプロダクション品質にします。
デフォルトの目標:
- ユーザーが要求したアーティファクトの範囲とコンテンツ量を維持する
- 装飾を追加する前に、バランスの取れた構成を生み出す
- 階層を一目で読み取れるようにする
- 色彩は控えめでありながら、高級感のあるものにする
- シャドウ、ぼかし、グロー、ハイライトは、奥行きを明確にする場合にのみ使用する
- モーションは短く、スムーズで、有用なものにする
- コンポーネントは、スタイルが適用される前に、まず精密さを感じさせる
- 状態、モーション、奥行きを一貫した一つのシステムに保つ
このスキルはフレームワークに依存しません。ページ構成だけでなく、コンポーネントの精密さ、状態の動作、モーションの文法、奥行きの規律も判断します。まずデザイン判断でリードし、その後実装します。
タスクルーティング (Task Routing)
行動する前にリクエストを分類します:
- 生成 (Generation) ユーザーが新しいページ、セクション、コンポーネントを希望する場合に使用します。
- レビュー (Review) ユーザーが批評、発見事項、またはUIが弱いと感じる原因の診断を希望する場合に使用します。
- リファクタリング (Refactor) ユーザーが既存の実装を直接書き換えることを希望する場合に使用します。
- コンポーネント研磨 (Component Polish) 構造は許容できるが、コントロール、カード、テーブル、モーダル、オーバーレイがまだ一般的または安っぽく感じられる場合に使用します。
- 状態/モーション洗練 (State / Motion Refinement) ホバー、フォーカス、押下中、選択、ローディング、成功、エラー、またはトランジションが、うるさく、弱く、または劇的に感じられる場合に使用します。
- 奥行き/照明洗練 (Depth / Lighting Refinement) シャドウ、ハイライト、グロー、ぼかし、またはダークモードの分離が、より厳格な規律を必要とする場合に使用します。
リクエストがレビューとリファクタリングを混合している場合は、最初に診断し、編集前にリライトの深さを選択します。
非交渉事項 (Non-Negotiables)
- 要求された範囲を正確に尊重する: コンポーネントはコンポーネントのまま、カードセットは境界のあるモジュールのまま、セクションはセクションのまま、ページは要求された場合にのみページにする。
- 実装に触れる前に、ビジュアルのテーマを決定する。
- スタイリングの前にアーティファクトタイプを固定する: カード、ウィジェット、モーダル、パネル、セクションのプロンプトを、完全なランディングページやダッシュボードにしない。
- レイアウト、スペーシング、タイプの階層に品質の大部分を負わせる。
- スペーシングで関係を表現できる場合は、デフォルトのフレーミングよりも空間的なグループ化を優先する。
- 「プレミアム」を、視覚的なノイズではなく、抑制、一貫性、精密さとして扱う。
- コンテナ、アクセント、同時に使用するアイデアは少なくする。
- 要求されたアーティファクトがページの場合、デフォルトで小さな中央寄せキャンバスではなく、画面幅を埋めるフルビューポート構成にする。
- プラットフォーム、マーケットプレイス、eコマース、ポータルスタイルのページの場合、デフォルトで全幅のページスケルトンを使用し、内部コンテンツを意図的に制約して、体験全体を一つの中央パネルに閉じ込めない。
- デフォルトでユーザーの情報密度とコピーのフットプリントを維持する。
- リクエストが必要としない限り、ヒーローコピー、マーケティング段落、ナビゲーション、フッター、機能セクション、バッジ、CTAクラスターを追加しない。
- 通常のカードは簡潔に保つ。発明されたあらすじより、強力なラベル、値、コンパクトな補足テキストを優先する。
- デフォルトでは、シャープなニュートラルまたはややクールなニュートラルサーフェスを優先する。自動的な高級感のシグナルとして、クリーム、ベージュ、アイボリー、暖かみのあるオフホワイトを使用しない。
- コンポーネントの研磨はページ構成に従属させる。
- 関連するコントロールを、一つの幾何学的かつ動作的なシステムのメンバーとして扱う。
- デフォルト状態は視覚的に静かに保ち、より強い強調はインタラクションとセマンティック状態のために残す。
- 緊張感、非対称性、視覚的挑発よりも、バランスの取れた安定したレイアウトを優先する。
- テンプレート的に見えることを避けるためだけに、非対称性や誇張されたコントラストを導入しない。
- 永続的な選択状態と、一時的なアクティブまたは押下中のフィードバックを区別する。
- 奥行きは、レイヤリング、マテリアルの分離、フォーカスを説明する場合にのみ使用する。
- グローは例外的なものとして扱い、構造的なものとしては扱わない。
- モバイルは、デスクトップを押しつぶしたレイアウトではなく、再構成されたレイアウトにする。
- 結果は出荷可能で保守可能な状態に保つ。
優先順位 (Priority Order)
タスクが明らかに異なる順序を必要としない限り、以下の順序で作業します:
- 要求された範囲とアーティファクトの境界
- 構成と構造のバランス
- スペーシングのリズムと情報密度
- タイポグラフィとコピーの適合
- コンポーネントの細工品質
- インタラクションの状態と動作
- カラーシステムとセマンティックな抑制
- 奥行きの手がかり: ボーダー、シャドウ、ぼかし、ハイライト
- モーション、フィードバック、トランジション
ページがまだグレースケールで成立しない場合、構造はまだ解決されていません。
ワークフロー (Workflow)
生成 (Generation)
- 要求されたアーティファクトタイプと厳密な範囲を特定する: 単一コンポーネント、コンポーネントセット、セクション、またはフルページ。
- 範囲を拡大する代わりに、その範囲内での役割、オーディエンス、密度を推測する。
- 望ましい印象を「穏やかなプロダクトの明瞭さ」、「エンタープライズの洗練」、「静かな精密さ」のような短いフレーズで命名する。
- マークアップを書く前に、安定したプライマリブロックとサポートモジュールを選択する。
- リクエストがカードまたはコンポーネントの場合、それを明確に提示するために必要な最小限の周囲キャンバスのみを使用する。
- ユーザーがコンテンツデザインを求めない限り、コピーのフットプリントを維持する。必要に応じて文言を引き締めるが、余分な説明テキストを発明しない。
- リクエストがページの場合、外部レイアウトをデフォルトでビューポート全体に広げ、狭い中央寄せのスラブとして浮かせない。
- プラットフォームまたはeコマースページの場合、最初にページスケルトンを拡張する: ナビゲーション、ヒーローフレーミング、カテゴリレール、キャンペーンゾーン、プロダクトストリームを、個々のモジュールをカード化する前にビューポート全体に呼吸させる。
- カラーロジックを定義する: ニュートラルを先に、アクセントを後に。
- コンポーネントのメトリクス、状態、動作が、研磨を追加する前にシステム化されていると感じさせる。
- 静的な構成が機能した後にのみ、奥行きとモーションを追加する。
- 要求されたアーティファクトが実際にデスクトップとモバイルの両方に及ぶ場合、デスクトップとモバイルの動作を明示的にする。
ビジュアルの方向性がまだ曖昧な場合は、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 を読んでください。
レビュー (Review)
- CSSの些細なことではなく、最大の構造的欠陥から始める。
- 問題が、階層、密度、コンポーネント品質、状態動作、パレット、奥行き、モーションのいずれであるかを説明する。
- 各発見事項を、読みやすさ、信頼性、焦点、アクションの明確さに関連付ける。
- 一般的な好みの表現よりも、直接的な修正を優先する。
発見事項を構造化するには、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 を使用してください。
リファクタリング (Refactor)
- 「軽い研磨」、「中程度の再構築」、「完全な再構築」のいずれかを選択する。
- コンポーネントの化粧直しの前に、レイアウトとグループ化を修正する。
- 階層が不明瞭な場合は、弱いスタイリングを剥がしてグレースケール構造に戻す。
- 研磨を追加する前に、コンポーネントのメトリクスと状態ロジックを再構築する。
- インターフェースにまだ必要な色、奥行き、モーションのみを再導入する。
- デスクトップ構造が変換できない場合は、モバイルを意図的に再構築する。
- 編集前に、リライトレベル、核心的な欠陥、意図した方向性を述べる。
広範なビジュアル変更の前に、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 を使用してください。
アンチパターンポリシー (Anti-Pattern Policy)
以下に依存する出力を拒否します:
- コンポーネントのリクエストを完全なページ、ダッシュボードシェル、ランディングレイアウトに変えるスコープの拡大
- 要求されていないフィラー説明、バッジ、統計、CTAブロックを追加する装飾的なコピーの拡大
- コンテンツ上の理由なく、不必要に狭い中央寄せシェルに閉じ込められたページレベルのレイアウト
- 全幅のページスケルトンを使用する代わりに、一つの特大の中央寄せカードに箱詰めされたプラットフォームまたはeコマースページ
- テンプレート的な中央積み重ねヒーローとカードグリッドのレイアウト
- 緊張感を生み出すために使用される不安定または強制的な非対称レイアウト
- 明確な読み取り順序のない同等の重みのモジュール
- 多すぎるサーフェス、ストローク、ピル、半径
- 「プレミアム」のデフォルトのショートカットとして使用されるクリーム、ベージュ、アイボリー、または暖かみのあるオフホワイトのニュートラル
- 不安定なニュートラル上にある派手なアクセントカラー
- すでに強調を多用しているデフォルト状態
- インタラクションを振り付けに変えるホバー、押下、または表示動作
- クリックフィードバックのように見える選択状態
- 洗練を偽装するために使用されるグロー、シャドウ、ぼかし、グラデーション
- 知覚を導く代わりにそれ自体に注意を向けるアニメーション
- すべてが同時に浮いている奥行きシステム
- 明確にする前に印象づけるために設計された強いビジュアル処理
- 強調を再構成せずに単にカラムを折りたたむだけのモバイルレイアウト
結果が洗練されているがまだ安っぽく感じられる場合は、references/anti-patterns.md を読んでください。
自己批評 (Self-Critique)
最終出力の前に、以下を確認:
- 結果は、ユーザーの要求範囲内に留まり、その周りにページを発明しなかったか？
- 最初の読み取りは3秒以内に明白か？
- レイアウトは、グラデーションやシャドウがなくても、信頼性がありバランスが取れていると感じられるか？
- これがページの場合、構成はデフォルトで実際に画面幅を占めているか？
- これがプラットフォームまたはeコマースページの場合、外部スケルトンはビューポート全体に拡張され、内部コンテンツエリアのみが制約されたままになっているか？
- コピーは、特に通常のカードで、タスクが許す限り短く保たれたか？
- ニュートラルは、アクセントカラーが何かを意味するのに十分穏やかで一貫しているか？
- パレットは、コンテンツ上の理由なく、クリーミーまたは暖かみのある白の高級感の手がかりをデフォルトにしなかったか？
- 関連するコントロールは、互換性のある高さ、パディングロジック、半径の規律を共有しているか？
- デフォルト状態は、フォーカス、アクティブ、エラー状態のための余地を残すのに十分静かか？
- 選択状態と押下状態は明確に区別されているか？
- コンポーネントは、すべて同じ重みを持つことなく、関連しているように見えるか？
- シャドウとハイライトは、霧を作り出す代わりに奥行きを説明しているか？
- ダークUIでは、奥行きはぼかしとシャドウの前に、サーフェスの階層とエッジの定義から来ているか？
- グローは、まだ何かを意味するのに十分珍しいか？
- モーションのタイミングは制御され、簡潔に感じられるか？
- モーションは、振り付けになる代わりにインタラクションロジックを強化しているか？
- 構成は、注目を集めようとするのではなく、バランスを保ったか？
- 最初のモバイルビューポートは、同じ主要メッセージまたはアクションを保持しているか？
- アップグレードは、より多くのスタイリングを追加するのではなく、ノイズを取り除いたか？
リファレンス (References)
- コアデザインルール:
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