AI Web制作に向いたAIの選び方

Web制作でAIを使う場合、「HTMLを書いてくれるAI」を探すだけでは足りません。

実際の制作では、

• existing codebaseを読む

• Figmaや仕様を理解する

• componentを実装する

• browserで確認する

• errorを直す

• terminal commandを実行する

• repository全体を変更する

• deploy前に差分をreviewする

までが一連のworkflowです。

2026年現在は、chatでcode snippetを出すAIより、codebaseと開発環境へ接続してagentとして作業できるかが大きな違いになっています。

最初に見るべきpoint

比較するときは、

• codebase search

• multi-file edit

• terminal

• browser / computer use

• screenshot / visual feedback

• Figma integration

• project rules

• background agent

• Git / PR

• local / cloud handoff

• model choice

• security / repository access

を見ます。

LPを1枚作る場合と、既存のNext.jsやWordPress projectを改修する場合では必要な機能が違います。

Cursor：既存projectをagent中心で実装したい

Cursor Agentはcodebase search、file editing、terminal execution、web searchなどのtoolを使ってcoding taskを進めます。

2026年のCursor 3では、local agentとcloud agentを同じworkspaceで扱い、複数repositoryやagentを管理する方向へ進化しています。

またcloud agentはvirtual machine上でcodebaseへonboardし、変更をtestして、screenshotやvideo、logなどのartifactを残し、merge-ready PRを作るworkflowも案内されています。

Web制作では、

「headerを実装」

「既存componentを使ってLP追加」

「browserで崩れを確認して修正」

「testしてPR」

のように、実装だけでなく検証まで任せやすい構成です。

Cursor + Figma / browser：design-to-codeのfeedback loop

Cursor公式のWeb Development guideでは、Figmaやbrowserなど外部toolとのfeedback loopを短くするworkflowが紹介されています。

重要なのは、design imageを見て一度codeを出すだけではありません。

• design systemを読む

• existing componentを再利用

• browser preview

• visual differenceを確認

• 修正

を繰り返すことです。

AI Web制作では「初回生成速度」より、2回目以降の修正がcodebaseへ自然に入るかを見る方が実務的です。

general-purpose AI：設計・レビュー・problem solvingに使う

ChatGPT、Claude、Geminiなどのgeneral-purpose AIもWeb制作で有効です。

たとえば、

• information architecture

• component設計

• API設計

• accessibility review

• CSS debugging

• performance改善案

• WordPress構成

• technical decision

などです。

IDE agentとの違いは、repositoryを直接編集することより、問題を整理して設計やreviewを行う役割に向くことです。

実装agentとgeneral-purpose AIを分けるworkflowも現実的です。

AI website builder：codebaseを持たず素早く公開したい場合

Web制作には、promptからsiteやappを生成するwebsite builder系AIもあります。

このcategoryは、

• prototype

• campaign page

• simple landing page

• internal tool

を短時間で形にする用途では便利です。

一方、既存projectへ統合する場合は、

• generated codeのownership

• component reuse

• CMS

• SEO

• accessibility

• performance

• hosting

• export

• long-term maintenance

を確認します。

「早く見た目が出る」と「継続運用しやすい」は別です。

目的別に見る

existing codebaseを継続改修

Cursorなどのcoding agent。

design → implementation → browser確認

Figma / browserと連携できるagent workflow。

architecture・review・難しいproblem solving

general-purpose AI。

codebaseを持たずprototypeを早く出す

AI website builder。

これはcode生成品質の順位ではなく、制作工程の違いです。

AI Web制作で見落としやすい点

generated codeの量より保守性

AIは大量のcodeを短時間で書けます。

しかし既存componentを無視してduplicate実装すると、後からmaintenance costが増えます。

project rulesとdesign systemを先に読ませます。

visual QAは別工程

codeがbuildできても、designと一致しているとは限りません。

browser screenshot、responsive、hover、animation、font、spacingまで確認します。

security

AI agentがterminalやrepositoryへaccessする場合、permission scopeとsecret handlingを確認します。

.envやproduction credentialを不用意に渡さない設計が必要です。

WordPressとmodern frontendではworkflowが違う

WordPress theme改修、Next.js app、static LPではfile構造やtest方法が違います。

AIを選ぶ前にproject typeを明確にします。

AIへ実装を頼む前に決めること

同じ「Webサイトを作る」でも、ゼロからLPを作るのか、既存repositoryへ機能を足すのかで必要な権限と確認方法は変わります。依頼の前に、次の短い作業票を埋めておくと、出力の良し悪しを判断しやすくなります。

表は横にスクロールできます

作業票	書く内容の例	確認する理由
目的	問い合わせフォームの入力エラーを減らす	見た目の変更と動作の変更を区別する
対象	既存のContact pageと共通form component	変更範囲を限定する
制約	URL、既存analytics、production secretは変更しない	AIが触れてはいけない境界を示す
完了条件	390pxとdesktopで送信前validation、既存test pass	「実装した」だけで終わらせない
検証	build、関連test、画面確認、差分review
成果物を自分で引き取れる状態にする

最初は実データやproduction credentialを渡さず、複製した小さな課題で試します。AIが必要なfileを見つけられるか、変更前に既存ルールを読むか、複数fileの差分を説明できるかを見てください。terminalやrepositoryへ広い権限を与える機能は便利ですが、権限の範囲と実行確認の方法も選定条件に含めます。

完了判定は、少なくとも「要件を満たしたか」「既存の動作を壊していないか」「変更差分を説明できるか」の3つに分けます。build成功は構文や生成の確認にすぎず、見た目・アクセシビリティ・本番影響まで保証しません。browser確認や人のreviewが必要なprojectでは、それを実行できる環境があるかを先に確かめます。

Cursorのようなcoding agentはrepositoryを読み、複数fileを編集し、terminalでtestを動かす用途に寄せられます。cloud agentを使う場合は、ローカル作業とは実行環境・接続repository・secretsの保管場所が異なるため、会社のsecurity ruleとsource control権限を確認してください。単発の案出しや仕様整理だけなら、repository権限を渡さず汎用AIで設計を固めてから実装へ移る方法もあります。

AIものさしの判断

AI Web制作では、codeを書けるかではなく、existing projectを理解し、変更し、確認し、差分を返せるかで選ぶと実務に近くなります。

継続的な実装はcoding agent。

設計やreviewはgeneral-purpose AI。

単発prototypeはwebsite builder。

同一Web課題でimplementation accuracy、visual fidelity、bug rateをHands-on比較していないため、品質順位は付けません。