バイブコーディングでデザインを劇的に改善する方法 — UI コンポーネント名で「構造」を指示する

バイブコーディングでデザインを劇的に改善する方法 — UI コンポーネント名で「構造」を指示する

バイブコーディング（Vibe Coding）で AI にUIを作らせると、「動くけどダサい」「素人っぽい」という壁にぶつかる人は多いでしょう。

@7_eito_7（えいと）さんのポストは、この問題に対するシンプルかつ強力な解決策を提示しています。

「バイブコーディングでデザインを20倍よくする裏技。それはUIの種類を覚えること。2,500以上のデザイン例がまとまったThe Component Galleryでデザインの知識を増やす。そして『App Bar + Drawer + Card Grid + Tabs構成で』みたいに構造で指示するだけで一瞬でプロっぽくなる。」

核心は**「見た目」ではなく「構造」で指示する**ことです。

なぜ「きれいにして」では良いUIにならないのか

バイブコーディングでよくある失敗パターンを見てみます。

❌ 曖昧な指示:
「もっとおしゃれにして」
「プロっぽいデザインにして」
「モダンな感じで」

→ AI は「統計的に平均的な」デザインを返す
→ 紫グラデーション、Inter フォント、角丸カードの量産（AI スロップ）

✅ 構造で指示:
「App Bar + Drawer + Card Grid + Tabs 構成で」
「Hero + 3カラム Feature Grid + Testimonial Carousel + CTA Footer で」
「Sidebar Navigation + Data Table + Filter Bar + Pagination で」

→ AI はコンポーネントの「正しい組み合わせ方」を知っている
→ 実在のデザインシステムに基づいた構造が生成される

この違いが生まれる理由は明確です。LLM の学習データには Material Design、Fluent UI、Ant Design など実在のデザインシステムのコードが大量に含まれています。コンポーネント名で指示すると、AI はそれらのデザインシステムの「正しい実装パターン」を参照して出力します。

The Component Gallery — UI コンポーネントの百科事典

The Component Gallery は、世界中のデザインシステムからインターフェースコンポーネントを収集・整理したリファレンスサイトです。開発者の Iain Bean が運営しています。

基本情報

収録デザインシステム（抜粋）

これらの実在するデザインシステムが各コンポーネントをどう実装しているかを横断的に比較できるのが、The Component Gallery の価値です。

収録コンポーネント一覧（75種類）

ナビゲーション・構造

コンテンツ表示

インタラクション

フォーム

実践：構造で指示するプロンプトパターン

パターン 1: ダッシュボード

「以下の構成でダッシュボードを作成して:
- App Bar（上部）: ロゴ + 検索バー + アバター
- Drawer（左側）: Navigation + アイコン付きメニュー
- メインエリア:
  - 上段: 4つの Stats Card（KPI表示）
  - 中段: Tabs で切り替え可能な Data Table
  - 下段: Card Grid でグラフ表示
- Toast で操作通知」

パターン 2: ランディングページ

「以下の構成で LP を作成して:
- Hero セクション: 大きな見出し + CTA ボタン + 背景画像
- Feature Grid: 3カラムの Card（アイコン + 見出し + 説明）
- Testimonial: Carousel で顧客の声
- Pricing: 3カラムの Card で料金プラン比較
- FAQ: Accordion で質問と回答
- Footer: 4カラムのリンクグリッド + ニュースレター登録」

パターン 3: 設定画面

「以下の構成で設定画面を作成して:
- Sidebar Navigation: セクションごとのメニュー
- メインエリア:
  - Breadcrumbs でナビゲーション位置を表示
  - 各セクションは Card 内に Form 要素を配置
  - Toggle, Select, Text Input を使い分け
  - 保存ボタン（Button Group: キャンセル + 保存）
- 保存成功時に Toast 通知」

パターン 4: 管理画面（CRUD）

「以下の構成で管理画面を作成して:
- App Bar + Sidebar Navigation
- メインエリア:
  - Filter Bar（検索 + Select でフィルタ）
  - Data Table（ソート可能、Badge でステータス表示）
  - Pagination
  - 行クリックで Modal に詳細表示
  - 新規作成も Modal 内の Form
- 削除時は確認 Modal
- 操作結果は Toast で通知」

なぜ「構造指示」が効くのか — LLM の仕組みから理解する

LLM は学習データに含まれるデザインシステムのドキュメントとコードから、コンポーネントの「正しい使い方」を学習しています。

「Card Grid」と指示すると:
→ Material Design の Card Grid 実装
→ Ant Design の Card.Grid コンポーネント
→ Bootstrap の Card Deck パターン
→ 数千のプロダクションコード
... これらの「中央値」として、プロの設計パターンに沿った出力が生成される

一方、「きれいにして」と指示すると:

→ 「きれい」の定義が学習データ全体に分散
→ 統計的に最も頻出する「安全な」選択（= AI スロップ）に収束

つまり、コンポーネント名はデザインシステムの知識を引き出すためのキーです。正確なキーを渡すほど、AI はより適切なデザインパターンを参照できます。

The Component Gallery の活用法

1. コンポーネント名を覚える

最も基本的な使い方です。Components ページを眺めて、「こういう UI 要素にはこういう名前がある」を知るだけで、AI への指示精度が上がります。

2. デザインシステム間の比較

同じ「Card」でも、Material Design の Card と Polaris の Card では設計思想が異なります。The Component Gallery では各コンポーネントのデザインシステム別実装を横断的に比較できます。

「Shopify Polaris スタイルの Card Grid で商品一覧を作って」
「Material Design 3 の Navigation Rail + Card Grid で」

デザインシステム名まで指定すると、さらに具体的な出力が得られます。

3. 「知らなかった UI パターン」の発見

Empty State（データがない場合の表示）、Skeleton（ローディング中のプレースホルダー）、Skip Link（アクセシビリティ用のスキップリンク）など、意識しないと見落とすコンポーネントを知ることで、UI の完成度が上がります。

まとめ

バイブコーディングでデザインの質を上げるための最短ルート:

❌ 「おしゃれなダッシュボードを作って」
✅ 「App Bar + Drawer + Card Grid + Tabs + Toast 構成のダッシュボードを作って」

コンポーネント名という共通語彙を持つことで、人間とAIの間のデザイン意図の伝達精度が劇的に向上します。デザインの知識がなくても、The Component Gallery で「名前を知る」だけで、AI が返すUIの質は大きく変わります。

参考リンク:

• えいと (@7_eito_7) のポスト
• The Component Gallery
• The Component Gallery — Components
• The Component Gallery — Design Systems
• Vibe Coding Starter Guide — PageAI
• Design Systems for the Vibe-Coding Era — Design Systems Collective
• An engineer’s guide to vibe design — PostHog
• バイブコーディング UI/UX 日本語指示 10 選 — Zenn