design-taste

design-taste

ランディングページ、ポートフォリオ、マーケティングサイト、プロダクト UI の生成に適用します。 すべてのルールは状況に応じたものです。まずブリーフを読み、合うものを適用してください。すべてを盲目的に適用してはいけません。

---

0. 何よりも先に状況を読み取る

LLM の出力がありきたりに見えるのは、モデルがブリーフを読む代わりに、デフォルトの美的表現へ飛びつくためです。コードを書く前に、次の点を推測してください。

1. ページの種類 — ランディングページ（SaaS／消費者向け／エージェンシー／イベント）、ポートフォリオ（デザイナー／開発者／スタジオ）、プロダクトページ、リデザイン。
2. 雰囲気を表す言葉 — 「ミニマル」「温かみのある」「プレミアム」「遊び心のある」「信頼性重視」「エディトリアル」「ダーク」「エージェンシー」など。これらが方向性を決めます。
3. オーディエンス — 美的表現を決めるのはあなたの好みではなく、オーディエンスです。政府のサービスにキネティックタイポグラフィは使いません。
4. 既存のブランド — ロゴ、色、書体、写真。リデザインはこれらを起点とします。これらは入力情報であり、任意ではありません。

生成を始める前に、理由がユーザーに伝わるよう、デザインの読み取りを一行で示してください。

• 「次のように読み取りました：技術系の購入者向け B2B SaaS ランディングページ。Linear のようなミニマルな表現、控えめなモーション、モノクロ＋アクセントカラー 1 色。」
• 「次のように読み取りました：採用担当者向けの個人デザイナーポートフォリオ。エディトリアルな印刷物の表現、大きなセリフ体、非対称グリッド。」

読み取りが本当に曖昧な場合は、質問を 1 つだけしてください。それ以外は進めてください。デフォルトに頼ってはいけません。

1. 禁止リスト（LLM のデフォルト — 使用禁止）

これらは AI 生成デザインの特徴です。意識して避けてください。

• インディゴから紫（または青から紫）へのグラデーションを使ったヒーロー背景やグラデーションテキスト。
• バッジのピル＋特大の太字見出し＋ボタン 2 つ＋プロダクトのスクリーンショットを中央揃えにしたヒーロー。
• デフォルトのセクション構成として「同じサイズの機能カード 3 枚」を使うレイアウト。
• 機能アイコンに絵文字（📊🚀⚡）を使うこと。アイコンは描画するか、タイポグラフィで表現してください。絵文字は使いません。
• あらゆる場所でグラスモーフィズム（すりガラス風の backdrop-filter カード）を使うこと。
• 自動的に Inter ＋ slate-900 を配色として使うこと。
• 何にでも rounded-2xl を適用すること。奥行きの表現を影だけに頼ること。
• ページ内に同一の対称的なセクションを積み重ね、どのページにも同じ骨組みを使うこと。
• 文脈に関係なく、どのページにも紫色の「無料で始める」ボタンを置くこと。
• 入れ子になったカードを 6 層以上使うこと。カードの中にカード、その中にさらにカードを配置すること。

デザインの読み取りからこれらを使う理由が見つからなければ、使わないでください。

2. タイポグラフィ（最も効果の高い技法）

「プレミアム」という評価の大半は、書体選びから生まれます。まずここに品質の予算を投じてください。

• コントラストをつけて組み合わせます。 セリフ体のディスプレイ書体＋クリーンなサンセリフ体、またはグロテスク体のディスプレイ書体＋モノスペースのラベルなどです。すべてに同じニュートラルなサンセリフ体を使うのは避けます。ブランドですでに使われている場合を除き、デフォルトで Inter を使ってはいけません。
• ディスプレイ書体のスケールが個性を生みます。 ヒーローの見出しは、行間を詰め（0.95～1.05）、実際に大きくしてください（clamp(3rem, 8vw, 7rem) の範囲）。やや小さめの太字テキストは「テンプレート」のように見えます。
• ラベルやメタデータにはモノスペース体かスモールキャップを使い、 文字間隔を広げ（0.08～0.15em）、大文字にします。セクション番号（「01」「02」）にも同じ表現を使います。
• 本文の行長は 45～75 文字にします。 本文は 16～18px、行間はゆったりと 1.55～1.7 にします。
• 各セクションでフォントサイズの階層を 1 つにします。 1 つのビューポートに 6 種類のフォントサイズを並べてはいけません。
• 6 行にわたる段落の折り返しは避けてください。段落は最大でも約 3 行にするか、カラムの幅を広げてください。

3. 色（控えめさが意図を伝える）

• ニュートラルカラー 1 色＋アクセントカラー 1 色から始めます。 温かみのある紙色／インク色、またはオフブラック／オフホワイトなどです。ニュートラルカラー 2 色＋アクセントカラー 1 色で、配色として十分です。アクセントカラーを 3 色使うと虹色になります。
• デザインの読み取りがダークテックでない限り、デフォルトで濃紺の背景を使わないでください。ダークなら自動的にプレミアムになるわけではありません。
• 意図を持って色を使います。 アクセントカラーは、1 つのアクション、1 つの数値、1 つのハイライトを示すために使います。それ以外はニュートラルに保ちます。
• 本文のテキストコントラスト比は 4.5:1 以上にします。低い不透明度のインディゴに白文字を重ねてはいけません。
• 新しい色を足すのではなく、ニュートラルカラーの異なる色合いを使って、色調に深みを持たせます。

4. レイアウトと構成（非対称性を意図的なデザインに見せる）

• 非対称なグリッド：コンテンツ列を中央からずらします（7/5 の分割、間に罫線を入れた 6/6、左側を広く右側を細い索引列にするなど）。
• 索引付け： 数字、セクションの罫線（上下の細いヘアライン）、視認できるグリッド構造によって、ページにアートディレクションが行き届いた印象を与えます。
• ページごとに意図的なグリッドを 1 つ設け、すべてをそれに揃えます。ヘアライン（1px rgba(ink, 0.1–0.2)）は、手軽に高級感を出す方法です。
• 余白を活用します。ゆったりとしたマージン、ヒーローの周囲にゆとりを持たせ、セクション間には 96～160px 以上の間隔を設けます。
• どこでも同じ高さのカードを 3 枚並べるのは避けます。セクションのリズムに変化を付けましょう（全幅、分割、索引付きリスト、引用、表など）。

5. 奥行きと表面（影ではなく構造）

• 構造によって奥行きを出します。ヘアライン、インセットパネル、ずらしたブロック、トーンを変えた背景を使います。影は浮いている要素にだけ使い、ぼかしを強く（24px 以上）、不透明度を低くします。
• ボタンや CTA の背景にグラデーションは使いません。彩度の高い単色のアクセントのほうが効果的で、見栄えもよくなります。
• ブラウザーの枠を付けたスクリーンショットのモックアップを、デフォルトのヒーロービジュアルにしないでください。指標の表、エディトリアル風の列、大きなプルクオート、あるいは文字そのもののほうが、より効果的な場合がよくあります。
• ブリーフに画像がない場合は、ストックのグラデーションやプレースホルダー画像ではなく、構造（罫線、文字、カラーブロック）でデザインします。

6. モーション（派手さより節度）

• デフォルトは最小限にします。意図的なトランジションを 1 つだけ使います（ナビゲーションの表示、ヒーローの登場、スクロールに連動したセクションのフェードなど）。
• 無限ループのアニメーション、すべての要素にバウンスする登場アニメーションを付けること、浮遊するグラデーションの球体は避けます。
• イージングには、cubic-bezier(0.22, 1, 0.36, 1) のような、ゆったりとしたトロピカルカーブを使い、300～600ms にします。出だしは素早く、終わりは穏やかにします。
• 読後感を遊び心のあるものにするなら、色ではなくモーションにその予算を使います。

7. 公開前チェックリスト（「完了」の前に確認）

初めて見る人の目線で、自分の成果物を読み直してください。次に当てはまる場合は、そのページは不合格です。

• このスキルを使わずに同じエージェントへ「ランディングページ」と入力しただけでも作れそうです（正直に判断してください）。
• ヒーローが、中央揃えのバッジ＋見出し＋ボタン 2 つ＋スクリーンショットになっています。
• UI 要素として絵文字アイコンを使っています。
• テンプレートの癖で、同じカードが 3 枚横並びになっています。
• ディスプレイ用のコントラストがなく、無難なサンセリフ書体を 1 種類だけ使っています。
• 意味を持たせた色を約 2 色以上使っています。
• 本文が約 6 行を超えて折り返す、または列が全幅になっています。
• 1 つのビューポート内でアクセントカラーが約 4 回以上使われています（何を指しているのか分からなくなります）。
• デザインの意図を損なわずに削除できるセクションがあります。

1 つでも該当したら、そのセクションを作り直してください。間違いなく意図が感じられるページは、洗練されたテンプレートより優れています。

---

センスとは、公開前に実行するチェックリストです。これは、そのチェックリストをスキルの形にしたものです。