Claude Opus 4.6 + Figma Makeプロンプトで、2時間で5,000ドルのウェブサイトを作成する方法（2026年3月14日時点）
まず結論です。2026年3月14日時点で、「2時間で5,000ドル級の小規模サイトを作る」という話は完全な誇大広告ではありません。理由は、Anthropicが2026年2月5日に公開したClaude Opus 4.6が長文理解・設計・長い指示の保持に強く、Figma Makeも自然言語から機能するプロトタイプやWebアプリを作り、Figma Sites経由で公開までつなげられるからです。ただし、ここでいう「5,000ドル」はツールが保証する価格ではなく、あくまで市場でそのくらいの値付けが現実的な案件帯を指します。Clutchの2026年ガイドでも、Webデザイン案件の多くは1万ドル未満、全体レンジは2,000〜100,000ドルとされています。つまり「2時間で作れる」より正確には、「小さく切った高付加価値案件なら、2時間で叩き台を納品レベル近くまで持っていける」が本当の言い方です。
まず前提条件の“本当のところ”
前提の中で一番大事なポイントは2つあります。1つ目は、Claude Opus 4.6の1Mトークンはベータで、Claude Platform限定という点です。Opus 4.6自体はclaude.aiでも使えますが、巨大な要件定義書を丸ごと食わせる前提なら、Pro契約だけでなくClaude Platform側の条件確認が必要です。2つ目は、Figma ProfessionalまたはTeamが絶対必須、とは言い切れない点です。Figma公式FAQでは、Starterユーザーにも公開手段はありますが、公開条件に制限があり、実務で安定して進めるなら有料プランのFull seatがかなり有利です。つまり、商用案件で「最短・安定・やり直し少なめ」を狙うなら、ClaudeはOpus 4.6利用環境、FigmaはProfessional以上のFull seatで考える、が現実的です。
なぜ速いのか
速さの本体は、Claudeを“制作者”ではなく“設計責任者”として使うことです。Anthropicの公式ドキュメントでも、Claude 4.6系は役割付与、構造化、明確な出力形式、段階的プロンプトとの相性が良いとされています。一方Figma側も、最初のプロンプトに詳細を前倒しで入れるほど手戻りが減る、複雑な案件ほど小さなステップに分けたほうが成功率が上がる、と案内しています。つまり、Claudeでサイトマップ、導線、コンポーネント、コピー、データフローを先に固め、Figma Makeでは「生成」より「実装・調整」に専念させると、往復回数が激減します。Figma自身も、Figma Makeで“数時間で試作”“数週間の静的モック往復を短縮”と説明しており、スピード感自体はかなり裏づけがあります。ただし「Webflowより10倍速」は公式比較では確認できないので、そこは体感談として扱うべきです。
118分再現版の流れ
0〜5分：案件を4行で定義
最初にメモするのは、WEBSITE TYPE、AUDIENCE、FEATURES、BRAND MOODの4つだけです。ここで欲張ると、2時間案件が崩れます。対象は5ページ以内のLP、ミニSaaS紹介、ポートフォリオ、簡易ECまでに絞ります。ページ数が増えるほどコピー、導線、モバイル確認、SEO設定の時間が膨らむからです。Clutchもページ数や機能数が価格と工数を押し上げる主要因だとしています。
5〜45分：Claudeで“設計書”を作る
ここが勝負です。PROMPT 1では「サイトマップ、主要導線、CTA、SEO構造、パフォーマンス予算」を出させます。PROMPT 2では「カラー、タイポ、余白、コンポーネント規則、Design tokens(JSON)+CSS variables」を作らせます。PROMPT 3では全ページの見出し、本文、FAQ、証拠要素を作らせ、H1/H2まで指定します。PROMPT 4ではフォーム、料金表、ダッシュボード表示、計算機などのロジックをData flow / props / events / APIsまで分解させます。PROMPT 5では、1〜4を全部まとめてFigma Make専用の短く強い実装プロンプト5本に再圧縮させます。長文をそのままMakeに流すより、「初回生成用」「アニメーション用」「レスポンシブ用」「データ用」「修正用」に分けたほうが、Figma公式の“詳細は最初、小さく直す”原則に合います。
45〜115分：Figma Makeで生成→修正→公開前仕上げ
Figma Makeでは、まずClaudeが作った“初回生成用プロンプト”を投入します。次に、必要ならコンポーネントや既存フレームを貼り、ブランドらしさを固定します。Figma公式は、最初の詳細プロンプト、きれいなAuto Layout、既存コンポーネント活用、複雑案件の小分け修正を強く勧めています。アニメーションは別プロンプト、レスポンシブ調整も別プロンプト、データ部分はSupabase連携か、まずはモックデータで確認、という順が安全です。なおFigmaは、3P APIを直接プロンプトで扱う場合、キーやシークレット露出などの安全面に注意するよう案内しています。なので、初心者が2時間で失敗しないためには、本番鍵をいきなり入れず、まずモックで画面を固めるのが正解です。
115〜120分：QAと公開
最後の5分でClaudeに「このサイトを公開前チェックリスト化して。SEO、アクセシビリティ、モバイル、フォーム、法務、公開設定を確認」と投げ、出てきた項目でFigma側を点検します。Figma Sitesは公開前にSEO、アクセシビリティ、ソーシャルプレビュー、パスワード保護の見直しを推奨しています。公開後はランダムなfigma.siteサブドメインで出せて、後からカスタムドメインも設定可能です。Figma Makeで公開した成果物はデフォルトで検索エンジンにインデックスされない設定もあるため、納品前に“検索される前提かどうか”を必ず確認してください。
本当に向く案件・向かない案件
向くのは、見た目の完成度と導線整理が売上を左右する小規模案件です。たとえばLP、採用サイト、ポートフォリオ、簡易SaaS紹介ページ、簡易ダッシュボード試作です。逆に向かないのは、複雑な決済、厳密な会員権限、巨大CMS、深い業務DB連携が必要な案件です。Figma MakeとSupabaseでかなり前進できますが、そこを超えると「2時間で5,000ドル級」ではなく、「2時間で5,000ドル案件の提案用プロトタイプを作る」に変わります。ここを誤解しないことが、失敗回避で最重要です。
そのまま使えるプロンプト骨子
初心者が一番失敗しやすいのは、ClaudeにもMakeにもいきなり全部を丸投げすることです。骨子は短くて十分です。
PROMPT 1は「あなたはPrincipal Web Architect。5ページ以内、目的は資料請求、対象は40代経営者、必須はHero・比較表・FAQ・CTA・モバイル最適化・SEO構造・性能予算を出力」とします。
PROMPT 2は「上の設計に合う色、書体、半径、余白、Design tokens(JSON)+CSS variablesを出力」。
PROMPT 3は「各ページのH1/H2、本文、CTA、信頼要素、FAQ、禁止表現」。
PROMPT 4は「フォームや計算機の入力、状態変化、成功時メッセージ、エラー時分岐、Supabase前提のデータフロー」。
PROMPT 5は「以上をFigma Makeに入れるため、初回生成用200〜400語、修正用、アニメ用、レスポンシブ用、データ用の5本に圧縮」と頼めば十分です。
Anthropicは役割指定と出力形式の明示を、Figmaは詳細な初回プロンプトと小分け修正を推奨しています。
失敗を防ぐ最終チェック
公開直前は、①スマホ幅でヒーローが崩れないか、②CTAが全ページで同じ行動を促しているか、③フォーム送信後の完了状態があるか、④料金・実績・FAQの文言が矛盾していないか、⑤検索に載せたいなら公開設定とSEO項目を確認したか、の5つだけは必ず見てください。Figma Sitesは公開前にIssue確認を出し、SEO・アクセシビリティ・ソーシャルプレビュー・パスワード保護の見直しを勧めています。つまり「2時間で作る」の本当の意味は、作業を急ぐことではなく、見る場所を最初から限定することです。
価格の考え方
ここでいう5,000ドルは、コード量の値段ではなく、要件整理・見た目・説得力・公開速度をまとめて買う価格です。Clutchの2026年データでは、Webデザイン案件の多くは1万ドル未満で、料金はページ数、機能、コピー、SEO、アニメーション、地域相場で上下します。だから、2時間で5,000ドルを狙うなら「ページは少ないが、事業理解と成約導線は深い」案件に寄せるのが正解です。逆に、安いテンプレの置き換えだけでは5,000ドル級にはなりにくいです。
なお、公開物の内容や収集データへの法令順守責任はFigmaではなく公開者側にあります。問い合わせフォーム、メール収集、導入事例、比較表を載せる案件では、文言の真偽と個人情報の扱いを納品前に必ず確認してください。ここを飛ばすと、速く作れても高単価案件としては危険です。
この意味で、AIは制作費をゼロにする道具ではなく、提案・設計・初稿の速度を極端に上げる道具だと理解するのが正確です。ここが勝敗の分かれ目です。
まとめ
初心者向けに一言で言うと、この手法の本質はClaude Opus 4.6で頭脳を先に作り、Figma Makeで手を動かすことです。2時間で5,000ドル“確定”ではありませんが、2,000〜10,000ドル帯で売られている小規模Web案件のうち、要件が絞られたものなら、かなり現実味があります。成功条件は、ページ数を絞る、最初の設計をClaudeで固める、Makeでは小さく直す、公開前にSEOとモバイルを確認する、この4つです。ここを守れば、「AIで雑に作る」ではなく、「AIで高単価の初速を作る」という発想に変えられます。
