MyVault

【激震】外注なら30万のWebサイト、Claude Design × GPT image 2で作ってみた！

Properties1
tagsclaude-design, gpt-image-2, web-design, lp-制作, ai-ツール活用, vibe-design

6 min read

【激震】外注なら30万のWebサイト、Claude Design × GPT image 2で作ってみた！

プログラミングチュートリアル（YouTuber） による YouTube 動画（2026-04-23）。 Claude Design × GPT image 2 を組み合わせて、外注なら30万円相当のランディングページ（LP）を2〜3時間で制作するワークフローを実演・解説した動画。

要点

  • Claude Design 単体ではデザイン素材が不足しがちで「AIっぽさ」が出やすい
  • GPT image 2 の高精細画像生成能力を活用してLP用デザイン素材を先に生成する
  • 素材をClaudeに渡して実装させることで高品質なWebサイトが作れる
  • 最終的に Claude Code でエクスポート・微修正・デプロイまで完結する

ワークフロー詳解

ステップ1：GPT image 2でLPデザイン画像を生成

  1. ChatGPTの画像生成機能（GPT image 2）を開く
  2. 以下の要素を含む構造化プロンプトを投入
    • 目的・業種・ターゲット
    • トンマナ（ポップ・遊び心・モダン等）
    • デザイン要件（不規則な図形・柔らかい抽象形状 等）
  3. LPのデザインモック画像を1枚生成

ステップ2：素材の切り出し（GPT image 2）

  1. 生成したモック画像を選択した状態で「このLP画像のウェブデザイン用素材を1枚の画像にまとめてください」とプロンプト
  2. 各要素をグリッド上に配置・素材同士が重ならないよう1つ1つ独立させて出力
  3. ロゴ・アイコン・人物イラストなど追加素材も同様に出力

グリッド出力のコツ

ChatGPT は1枚ずつしか生成できないため、グリッド形式で素材をまとめて出力する。 正方形のグリッド・ピクセル単位を揃えた出力にしないと、後工程の切り抜き処理がうまくいかない。

ステップ3：素材の切り抜き・透過処理（Claude Webブラウザ版）

  1. グリッド素材画像を Claude の Web ブラウザ版に貼り付け
  2. 「1つ1つの画像に分割してさらに透過処理してください」とプロンプト
  3. Claude がプログラムを実装して切り抜き・透過処理を実行
    • ChatGPT に同じ指示を出したが対応不可 → Claudeのみ対応可能

ステップ4：Claude Designで実装

  1. Claude Design を開き、プロジェクト名を設定
  2. ステップ1のデザインモック画像をアップロード
  3. 切り抜き済み素材（assets / icons）をドラッグ&ドロップで全て渡す
  4. 「上記のLPのデザインと素材を渡しましたので、それを元に忠実にランディングページを作ってください」とプロンプト
  5. 約5分で HTML/CSS のランディングページが生成される

Claude Design の週間制限

プレビュー版のため週次利用制限が厳しい。使いすぎると1週間待つ必要がある。 大量生産する場合は制限を計算しながら運用すること。

ステップ5：Claude Codeへ移行・微修正・デプロイ

  1. Claude Design の右上「Share」→「Hand to Claude Code」でコマンドをコピー
  2. PowerShell 等でディレクトリを作成し Claude Code を起動
  3. コピーしたコマンドを貼り付けて「忠実に再現してランディングページ作ってください」
  4. /frontend-design などのスキルを呼び出してセクションを追加・ブラッシュアップ
  5. セクションごとにレイアウトを変えることでリッチな見た目を実現
  6. デプロイも Claude Code が実行

制作コストと品質感

  • 制作時間：2〜3時間
  • 外注換算：約30万円相当
  • 完成度：約78〜80%（細かい微修正は別途必要）
  • レスポンシブ対応・スムーズスクロール・ハンバーガーメニュー付き

著者コメント（重要な示唆）

「使い方のベストプラクティスはなかなか確立されない。新しい情報・新しい技術がどんどん出てくるので、その時々のベストプラクティスを自分で構築していくことが大事。」

「Claude Code スキルが自分の業務にそのままバチッとはまることはなく、スキル自体も育てていかなきゃいけない。」

関連概念・エンティティ

Graph View

バックリンク