frontend-design

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

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

デザインの考え方

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

• 目的：このインターフェースの目的は、地域のサッカークラブのウェブサイトを利用するユーザーが、役立つ情報に効率よくアクセスできるようにすることです。
• トーン：ミニマルでクリーンなデザインに、グラスモーフィズム、広々とした空間、読みやすいフォントを組み合わせます。
• 制約：フロントエンドの技術要件は、Tailwind CSS と、SSG（静的サイト生成）をターゲットとする Next.js です。
• 差別化：何が「忘れられない」体験を生み出すでしょうか。使いやすさ、アクセシビリティ、独自のデザイン要素です。

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

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

• 本番品質で機能する
• 視覚的なインパクトがあり、記憶に残る
• 明確な美的視点に基づき、全体に一貫性がある
• 細部まで丁寧に仕上げられている

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

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

• タイポグラフィ：読みやすいシンプルなフォントを選びます。Inter も適していますが、モダンな見た目にするには、サイズや文字間隔を適切に調整することが重要です。
• 色とテーマ：一貫性のある美的方向性を貫いてください。一貫性を保つために CSS 変数を使います。控えめで均等に配色するより、主役となる色に鮮やかなアクセントを加えるほうが効果的です。チームのプライマリーカラーを基本にしつつ、サッカーらしさを表すグリーンや、セカンダリーカラーとして遊び心のあるゴールドを取り入れてもよいでしょう。
• モーション：アニメーションでエフェクトやマイクロインタラクションを加えます。HTML には Tailwind のアニメーション機能を優先して使います。React では、利用できる場合に Motion ライブラリを使います。印象に残る場面を重視してください。遅延表示を組み合わせて巧みに演出したページ読み込みを一度行うほうが、マイクロインタラクションを散発的に加えるよりも、ユーザーに喜びをもたらします。スクロールをトリガーにした演出や、意外性のあるホバー状態も取り入れます。
• 空間構成：意外性のあるレイアウト、非対称性、重なり、斜めの流れ、グリッドからはみ出す要素を取り入れます。広いネガティブスペースを設けるか、密度を緻密にコントロールしてください。
• 背景と視覚的な細部：単色に頼らず、雰囲気と奥行きを作り出します。全体の方向性に合った文脈的なエフェクトやテクスチャを加えます。グラデーションメッシュ、ノイズテクスチャ、幾何学模様、透明度を重ねたレイヤー、ドラマチックな影、装飾的な枠線、カスタムカーソル、グレインのオーバーレイなど、創造的な表現を活用してください。

よく使われるフォント、ありきたりな配色（特に白背景に紫のグラデーション）、予測可能なレイアウトやコンポーネントパターン、文脈に即した個性のない型にはまったデザインなど、一般的な AI 生成風の見た目は決して使わないでください。

創造性を発揮し、真にデザインされたと感じられる意外性のある選択をしてください。どのデザインも同じにしてはいけません。ライトテーマとダークテーマ、フォント、美的スタイルを変化させてください。生成のたびに、よくある選択肢（たとえば Space Grotesk）に決して収束しないようにしてください。

重要：実装の複雑さを、美的なビジョンに合わせてください。マキシマリズムのデザインには、多くのアニメーションやエフェクトを使った複雑なコードが必要です。ミニマリストや洗練されたデザインでは、節度、精密さ、余白やタイポグラフィへの細やかな配慮が必要です。ビジョンを優れた形で実現することが、エレガンスにつながります。

Claude は並外れた創造性を発揮できます。思い切り取り組み、既成概念にとらわれず、独自のビジョンを徹底して追求することで実現できることを示してください。

参考資料：./docs/inspiration から着想を得てください。