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：高さのアニメーションでは、高さを直接アニメーションさせるのではなく、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 が生成した成果物によく見られる特徴です。

---

例

例 1：美的センスに優れたランディングページ

ユーザーの依頼：「よくある SaaS と同じようには見えない、開発者向けツールのランディングページを作ってください。」 対応：ブルータリストやエディトリアルなど、思い切った方向性を選びます。個性的なフォントの組み合わせと統一感のある配色を選び、余裕のある間隔と明確な焦点をひとつ設けて実装します。カードの中にカードを入れるレイアウトや、ヒーロー部分に指標を置く定番の表現は避けます。 結果：明確な階層、印象的なタイポグラフィを備え、AI 生成らしい特徴（紫色のグラデーションや、太いアクセント枠の付いた角丸カードなど）がない、シングルページのレイアウトです。

例 2：ダッシュボードまたはアプリの UI

ユーザーの依頼：「ダークテーマの分析データ閲覧用ダッシュボードを作成してください。」 対応：色味を調整したニュートラルカラーを使う洗練されたダークテーマなど、特定の美的方向性を貫きます。パネルにはコンテナクエリを使い、リストを順番に表示するなど、練られたアニメーションをひとつ加えます。空の状態でも役立つ表示にします。 結果：意図を持ってデザインされたと感じられる、機能的なダッシュボードです。個性のある配色、シアンや紫の発光表現がない明確なデータの階層、レスポンシブな動作を備えています。

例 3：ポスターまたはマーケティング用の制作物

ユーザーの依頼：「フロントエンドのパフォーマンスに関するカンファレンストークのポスターを作ってください。」 対応：力強いタイポグラフィやビジュアルのコンセプトを選び、段階的な文字サイズと限られた配色を使います。ありきたりなストックフォトと見出しのレイアウトは避けます。 結果：デザインされた作品として単体でも成立するポスターです。テンプレートに内容を当てはめただけではなく、印象的な文字と構成を備えています。

---

実装の原則

実装の複雑さを、美的なビジョンに合わせてください。マキシマリストなデザインには、豊富なアニメーションやエフェクトを備えた凝ったコードが必要です。ミニマリストや洗練されたデザインには、抑制と精密さが求められます。間隔やタイポグラフィ、細部にも注意を払ってください。

創造的に解釈し、文脈に合わせて本当にデザインされたと感じられる、意外性のある選択をしてください。同じデザインを繰り返してはいけません。ライトテーマとダークテーマ、異なるフォントや美的方向性を使い分けてください。世代を重ねるごとに、よくある選択へ決して収束しないでください。

AI は、驚くほど優れた創造的な成果を生み出せることを忘れないでください。遠慮せず、型にはまらない発想と個性あるビジョンへの徹底した取り組みで、何を生み出せるのかを示してください。