frontend-design

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

デザインの方向性

大胆な美的方向性を選びましょう。

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

重要：明確なコンセプトを選び、正確に表現してください。大胆なマキシマリズムも洗練されたミニマリズムも機能します。大切なのは強さではなく、意図の明確さです。

そのうえで、次の条件を満たす実際に動作するコードを実装してください。

• 本番品質で機能する
• 見た目に強い印象があり、記憶に残る
• 明確な美的視点と一貫性がある
• 細部まで丁寧に磨き上げられている

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

タイポグラフィ

→ サイズ、フォントの組み合わせ、読み込み方法についてはタイポグラフィのリファレンスを参照してください。

美しく、個性的で、興味を引くフォントを選びましょう。特徴的なディスプレイフォントと洗練された本文フォントを組み合わせます。

推奨：流動的なサイズ指定（clamp）を使ったモジュラーな文字スケールを使用する 推奨：フォントの太さやサイズを変えて、明確な視覚的階層を作る 非推奨：よく使われるフォント（Inter、Roboto、Arial、Open Sans、システム標準フォント）を使う 非推奨：「技術的／開発者らしい」雰囲気を手軽に出すために、モノスペース体を使う 非推奨：すべての見出しの上に角丸の大きなアイコンを置く。ほとんど価値がなく、サイトをテンプレートのように見せがちです

色とテーマ

→ OKLCH、カラーパレット、ダークモードについてはカラーのリファレンスを参照してください。

一貫性のあるパレットを選びましょう。控えめで均等に配色したパレットより、支配的な色と鋭いアクセントを組み合わせたほうが効果的です。

推奨：知覚的に均一で保守しやすいパレットを実現するため、モダンなCSSの色関数（oklch、color-mix、light-dark）を使う 推奨：ニュートラルカラーにもブランドカラーの色相を加える。ごくわずかな色味でも、無意識に一体感が生まれます 非推奨：色付きの背景にグレーのテキストを使う。色あせた印象になるため、背景色と同系統の色合いを使いましょう 非推奨：純粋な黒（#000）や純粋な白（#fff）を使う。必ず色味を加えましょう。自然界に純粋な黒や白は存在しません 非推奨：AIらしいカラーパレットを使う。暗い背景にシアン、紫から青へのグラデーション、暗い背景のネオンアクセントなど 非推奨：「インパクト」を出すために、特に数値や見出しにグラデーション文字を使う。意味のある表現ではなく、単なる装飾です 非推奨：実際のデザイン判断をせずに、光るアクセントを使ったダークモードを選ぶ。「クール」には見えますが、工夫の代わりにはなりません

レイアウトとスペース

→ グリッド、リズム、コンテナクエリについては、空間デザインのリファレンスを参照してください。

間隔に変化をつけて視覚的なリズムを生み出しましょう。どこも同じパディングにする必要はありません。非対称な配置や意外性のある構成を取り入れましょう。強調したい部分では、意図的にグリッドを崩しましょう。

DO: 間隔に変化をつけて視覚的なリズムを生み出す—密なグループ分けと十分な間隔を使う DO: 大きな画面でゆとりが生まれるよう、clamp()を使って流動的な間隔を設定する DO: 非対称な配置や意外性のある構成を取り入れ、強調したい部分では意図的にグリッドを崩す DON'T: すべてをカードで囲む—すべてにコンテナが必要なわけではない DON'T: カードの中にカードを入れる—視覚的なノイズになるため、階層をシンプルにする DON'T: 同じカードグリッドを繰り返す—同じサイズのカードにアイコン、見出し、テキストを並べる構成を延々と繰り返さない DON'T: ヒーローメトリックのレイアウトテンプレートを使う—大きな数値、小さなラベル、補足統計、グラデーションのアクセントという構成 DON'T: すべてを中央揃えにする—非対称なレイアウトで左揃えにしたテキストのほうが、よりデザイン性を感じさせる DON'T: どこも同じ間隔にする—リズムがないと、レイアウトが単調に感じられる

ビジュアルの細部

DO: ブランドを引き立てる、意図的で目的のある装飾要素を使う DON'T: あらゆる場所にグラスモーフィズムを使う—ぼかし効果、ガラス風カード、光る枠線を、目的なく装飾として使わない DON'T: 片側だけに太い色付きの枠線がある角丸要素を使う—意図が伝わることはほとんどない、手抜きのアクセント DON'T: 装飾としてスパークラインを使う—洗練されて見えても、意味のある情報を伝えない小さなグラフ DON'T: 汎用的なドロップシャドウ付きの角丸長方形を使う—無難で印象に残らず、どんなAIの出力にも見えてしまう DON'T: 本当にほかに方法がない場合を除き、モーダルを使う—モーダルは安易な手段です

モーション

→ タイミング、イージング、動きを減らす設定については、モーションデザインのリファレンスを参照してください。

効果の大きい場面に注力しましょう。ページの読み込み時に、要素を順番に表示する、よく練られたアニメーションを一度使うほうが、細かなインタラクションをあちこちに散りばめるよりも、心地よさを生み出せます。

DO: モーションで状態の変化を伝える—表示、終了、フィードバック DO: 自然に減速するよう、指数関数的なイージング（ease-out-quart/quint/expo）を使う DO: 高さをアニメーションさせる場合は、heightを直接アニメーションさせるのではなく、grid-template-rowsのトランジションを使う DON'T: レイアウトプロパティ（width、height、padding、margin）をアニメーションさせない—transformとopacityだけを使う DON'T: バウンスや弾力のあるイージングを使わない—古くさく野暮ったく感じられます。実際の物体は滑らかに減速します

インタラクション

→ フォーム、フォーカス、読み込みパターンについては、インタラクションデザインのリファレンスを参照してください。

インタラクションを素早く感じられるようにしましょう。オプティミスティックUIを使い、まず画面を更新してから同期します。

DO: プログレッシブディスクロージャーを使う—シンプルな状態から始め、インタラクションを通じて機能を段階的に明らかにする（まず基本オプションを表示し、高度な機能は展開可能なセクションに配置する。ホバー時に副次的な操作を表示する） DO: 「ここには何もありません」と伝えるだけでなく、インターフェースの使い方を教える空状態を設計する DO: すべての操作可能な領域が、意図的に設計され、素早く反応するようにする DON'T: 同じ情報を繰り返さない—重複するヘッダーや、見出しの内容を言い換えるだけの導入文 DON'T: すべてのボタンをプライマリにしない—ゴーストボタン、テキストリンク、セカンダリスタイルを使い、階層を意識する

レスポンシブ

→ モバイルファースト、流動的なデザイン、コンテナクエリについては、レスポンシブデザインのリファレンスを参照してください。

DO: コンポーネント単位のレスポンシブ対応に、コンテナクエリ（@container）を使う DO: インターフェースを小さくするだけでなく、さまざまな利用状況に合わせて調整する DON'T: モバイルで重要な機能を隠さない—インターフェースを適応させ、機能を削らない

UXライティング

→ ラベル、エラー、空状態については、UXライティングのリファレンスを参照してください。

DO: すべての言葉に必要な役割を持たせる DON'T: ユーザーがすでに見ている情報を繰り返さない

---

AIスロップテスト

重要な品質チェック：このインターフェースを誰かに見せて「AIが作った」と言ったとき、すぐに信じてもらえるでしょうか？ もしそうなら、それが問題です。

個性的なインターフェースを見た人には、「これはどうやって作られたのだろう？」と思ってもらうべきです。「どのAIが作ったのだろう？」ではありません。

上記の「やってはいけないこと」のガイドラインを見直してください。これらは、2024～2025年にAIが生成した作品に見られる特徴です。

---

実装の原則

実装の複雑さは、目指す美的ビジョンに合わせてください。マキシマリストなデザインには、豊富なアニメーションやエフェクトを備えた入念なコードが必要です。ミニマリストなデザインや洗練されたデザインには、抑制、精密さ、余白、タイポグラフィ、細部への繊細な配慮が必要です。

創造的に解釈し、その文脈に合わせて本当にデザインされたと感じられる、意外性のある選択をしてください。どのデザインも同じであってはなりません。ライトテーマとダークテーマ、さまざまなフォントや美的表現を使い分けてください。生成を重ねても、よくある選択に決して収束しないでください。

Claudeには、並外れた創造的な仕事を生み出す力があります。思い切り取り組んでください。型にはまらない発想をし、個性的なビジョンを最後まで貫くことで、どんなものを生み出せるのかを示してください。