
「AI エージェントを Web 制作に使いたいが、ツールが多すぎてどれを選べばいいか分からない」
2026 年に入り、こうしたご相談が一気に増えました。指示を出すと AI が自分で計画を立て、ファイルを編集し、コマンドを実行して、動くところまで確認する。この「AI エージェント」は、もう一部のエンジニアだけの道具ではありません。言葉で頼むだけでランディングページや予約アプリが公開できるサービスも当たり前になりました。
一方で、名前は似ていても中身はまったく違います。エンジニアが既存のコードを直すための道具と、エンジニアでない人がゼロから画面を作るための道具を同じ土俵で比べても、答えは出ません。
この記事では、Web 制作の現場で実際に名前が挙がる 11 ツールを 「種類」「料金」「得意なこと」「注意点」 で比較し、目的別のおすすめと、制作の工程ごとの使い分けを整理します。当社も、このホームページの WordPress からの移行をはじめ、日々の制作に AI エージェントを使っています。その経験も交えてお伝えします。
料金は 2026 年 11 月 1 日時点で各社の公式サイトに表示されている個人向けの月額(米ドル・税別)です。AI ツールの料金と利用上限は頻繁に変わるため、契約前に必ず公式サイトでご確認ください。
まず結論: 目的別のおすすめ
やりたいこと | おすすめ |
|---|---|
既存サイトの改修・保守を、指示だけでまとめて任せたい | Claude Code、OpenAI Codex |
エディタで補完を使いながら、自分で書くのを速くしたい | Cursor、GitHub Copilot |
GitHub の Issue から修正の Pull Request を自動で作りたい(チーム) | GitHub Copilot、OpenAI Codex |
仕様を固めてから、大きめの機能を作りたい | Kiro |
まず無料で試したい | Google Antigravity、GitHub Copilot Free、Codex(ChatGPT Free) |
デザイナーが「動く」プロトタイプを作りたい | Figma Make、v0 |
エンジニアでない人が LP や簡単なアプリを作って公開したい | Lovable、Bolt.new、Replit |
迷ったら、「すでにあるサイトやコードを直したいのか、ゼロから作りたいのか」「作業するのはエンジニアか、そうでないか」の 2 つで考えると、候補は 2〜3 個に絞れます。
AI エージェントは大きく 2 種類
Web 制作で使う AI エージェントは、次の 2 種類に分けると分かりやすくなります。
1. 開発エージェント(コードを書く AI) … Claude Code、OpenAI Codex、GitHub Copilot、Cursor、Google Antigravity、Kiro。手元やクラウドにあるプロジェクトのファイルを読み、複数のファイルを編集し、テストやビルドのコマンドを実行します。成果物はコードそのものなので、どのサーバーにも載せられ、既存の WordPress や Astro、Next.js のサイトにも使えます。その代わり、Git やターミナルなど開発の基礎知識が前提です。
2. サイト・アプリ生成型(言葉から作る AI) … v0、Bolt.new、Lovable、Replit、Figma Make。ブラウザで「美容室の予約ページを作って」と頼むと、画面と仕組みが生成され、そのサービスの上ですぐ公開できます。エンジニアでなくても使えるのが最大の強みです。一方で、既存サイトの改修は苦手で、サービスの外に持ち出すと手直しが必要になることもあります。

料金の比較(2026 年 11 月時点)
ツール | 無料プラン | 最初の有料プラン | 上位プラン |
|---|---|---|---|
Claude Code | なし | Claude Pro $20(年払いで $17) | Max $100、Ultra $200 |
OpenAI Codex | あり(ChatGPT Free) | ChatGPT Go $8、Plus $20 | Pro $100・$200・$500 |
GitHub Copilot | あり | Pro $10 | Pro+ $39、Max $100 |
Cursor | あり | Plus $8(Grok のモデルのみ) | Premium $30、Super $100、Ultra $200 |
Google Antigravity | あり | Google AI Pro で上限が拡大 | Google AI Ultra |
Kiro | あり(50 クレジット) | Pro $20 | Pro+ $40、Pro Max $100、Power $200 |
v0 | あり(1 日 7 メッセージ) | Plus $30 | Business $100(1 人あたり) |
Bolt.new | あり(月 100 万トークン) | Pro $25 | Teams $30(1 人あたり) |
Lovable | あり(1 日 5 クレジット) | Pro $25 | Business $50 |
Replit | — | Core $20(年払いで $18) | Pro $100 |
Figma Make | Figma の無料プランで一部 | Figma Professional のフルシート $16 | Organization・Enterprise |
どのツールも「月額の中に利用枠があり、使い切ると追加購入か待つ」という仕組みに変わってきています。同じ $20 でも、こなせる作業量はツールと使うモデルで大きく違います。業務で毎日使うなら、$100 前後の上位プランが現実的な予算です。

開発エージェント 6 ツール
Claude Code(Anthropic)
ターミナル、VS Code などのエディタ、デスクトップアプリ、ブラウザから使える開発エージェントです。プロジェクト全体を読み込んで「このフォームに確認画面を追加して」「表示が崩れている原因を調べて直して」といった指示を、複数ファイルの編集・コマンドの実行・動作確認まで含めて進めます。
- 得意なこと … 既存サイトの改修、原因調査、ドキュメントやルール(CLAUDE.md)を読ませたうえでの長い作業
- 料金 … Claude の Pro($20)から利用可能。業務で使い込むなら Max($100〜)
- 注意点 … 自由度が高い分、どこまで任せるか(コマンドの実行や本番への反映)を最初に決めておく必要があります
OpenAI Codex
ChatGPT のプランに含まれる開発エージェントです。Web、CLI、エディタの拡張機能、デスクトップアプリで使え、クラウド上で作業させて結果を受け取ることもできます。Plus 以上では GitHub の自動コードレビューや Slack 連携も使えます。
- 得意なこと … 複数の作業を並行してクラウドに任せる、Pull Request のレビュー
- 料金 … ChatGPT Free・Go($8)でも試せ、Plus($20)から本格的に使える。Pro は $100・$200・$500
- 注意点 … 普段 ChatGPT を使っている会社なら追加費用なしで始められる反面、利用枠を ChatGPT の他の機能と共有します
GitHub Copilot
エディタの補完から始まり、今では Issue を割り当てると AI が修正して Pull Request を作る「クラウドエージェント」まで備えています。上位プランでは、作業を Claude や Codex に任せることもできます(プレビュー)。
- 得意なこと … GitHub を中心にしたチーム開発、小さな修正の量産
- 料金 … Free から始められ、Pro $10 と最も安い。Pro+ $39、Max $100
- 注意点 … 2026 年から使用量が「GitHub AI クレジット」での計算になり、重いモデルを使うと枠の減りが早くなります
Cursor
VS Code をもとにした AI エディタで、補完の精度と使い心地で人気を集めてきました。2026 年 8 月に SpaceX(旧 xAI)の傘下に入り、料金プランが X・Grok のサービスと一体になりました。
- 得意なこと … 自分でコードを書きながら AI と並走する使い方、クラウドエージェントと AI コードレビュー(Premium 以上)
- 料金 … Plus $8、Premium $30、Super $100、Ultra $200。チームは 1 人 $30 から
- 注意点 … プランに含まれるのは Grok のモデルの利用枠で、Claude や GPT などの他社モデルは API の定価で別料金になります。他社モデルを使い慣れている方は、費用の見積もりに注意してください
Google Antigravity
Google の開発エージェントの環境で、アプリ・CLI・IDE・SDK がそろっています。個人なら無料で始められ、Google AI Pro・Ultra の契約で利用上限が増えます。個人向けの Gemini CLI は Antigravity CLI に移行しました。
- 得意なこと … 無料で試せる範囲が広い、ブラウザを操作しながらの画面の確認
- 料金 … 個人は無料から。上限を増やすなら Google AI Pro・Ultra。法人は Google Cloud 経由
- 注意点 … プランの名称や提供形態の変更が続いているため、導入時点の条件を確認してください
Kiro(AWS)
AWS の開発エージェントです。いきなりコードを書かせるのではなく、要件・設計・タスクの「仕様書」を先に AI と作り、それに沿って実装する「スペック駆動」が特徴です。
- 得意なこと … 規模の大きい機能、複数人で仕様を確認しながら進める開発
- 料金 … 無料(50 クレジット)、Pro $20、Pro+ $40、Pro Max $100、Power $200。日本の住所では消費税がかかります
- 注意点 … 小さな修正には手順が重く感じることがあります。チーム向けの料金プランは今のところなく、1 人ずつの契約です
サイト・アプリ生成型 5 ツール
v0(Vercel)
言葉や画像から React・Next.js の画面を生成し、Vercel にそのまま公開できます。生成されるコードの質が高く、エンジニアがたたき台として使う場面も多いツールです。
- 向いている人 … 管理画面や LP のたたき台を素早く作りたいデザイナー・エンジニア
- 料金 … 無料(1 日 7 メッセージ)、Plus $30、Business $100(1 人あたり)
Bolt.new(StackBlitz)
ブラウザの中で開発環境ごと動くのが特徴で、生成したアプリをその場で動かし、修正し、公開できます。
- 向いている人 … インストールなしで、動くものを素早く試したい人
- 料金 … 無料(月 100 万トークン)、Pro $25、Teams 1 人 $30
Lovable
会話をしながら、データベースやログインを含むアプリまで作れるサービスです。エンジニアでない人が「社内ツール」や「申し込みフォーム付きのサービス」を形にする用途で広く使われています。
- 向いている人 … 非エンジニアの起業家・マーケター、新規事業の検証
- 料金 … 無料(1 日 5 クレジット)、Pro $25、Business $50。人数ではなくクレジットで課金
Replit
ブラウザ上で、AI と一緒に開発から公開・運用まで完結します。サーバーやデータベースの準備を意識せずに済むのが強みです。
- 向いている人 … サーバーの知識はないが、データを扱うアプリを作りたい人
- 料金 … Core $20(年払いで $18)、Pro $100
Figma Make
Figma のデザインや言葉の指示から、動くプロトタイプやコードを作ります。デザインの意図をそのまま「触れる形」にできるので、お客様との認識合わせに役立ちます。
- 向いている人 … デザイナー、制作会社のディレクター
- 料金 … Figma Professional のフルシート($16)などに含まれる AI クレジットで利用
制作の工程ごとの使い分け
実際の制作では、1 つのツールですべてを済ませるより、工程ごとに得意なものを使い分ける方が品質も速度も上がります。当社では次のように考えています。

- 企画・構成 … ページ構成や文章のたたき台を AI と作る。ただし「誰に何を伝えるか」はお客様へのヒアリングで決めます
- デザイン … Figma Make や v0 で動くプロトタイプを作り、お客様と早い段階で触って確認します
- コーディング … Claude Code や Codex などの開発エージェントに、設計ルールを渡して実装させます
- レビュー・テスト … Copilot や Codex のコードレビューに加え、表示崩れ・フォームの送信・表示速度を人が確認します
- 公開後の改修 … 「お知らせ欄を追加したい」「この表示を直したい」といった小さな改修は、開発エージェントで大幅に短縮できます
導入する前に知っておきたい 5 つの注意点
- 本番環境に直接触らせない … AI エージェントはコマンドを実行できます。検証用の環境で作業させ、本番への反映は人が確認してから行う流れにしてください
- 秘密情報を渡さない … API キー、パスワード、お客様の個人情報をプロンプトやファイルに含めないこと。業務で使う場合は、学習に使われない設定やプランを選びます
- 生成物は必ず人が確認する … 「動く」ことと「安全で、正しく、使いやすい」ことは別です。フォームのスパム対策、アクセシビリティ、表示速度、SEO の設定は、AI 任せにすると抜けやすい項目です
- 料金の上限を決めておく … 利用枠を超えると追加料金がかかるプランが増えています。チームで使うなら、1 人あたりの上限を設定してください
- ロックインに注意する … 生成型のサービスで作ったサイトは、そのサービスの上でしか動かないことがあります。長く運用するサイトは、コードを持ち出せるか、自社のサーバーに載せられるかを確認しておきましょう
制作会社は AI エージェントをどう使っているか
当社では、コーディングや改修の多くを AI エージェントと一緒に進めています。体感として、実装にかかる時間は大きく減りました。一方で、減った時間の多くは「お客様の強みを聞き出す」「何を載せ、何を載せないかを決める」「公開後の数字を見て直す」といった、AI にはできない仕事に回しています。
AI エージェントが得意なのは「決まったことを、速く、正確に作る」ことです。「何を作るべきか」を決めるのは、今も人の仕事です。だからこそ、ツール選びと同じくらい、AI に渡す前の設計が成果を左右します。
よくある質問
Q. 無料で使えるおすすめはどれですか?
A. コードを書く用途なら Google Antigravity、GitHub Copilot Free、ChatGPT Free での Codex。言葉からサイトを作るなら Lovable、Bolt.new、v0 の無料プランで雰囲気をつかめます。ただし無料プランは利用枠が小さく、業務で使い続けるのは難しいと考えてください。
Q. プログラミングができなくても、AI エージェントでホームページを作れますか?
A. Lovable や Replit などの生成型なら作れます。ただし、問い合わせの導線、SEO、セキュリティ、公開後の更新まで含めて自分で管理する必要があります。判断に迷う方は、AI でホームページを作るのと制作会社に依頼するのはどっちがいい?もあわせてご覧ください。
Q. 今あるサイトを AI エージェントで改修してもらうことはできますか?
A. はい。当社では、既存サイトの改修や WordPress からの移行に開発エージェントを活用しています。AI で作ったサイトの手直しや、自社サーバーへの移行のご相談も承ります。
まとめ
- AI エージェントは「開発エージェント(コードを書く)」と「サイト・アプリ生成型(言葉から作る)」の 2 種類。まずどちらが必要かを決める
- 既存サイトの改修なら Claude Code・Codex、エディタで並走するなら Cursor・Copilot、非エンジニアがゼロから作るなら Lovable・Bolt.new・Replit、デザインの確認なら Figma Make・v0
- 料金は $10〜$30 から始められるが、業務で使い込むなら $100 前後。利用枠と追加料金の仕組みを確認する
- どのツールを使っても、何を作るかを決めることと、最後の確認は人の仕事
「自社のサイト運用に AI エージェントをどう取り入れればいいか」「AI で作ったサイトを整えたい」といったご相談も歓迎です。お問い合わせからお気軽にご連絡ください。
※ 記事内の製品名・ロゴは各社の商標または登録商標です。料金・機能は 2026 年 11 月 1 日時点の各社公式サイトの情報をもとにしています。

