「このUI、コードで再現したいけどゼロから書くのは正直面倒…」
そんな悩みを、生成AIとバイブコーディングで一気に解決できます。
この記事では、
画像 → 言語化 → プロンプト → HTML/CSS生成
という実践フローを、実例ベースで解説します。
生成AIでUIコーディングする時代が来ている
従来のWeb制作では、
- デザインを見て
- 頭の中で分解して
- HTML/CSSを手で書く
という工程が当たり前でした。
しかし今は、
「UIを分解して言語化する」ことさえできれば、コードは生成AIが書く時代です。
重要なのは、
👉 AIにどう伝えるか（プロンプト設計）
この一点です。
今回やることの全体フロー（5ステップ）
今回の流れはとてもシンプルです。
- UIデザインをスクリーンショットする
- スクリーンショットを生成AIに読み込ませる
- UIの構成を言語化させる
- 言語化した内容をプロンプトとして整理する
- バイブコーディング用生成AIに送信する
① 画像をスクリーンショットする
まずは、参考にしたいUIをスクリーンショットします。
- Webサイト
- アプリUI
- Dribbble / Pinterest のデザイン
ポイントは、
「完成形として真似したいUI」を選ぶことです。
② スクリーンショットを生成AIに読み込ませる
次に、スクリーンショットを生成AI（ChatGPTなど）に読み込ませます。
この段階では、
- 「このUIの構成を分析してほしい」
- 「コーディング前提で言語化してほしい」
といった目的を伝えます。
③ UI構成を言語化させる
ここが最重要ポイントです。
生成AIに対して、次のように指示します。
このUIの構成を、UI/UX視点・フロントエンド視点で言語化してください。
すると、
- 縦長カード型UI
- セクションごとの役割
- 情報の優先度
- 色による視線誘導
といった 設計レベルの言語化 が得られます。
④ 言語化した内容をプロンプトとして整理する
次に、その言語化を
「コーディング用プロンプト」 に変換します。
重要なのは、
- 役割を指定する
- UIの目的を書く
- レイアウト条件を明確にする
- 技術制約を書く
という点です。
⑤ バイブコーディング用生成AIに投入する
整理したプロンプトを、そのまま
バイブコーディング用の生成AIに入力して送信します。
すると、
- HTML構造
- CSSレイアウト
- 配色・余白
- スマホ対応
まで含めたコードが生成されます。
👉 自分が書いたのは「言葉」だけ
👉 実装はAIが担当
これがバイブコーディングの本質です。
実際に使ったプロンプト全文（コピペOK）
以下は、実際に使用した HTML/CSS生成用プロンプト です。
あなたはUI/UXに強いフロントエンドエンジニアです。
以下の条件で、航空券（ボーディングパス）風の縦長カードUIを
HTMLとCSSのみで実装してください。
【全体構成】
・縦長のカード型UI（スマホ想定）
・角丸（border-radius大きめ）
・中央配置
・1ファイル（HTML + CSS）で完結
【レイアウト】
上から下に以下の構成にする：
ヘッダーエリア（淡いピンク背景）
・ブランド名（OMEGA）
・フライト番号と日付を横並びで表示
・文字は小さめ、情報密度は高いが落ち着いた印象
乗客情報エリア
・名前を表示
・Boarding Time / Gate / Class / Zone / Seat を
2〜3列のグリッドレイアウトで整理
・ラベルは薄い色、値をやや強調
メイン情報エリア（濃いサーモンピンク背景）
・出発地と到着地を縦方向に配置
・空港コード（JFK / MCO）を大きく表示
・都市名は補足として小さく表示
・移動を示すシンプルなアイコン（CSSで表現）
QRコードエリア
・右側に正方形エリアとして配置
・ダミーのQRコード（プレースホルダー）でOK
フッター
・「Add to Wallet」ボタン
・丸みのあるボタン
・背景色と調和したデザイン
【デザイン指針】
・ミニマル
・フラットデザイン
・余白を多めに
・フォントはサンセリフ
・全体は航空券を想起させるUI
【注意】
・JavaScriptは使わない
・レスポンシブ対応（max-width指定）
生成AIでUIコーディングする際のポイント
- 感想ではなく「構造」で伝える
- 色・役割・配置を分けて書く
- 「使わない技術」を明記する
特に、
「読むUIなのか、確認するUIなのか」
という目的の言語化が、出力精度を大きく左右します。
この手法が向いている人
- Web制作初心者
- ノーコード／ローコード派
- UIを真似して作りたい人
- コーディング時間を短縮したい人
逆に、
ピクセル単位で完全一致を求める案件には向いていません。
まとめ｜画像→言語→コードの思考を身につけよう
これからのWeb制作では、
「コードを書く力」より
「構造を言語化する力」
が重要になります。
スクリーンショット1枚から、
UIを読み取り、言語化し、AIに実装させる。
これが バイブコーディングの基本形です。
コメントを残す