はじめに
Web 制作の現場でも生成 AI の導入が一気に進みました。ここでは ChatGPT（GPT-4o 系列）を中心に、実践的な使い方・画像生成テクニック・即コピペできるプロンプト例 をまとめます。
Web デザインでの便利な使い方 5 連発
| 使い方 | ポイント | 推奨プロンプト例 |
|---|---|---|
| ① ワイヤーフレーム自動生成 | ページ構成やセクション名を箇条書きで提案させ、Figma に貼り付け | 「BtoB SaaS ランディングページのワイヤーフレーム案を、ヒーロー／特徴3つ／料金表…の順で見出しだけ箇条書きしてください」 |
| ② コピーライティング | ペルソナ・トンマナ・文字数を指定してヒーローテキストや CTA を量産 | 「ターゲットは20代女性。共感→解決策→CTA の順で 60 文字以内のヒーローキャッチを3案」 |
| ③ カラー／フォント提案 | ブランドキーワードと既存ロゴ色を渡して統一感あるパレットを生成 | 「キーワード：信頼感・革新。ロゴ色 #264653 をアクセントに 5 色パレットを HEX で」 |
| ④ HTML/CSS スニペット生成 | ヒーローセクションやカード UI をサクッと成形し、Elementor の HTML ウィジェットへ | 「上記コピーと #264653 系パレットを使い、モバイル先行のヒーローセクションを Tailwind で」 |
| ⑤ アクセシビリティ & SEO チェック | alt 欄や aria-label、構造化データの抜けをリストアップ | 「以下の HTML を WCAG2.1・SEO 観点で改善点を抽出し表形式で」 |
画像生成機能の活かし方
| シーン | 生成のコツ | 修正テク |
|---|---|---|
| ヒーローイメージ | ①コンセプト ②スタイル ③色味 ④アスペクト比を 1 行で | DALL·E “inpainting” でロゴ差し替え |
| アイコンセット | 「flat, 2-color icon of {◯◯}, 512×512」×まとめて 10 個 | 背景透明 transparent_background:true |
| テクスチャ/パターン | 無限タイル化したい場合は “seamless pattern” と明記 | 色味の微調整は Photoshop のトーンカーブ or variations API |
| 写真素材 | 権利リスク低減のため “illustration style” 指定 or ライセンス確認 | 人物入りは “model release free, back view” で実写感軽減 |
おすすめプロンプト集（コピペ OK）
■ モバイル先行ワイヤーフレーム
「EC サイト TOP のモバイルワイヤーフレームを、セクション名＋推奨高さ(px)＋要素一覧でテーブル化してください」
■ ヒーロー画像生成
「minimal flat illustration, young woman shopping online, pastel palette, 16:9, no text」
■ ライトウェイト JS アニメーションコード
「IntersectionObserver を使ってフェードインする汎用関数を ES6 で」
■ Alt テキスト生成
「以下の画像説明を 120 字以内の alt に最適化：”青い空の下でノート PC を操作する女性デザイナー”」
まとめ
- 設計・コピー・ビジュアル までワンストップで支援するのが ChatGPT。
- 画像生成を組み合わせれば、制作スピードは 2〜3 倍 に。
- キーワードは 「具体的な制約を添えて依頼する」→「生成結果を部分修正」 の繰り返し。
ぜひ本記事を参考に、「AI を味方にした次世代 Web 制作」に挑戦してみてください！