フロントエンドデザインスキル

人間がAIが生成したとは思えない、特徴的でプロダクションレベルのフロントエンドインターフェースを作成します。すべての出力は、高級デザインエージェンシーが手掛けたかのように、大胆で意図的で、記憶に残るものでなければなりません。

デザイン思考プロトコル

コードを書く前に、このチェックリストを完了してください。ステップを飛ばさないでください。

1. 目的 — このインターフェースはどのような問題を解決しますか？誰が使いますか？

2. トーン — 1つの極端な美学的方向性を選んでください。これは必須です。名前のない方向性で進めてはいけません。

以下から選択するか、同程度の具体性で独自のものを考案してください：

極限までミニマル | マキシマリストの混沌 | レトロフューチャー | 有機的/ナチュラル
ラグジュアリーエディトリアル | ブルータリスト/生の | アールデコ/幾何学的 | ソフト/パステル
インダストリアル/実用的 | ネオメンフィス | スイスモダニズム | 和風ミニマル
レトロフューチャー端末 | 北欧の静けさ | 東京ネオン | 砂漠の温もり

トーンを2語で命名できない場合、あなたはまだ決定していません。「クリーンモダン」はトーンではありません。それはトーンの欠如であり、AIスロップを生み出します。

3. 制約 — フレームワーク（HTML/React/Vue/Svelte）、ブラウザサポート、パフォーマンス予算、既存のブランドキット。

4. 差別化 — 誰かがこのページについて覚えていることは何ですか？コーディングの前に明示的に名前をつけてください。

アンチスロップ宣言

これらのルールは、LLMが統計的に平均的な出力—心地よく、無難で、ひたすら忘れられやすい—に収束するために存在します。以下のパターンは、それ自体が本質的に悪いからではなく、その無差別な使用がAI生成デザインの第一の兆候であるため、ブラックリストに登録されています。

ブラックリスト対象フォント

ユーザーから明示的に要求がない限り、これらのフォントを主要な表示フォントとして使用してはいけません：

フォント	理由	代わりにこれを使用
Inter	#1 AIデフォルト（LLM UIの約90%）	Satoshi、General Sans、またはFrauncesのようなセリフ体
Roboto	#2 AIデフォルト（Android/Chromeエコシステム）	Outfit、Plus Jakarta Sans（本文のみ）、Karla
Arial / system-ui	タイポグラフィ選択の欠如	意図的なフォント選択
Open Sans	レガシーAIデフォルト（2022年以前の学習データ）	Source Sans 3、Nunito（本文のみ）
Poppins	Figmaテンプレートで使い古し	Figtree、Outfit、DM Sans（本文のみ）
Space Grotesk	以前は特徴的だったが、今はAIの「気の利いた安全牌」デフォルト	Syne、Anybody、Chakra Petch
Montserrat	過度に使用されている幾何学的サンセリフ	Josefin Sans、Barlow、Jost

ルール： Google Fontsの人気トップ20に入るフォントを使用する場合は、それを明示的に正当化するか、拒否してください。references/typography-pairings.md を参照して、トーンごとに整理された20以上の厳選されたペアリングを確認してください。

ブラックリスト対象カラー

明確な意図なしに、これらを主要なアクセントカラーとして使用してはいけません：

色	Hex	理由
Tailwind indigo-500	`#6366f1`	元祖AIカラー。単一のTailwindドキュメントの決定に由来。
Tailwind violet-500	`#8b5cf6`	2番目に一般的なAIアクセント。
Tailwind purple-500	`#a855f7`	indigo→purpleのグラデーションエンドポイント。
Tailwind blue-500	`#3b82f6`	パープルに代わる「エンタープライズ」AI。
AIグラデーション	`from-indigo-500 to-purple-600`	標準的なAIグラデーションとそのすべてのバリエーション。
フラットな白背景	`#ffffff`、`#f9fafb`、`#f8fafc`	AIはダークテーマ、アースカラー、雰囲気のある深みを決して探求しない。

ルール： パレットが npx create-next-app + Tailwindのデフォルトで再現できるなら、やり直してください。references/color-systems.md を参照して、15以上の厳選されたパレットを確認してください。

ブラックリスト対象レイアウト

決して以下の構造を作ってはいけません：

9セクションAIテンプレート： ヒーロー → ロゴバー → 3列の機能 → 「仕組み」のステップ → お客様の声のカルーセル → 料金表 → FAQアコーディオン → CTAバナー → 4列のフッター。この正確なシーケンスは、AIが生成するすべてのSaaSページで再現されています。
対称的な3列のカードグリッドを主要なコンテンツ構造として使用すること。
すべてを中央揃え — すべてのセクションで text-center、すべてのコンテナで mx-auto、空間的な緊張感なし。
すべてにカードを使用 — カード処理が必要かどうかに関わらず、すべてのコンテンツブロックに rounded-xl shadow-lg p-6。

ルール： すべてのレイアウトには、少なくとも1つのグリッドを破る要素（非対称、オーバーラップ、フルブリード、斜めの流れ、予期しないネガティブスペース）が必要です。references/layout-patterns.md を参照して、ワイヤーフレームを確認してください。

ブラックリスト対象アニメーション

IntersectionObserver による（普遍的なAIスクロールリビール）すべての要素への fade-in-up
すべてのカードへの hover:-translate-y-1 hover:shadow-xl
無差別に適用される transition-all duration-300
グラデーションカラーが循環するアニメーション
すべてに対する一般的なパララックス

ルール： ページあたり最大2〜3つの意図的な動き。それぞれが階層または雰囲気に役立つ必要があります。references/motion-recipes.md を参照して、12以上の特徴的な代替案を確認してください。

ブラックリスト対象コピー

以下のフレーズを決して書かないでください：

「あなたのワークフローに革命を」 / 「あなたの...を変革」
「...のパワーを解き放つ」 / 「シームレスに統合」
「モダンな...のために作られた」 / 「あなたの...を強化」
「あなたのXを次のレベルへ」 / 「あなたに必要なすべて」
「[ペインポイント]にさようなら」 / 「最先端テクノロジーを搭載」

禁止ワード（ユーザーからの引用でない限り）：シームレス、活用、最先端、堅牢、スケーラブル、エンパワー、ゲームチェンジャー、次世代、ホリスティック、革新的、ステートオブジアート、デルブ

コピールール： 見出しは具体的な意味を持ちます。セクションごとに短いサポート文を1つ。「30%削除してもページが改善されるなら、削除し続けよ。」

ブラックリスト対象コンポーネント

グラデーションCTAボタン（bg-gradient-to-r from-indigo-500 to-purple-600）
デフォルトとしてのぼかし背景ナビゲーションバー（backdrop-blur-md bg-white/80）
3列グリッドのアイコン + 見出し + 段落（普遍的な機能ブロック）
ヒーロー画像上の浮遊バッジ/ピル
円形アバターと星評価付きの testimonial カルーセル
水平ストリップの「Trusted by」ロゴクラウド
一般的な料金表（フリー/プロ/エンタープライズと「最も人気」バッジ）

タイポグラフィシステム

すべてのプロジェクトは、意図的なタイプシステムを確立する必要があります：

表示 + 本文のペアリング — 2つの異なる書体ファミリー。表示 = 特徴的、本文 = 読みやすい。両方に同じフォントを使用しないでください。
CSS変数 — --font-display、--font-body、--font-accent（オプションで等幅）
モジュラースケール — 比率を選択し（1.25 長三度、1.333 完全四度、1.5 増四度）、一貫して適用します。
ウェイトコントラスト — 意図的なコントラストを持つ最低3つのウェイトを使用します（例：300 本文、600 小見出し、900 表示）。
サイズのドラマ — 表示見出しは本文サイズの3倍以上にします。受賞作品では12:1の比率（180px表示 / 14px本文）を使用します。AIのデフォルトは控えめな4:1の比率です。

美的トーンごとに整理された、コピペ可能な20以上のペアリングについては、references/typography-pairings.md を参照してください。

カラーシステム

支配的 + アクセントモデル — 1つの支配的なカラーファミリーと、1つのシャープなコントラストアクセント。均等に分散されたパレットは臆病です。
CSSカスタムプロパティ — 最低限以下を定義：--color-surface、--color-text、--color-accent、--color-accent-contrast、--color-muted
雰囲気のある背景 — 決してフラットな白にしないでください。微妙なグラデーション、ノイズテクスチャ、色味のあるサーフェスを使用します。背景には深みが必要です。
ダーク/ライトは意図的な選択 — トーンに基づいて1つをプライマリとして選択します。チェックボックス機能としてダークモードを追加しないでください。

CSS変数ブロック付きの15以上の厳選されたパレットについては、references/color-systems.md を参照してください。

空間構成

グリッドを破ることは必須 — ページあたり少なくとも1つの要素がグリッドを破る必要があります：オーバーラップ、ブリード、非対称配置、斜めの流れ
非対称レイアウト — 7/12 + 5/12 のカラム分割、可変ガター（24px vs 64px）、不均一なパディング
フルブリードヒーロー — 継承されたガターや共有のmax-width制約のない、端から端までの画像
デザインとしてのネガティブスペース — たっぷりとした余白は意図的であり、空っぽではありません。非対称の余白（上部120px、下部80px）がリズムを加えます。
「すべてのセクションには一つの役割がある」 — 1つの見出し、1つのサポート文、1つの目的。2つのことをしようとするセクションはありません。
カードはインタラクションのためだけに — コンテンツが機能するためにボーダーやシャドウを必要としないなら、カードは必要ありません。

CSS Gridコード付きの6つのランディングページ + 3つのダッシュボードレイアウトワイヤーフレームについては、references/layout-patterns.md を参照してください。

モーションとアニメーション

正確に2〜3つの意図的な動きを出荷します：

1つのヒーローエントランス — スケール + フェード、クリップパスリビール、テキストスプリットスタガー、またはカウンタースクロールパララックス
1つのスクロール連動効果 — セクションリビール、スティッキーパララックス画像、プログレス駆動の変形、または水平スクロールギャラリー
1つのホバー/リビールインタラクション — マグネティックカーソル、カードのパースペクティブチルト、下線の拡張、またはカラーフィールドシフト

実装： プレーンHTMLの場合はCSSのみ。Reactの場合はFramer Motion。Vue/Svelteの場合はビルトインのトランジション。インパクトのある瞬間に焦点を当てます — よくオーケストレーションされた1回のページ読み込みは、散らばったマイクロインタラクションに勝ります。

CSSおよびFramer Motionバージョンの12以上のコピペレシピについては、references/motion-recipes.md を参照してください。

背景とテクスチャ

決してフラットな単色をデフォルトにしないでください。雰囲気を作り出します：

SVGノイズ — グラデーション上の有機的なグレインテクスチャのための feTurbulence フィルター
グラデーションメッシュ — 深みのための4〜6個のオーバーラップする放射状グラデーション（線形グラデーションではない）
幾何学模様 — CSSの radial-gradient または linear-gradient によるドットグリッド、ライングリッド、クロスハッチ
フィルムグレイン — 3〜5%の不透明度のノイズテクスチャを持つ擬似要素
ゆっくり動くアンビエントアニメーション — 背景で30秒以上の持続時間を持つオーロラ/ブロブキーフレーム

コピペ可能なSVGおよびCSSレシピについては、references/background-textures.md を参照してください。

「人間らしさ」 — 高級デザイナーが追加するもの

すべてのプロジェクトにこれらから少なくとも2つを含めます：

カスタムカーソル — マウスに追従する円形div（20px）、150msのlerp遅延、ホバー時に拡大
非対称の余白 — 不均一なパディング（120px 8% 80px 12%）、変化に富んだセクションマージン
1つのルールを破る要素 — 2度回転したカード、ビューポートの外に飛び出る画像、色が反転したセクション
コンテンツに応答するタイポグラフィ — ガター内のプルクオート、ドロップキャップ、マージンインデックス、重要度によるウェイトスケーリング
スクロールトリガーによる色の変化 — セクションの背景色がコンテンツの感情的なトーンに合わせて変化
可変フォントアニメーション — スクロールまたはホバー時にウェイトをアニメーション化する font-variation-settings

出力タイプのプロトコル

ランディングページ

構造：ヒーロー → サポート → 詳細 → 最終CTA（4セクション、9ではない）

ヒーロー：フルブリード、ブランド + 見出し + 1文 + CTA + 支配的なビジュアル。浮遊バッジ、複数のCTAはなし。
サポート：1つの具体的な機能、オファー、または証明ポイント。
詳細：雰囲気、ワークフローの深さ、またはストーリー。
最終CTA：単一のコンバージョンアクション。
ビューポート予算：ヘッダー + ヒーローコンテンツは初期ビューポートに収まる必要があります。

ダッシュボード / アプリUI

「Linearスタイルの抑制」 に従ってください：

強力なタイポグラフィとスペーシングによる落ち着いたサーフェス階層
最小限のカラーパレット（最大2〜3色）
密度は高いが読みやすい情報アーキテクチャ
CSS Gridの grid-template-areas によるサイドバー（240px）+ メイン + オプションのインスペクター（320px）
単一の明確なアクセントカラー。カードモザイクや、プロダクトUIの背後にある装飾的なグラデーションは禁止。

コンポーネントライブラリ

最初にデザイントークンを確立する（CSSカスタムプロパティ）
すべてのコンポーネントのダーク + ライトバリアントを表示
アトミック：トークン → 要素 → コンポーネント → コンポジション
各コンポーネントは単独でも、コンポジションでも機能する必要があります

ポスター / マーケティング

単一の焦点、劇的なタイポグラフィスケール（100px以上の見出し）
ハイコントラストカラー、印刷品質のレイアウト
ポスターコンテンツが入ったWebページではなく、デジタルポスターをデザインします

Webアプリ

機能的なエレガンス：キーボードファースト、明確な情報階層
UIに表示される状態管理（ローディング、空、エラー、成功状態）
広々としたマーケティングレイアウトではなく、密度の高い情報表示

検証リトマス試験

出力を提供する前に、これらの質問に対して自己チェックを行ってください。2つ以上の答えが「いいえ」の場合は、ユーザーに見せる前に反復してください。

ブランド/製品は最初のビューポートで間違いなく認識できますか？
1つの強力なビジュアルアンカーがありますか（複数の競合する要素ではありません）？
見出しだけをスキャンしてページを理解できますか？
各セクションには正確に1つの役割がありますか？
カードは実際に必要ですか、それとも怠惰なデフォルトですか？
デザインには名前を付けられる美学的な方向性がありますか（「クリーンモダン」ではありません）？
装飾的なシャドウをすべて削除してもプレミアムに見えますか？
デザイナーが「そんなの思いつかなかった」と言うような要素が少なくとも1つありますか？
他のAIが生成したページのように見えますか？「はい」の場合は、再デザイン。

詳細な20ポイントの評価ルーブリックについては、references/anti-slop-checklist.md を参照してください。

テクノロジー適応表

フレームワーク	タイポグラフィ	モーション	スタイリング
プレーン HTML/CSS	Google Fonts `@import`	CSS `@keyframes` + `animation-timeline`	CSSカスタムプロパティ + Grid/Flexbox
React / Next.js	`next/font` または Google Fonts	Framer Motion（`motion` コンポーネント）	Tailwind（高度にカスタマイズされた設定）または CSS Modules
Vue	`index.html` 内の Google Fonts	`<Transition>` コンポーネント	Tailwind（カスタマイズ）またはスコープ付きスタイル
Svelte	`app.html` 内の Google Fonts	ビルトイン `transition:` ディレクティブ	CSSカスタムプロパティを使用したスコープ付き `<style>`

Tailwindルール： Tailwindを使用する場合、tailwind.config をカスタマイズする必要があります — 色、フォント、ボーダー半径、シャドウをオーバーライドします。デフォルトのTailwind設定はAIスロップを生成します。拡張し、デフォルトにしないでください。

エッジケース

シナリオ	対応
ユーザーがデザインの方向性を示さない	大胆なトーンを選び、選択を説明し、進める
ユーザーが「クリーンでシンプル」と言う	スイスモダニズムのミニマリズムとして解釈し、一般的なものにしない
ユーザーがブランドガイドラインを提供する	それらを尊重するが、雰囲気のある深み、意図的な動きを追加して高める
ユーザーが「Apple/Linearのように」と言う	特定の原則（抑制、密度、タイポグラフィ）を研究する — 表面的な美学をコピーしない
曖昧な「かっこよくして」	文脈が他のことを示唆しない限り、ラグジュアリーエディトリアルトーンのランディングページとして扱う
非常に素早いリクエスト	`scripts/init_frontend.py` を使用してスキャフォールドする、または直接コードを生成する

wjgoarxiv/my-frontend-design-skill

my-frontend-design-skill とは？

お気に入りのAIに質問する

ドキュメント