frontend-design

フロントエンドデザイン

このスキルでは、ありきたりな「AI 生成らしい」見た目を避け、独自性のある本番品質のフロントエンドインターフェースを作成します。美的な細部や創造的な選択に細心の注意を払い、実際に動作するコードを実装してください。

ユーザーは、作成するコンポーネント、ページ、アプリケーション、インターフェースなど、フロントエンドの要件を提示します。目的、対象ユーザー、技術的な制約に関するコンテキストが含まれることもあります。

---

ステップ 1 — 要件を具体化する

要件に対象が定義されていない場合は、自分で具体化します。対象、そのユーザー層、ページが果たす唯一の役割をそれぞれ明確にしてください。先に選択内容を述べてから作業を進めます。独自性のある選択は、対象固有の世界、つまり素材、道具、成果物、言葉遣いから生まれます。要件にある実際のコンテンツを、制作全体に反映してください。

---

ステップ 2 — デザインの方向性を決める

コードを1行でも書く前に、デザイン全体の方向性を定義します。

• 目的：このインターフェースはどのような問題を解決しますか？誰が使いますか？
• トーン：極端な方向性をひとつ選び、徹底します。選択肢は、徹底してミニマル、マキシマリストな混沌、レトロフューチャー、オーガニック／ナチュラル、ラグジュアリー／洗練、遊び心のあるおもちゃのような雰囲気、エディトリアル／雑誌風、ブルータリスト／荒削り、アールデコ／幾何学的、柔らかい／パステル調、インダストリアル／実用的、手仕事／職人的、ダーク／陰鬱、ローファイ／ジン風などです。これらは出発点にすぎません。最終的な方向性には、唯一無二の印象を持たせてください。
• 制約：フレームワーク、パフォーマンス、アクセシビリティの要件。
• 差別化：このデザインを忘れがたいものにする要素は何ですか？見る人の記憶に残る、ただひとつの要素を考えてください。

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

デザイントークンの計画

コーディングの前に、簡潔なトークンシステムを作成します。

• 色：名前付きの16進数カラー値を4〜6個用意します。控えめで均等に配分されたパレットより、支配的な色に鋭いアクセントを組み合わせるほうが効果的です。すべてに CSS 変数を使用してください。
• 書体：書体の役割を2〜3種類定義します。個性のあるディスプレイ書体を控えめに使い、それに合う本文用書体を組み合わせます。必要であれば、キャプションやデータ用のユーティリティ書体も加えます。
• レイアウト：文章1文によるコンセプトと、アイデアを検証する ASCII ワイヤーフレームを用意します。
• シグネチャー：このデザインを記憶に残す、唯一の要素を決めます。

調整チェック

制作を始める前に、計画がよくある AI デザインの紋切り型に当てはまっていないか確認します。

1. 温かみのあるクリーム色の背景（約 #F4F1EA）＋コントラストの強いセリフ体＋テラコッタのアクセント
2. ほぼ黒の背景＋単色の鮮やかなグリーンまたは朱色のアクセント
3. ブロードシート風レイアウト＋極細の罫線＋角丸なし＋密度の高いカラム

これらは選択ではなく、既定のパターンです。題材に関係なく現れます。要件に固有の理由がないのに計画がこれらのどれかに近づいている場合は、修正し、変更点と理由を明示してください。要件にビジュアルの方向性が明記されている場合は、その指示に正確に従ってください。

---

ステップ 3 — 実装する

次の条件を満たす、動作するコード（HTML/CSS/JS、React、Vue など）を作成します。

• 本番品質で、完全に機能する
• 視覚的に印象的で、記憶に残る
• 明確で一貫した美的な視点を持つ
• 細部まで入念に仕上げられている

---

美的表現の参考

タイポグラフィ

美しく、独自性と個性のあるフォントを選びます。タイポグラフィそのものが、無個性な伝達手段ではなく、デザインの記憶に残る要素となるようにしてください。

• 個性のあるディスプレイ書体と、洗練された本文用書体を組み合わせる
• ウェイト、幅、字間を意図的に設定し、明確な文字サイズの階層を作る

絶対に使用しないでください：Arial、Inter、Roboto、または主要な書体としての単純なシステムフォントスタック。Space Grotesk や、それに似た使い古された「無難な」選択肢も、既定で使わないでください。

色とテーマ

一貫した美的方向性を貫きます。控えめで均等に配分されたパレットより、支配的な色に鋭いアクセントを組み合わせるほうが効果的です。すべてのトークンを :root の CSS 変数として定義してください。

絶対に使用しないでください：白地に紫のグラデーションを既定で使うこと、および一般的な SaaS テンプレートのように見える配色。

モーション

アニメーションは、効果やマイクロインタラクションに使います。あちこちに効果を散りばめるより、巧みに演出した一瞬のほうが強く印象に残ります。

• HTML/CSS：CSS だけで実現できる方法を優先します。ページ読み込み時に animation-delay で表示をずらすと、楽しさが生まれます。
• React：利用できる場合は、Motion ライブラリを使います。
• スクロールをトリガーにした表示やホバー状態で、意外性を演出します。
• 効果をあちこちに散りばめるより、控えめに使うほうが効果的です。アニメーションを増やしすぎると、AI 生成らしさが強まります。

空間構成

意外性のあるレイアウト。非対称。重なり。斜めの流れ。グリッドを崩す要素。広々とした余白か、意図的に作り込んだ密度のどちらかを選びます。無難な中間は避けます。

背景とビジュアルの細部

雰囲気と奥行きを生み出します。単色を初期設定のように使うのは避けます。テクスチャや効果は、目指す美的方向性に合わせます。 グラデーションメッシュ、ノイズテクスチャ、幾何学模様、重ねた透明表現、ドラマチックな影、装飾的な境界線、カスタムカーソル、粒子状のオーバーレイ。

ヒーロー

ヒーローは、伝えたい主張を表すものです。見出し、画像、アニメーション、ライブデモ、インタラクティブな演出など、その題材の世界を最も特徴づけるものから始めます。大きな数字とグラデーションのアクセントは定番の答えですが、この具体的な依頼に本当に最適な場合に限って使います。

構成

番号、アイブロウ、区切り線、ラベルなどの構成要素は、飾りではなく、コンテンツの真実を伝えるものにします。番号付きマーカー（01 / 02 / 03）が適切なのは、コンテンツが実際に順序のある流れになっている場合だけです。

---

CSS 実装時の注意点

• 色、余白、文字に関するトークンは、すべて CSS カスタムプロパティとして定義します。
• 詳細度の競合に注意します。.section（要素型セレクター）と .cta（クラスセレクター）は、padding や margin の指定を互いに打ち消すことがよくあります。仕上げる前に確認します。
• セクションをまたいで、気づかないうちに互いを上書きするクラスは作りません。

---

コピーとコンテンツ

言葉もデザインの素材です。埋め草ではありません。

• システムの仕組みではなく、ユーザーが操作するものを名前にして、画面を見るユーザーの立場から書きます。
• 能動態を使います。「Submit」ではなく「Save changes」とします。操作の名称は、ワークフロー全体を通して統一します。
• エラーでは何が起きたのか、どう直せるのかを説明します。空の状態は、行動を促すものにします。
• 文頭だけを大文字にします。平易な動詞を使います。埋め草は使いません。ブランドと対象者に合ったトーンにします。

---

自己批評

大胆さは、署名となる要素ひとつに注ぎます。それ以外は控えめに、規律を持ってまとめます。依頼の目的に役立たない装飾は削ります。

提出する前に、次の点を確認します。依頼の内容が違うもの向けに生成されたように見える部分はないでしょうか。その部分を修正します。

---

忘れないでください。Codex は、並外れた創造的な仕事を実現できます。独自性があり、依頼内容に特化したビジョンに全力で取り組んだときに何が生み出せるのか、ためらわずに示してください。