はじめに
Vibe Codingに慣れてくると、「UI/UX側も同じ温度感で加速できないか」と考えますよね。
プログラミングのみならず、デザインも好きなので、Gemini 3で試してみました。
プログラマやデザイナーではない方でも真似すれば、実践できる内容なのでぜひ参考にしていただければ幸いです。
1. ワイヤーフレームをテキスト（ASCII）で高速生成する
まず一番効果が出やすいのが、初期のアイデア出し（ワイヤー）です。
Gemini 3 は短いプロンプトから、ローフィ〜ミドルフィのワイヤーフレーム案を複数出せます。
なにが良いかというと、
- 仕様が固まる前に レイアウトの選択肢を増やす
- 画像ではなく プレーンテキストで共有して議論コストを下げる
- Figmaに起こす前の 認識合わせに使う
という感じですね。
▼プロンプト例（コピペOK）
フィンテック系の貯蓄アプリ向けに、レスポンシブなランディングページの
ワイヤーフレームを3パターン作成してください。
以下のセクションを含めてください：
- ヒーローセクション
- 価値提案（バリュープロポジション）
- 機能カード
- ユーザーの声（テスティモニアル）
- 料金プラン
出力形式：テキスト説明 + シンプルなASCII図
条件を足すと精度が上がります
例：モバイルファースト / タブレット表示も含めて / CTAは2つ / 料金は3プラン など
Slack/Notionに貼って「この構成で行く？」の議論ができるし、
デザイナーに頼む前にチームで共通理解を作るのが強いのでは？
2. デザインシステムの土台（デザイントークン）を生成する
次は デザインシステムの下準備です。
新規事業やリファクタで「デザインの統一をしたい」タイミングに、Gemini 3 を 叩き台生成器として使えます。
Gemini 3に作らせられるものは、以下の通り。
- デザイントークン（カラー / スペーシング / タイポ / シャドウ）
- コンポーネント構造（Card / Nav / Form など）
- ガイドライン（使い分けルール、ベストプラクティス）
- 既存Figma資産の説明ドキュメント化（※環境次第）
▼プロンプト例（コピペOK）
以下のブランドパーソナリティに合わせた、ミニマルなデザインシステムを生成してください：
ブランド特性：「落ち着いた」「信頼感がある」「モダン」
出力内容：
- カラートークン（HEX、HSL、トークン名を含む）
- スペーシングの基準値
- タイポグラフィスケール
- シャドウの設定
また、このシステムに適合する再利用可能なUIコンポーネントを5つ提案してください。
ゼロから作るのが重い「最初の一歩」を短縮できますが、生成物をそのまま採用せず、レビューして自社に寄せるのが前提としています。
エンジニア側は「CSS変数」「Tailwind config」「Token JSON」への落とし込みが早くなるでしょう。
3. UIスクショ → HTML/CSS（+React統合）に変換する
「既存UIをベースにプロトタイプを作りたい」「大枠のHTMLを早く欲しい」時に、スクリーンショットからセマンティックHTML + CSSの叩き台が作れます。
▼プロンプト例（コピペOK）
添付したUIスクリーンショットを、セマンティックでレスポンシブな
HTML + CSSに変換してください。
要件：
- モバイルファーストのアプローチ
- カラーにはCSS変数を使用
- WCAG AAレベルのコントラスト比を確保
- Reactプロジェクトへの統合方法も説明
（スクリーンショットを添付）
100%再現ではなく 80〜90%の叩き台として見るのが正解かと思います。
そこからエンジニアが 構造/命名/余白/ブレイクポイントを整えると良さそうです。
引き継ぎ資料やプロトタイプの初速としてかなり使えるのでは？
4. 画像・イラスト（SVG含む）を生成してストック依存を減らす
UIの説得力は、最終的にはビジュアルで上がります。
今回、プロダクトで使えそうなsvgを作成させてみました。
▼プロンプト例（コピペOK）
Webサービスのオンボーディングフロー用に、
統一感のあるイラストを6点作成してください。
スタイル：フラットでミニマル、柔らかい色使い、角丸のシェイプ
テーマ：
- サインアップ
- ダッシュボード分析
- データインポート
- 通知設定
- チームコラボレーション
- サブスクリプションアップグレード
出力されたsvgのコードを実行すると、以下のアイコンが見られました。
生成イラスト内のテキストが文字化けすることがあるので、テキスト差し替え前提で、Figma/Canva/画像編集で修正する運用が現実的です。
SVGが出せる場合は、アイコン運用（サイズ/色変数）に載せやすいですね。
5. アクセシビリティ監査を簡易チェックとして回す
アクセシビリティ対応は重要なのに、抜けやすいです。
ここを Gemini 3 で 監査の叩き台にすると、「見落とし」を減らせます。
自分で作成したサイトやアプリ、あるいは生成AIで作成したデザインをチェックしてみるとよいでしょう。
見られる項目例：
- カラーコントラスト比
- altの有無と質
- タッチターゲット（最低 44×44px など）
- 見出し階層、テキストの可読性
- キーボードナビゲーション
- WCAG 2.2 準拠観点
▼プロンプト例（コピペOK）
添付したUIのアクセシビリティ監査を実施してください。
チェック項目：
- カラーコントラスト
- タッチターゲットのサイズ（最低44x44px）
- テキスト階層の適切さ
- 代替テキストの質
- キーボードナビゲーション
- WCAG 2.2への準拠状況
問題点と具体的な改善案をセットで提示してください。
（スクリーンショットを添付）
監査そのものをAIに任せるのではなく、抜け漏れ検知の補助輪として使うべきです。
最終判断は人間（デザイナー/フロント/QA）でOK。
お疲れ様でした。
わからないところ、間違っているところ、もっといい方法がある場合は、コメントでもDMでも教えてください。