frontend-design

汎用的な「AI っぽい」見た目を避け、個性豊かで本番環境にふさわしいフロントエンドインターフェースを作成するためのスキルです。美的な細部や創造的な選択に格別の注意を払い、実際に動作するコードを実装してください。

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

デザイン思考

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

• 目的：このインターフェースはどんな問題を解決しますか？誰が使いますか？
• トーン：極端な方向性を選びましょう。徹底的にミニマル、マキシマリストな混沌、レトロフューチャー、有機的・自然、ラグジュアリー・洗練、遊び心のあるおもちゃ風、エディトリアル・雑誌風、ブルータリスト・無骨、アールデコ・幾何学的、柔らかいパステル、インダストリアル・実用主義など、選択肢はたくさんあります。これらをインスピレーションにしつつ、選んだ美的方向性に忠実なデザインを作りましょう。
• 制約：技術要件（フレームワーク、パフォーマンス、アクセシビリティ）。
• 差別化：何がこのデザインを忘れられないものにしますか？見る人の記憶に残るのはどんな点ですか？

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

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

• 本番環境にふさわしく、機能する
• 視覚的に際立ち、記憶に残る
• 明確な美的視点を持ち、全体に一貫性がある
• 細部に至るまで丁寧に磨き上げられている

フロントエンドの美的指針

以下の点に注力してください。

• タイポグラフィ：美しく、個性的で、興味を引くフォントを選びましょう。ArialやInterのような汎用フォントは避け、フロントエンドの美しさを高める、個性と魅力のある意外性のあるフォントを選んでください。個性的なディスプレイフォントと洗練された本文用フォントを組み合わせましょう。
• 色とテーマ：一貫した美的方向性を貫きましょう。一貫性のためにCSS変数を使いましょう。控えめで均等に配色するよりも、支配的な色に鮮やかなアクセントを組み合わせる方が効果的です。
• モーション：アニメーションで演出やマイクロインタラクションを加えましょう。HTMLではCSSのみの手法を優先してください。ReactでMotionライブラリが使える場合は活用しましょう。効果の高い演出に集中してください。段階的に表示するアニメーション（animation-delay）を取り入れ、ページ読み込みを一度巧みに演出する方が、マイクロインタラクションを散発的に使うよりも楽しい体験を生み出します。スクロールをきっかけにした演出や、意外性のあるホバー状態も取り入れましょう。
• 空間構成：意外性のあるレイアウトを使いましょう。非対称、重なり、斜めの流れ、グリッドを崩す要素を取り入れます。広々とした余白、または意図的に制御した密度を活用しましょう。
• 背景と視覚的な細部：単色に頼るのではなく、雰囲気と奥行きを作りましょう。全体の美的方向性に合った効果やテクスチャを加えてください。グラデーションメッシュ、ノイズテクスチャ、幾何学模様、重なり合う透過表現、ドラマチックなシャドウ、装飾的な罫線、カスタムカーソル、粒子状のオーバーレイなど、創造的な表現を活用しましょう。

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

発想を広げ、文脈に合った、心からデザインされたと感じられる意外性のある選択をしてください。デザインに同じものが続かないようにしましょう。ライトとダーク、さまざまなフォントや美的方向性を使い分けてください。世代をまたいでよくある選択肢（たとえばSpace Grotesk）に収束することは絶対に避けてください。

重要：実装の複雑さを美的ビジョンに合わせてください。マキシマリストなデザインには、手の込んだコードと豊富なアニメーションや効果が必要です。ミニマルまたは洗練されたデザインでは、抑制と精密さを保ち、余白、タイポグラフィ、さりげない細部に注意を払ってください。ビジョンを巧みに実現することで、エレガンスが生まれます。

Codexには、並外れた創造性を発揮する力があります。遠慮せず、既成概念にとらわれず、個性的なビジョンに全力で取り組んだときに何が生み出せるのか、存分に見せてください。