はじめに
バイブコーディング（AIエージェントに自然言語で指示して開発する方法）でプロトタイプを作っていたら、
「ディスってる訳ではないけど、Bootstrap感が強すぎてダサくない？」
と言われてしまいました……😂
たしかに、業務システムのUIを作成する場合、BootstrapよりVuetifyのほうが洗練されています。
でも、バイブコーディングでAIにUIを生成させるとき、
自分にVuetifyの知識がないと指示や修正ができない！
ということで本記事では、
「バイブコーディングでVuetifyを扱うために最低限知っておきたい基礎知識」
を整理します。
Vuetifyとは？
Vuetify は Vue 3 向けの UI コンポーネントフレームワークです。
Google の Material Design に準拠していて、
管理画面や業務システムのような「整った見た目」をすぐに構築できます。
Bootstrapよりもモダンで、Vueコンポーネントとの親和性が高いのが特徴。
CSSを書かなくても「それっぽいUI」が揃うのが最大の強みです。
セットアップ（Vue 3 + Vuetify 3）
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
const vuetify = createVuetify({
components,
directives,
theme: {
defaultTheme: 'light',
themes: {
light: {
dark: false,
colors: {
primary: '#1976D2',
secondary: '#424242',
error: '#FF5252',
},
},
},
},
})
createApp(App)
.use(vuetify)
.mount('#app')
ポイント💡
-
vuetify/stylesを忘れずに読み込む -
themeオプションでブランドカラーを指定可能 - コンポーネント登録は
components/directivesの2行で完結
レイアウトの基礎（Gridシステム）
AIに「3列で並べて」「中央にフォーム」と指示するには、
VuetifyのGrid構造を理解しておく必要があります。
<v-container>
<v-row>
<v-col cols="12" md="6">
<v-text-field label="名前" outlined />
</v-col>
<v-col cols="12" md="6">
<v-text-field label="メール" outlined />
</v-col>
</v-row>
</v-container>
| 要素 | 役割 |
|---|---|
<v-container> |
ページ全体の枠。中央寄せを自動でやってくれる |
<v-row> |
行を定義（flexベース） |
<v-col> |
列を定義。画面サイズに応じて柔軟にレイアウトを変えられる。 |
参考: Gridドキュメント
よく使うコンポーネント
| コンポーネント | 用途 | 主なprops例 |
|---|---|---|
v-btn |
ボタン |
color, variant, loading, disabled
|
v-text-field |
入力欄 |
label, outlined, rules, type
|
v-select |
プルダウン |
items, label, multiple
|
v-data-table |
一覧表示 |
headers, items, items-per-page
|
v-dialog |
モーダル |
v-model, width, persistent
|
Vuetifyのコンポーネント名をAIに明示して指示すると、
生成精度が一気に上がります。
参考: コンポーネント一覧
テーマ設定（カラーやモード切替）
const vuetify = createVuetify({
theme: {
defaultTheme: 'myTheme',
themes: {
myTheme: {
dark: false,
colors: {
primary: '#6200EE',
secondary: '#03DAC6',
error: '#B00020',
},
},
},
},
})
AIに「ブランドカラーを反映して」と指示するときは、
この theme 定義を基に出力してもらうと整います。
参考: テーマ設定
バイブコーディングで使えるプロンプト例
実際にAIエージェントに渡す指示テンプレートはこちら👇
あなたは Vue 3 + Vuetify 3 環境で UI を生成するAIエージェントです。
以下の要件でページを作成してください。
## 要件
- ページ名：ユーザー登録ページ
- 中央にフォームを配置
- 入力項目：
- ユーザー名（outlined）
- メールアドレス（type=email）
- パスワード（type=password）
- 登録ボタン（color="primary"）
- スマホでは縦並び、PCでは中央寄せ
コツ：
- コンポーネント名を明示（例：v-btn, v-text-field）
- レイアウト構造を説明（「中央」「左右余白」など）
- スタイルのルール（outlined / colorなど）も具体的に伝える
開発フロー例
| ステップ | 内容 |
|---|---|
| 1 | 画面仕様を自然言語でまとめる |
| 2 | AIにVuetify前提でプロンプトを投げる |
| 3 | コード生成後にローカルで動作確認 |
| 4 | 不満点を自然言語で再指示して修正 |
| 5 | ロジック部分は手動で調整 |
| 6 | 生成コードをリファクタリング・レビュー |
注意点・リスク
| 注意点 | 内容 |
|---|---|
| コード品質 | 動くけど冗長になりやすい。手動リファクタ推奨。 |
| セキュリティ | 認証・CSRFまわりはAI任せにしない。 |
| プロンプト依存 | 指示があいまいだとUI崩壊の原因に。 |
| チーム共有 | AIとのやり取りログはドキュメント化して再利用可能に。 |
まとめ
- Vuetifyは業務システムに最適なモダンUIフレームワーク
- バイブコーディングでも、最低限の構造とコンポーネント知識があればAIに正確に指示できる
- 「構造 → コンポーネント → スタイル」の順に具体的に伝えるのがコツ
おわりに
バイブコーディングは、指示の出し方ひとつで成果物の質がガラッと変わります。
Vuetifyを理解しておくだけで、AIとの会話が“ただの試行錯誤”から“実践的な共同開発”に変わります。