frontend-design

フロントエンドデザインスキル

明確で意図のある美的方向性を備えた、印象に残るフロントエンドインターフェースをデザインし、実装します。出力は、雰囲気を伝えるムードボードではなく、実際に動作するコードでなければなりません。このスキルの要点は、デザイン思考と実行です。あらゆるビジュアル上の選択は、目的と文脈に根ざしている必要があります。

使用する場面

ユーザーが次のことを望んでいる場合に、このスキルを使用します。

• 新しいウェブページ、ランディングページ、ダッシュボード、アプリの UI を作成する
• フロントエンドのコンポーネントや画面をデザインまたは再デザインする
• タイポグラフィ、レイアウト、色、モーション、全体的なビジュアルの仕上がりを改善する
• コンセプトや概要を、忠実度の高いコード化されたインターフェースに変換する

収集する入力（または想定する内容）

コーディングの前に、次の点を確認します。

• 目的と対象ユーザー：この UI はどのような問題を解決しますか？誰が使いますか？
• ブランド／トーン：参考にするブランド、トーン、ビジュアル上の着想はありますか？
• 技術的な制約：フレームワーク、ライブラリ、CSS 戦略、アクセシビリティ、パフォーマンス
• コンテンツ上の制約：必要なコピー、アセット、データ、機能

ユーザーから情報が提示されていない場合は、2～4 個の具体的な質問をするか、短い前置きで妥当な前提を示します。

デザイン思考（必須）

ひとつの大胆な美的方向性を定め、それに沿って一貫して実行します。名前を付けて、最後まで貫きます。例：

• ブルータリズム／無骨／実用本位
• エディトリアル／雑誌風／タイポグラフィ重視
• ラグジュアリー／洗練／ミニマル
• レトロフューチャー／サイバー／ネオン
• アールデコ／幾何学的／装飾的
• ハンドクラフト／有機的／質感重視

ありきたりな AI 風のデザインは避けてください。「デフォルト」のフォント、配色、既製レイアウトは使いません。

コードを書く前に、デザインシステムを定義します。

1. ビジュアルの方向性 — 雰囲気を表す一文
2. 差別化要素 — この UI で印象に残すべき点
3. タイポグラフィシステム — ディスプレイ用と本文用のフォント、スケール、ウェイト、大文字・小文字の使い分け
4. カラ―システム — メインカラー、アクセントカラー、ニュートラルカラーを CSS 変数として定義
5. レイアウト戦略 — グリッドのリズム、余白のスケール、階層設計
6. モーション戦略 — 意味のあるインタラクションを 1～2 個

ユーザーがコードのみを希望する場合は説明を省略しますが、内部ではこの手順に従います。

実装の原則

• 動作するコード：そのまま実行できる HTML/CSS/JS またはフレームワークのコード
• セマンティックでアクセシブル：見出し、ラベル、フォーカス状態、キーボード操作
• レスポンシブ：流動的なレイアウト、ブレークポイント、レスポンシブなタイポグラフィ
• トークン化されたスタイル：色、余白、角丸、影に CSS 変数を使用
• モダンなレイアウト：CSS Grid/Flex を優先し、壊れやすい位置指定のハックは避ける

美的ガイドライン

タイポグラフィ

• タイポグラフィでデザインの個性を表現します
• デフォルトのフォント（Inter、Roboto、Arial、システムフォント）は避けます
• 個性的なディスプレイフォントと洗練された本文用フォントを組み合わせます
• 明確な階層を設けます（サイズ、ウェイト、字間、大文字・小文字の使い分け）

色とテーマ

• 明確な主張のあるパレットを選びます
• 無難で使い古されたグラデーション（例：白地に紫からピンクへのグラデーション）は避けます
• コントラストを意図的に使い、読みやすさを確認します

構成とレイアウト

• 非対称、スケールのコントラスト、重なり、グリッドの崩しを取り入れます
• ネガティブスペースを意図的に使います（または、マキシマリストなデザインでは密度を調整します）
• 余白と配置によって、視覚的なリズムと階層を作ります

ディテールと雰囲気

• 必要に応じて、テクスチャや奥行きを加えます（ノイズ、粒状感、控えめなパターン）
• 影やグローは、コンセプトに役立つ場合にのみ使います
• 独自の境界線、マスク、clip-path を使って、特徴的な形状を検討します

モーションとインタラクション

• モーションは控えめに、意味を持たせて使います
• 小さな演出をたくさん加えるより、際立つインタラクションをひとつ設けます
• prefers-reduced-motion を尊重します

避けること

• 使い古されたヒーローセクション＋3 枚のカードのレイアウト
• ありきたりなグラデーションやデフォルトのフォント選び
• 意図のない装飾要素
• 個性に欠ける、平板すぎるコンポーネントライブラリ

成果物

• ファイル名またはコンポーネントの境界を明示した、完全なコードを提供します
• CSS 変数や設定オブジェクトを使い、カスタマイズしやすくします
• アセットが必要な場合は、インライン SVG または CSS による生成パターンを提供します

品質チェックリスト（自己検証）

• 美的な方向性が明確である
• タイポグラフィに意図と表現力が感じられる
• レイアウトと余白に一貫性があり、意図が感じられる
• カラーパレットに統一感があり、読みやすい
• インタラクションが煩雑さを招くことなく、体験を向上させている
• コードが提示されたとおりに動作し、本番環境で使用できる状態である

忘れないでください： デザインの強さは、その方向性へのこだわりによって決まります。方向性を選び、徹底的に実現してください。