- AIホームページ作成ツールとは
- AIホームページ作成ツールとは、自然言語の指示（プロンプト）からWebサイトやWebアプリのデザイン・コード・バックエンドをAIが生成するツールの総称です。Claude Codeのような対話型コーディングAIから、Figma Make・Webflow AI・v0のようなノーコード寄りのサービスまで幅があります。
こんにちは、Webflow専門家のマサトです。
AIでホームページを作れるツールが増えすぎて、「結局どれを使えばいいの？」という相談をよく受けます。僕は自社サイトをAIでフルリニューアルした人間なので、実際に使ったツールの本音だけを書きます。
✓記事の内容
- Claude Code／Figma Make／Webflow AI（App Gen）を実際に使った本音
- v0・Bolt・Lovableの位置づけ（調査ベース）
- 用途別「どれを選ぶべきか」の結論
先に結論｜AIホームページ作成ツールの用途別使い分け
先に結論から書きます。
- 会社の本サイトを本気で作る → Claude Code（AIバイブコーディング）。自由度と品質が別格。ただし人間の判断力が必須。
- 小さなアプリや試作をサクッと作る → Figma Make。セットアップ不要でチャットするだけ。
- 既存のWebflowサイトに機能を足す → Webflow AI（App Gen）。デザインはWebflowクオリティのまま、裏側だけAIに任せられる。
- まず無料で感触を掴みたい → v0・Bolt・Lovable（僕は実案件未使用なので調査ベース）。
| ツール | 実使用/調査 | 向く用途 | 費用メモ |
|---|---|---|---|
| Claude Code | 実使用 | 会社の本サイト | 自社サイトの運用費はドメイン代の年1,500円に |
| Figma Make | 実使用 | 小さなアプリ・試作 | セットアップ不要・チャットのみ |
| Webflow AI（App Gen） | 実使用 | 既存Webflowサイトへの機能追加 | デザインはWebflow品質のまま |
| v0（Vercel） | 調査 | ReactのUI生成 | 無料枠あり・有料月$20〜 |
| Bolt.new | 調査 | フルスタック試作 | 無料枠あり・Pro月$20 |
| Lovable | 調査 | DB・認証込みアプリ | 無料枠あり・Pro月$25 |
それぞれ、体験ベースで理由を説明します。
Claude Code｜自社サイトを7日間でフルリニューアルした
僕はこのWeb春のサイト自体を、2026年7月にClaude Codeでフルリニューアルしました。26ページの構築、記事62本の移行、フォーム4種の接続、GA4・構造化データ・llms.txtの整備まで。構築だけなら3日、企画を含めて7日です。人間は僕ひとり。
一番の良さは自由度です。ツールの制約というものが実質なくて、SEOもAI最適化も好きなだけ突き詰められます。運用費も激変しました。Webflowのサブスク（ローカライズ込み）で年10万円弱かかっていたのが、切り替え後はドメイン代のみの年1,500円です。
ただし正直に書くと、ここに至るまでに約1ヶ月、ゴミを大量に作りました。デザインは50パターンくらい作ったし、「セクションの間を少し広げたい」みたいな細かい微調整は、ノーコードで力技をやっていた頃より遅いです。そしてAI任せ100%で公開すると、どのサイトも同じ顔になってブランド価値を下げます。企画・審美判断・事実確認は人間の仕事。この分担を放棄すると失敗します。詳しい工程は全工程公開の記事に書きました。
Figma Make｜チャットだけで勤怠管理アプリができた
Figma Makeは、Figmaにサイト公開機能＋AIのバイブコーディングがついたやつです。僕は飲食店の経営者から「勤怠管理アプリ作成したいんだよね」と言われて、実際にFigma Makeで作りました。
やることは「勤怠管理アプリを作って」とチャットに話しかけるだけ。Claude Code系と違ってセットアップが一切不要なのが最大の強みです。データを残すにはバックエンドが必要ですが、これもSupabaseがFigma側から提案されるので、おとなしく乗ればOK。
本音を言うと、根気が要ります。エラーは出まくるし、その都度「エラーが出てる。修正して」とチャットで投げて進める感じ。あと僕は過去バージョンに戻らなくなって痛い目にあったので、良いところまで作ったらファイルごとコピー保存が必須です。小さいサイトや個人店で使うレベルのアプリなら、十分満足いくものが作れます。詳細は勤怠管理アプリを作った記事で。
Webflow AI（App Gen）｜既存サイトの「裏側」だけAIに任せる
WebflowにもApp GenというAI機能が登場しました。実際に試したところ、「問い合わせフォームから送信されたら、DBに保存して管理画面に一覧表示して」というプロンプトだけで、データ構造・処理フロー・フロントの接続まで一気に生成されました。
これの良さは役割分担です。繊細なUIやクラス設計は人間がWebflowで作り、面倒なバックエンドだけAIに任せる。全部をAIに丸投げするツールと違って、デザイン品質を落とさずに「美しくて動くアプリ」になります。運用中のWebflowサイトに会員機能やダッシュボードを後付けできるのも強い。試した記録はApp Genの記事にあります。
ちなみにClaude CodeとWebflowの掛け合わせ（カスタムコードや脱Webflow移行）については、AIバイブコーディングの記事で別途まとめています。クライアント案件では、Webflowで作った塗装会社サイトをこの方法でAI管理システムに移行し、月額費用を大きく下げつつ顧客管理まで実装した経験もあります。
v0・Bolt・Lovable｜ここは調査ベースで簡潔に
ここから先の3つは僕の実案件では使っていないので、調査ベースと明示して書きます（2026年7月時点の公開情報より）。
- v0（Vercel）：ReactコンポーネントのUI生成に特化。無料枠あり、有料は月$20〜。UIの見た目品質を重視する人向けと評されています。
- Bolt.new：ブラウザ内でフルスタックの試作を高速生成。無料枠あり、Proは月$20。
- Lovable：DB・認証込みのアプリをプロンプトから生成。無料枠あり、Proは月$25。非エンジニア向けとされることが多いです。
位置づけとしてはFigma Makeの競合です。無料枠で感触を掴むのはアリだと思います。ただ僕の体験から言えるのは、この手のツールはどれも「最後の2割」＝実データ連携・エラー潰し・運用のところで根気が要る、という点は共通だということです。
AIホームページ作成ツールの失敗しない選び方
「作れるか」ではなく「運用できるか」で選ぶ
どのツールも「作る」ところまでは正直すごいです。差が出るのは公開後。更新は誰がやるのか、エラーが出たら誰が直すのか、月額はいくら払い続けるのか。ここまで含めて選ばないと、きれいな置物ができて終わります。
手順としてはこう進めるのがおすすめ
- まず無料枠のあるツール（Figma Makeやv0など）で、AIに指示を出す感覚を掴む
- 本サイトを作ると決めたら、企画とターゲット整理に時間をかける（僕は7日のうち企画に4日使いました）
- 公開前に、全ページを自分の目でチェックする。AIは平気で事実と違う文言を入れてきます
まとめ｜道具は揃った。差がつくのは判断
手を動かすのがAI、判断するのが人。どのツールを選んでも、この構図は変わりませんでした。逆に言えば、企画と審美判断さえ握っていれば、ツールはもう「どれでも作れる」水準に来ています。
「自分でやるのは大変そうだけどAIでサイトは作りたい」という方向けに、Web春では僕が判断側を担当するAIサイト制作（¥500,000〜）をやっています。自社サイトと同じ進め方です。
よくある質問
AIホームページ作成ツールは無料で使えますか？
調査ベースですが、v0・Bolt.new・Lovableには無料枠があります（2026年7月時点）。まず無料枠でAIに指示を出す感覚を掴むのがおすすめです。ちなみに僕の自社サイトは公開後の運用費がドメイン代のみの年1,500円で回っています。
プログラミング知識ゼロでも作れますか？
作れます。Figma MakeもWebflow App Genも日本語のチャット指示だけで動きました。ただしエラーは必ず出るので、その都度AIに修正を依頼する根気は必要です。
AIでホームページを作るのにどれくらい期間がかかりますか？
僕の自社サイト（26ページ・記事62本移行）は構築3日＋企画4日の計7日でした。ただし、うまく生成できるようになるまでには約1ヶ月の試行錯誤がありました。
結局どのツールが一番おすすめですか？
用途次第です。会社の本サイトならClaude Code、小規模アプリの試作ならFigma Make、既存Webflowサイトへの機能追加ならWebflow AI（App Gen）が僕の結論です。
プロにAIサイト制作を頼むといくらですか？
Web春のAIサイト制作は¥500,000〜です。企画・審美判断・品質チェックを人間が行い、構築をAIが担う進め方です。
