aesthetic

美学

実証済みのデザイン原則と体系的なワークフローに従って、美しく洗練されたインターフェースを作成します。このスキルでは、デザイン思考、フロントエンドの実装パターン、包括的な分析手法を組み合わせています。

このスキルを使う場面

次のような場合に使用します：

• ユーザーインターフェースを構築またはデザインするとき
• インスピレーションを得られるウェブサイト（Dribbble、Mobbin、Behance）のデザインを分析するとき
• デザイン画像を生成し、審美的な品質を評価するとき
• 視覚的階層、タイポグラフィ、色彩理論を取り入れるとき
• マイクロインタラクションやアニメーションを追加するとき
• デザインドキュメントやスタイルガイドを作成するとき
• アクセシビリティやデザインシステムに関するガイダンスが必要なとき
• 独自の美しさを備えた、本番環境向けの高品質なフロントエンドインターフェースを構築するとき

基本理念

まずデザイン思考から：コーディングの前にコンテキストを理解し、大胆な美的方向性を決めます。明確なコンセプトを選び、精密に形にします。大胆なマキシマリズムも洗練されたミニマリズムも効果的です。重要なのは強度ではなく、意図を持たせることです。

根拠に基づく美学：AIには美的感覚がありません。基準は、質の高い事例を分析し、市場の好みに合わせて定める必要があります。既存のデザインを研究し、パターンを見つけ、原則を導き出します。

段階的な卓越性：まず美しさ（美学）を実現し、正しさ（機能性／アクセシビリティ）を確保し、満足感（マイクロインタラクション）を加え、物語性（ストーリーテリング）で高めます。

クイックリファレンスフレームワーク

1. BEAUTIFUL：美学を理解する

既存のデザインを研究し、パターンを見つけ、原則を導き出します。

リファレンス：視覚的階層、タイポグラフィ、色彩理論、余白の原則については、references/design-principles.md を読み込みます。

2. RIGHT：機能性を確保する

使いやすさを欠いた美しいデザインに価値はありません。デザインシステム、コンポーネントアーキテクチャ、アクセシビリティ要件を研究します。

リファレンス：デザインシステム、コンポーネントライブラリ、WCAG アクセシビリティ基準については、references/design-principles.md を読み込みます。

3. SATISFYING：マイクロインタラクション

適切なタイミング（150〜300ms）、イージング曲線（表示時は ease-out、終了時は ease-in）、順次遅延を用いて、さりげないアニメーションを取り入れます。

リファレンス：時間のガイドライン、イージング曲線、パフォーマンス最適化については、references/micro-interactions.md を読み込みます。

4. PEAK：デザインによるストーリーテリング

パララックス効果、パーティクルシステム、テーマの一貫性など、物語性のある要素で高めます。節度を保ちましょう。「何事もやりすぎはよくありません」。

リファレンス：物語性のある要素、スクロールベースのストーリーテリング、インタラクティブな手法については、references/storytelling-design.md を読み込みます。

フロントエンド実装ガイドライン

タイポグラフィ

美しく、独自性があり、興味を引くフォントを選びます。Arial や Inter のようなありふれたフォントは避けます。個性的なディスプレイフォントと洗練された本文用フォントを組み合わせます。

色とテーマ

統一感のある美的方向性を定めます。一貫性を保つために CSS 変数を使用します。控えめで均等に配分されたパレットより、支配的な色に鮮やかなアクセントを加えるほうが効果的です。

動きとアニメーション

効果やマイクロインタラクションにアニメーションを使用します。CSS のみで実現できる方法を優先します。複雑なアニメーションには anime.js を使用します。

リファレンス：anime.js v4 のアニメーションを実装する際は、references/animejs.md を読み込みます。

空間構成

意外性のあるレイアウト。非対称性。重なり。斜めの流れ。グリッドを崩す要素。ゆとりのあるネガティブスペース、または制御された密度。

背景と視覚的なディテール

雰囲気と奥行きを生み出します。グラデーションメッシュ、ノイズテクスチャ、幾何学模様、重ねた半透明レイヤー、ドラマチックな影、装飾的な境界線、カスタムカーソル、粒子状のオーバーレイなど、コンテキストに合った効果やテクスチャを加えます。

リファレンス：フロントエンドデザインの詳細な実装パターンについては、references/implementation-guide.md を読み込みます。

ワークフロー

ワークフロー 1：インスピレーションを収集して分析する

インスピレーションを得るためのウェブサイトからデザインガイドラインを抽出します。

1. インスピレーションサイト（Dribbble、Mobbin、Behance、Awwwards）を閲覧します
2. chrome-devtools スキルを使って、全画面のスクリーンショットを撮影します
3. ai-multimodal スキルを使って、デザインパターンを分析して抽出します
4. 調査結果をプロジェクトのデザインガイドラインにまとめます

参考：references/workflows.md - ワークフローの全手順と分析チェックリストを確認してください。

ワークフロー 2：デザイン画像を生成して反復する

反復を通じて、見た目に優れたデザインを作成します。

1. スタイル、色、タイポグラフィ、対象ユーザーを含むデザインプロンプトを定義します
2. ai-multimodal スキルを使って、デザイン画像を生成します
3. 美的品質を評価します（7/10 以上のスコアが必要です）
4. プロフェッショナルな基準を満たすまで反復します
5. 最終的なデザイン上の決定事項を記録します

参考：references/workflows.md - 反復プロセスの全体と品質基準を確認してください。

デザインドキュメント

デザインガイドラインを作成する

assets/design-guideline-template.md を使って、以下の内容を記録します。

• 色のパターンと心理的効果
• タイポグラフィの体系と階層
• レイアウトの原則と間隔
• コンポーネントのスタイル基準
• アクセシビリティに関する考慮事項
• デザインの特徴とその根拠

プロジェクトの ./docs/design-guideline.md に保存します。

デザインストーリーを作成する

assets/design-story-template.md を使って、以下の内容を記録します。

• 物語の要素とテーマ
• 感情の変化
• ユーザージャーニーと重要な瞬間
• デザイン上の決定の根拠

プロジェクトの ./docs/design-story.md に保存します。

アンチパターン：ありきたりな AI の美学を避ける

以下は絶対に使用しないでください。

• 使い古されたフォントファミリー（Inter、Roboto、Arial、システムフォント）
• ありきたりな配色（特に白い背景に紫のグラデーション）
• 予測可能なレイアウトやコンポーネントのパターン
• 文脈に応じた個性がない、型にはまったデザイン

多様性の原則：同じデザインを繰り返してはいけません。ライトテーマとダークテーマ、異なるフォントや美学を使い分けてください。生成を繰り返す中で、一般的な選択肢（たとえば Space Grotesk）に決して収束しないでください。

実装の複雑さをデザインに合わせる

実装の複雑さを、美的なビジョンに合わせてください。

• マキシマリストなデザイン：豊富なアニメーションやエフェクトを含む、凝ったコードが必要です
• ミニマリスト／洗練されたデザイン：抑制、精度、間隔やタイポグラフィ、細部への慎重な配慮が必要です
• エレガンス：ビジョンをうまく実現することで生まれます

関連スキルとの連携

• ai-multimodal：Gemini API を使って、ドキュメント、スクリーンショット、動画を分析し、デザイン画像を生成して、美的品質を評価します
• chrome-devtools：インスピレーションサイトのスクリーンショットを撮影し、ページを移動して、要素を操作します
• media-processing：生成した画像を調整します（動画には FFmpeg、画像には ImageMagick）
• ui-styling：shadcn/ui コンポーネントと Tailwind CSS でデザインを実装します
• web-frameworks：Next.js、React、Vue で構築します

参考：references/design-resources.md - インスピレーションを得るためのプラットフォーム、デザインシステム、AI ツール、MCP 連携について確認してください。

主な原則

1. 美的基準は AI ではなく人間が定めます。優れた事例を研究してください
2. 大胆な美的方向性を選び、精密に実現してください
3. 分析に基づいて反復し、最初の出力で決して妥協しないでください（品質は最低 7/10）
4. 美しさと機能性、アクセシビリティのバランスを取ってください
5. 開発全体で一貫性を保てるよう、決定事項を記録してください
6. デザインでは段階的開示を活用し、複雑さを少しずつ明らかにしてください
7. 実装の複雑さを美的なビジョンに合わせてください
8. ありきたりな AI の美学を避け、文脈に応じた個性を生み出してください

コード品質基準

以下を満たす、動作するコードを実装してください。

• 本番環境で使える品質で、機能すること
• 視覚的なインパクトがあり、印象に残ること
• 明確な美的観点を持ち、全体として一貫していること
• 細部まで丁寧に磨き上げられていること

覚えておいてください：Claude は並外れた創造的な仕事を実現できます。枠にとらわれず、独自のビジョンに全力で取り組んだときに何を生み出せるか、遠慮せずに示してください。