【2026年最新】実践!次世代のAI完結型Webデザイン&コード制作ワークフロー

概要

ChatGPTの画像生成「Images 2.0」でWebサイトのデザイン案を作り、Figmaで再構築し、Claude CodeでHTML/CSSにコーディングする、AIだけでWeb制作を完結させるワークフローの解説です。画像をそのままAIに渡してもコーディングはうまくいかないため、Figmaでパーツ化して寸法情報を持たせる点が肝になっています。

主なポイント

• ChatGPT Images 2.0(思考モードで生成)は、単純なプロンプトでも完成度の高いWebサイトのデザイン画像を1発で出力できる
• 16:10のPC版デザインをベースに、9:16の縦長LP風や、ヘッダー・フッター追加版もプロンプトで追加生成できる
• デザイン画像をそのままAIにコーディングさせると、画像素材がなく全く別物のサイトになりやすい
• 生成画像の課題は、低解像度(横幅836px程度)、レイヤー未分割、余白などの寸法情報がないことの3点
• 対策として、ロゴ・キャッチコピー・バッジなどをパーツごとにクロップして書き出し、ChatGPTに「同じ画像で高解像度・背景透過で再生成」させる
• 背景画像の不要部分は、赤くマスクして書き出し、ChatGPTに「赤い部分を自然に削除」と指示すると元画像を崩さず消せる
• 高解像度化したパーツをFigmaに戻して再構築し、文章やナビゲーションはFigmaのテキストで作る。これでAIが各要素のピクセル幅を把握できる
• Figma MCPをClaude Codeに連携し、「Figmaのデザインを HTML・CSSで再現して」と指示すると、ほぼ再現でき、微調整で仕上がる
• レスポンシブ対応はまだAI任せにしづらく、「タブレット幅でハンバーガーメニューにする」「この幅で縦並びにする」といった細かい指示が必要
• 画像生成にはChatGPTの有料プラン(約20ドル)、Figma連携にはFigmaとClaudeの有料契約が必要

実践に使えること

• ChatGPTの思考モードでWebデザイン案を複数生成し、PC版・縦長版などのバリエーションを試す
• 気に入った案を、パーツ単位でクロップして高解像度・透過PNGで再生成し、Figmaで組み直す
• 不要要素は赤マスク+「自然に削除」で除去し、素材として使う
• Figma MCPをClaude Codeに設定し、Figmaデータを渡してHTML/CSSを生成させる
• レスポンシブはブレークポイントごとの挙動を具体的にプロンプトで指定する
• デザイナーは作業よりも、ブランディングやサービス設計の上流に時間を使う