frontend-design

デザイン思考

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

• 目的：このインターフェースはどのような問題を解決しますか？誰が使いますか？
• トーン：極端な方向性を選びましょう。徹底したミニマリズム、混沌としたマキシマリズム、レトロフューチャー、オーガニック／ナチュラル、ラグジュアリー／洗練、遊び心のあるおもちゃ風、エディトリアル／雑誌風、ブルータリズム／粗削り、アールデコ／幾何学的、ソフト／パステル、インダストリアル／実用本位など、選択肢はたくさんあります。これらを参考にしつつ、美的方向性に合ったデザインを作りましょう。
• 制約：技術要件（フレームワーク、パフォーマンス、アクセシビリティ）。
• 差別化：このデザインを忘れられないものにするのは何ですか？見る人の記憶に残る、たった一つの要素は何ですか？

非常に重要：明確なコンセプトの方向性を選び、精度高く実現してください。大胆なマキシマリズムも洗練されたミニマリズムも有効です。重要なのは強度ではなく、意図を持ってデザインすることです。

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

• 本番環境に対応した、機能的なコード
• 見た目に強い印象を残し、記憶に残ること
• 明確な美的視点と一貫性があること
• 細部まで丹念に磨き上げられていること

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

次の点を重視してください。

• タイポグラフィ：美しく、独特で、興味を引くフォントを選びましょう。ArialやInterのようなありきたりなフォントは避け、フロントエンドの美しさを高める個性的なフォントを選んでください。特徴的なディスプレイフォントと、洗練された本文フォントを組み合わせましょう。
• 色とテーマ：統一感のある美的方向性を貫きましょう。一貫性を保つためにCSS変数を使用してください。控えめで均等に分散された配色より、支配的な色に鋭いアクセントを加えた配色のほうが効果的です。
• モーション：アニメーションをエフェクトやマイクロインタラクションに活用しましょう。HTMLではCSSのみの手法を優先してください。Reactでは、利用できる場合はMotionライブラリを使いましょう。印象的な瞬間に焦点を当ててください。時間差で表示するアニメーション（animation-delay）を使ってページ読み込み時の演出を丁寧に組み立てれば、散発的なマイクロインタラクションよりも大きな喜びを生み出せます。スクロール時の演出や、意外性のあるホバー状態も取り入れましょう。
• 空間構成：意外性のあるレイアウトを採用しましょう。非対称、重なり、斜めの流れ、グリッドからはみ出す要素などを活用してください。広々とした余白、または計算された密度を意識しましょう。
• 背景と視覚的なディテール：単色を使うだけで済ませず、雰囲気と奥行きを作り出しましょう。全体の美的方向性に合った効果やテクスチャを加えてください。グラデーションメッシュ、ノイズテクスチャ、幾何学模様、重なり合う半透明レイヤー、ドラマチックな影、装飾的なボーダー、カスタムカーソル、グレインオーバーレイなど、創造的な表現を取り入れましょう。

使い古されたフォントファミリー（Inter、Roboto、Arial、システムフォント）、陳腐な配色（特に白背景に紫のグラデーション）、ありきたりなレイアウトやコンポーネントのパターン、文脈に即した個性のない型どおりのデザインなど、AI生成でよく見られる画一的な美的表現は絶対に避けてください。

創造的に解釈し、文脈に合った、本当に考え抜かれた意外性のある選択をしてください。どのデザインも同じになってはいけません。ライトテーマとダークテーマ、異なるフォントや美的スタイルを使い分けてください。世代を重ねてもよくある選択肢（たとえばSpace Grotesk）に収束することは絶対に避けてください。

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

Claudeには、驚くほど創造的な作品を生み出す力があります。遠慮せず、既成概念にとらわれず、独自のビジョンを最後まで貫いたときに何ができるかを示してください。