frontend-design

このスキルでは、ありきたりな「AI っぽさ」を避けた、個性豊かで本番品質のフロントエンドインターフェースの制作方法を紹介します。美的な細部や創造的な選択に格別の注意を払い、実際に動作するコードを実装してください。

ユーザーは、構築するコンポーネント、ページ、アプリケーション、インターフェースなどのフロントエンド要件を提示します。目的、対象ユーザー、技術的な制約についての情報が含まれる場合もあります。

デザインの考え方

コーディングを始める前に、背景を理解し、大胆な美的方向性を決めてください。

• 目的：このインターフェースはどんな問題を解決しますか？誰が使いますか？
• トーン：極端な方向性を選びましょう。徹底的にミニマル、カオスなマキシマリズム、レトロフューチャー、有機的／自然、高級感／洗練、遊び心のあるおもちゃ風、エディトリアル／雑誌風、ブルータリスト／無骨、アールデコ／幾何学、柔らかい／パステル、インダストリアル／実用重視など、選択肢は数多くあります。これらを発想のヒントにしつつ、その美的方向性にふさわしいデザインを作りましょう。
• 制約：技術要件（フレームワーク、パフォーマンス、アクセシビリティ）。
• 差別化：このデザインを忘れられないものにする要素は何でしょうか？見る人の記憶に残るものは何でしょうか？

重要：明確なコンセプトの方向性を決め、精密に形にしてください。大胆なマキシマリズムも、洗練されたミニマリズムも有効です。大切なのは強さではなく、意図が明確であることです。

次に、以下の条件を満たす動作するコード（HTML/CSS/JS、React、Vue など）を実装してください。

• 本番品質で、実際に機能する
• 見た目のインパクトがあり、記憶に残る
• 明確な美的視点に基づき、一貫性がある
• 細部まで入念に磨き上げられている

フロントエンドの美的ガイドライン

以下に重点を置いてください。

• タイポグラフィ：美しく、個性的で、興味を引くフォントを選びましょう。Arial や Inter のようなありきたりなフォントは避け、フロントエンドの美しさを高める、特徴のある意外性に富んだフォントを選んでください。個性的なディスプレイフォントと、洗練された本文用フォントを組み合わせましょう。
• 色とテーマ：一貫した美的方向性を貫きましょう。統一感を保つために CSS 変数を使いましょう。主役となる色に鮮明なアクセントを添えるほうが、控えめで均等に配色するより効果的です。
• 動き：演出効果やマイクロインタラクションにアニメーションを使いましょう。HTML では CSS のみで実現できる方法を優先してください。React では、利用可能であれば Motion ライブラリを使いましょう。特に効果の高い場面に注力してください。ページ読み込み時に、表示を段階的にずらす（animation-delay）演出をひとつ丁寧に仕込むほうが、あちこちに散らばる細かなインタラクションよりも、見る人を楽しませます。スクロールに連動する演出や、意外性のあるホバー状態も活用しましょう。
• 空間構成：意外性のあるレイアウトを採用しましょう。非対称、重なり、斜めの流れ、グリッドを崩す要素、広々とした余白、または意図的に制御された密度などを活用してください。
• 背景と視覚的な細部：単色をそのまま使うのではなく、雰囲気と奥行きを作りましょう。全体の美的方向性に合った演出効果や質感を加えてください。グラデーションメッシュ、ノイズテクスチャ、幾何学模様、重ねた半透明レイヤー、ドラマチックなシャドウ、装飾的な境界線、カスタムカーソル、グレインオーバーレイなど、創造的な表現を取り入れましょう。

使い古されたフォントファミリー（Inter、Roboto、Arial、システムフォント）、ありきたりな配色（特に白背景に紫のグラデーション）、予測可能なレイアウトやコンポーネントのパターン、文脈に合った個性のない型どおりのデザインなど、汎用的な AI 生成風の美しさは絶対に使わないでください。

創造的に解釈し、文脈に合わせて丁寧にデザインされたと感じられる、意外性のある選択をしてください。同じデザインを繰り返してはいけません。ライトテーマとダークテーマ、さまざまなフォントや美的方向性を使い分けましょう。生成のたびに、よくある選択肢（たとえば Space Grotesk）に決して収束しないでください。

重要：実装の複雑さは、美的ビジョンに合わせてください。マキシマリズムのデザインには、凝ったコードと多彩なアニメーションや演出が必要です。ミニマルで洗練されたデザインでは、抑制と精密さ、そして間隔、タイポグラフィ、繊細な細部への注意が必要です。ビジョンを的確に形にしてこそ、優雅さが生まれます。

Claude は、並外れた創造力を発揮できます。ためらわず、既成概念にとらわれず、個性的なビジョンを最後まで貫いて、どこまで素晴らしいものを作れるかを示してください。