aesthetic

美しいデザイン

実証済みのデザイン原則と体系的なワークフローに従って、美しく洗練されたインターフェースを作成します。

このスキルを使う場面

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

• ユーザーインターフェースを構築またはデザインする
• インスピレーションサイト（Dribbble、Mobbin、Behance）のデザインを分析する
• デザイン画像を生成し、審美性を評価する
• 視覚的階層、タイポグラフィ、色彩理論を取り入れる
• マイクロインタラクションやアニメーションを追加する
• デザインドキュメントやスタイルガイドを作成する
• アクセシビリティやデザインシステムについてガイダンスが必要

中核となるフレームワーク：4段階のアプローチ

1. BEAUTIFUL：美しさを理解する

既存のデザインを調査し、パターンを特定して、原則を導き出します。AIには美的感覚がないため、質の高い事例を分析し、市場の好みに合わせて基準を定める必要があります。

参考資料：references/design-principles.md - 視覚的階層、タイポグラフィ、色彩理論、余白の原則。

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

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

参考資料：references/design-principles.md - デザインシステム、コンポーネントライブラリ、WCAG アクセシビリティ基準。

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

適切なタイミング（150～300ms）、イージングカーブ（表示時はease-out、終了時はease-in）、段階的な遅延を用いた控えめなアニメーションを取り入れます。

参考資料：references/micro-interactions.md - 長さのガイドライン、イージングカーブ、パフォーマンスの最適化。

4. PEAK：デザインでストーリーを伝える

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

参考資料：references/storytelling-design.md - 物語性のある要素、スクロールに基づくストーリーテリング、インタラクティブな手法。

ワークフロー

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

目的：インスピレーションサイトからデザインガイドラインを導き出します。

手順：

1. インスピレーションサイト（Dribbble、Mobbin、Behance、Awwwards）を閲覧します
2. chrome-devtools スキルを使って全画面のスクリーンショットを撮影します（ページ全体ではありません）
3. ai-multimodal スキルを使ってスクリーンショットを分析し、次の要素を抽出します：
   • デザインスタイル（ミニマリズム、グラスモーフィズム、ネオ・ブルータリズムなど）
   • レイアウト構造とグリッドシステム
   • タイポグラフィの体系と階層 重要： スクリーンショットを見て、フォント名（Google Fonts）とフォントサイズを予測してください。InterやPoppinsをただ使うのは避けてください。
   • HEXコード付きのカラーパレット
   • 視覚的階層の手法
   • コンポーネントのパターンとスタイル
   • マイクロインタラクション
   • アクセシビリティに関する考慮事項
   • 全体的な審美性の評価（1～10）
4. テンプレートを使って、調査結果をプロジェクトのデザインガイドラインに記録します

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

目的：反復を通じて、審美性の高いデザイン画像を作成します。

手順：

1. スタイル、色、タイポグラフィ、対象ユーザー、アニメーションの仕様を含めてデザインプロンプトを定義します
2. ai-multimodal スキルを使い、Gemini APIでデザイン画像を生成します
3. ai-multimodal スキルを使って出力画像を分析し、審美性を評価します
4. 評価が7/10未満、またはプロフェッショナルな基準を満たさない場合：
   • 具体的な弱点（色、タイポグラフィ、レイアウト、間隔、階層）を特定します
   • 改善点を反映してプロンプトを調整します
   • ai-multimodal で再生成するか、media-processing スキルを使って出力を変更します（サイズ変更、切り抜き、フィルター、構成）
5. 審美性の基準を満たすまで繰り返します（評価 ≥ 7/10）
6. テンプレートを使って最終的なデザインの決定事項を記録します

デザインドキュメント

デザインガイドラインの作成

assets/design-guideline-template.md を使用して、以下を記載します。

• 配色パターンと心理的効果
• タイポグラフィの体系と階層
• レイアウトの原則と余白
• コンポーネントのスタイル基準
• アクセシビリティへの配慮
• デザインの特長とその根拠

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

デザインストーリーの作成

assets/design-story-template.md を使用して、以下を記載します。

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

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

リソースと統合

関連スキル

• ai-multimodal：Gemini API を使用して、ドキュメント、スクリーンショット、動画を分析し、デザイン画像を生成・編集し、審美的な品質を評価します
• chrome-devtools：参考サイトの全画面スクリーンショットを取得し、ページ間を移動し、要素を操作し、コンソールログとネットワークリクエストを読み取ります
• media-processing：生成した画像を調整します（動画には FFmpeg、画像には ImageMagick を使用）
• ui-styling：shadcn/ui コンポーネントと Tailwind CSS のユーティリティファーストなスタイリングを使用してデザインを実装します
• web-frameworks：Next.js（App Router、Server Components、SSR/SSG）を使用して構築します

参考ドキュメント

参考資料：references/design-resources.md - インスピレーションを得られるプラットフォーム、デザインシステム、AI ツール、MCP 統合、開発戦略。

主な原則

1. 審美性の基準は AI ではなく人間が定めます。質の高い事例を調べましょう
2. 分析に基づいて反復します。最初の出力で決して満足しないでください
3. 美しさと機能性、アクセシビリティのバランスを取ります
4. 開発全体の一貫性を保つため、決定事項を記録します
5. デザインでは段階的開示を活用し、複雑さを徐々に見せます
6. 審美的な品質を常に客観的に評価します（スコア ≥ 7/10）