【衝撃】Claude DesignとGPT Image 2で外注100万円レベルのWebサイトを作る方法を実演解説

2026-08-27 · セイト先生 by AIプログラミングスクールSiiD

原題: 【衝撃】Claude Design × gpt image 2で外注で100万レベルのWebサイトを作成する様子を日本一わかりやすく実演解説します!【AI活用】

概要

Web業界14年のAIプログラミングスクール代表が、Claude Design・Claude Code・ChatGPT(GPT Image)を連携させて外注なら100万円以上かかるプロ品質のコーポレートサイトを数時間・約20ドルで制作する手順を実演する。ディレクション力(的確な指示出し)が高品質なアウトプットの鍵だと強調している。

主なポイント

参考サイトを2〜3件ピックアップしヒーロー画像・トップ・下層ページのスクショをPC/スマホ両方で撮影し、AIに「デザインMD(トンマナ・配色・レイアウトのルール)」を段階的に作らせる
既存資料やURLをAIに渡して「コンテンツMD(掲載テキストと構成)」を作成させる
Claude Designのプロトタイプ機能でトップページを3案作成し、フロントエンドデザイン・インタラクティブプロトタイプ・ワイヤーフレームのスキルを追加、可能な限り高性能モデル(Opus 4.8やFableなど)を使用
ヒーローイメージは最重要パートなので最高品質モデルを使い、最低2回は修正指示を出すとクオリティが大幅に向上する
コメント/エディット機能で部分修正し、画像はChatGPTの画像生成に参考写真を添付してプレースホルダーと差し替える
Claude Designの「Send to Claude Code」でデザインデータをそのまま引き継ぎ、プレーンHTML/CSSでコーディングさせる
Claude Codeにfrontend-design・Playwright・Netlify MCP・GSAP MCP・UI/UX Pro Maxスキルを追加して表現力と実装品質を高める
新セッションではcontent.md/design.mdをdocsフォルダに入れ、CLAUDE.mdを作らせてコンテキストを引き継ぐ
リリース前チェックリスト(メタ情報・アクセシビリティ等)をCSVで渡してAIに確認させる
Netlify MCP経由でチャット指示だけでデプロイし、Lighthouseでパフォーマンス・SEOを確認、問い合わせフォームはノーコードツールで実装

実践に使えること

サイトリニューアルや新規制作時、参考サイトのスクショ→デザインMD→コンテンツMDの順でAIに資料を段階的に渡す手法を試す
プロトタイプ作成は「複数案出す→1案に絞る→部分修正を繰り返す」流れにし、重要パートだけ高性能モデルを使う
Claude Designで作ったデザインをClaude Codeに直接連携し、zip出力→ローカル展開→追加のMCP/スキル導入という制作フローを自分のプロジェクトに適用する
Netlify MCPを使えばコーディングからデプロイまでチャット操作だけで完結できるので試してみる