AIでWebサイトが118分で完成？Figma Make × Claude Codeで本当に作れるか検証してみた

わさびです。

SNSでこんな投稿が話題になっていた。「AIを使えば118分でプロ級のWebサイトが作れる」「70万円相当のサイトが9つのプロンプトで完成する」という内容だ。

使われているのはFigma Make。Figmaに搭載されたAI機能で、Claude Opus 4.6が裏側で動いている。テキストでデザインを指示するだけで、それっぽいWebページのモックアップが出てくるらしい。

正直、半信半疑だった。なので実際にやってみることにした。

Figma Makeとは

Figma MakeはFigmaの公式AI機能だ。2025年にリリースされ、Claude（Anthropic）が統合されている。テキストプロンプトを入力すると、デザインのモックアップを自動生成してくれる。

無料のStarterプランでも使える。1日150AIクレジット、月500クレジットの上限がある。今回の検証では無料枠で十分だった。

やってみた：ポータルサイトを作る

せっかくなので、僕たちのポータルサイトを作ってみることにした。プロフィール、ブログへのリンク、活動内容をまとめたシングルページのポータルだ。

プロンプトの準備

元の投稿で紹介されていたワークフローは「9つのプロンプト」を段階的に投入する方式だ。

1. サイトアーキテクチャの定義
2. デザインシステムの構築
3. コンテンツ生成
4. Figma Make用プロンプトへの変換
5. 以降、個別セクションの調整

僕はこれを参考にしつつ、3つのプロンプトにまとめてFigma Makeに投入した。サイト構造、カラーパレット4種のデザインシステム、各セクションの具体的なコンテンツ。それぞれ英語で詳細に書いた。

投入結果

Figma Makeにプロンプトを投入すると、数分でページ全体のデザインが生成された。

出てきたものを見て、率直に驚いた。

ナビゲーションバー、ヒーローセクション、About、活動内容カード、ブログプレビュー、SNSリンク、フッター。指定したセクションが全てちゃんと並んでいる。カラーも指定通り。日本語テキストも自然に配置されている。

Aboutセクションには2カラムレイアウトが適用され、イラスト（AI生成の汎用的なもの）まで配置されていた。

活動内容のカードはBlog、YouTube、SNSの3枚。アイコン付きで、説明文もそれっぽい。

フッターもダークカラーで、ナビゲーションリンクとSNSアイコンが並ぶ。

ここまでの所要時間は、プロンプト作成を含めて30分程度だった。

できたこと

正直に言うと、「見た目」のクオリティは予想以上だった。

• セクション構造が正確に再現された
• 指定したカラーコードが正しく反映
• 日本語テキストの配置が自然
• カードコンポーネントのデザインがきれい
• グラデーション、角丸、シャドウなどのスタイリングが適切
• クライアントへの初回提案レベルとしては十分な完成度

できなかったこと

ここからが本題だ。

1. コードが出てこない

これが最大のポイント。Figma Makeの出力はデザインモックアップだ。HTML/CSS/JavaScriptのコードではない。「Webサイトが完成した」というのは、「Webサイトのデザイン画が完成した」という意味になる。

実際にブラウザで動くサイトにするには、このデザインからコーディングする工程が別途必要だ。

2. レスポンシブ対応していない

生成されたのはデスクトップ版のみ。スマホ版は別プロンプトで追加生成する必要がある。しかも、2つのバージョン間の整合性は手動で担保しなければならない。

3. インタラクションがない

スクロールでナビバーの色が変わる、ホバーでカードが浮く、スムーズスクロール。こういった動きは一切実装されていない。デザイン上の見た目だけだ。

4. 画像は全部仮

当たり前だけど、AIは自分のキャラクターや実際のブログのスクリーンショットを知らない。汎用的なプレースホルダーが入っているだけで、全て差し替えが必要。

5. 言語が混在する

フッターの「Navigation」「Follow Us」が英語のままだった。日本語サイトを指定しても、一部が英語で出力される。

「118分で70万円」は本当か

結論を言う。

「デザインモックアップを30分で作る」のは本当だ。Figma Makeは確かに速い。プロンプトさえしっかり書けば、見栄えのいいデザインが数分で出てくる。

ただし「70万円相当のWebサイト」は話が違う。

70万円のWeb制作費には、ヒアリング、設計、デザイン、コーディング、テスト、レスポンシブ対応、アクセシビリティ、CMS組み込み、運用マニュアル作成などが含まれる。Figma Makeがカバーしているのは、このうち「デザインの初期案作成」の部分だけだ。

見積もりで言えば、全工程の15〜20%程度。金額にすると10〜15万円分くらいの作業が、30分に短縮されたことになる。

これは十分すごいことだけど、「118分で70万円」とは随分差がある。

じゃあ、どうすれば本当にサイトが作れるのか

Figma Makeの限界はわかった。デザインモックは出るけど、コードにならない。

でも、「デザイン画を見せたら、その通りにコーディングしてくれるAI」が別にいるとしたら？

それがClaude Codeだ。

Figma Make × Claude Code ワークフロー

やることはシンプル。

1. Figma Makeにプロンプトを投入 → デザインモック完成
2. 各セクションのスクリーンショットを撮る
3. Claude Codeにスクショと実装プロンプトを渡す → HTML/CSS/JS完成
4. カスタマイズプロンプトで自分の情報に書き換え
5. GitHub Pagesにデプロイ → 完全無料で公開

ポイントは「Figmaでデザインを作る → スクショを撮る → Claude Codeに『これ通りに作って』と渡す」という流れ。

Figma Makeだけでは本番品質にならない部分を、Claude Codeが埋めてくれる。レスポンシブ対応も、インタラクションも、全部。

実際に作った

このワークフローで、僕は2パターンのポータルサイトを構築した。

1つ目はコラボ版。2キャラクターのポータルで、Kawaii Purple×Pinkの配色。パーティクルアニメーション（ハートや星が浮遊する）、パララックスのスクロール効果、YouTube/Twitchの配信連携（ライブ中は自動でヘッダーに映像が表示される）まで実装した。

2つ目はソロ版。個人ブロガーやクリエイター向けのCool Mintテーマ。スキルカード、スタッツ表示、横スクロールのギャラリー。落ち着いたデザインで、エンジニアのポートフォリオにも使える。

どちらもGitHub Pagesで完全無料ホスティング。サーバー代ゼロ。

実際に動いているサイトはこちら。

• コラボ版: https://akaponman.github.io/portal-collab/
• ソロ版: https://akaponman.github.io/portal-solo/

GitHub Pagesで無料公開する方法

完成したサイトはGitHub Pagesで公開する。手順を簡単に説明しておく。

1. https://github.com でアカウントを作成（無料）
2. 右上の「+」→「New repository」で新しいリポジトリを作成。名前は何でもいい（例: my-portal）。Publicを選ぶこと
3. 「Add file」→「Upload files」で、index.html、style.css、theme.css、script.js、images/ をまとめてドラッグ＆ドロップしてアップロード
4. リポジトリの「Settings」→「Pages」→ Sourceで「Deploy from a branch」を選択、Branchで「main」を選んで「Save」
5. 1〜2分待つと https://ユーザー名.github.io/リポジトリ名/ でサイトが公開される

Claude Codeを使っている場合は、デプロイプロンプトを投入するだけで上の手順が全自動で完了する。

カラーテーマは4種類

CSSファイル1つの値を変えるだけで、サイト全体の配色が切り替わる仕組みにした。

• Kawaii Purple×Pink — ポップで華やか。VTuberやコラボ向け
• Cool Mint — 落ち着いた知的な印象。ブロガー、エンジニア向け
• Warm Sunset — 暖色で親しみやすい。クリエイター向け
• Cyber Dark — ダークモード。ゲーマー、開発者向け

Claude Codeに「テーマをピンク系にして」と言えば自動で変わる。好きな色を直接指定することもできる。

「Figma Make単体で完成」vs「Figma Make + Claude Code」

比較するとこうなる。

118分（約2時間）はさすがに厳しいけど、半日あればプロ品質のサイトが完成する。Figma Make単体とは次元が違う。

構築キットを作った

このワークフローで使ったプロンプト6本とテンプレート一式を「AIポータルサイト構築キット」としてまとめた。

キットの中身

テンプレート（HTML/CSS/JS + 画像）と完成例2パターン（コラボ版 / ソロ版）も同梱。

Pythonでプロンプトを復元するスクリプト付き。コマンド1つで全プロンプトが展開される。

Figma、GitHub、Python、Claude Codeの導入手順書も入れてあるので、初めてAIツールを触る人でもステップ通りに進めれば完成する。

こんな人におすすめ

• VTuber・配信者でポータルサイトが欲しい人
• ブログやSNSのリンクをまとめたおしゃれなサイトが欲しい人
• 完全無料でサイトを持ちたい人
• Figma MakeやClaude Codeの実践的な使い方を学びたい人

コーディング知識は不要。全てプロンプトのコピペで完結する。画像を差し替えて、自分の情報を入力するだけ。

BOOTHで販売中（1,480円）。

まとめ

「AIで118分でWebサイトが作れる」は半分本当で半分ウソだった。

Figma Makeはデザインのプロトタイピングとしては間違いなく優秀。数分で見栄えのいいモックアップが出てくるし、無料で使える。

ただ、それだけでは「Webサイトが完成した」とは言えない。デザインからコードへの変換、レスポンシブ対応、インタラクション。本番サイトにするための作業が残っている。

解決策はFigma Make + Claude Code。デザインをFigmaで作り、実装をClaude Codeに任せる。このコンビなら、半日でパーティクルアニメーション付きのプロ品質ポータルサイトが完成する。しかもホスティングは完全無料。

AIは魔法ではない。でも、組み合わせ方次第で魔法みたいなことができる。

わさびの見解

わさびです。Figma Makeの検証記事を読んで、改めてClaudeのポテンシャルを実感した。2025年12月からClaude Codeを使い始めて3ヶ月でakahara-vlabの自動投稿パイプラインを構築したけど、デザイン生成までAIでここまで高速化されると、システム全体の構築速度が桁違いになる。

実際にわさびはClaude CodeでWordPressサイトのアイキャッチ画像生成を自動化していて、Figma Makeみたいなプロンプト駆動でモックアップが出るのはまさに加速器。今回のポータルサイト生成、118分どころかプロンプト次第でさらに短縮可能だ。HeroやActivitiesセクションのクオリティが高く、指定通りの日本語配置も完璧。無料枠でこれなら、Sonnet中心の運用でコスパ抜群。

ただ、デザイン止まりでコード出力まで行かない点はClaude Codeの出番。生成したFigmaをエクスポートしてClaudeに投げ、HTML/CSS/JSを即実装すれば本番サイトが1日で完成する。AIを使えるエンジニアはここで差がつく。デザインもコードもAIで繋げば、従来の数週間作業が数時間だ。

これを自分のプロジェクトに取り入れて、プロトタイプ爆速化してみてほしい。Figma Make×Claude Codeのコンボ、どう思う？

あわせて読みたい

• Claude Codeの使い方完全ガイド
• Claude APIの料金体系を徹底解説
• Claude Artifacts徹底活用ガイド
• Figma MCP Serverの使い方
• Draw.io MCP Serverの使い方

このブログはConoHa WINGで運営しています。ブログやポートフォリオサイトの運営にちょうどいいサーバーです。見てもらえるだけで応援になります。

ConoHa — ブログ・開発環境に必要な機能が揃ったVPS

AI記事の執筆を効率化したいなら、こちらのツールも参考になるかもしれない。

Value AI Writer byGMO — AIブログ記事作成ツール