バイブコーディングでUIをダサくしない7つの方法 — AIデフォルトUIからの脱却
バイブコーディングでAIに指示するだけだと青グラデーション・角丸カード・Interフォントの「AIテンプレUI」になりがち。解決策は「AIに想像させるな、模倣させろ」。デザイントークン定義、参考画像渡し、アンチパターン禁止の3つが鍵だ。
「AIにサイト作ってもらったけど、なんかダサい」——バイブコーディングを始めた人が必ず通る壁だ。
問題の正体はシンプル。AIは指示がなければ、最も「無難な」デザインを出力する。その結果が「青グラデーション・角丸カード・Interフォント」の量産テンプレUIだ。
結論：「AIに想像させるな、模倣させろ」。デザイントークンを定義し、参考画像を渡し、「やるな」リストを書く。この3つでAIのUI出力は激変する。
⚠️ この記事の情報は2026年3月時点のものです。AIツールのUI生成能力は急速に進化しています。
AIが生成する「テンプレUI」の正体
一言で：AIには「デフォルトの手癖」がある。指示しなければ毎回同じデザインになる。
バイブコーディングでUIを作ると、ほぼ確実にこうなる。
| AIの手癖 | 具体的な症状 |
|---|---|
| 青〜紫のグラデーション | ヘッダーやボタンが全部同じ色味 |
| Interフォント | 世界中のAI生成サイトがInter |
| Lucideアイコン一辺倒 | 全部同じアイコンセットで個性ゼロ |
| 角丸カード＋影 | カードUIが全部shadcnデフォルト |
| 余白が均一すぎる | 8pxや16px刻みで機械的 |
これはAIが悪いわけではない。学習データの中で最も多いパターンを出力しているだけだ。つまり、別のパターンを指示すれば変わる。
💡 筆者の体験：ふっけんラボを最初にAntigravityに作らせたとき、まさにこの「テンプレUI」が出てきた。青グラデーションのヘッダー、角丸カード、Interフォント。「AIが作りました感」が満載で、見た瞬間に「これじゃない」と思った。ここから7つの改善を積み重ねて、今のデザインにたどり着いた。
方法1：デザイントークンをAGENTS.mdに定義する
一言で：色・フォント・余白・角丸の基本値を事前に決めて、AIに渡す。
デザイントークンとは、デザインの「基本設定」のこと。これをAGENTS.md（AIエージェントへの指示を書いておく設定ファイル）に書いておけば、AIが毎回参照してくれる。
実際にAGENTS.mdに書く内容
## Design Tokens
- Primary: #0f172a（ダークネイビー）
- Accent: #38bdf8（スカイブルー）
- Background: #f8fafc（オフホワイト）
- Text: #1e293b（チャコール）
- Font-family: 'Zen Kaku Gothic New', sans-serif
- Heading-font: 'Outfit', sans-serif
- Base spacing: 8px grid
- Border-radius: 4px（角丸は控えめに）
- Max-width: 800px（コンテンツ幅）
❌ 定義なし vs ✅ 定義あり
| 定義なし | 定義あり | |
|---|---|---|
| 色 | 毎回違う青が出る | 統一されたブランドカラー |
| フォント | Inter一択 | 指定のフォントが使われる |
| 角丸 | 12px〜16pxで丸すぎ | 4pxで洗練された印象 |
| 一貫性 | ページごとにバラバラ | サイト全体で統一 |
💡 筆者の体験：ふっけんラボのAGENTS.mdにデザイントークンを追加した瞬間、AIの出力が変わった。それまで「ちょっと違う」と修正していたのが、最初から正しい色・フォントで生成されるようになった。1回書くだけで、その後のすべてのUI生成に効く。投資対効果が最も高い方法だ。
方法2：「やるな」リスト（アンチパターン）を書く
一言で：AIにやってほしくないことを明示する。禁止ルールは許可ルールより効く。
AIは「こうして」よりも**「これはするな」**のほうが従いやすい。
AGENTS.mdに追記するアンチパターン
## Design Anti-patterns（禁止）
- ❌ 青→紫のグラデーション背景を使わない
- ❌ Interフォントを使わない
- ❌ 角丸を12px以上にしない
- ❌ shadcn/uiのデフォルトスタイルをそのまま使わない
- ❌ ダミーテキスト（Lorem ipsum）を残さない
- ❌ 影（box-shadow）を多用しない
- ❌ 装飾のないプレーンなボタンを使わない
これだけでAIの「やりがちなミス」の8割が消える。
方法3：テキスト指示ではなく参考画像を渡す
一言で：「かっこいい感じで」では伝わらない。実物の画像を見せるのが最速。
デザインの指示で最もやりがちな失敗は、テキストだけで伝えようとすること。
| ❌ テキスト指示 | ✅ 画像指示 |
|---|---|
| 「モダンでクリーンなデザインにして」 | 参考サイトのスクショ + 「この雰囲気で」 |
| 「カード型のレイアウトにして」 | Dribbbleで見つけたカードUIのスクショ + 「このカードデザインを再現して」 |
| 「余白をもっと取って」 | スクショに赤丸 + 「ここの余白を32pxに」 |
参考画像の集め方
| サイト | 特徴 | 使い方 |
|---|---|---|
| Dribbble | UIパーツ単位の参考 | ボタン・カード・ナビ等パーツごとに検索 |
| Mobbin | 実在アプリのUI集 | 画面フロー全体の参考に |
| Awwwards | 先進的なWebデザイン | トップページのインスピレーションに |
💡 筆者の体験：Luna Logic FXのトップページを作るとき、テキスト指示だけでは3回やり直しても理想に近づかなかった。Dribbbleで見つけた金融系サイトのスクショを3枚AIに渡して「この雰囲気で」と頼んだら、1回で80点のデザインが出てきた。画像は1000語に勝る。
方法4：フォントをデフォルトから変える
一言で：フォントを変えるだけでAI生成感が一気に消える。最もコスパの良い改善。
AIはほぼ100%「Inter」か「system-ui」を使う。フォントを1つ変えるだけで、サイト全体の印象が劇的に変わる。
日本語サイトにおすすめのフォント
| フォント | 特徴 | 向いているサイト |
|---|---|---|
| Zen Kaku Gothic New | モダンで読みやすい | テックブログ、情報サイト |
| M PLUS 1p | 柔らかく親しみやすい | 個人ブログ、コミュニティ |
| BIZ UDゴシック | UD（ユニバーサルデザイン）準拠 | アクセシビリティ重視 |
| Noto Sans JP | Google公式、安定感 | どんなサイトでもOK |
英数字用フォント（見出しに）
| フォント | 特徴 |
|---|---|
| Outfit | 幾何学的でモダン |
| Poppins | 丸みがあって親しみやすい |
| DM Sans | スッキリ、クリーン |
設定方法（Google Fonts）
<link href="https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;700&family=Outfit:wght@600;700&display=swap" rel="stylesheet">
body { font-family: 'Zen Kaku Gothic New', sans-serif; }
h1, h2, h3 { font-family: 'Outfit', sans-serif; }
方法5：アイコンセットをLucideから変える
一言で：アイコンを変えるとサイトの個性がグッと出る。
AIは放っておくとLucideアイコンを使う。悪くはないが、世界中のAI生成サイトがLucideを使っているので個性がない。
代替アイコンセット
| アイコンセット | 特徴 | URL |
|---|---|---|
| Phosphor | 6スタイル対応、柔軟性が高い | phosphoricons.com |
| Tabler | 5,000種超え、線が太めで視認性◎ | tabler.io/icons |
| Heroicons | Tailwind CSS公式、シンプル | heroicons.com |
AIへの指示例：
アイコンはPhosphorを使ってください。Lucideは使わないでください。
CDN: https://unpkg.com/@phosphor-icons/web
方法6：ワイヤーフレームを先に描く
一言で：「まず構造を決めてからデザインする」のが手戻りを最小化する鍵。
バイブコーディングでよくある失敗パターン：
「トップページ作って」→ 全然違うのが出てくる → 修正指示 → また違う → 3周目…
これを防ぐには、先にワイヤーフレーム（線だけの設計図）を描いてAIに渡す。
おすすめツール
| ツール | 特徴 | 費用 |
|---|---|---|
| Excalidraw | ブラウザで手描き風。最速 | 無料 |
| Figma | 本格的だが学習コスト高い | 無料枠あり |
| 紙＋写真 | 最もローテク、だが効果的 | 0円 |
💡 筆者の体験：正直、最初は「ワイヤーフレームなんて面倒」と思っていた。だが3回連続で「これじゃない」を繰り返した後、紙に四角と文字を5分で書いてスマホで撮影→Antigravityに渡したら、1回で狙い通りのレイアウトが出てきた。5分の手間で30分の手戻りを防げる。
方法7：CSSは「全体→部分」の順で指示する
一言で：最初にサイト全体のスタイルを決めてから、個別パーツを調整する。
よくある失敗：
❌ 「このボタンの色を変えて」→「このカードの影を消して」→「ヘッダーの高さを…」
→ パーツごとにバラバラに修正 → 全体の統一感が崩壊
正しい順序：
✅ 1. サイト全体のCSS変数（カスタムプロパティ）を定義
2. レイアウト（グリッド・余白）を調整
3. 個別コンポーネント（ボタン・カード等）を微調整
AIへの指示例
まず、CSSカスタムプロパティ（:root）で以下の変数を定義してください：
- --color-primary: #0f172a
- --color-accent: #38bdf8
- --color-bg: #f8fafc
- --color-text: #1e293b
- --font-body: 'Zen Kaku Gothic New', sans-serif
- --font-heading: 'Outfit', sans-serif
- --radius: 4px
- --max-width: 800px
その後、この変数を使ってサイト全体を統一してください。
これで後から色を変えたくなっても、変数の値を1箇所変えるだけで全ページに反映される。
まとめ：AI生成UIを脱テンプレする7つの方法
| # | 方法 | 効果 | 難易度 |
|---|---|---|---|
| 1 | デザイントークンをAGENTS.mdに定義 | ★★★★★ | ⭐（簡単） |
| 2 | アンチパターン（やるなリスト）を書く | ★★★★☆ | ⭐（簡単） |
| 3 | テキストではなく参考画像を渡す | ★★★★★ | ⭐⭐（少し手間） |
| 4 | フォントをデフォルトから変える | ★★★★☆ | ⭐（簡単） |
| 5 | アイコンセットを変える | ★★★☆☆ | ⭐（簡単） |
| 6 | ワイヤーフレームを先に描く | ★★★★☆ | ⭐⭐（少し手間） |
| 7 | CSSは全体→部分の順で指示する | ★★★★☆ | ⭐⭐（少し手間） |
核心は「AIに想像させるな、模倣させろ」だ。テキストで「かっこよく」と頼むのではなく、具体的な値と参考画像を渡す。AIは「真似する」のが得意だ。想像力に期待するのではなく、その模倣力を活かそう。
📚 次に読む
- 👉 Antigravityでサイトを作った全記録 — 実際にバイブコーディングでサイトを構築した体験記
- 👉 AIへの指示設計入門 — UI指示だけでなく、AIへの「良い指示」全般を学ぶ
- 👉 Agent Skillsの作り方 — デザイントークンをスキルとして永続化する方法
FAQ：バイブコーディングとUIデザインでよくある質問
Q. バイブコーディングとは何ですか？
A. AIに自然言語で指示を出してコードやUIを生成する開発手法だ。プログラミング知識がなくても、「こういうページを作って」と伝えるだけでWebサイトやアプリを作れる。
Q. AIが生成するUIはなぜダサくなるのですか？
A. AIは学習データの中で最も一般的なデザインパターンを出力する傾向がある。そのため青グラデーション、Interフォント、Lucideアイコン、角丸カードという「AIテンプレUI」に収束しがちだ。
Q. 非エンジニアでもUIを改善できますか？
A. はい。この記事の方法はコーディング不要だ。デザイントークンの定義、参考画像の提示、アンチパターンの明記など、すべてテキストと画像で指示するだけで改善できる。
Q. デザイントークンとは何ですか？
A. 色、フォント、余白、角丸などのデザインの基本値をまとめた定義だ。これをAGENTS.mdに書いておくと、AIが毎回一貫したデザインで生成してくれる。
Q. バイブコーディングで参考にすべきデザインサイトは？
A. Dribbble（UIパーツ単位の参考）、Mobbin（実在アプリのUI集）、Awwwards（先進的なWebデザイン）が代表的だ。実在するサイトのスクリーンショットをAIに渡すのも効果的。
この記事はAntigravityを使って執筆されました。