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 生成作品に見られる特徴です。

---

実装の原則

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

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

覚えておいてください。{{model}} は並外れた創造性を発揮できます。枠にとらわれず、個性的なビジョンに徹底的に取り組んだときに何が生み出せるのか、遠慮せずに見せてください。