「AIでWebサイトが作れる」と聞いても、コードが書けない自分には関係のない話だと思っていないでしょうか。じつはAIの中には、指示を出すだけでワイヤーフレームからコーディング、公開までを担ってくれるタイプがあります。ただし、テンプレートに情報を流し込むだけのAIサイトビルダーと混同すると、できることの見極めを誤ります。GOROの研修でも、非エンジニアの参加者がAIだけでWebサイトを公開した例があります。ここでは、AI Web制作の仕組みの違いから実際の制作の流れ、デザイン品質の担保方法まで、自社で試すイメージが持てるように整理します。
AI Web制作とは？AIサイトビルダーとAIコーディングエージェントの違い
「AI Web制作」という言葉は、仕組みが異なる2つのタイプを指しています。片方はテンプレートに情報を当てはめて自動生成する方式、もう片方は指示を伝えるとAIが実際のコードを書く方式です。この記事で扱うのは後者で、非エンジニアでも指示だけでサイトを作れる仕組みを解説します。
テンプレートに情報を流し込む「AIサイトビルダー型」
あらかじめ用意された複数のデザインテンプレートに、業種やキーワードを入力すると、AIが構成やテキストを自動で当てはめてくれるタイプです。操作はフォーム入力に近く、短時間で見た目の整ったページが完成します。一方で、レイアウトの自由度はテンプレートの範囲内に限られます。ブランドのトーンに細かく寄せたい場合や、独自のコンポーネントを使いたい場合には、調整できる幅が狭く感じられることがあります。
指示から実際のコードを生成する「AIコーディングエージェント型」
もう一方は、「採用情報を掲載するページを作って」のように言葉で指示を出すと、AIがHTML・CSSなどの実際のコードを書いて画面を作るタイプです。テンプレートから選ぶのではなく、ゼロから構成やデザインをAIと一緒に組み立てていく点が異なります。コードを直接扱う分、修正の指示を重ねることで細部まで作り込める余地が広く、既存サイトの改修にも対応しやすい方式です。
Claude CodeはAIコーディングエージェント型にあたる
Overview - Claude Code Docs（Anthropic）では、Claude Codeはコードベースを読み取り、ファイルを編集し、コマンドを実行するエージェント型のコーディングツールだと説明されています。利用できる環境は、ターミナル・IDE・デスクトップアプリ・ブラウザです。つまりClaude Codeは、テンプレートから選ぶAIサイトビルダー型ではなく、指示を出してコードを生成させるAIコーディングエージェント型のツールです。具体的な制作手順は、ClaudeCodeでホームページを作る手順でも詳しく紹介しています。
| 比較項目 | AIサイトビルダー型 | AIコーディングエージェント型（Claude Codeなど） |
|---|---|---|
| 作り方 | テンプレートに情報を入力 | 言葉で指示してコードを生成 |
| 自由度 | テンプレートの範囲内 | 構成・デザインとも調整しやすい |
| 向いている場面 | 短時間で定型的なページを作りたい | 既存サイトの改修や独自デザインにも対応したい |
次の見出しからは、このAIコーディングエージェント型で実際にできること・できないことを具体的に見ていきます。
AI Web制作で実際にできること・できないこと
AIコーディングエージェント型は、指示から実際のコードを組み立てる仕組みです。この型でどこまで任せられ、どこから人の判断が必要になるのか、工程ごとに見ていきます。
ワイヤーフレームからコーディング・公開まで一気通貫で対応できる
ページ構成の相談、デザインの調整、コードの生成、公開という一連の工程を、同じやり取りの中で進めることもできます。構成案を言葉で伝え、出てきた案に修正を重ねながら、そのまま仕上げまで持っていける点が特徴です。GOROのデザイナーが、制作の前半をAIと相談しながら進めた例を紹介します。
実録代表・旭の一次体験
構成の検討からワイヤーまでの時間が半分になった
デザイナーの［メンバー］は、構成の検討からワイヤーまでをAIと相談しながら通しで作り、数時間で先方に渡せる状態に。かかる時間は半分になり、浮いた時間でディスカッションにより考えられるようになったと話していました。
出典：板前さんの鮨と一緒に、AI活用事例を共有する鮨会を開催しました（代表・旭俊成のnote）
非エンジニアが公開まで進めた例は、後半の「非エンジニアがゼロからWebサイトを公開できた制作の流れ」で紹介します。
ターミナル操作は必須ではなくなっている
公式ドキュメントでは、デスクトップアプリを使えば、ターミナルを使わずにパソコン内のフォルダのコードの作業をClaudeに依頼し、変更をレビューできると説明されています。デスクトップアプリにはClaude Codeが含まれているため、Codeタブを使うのにNode.jsやCLIを別にインストールする必要もありません（Get started with the desktop app - Claude Code Docs）。
GOROがこれまで行った研修の中には、VS Code・Homebrew・Node.jsを入れるCLI前提で設計し、環境構築に約1時間をかけていたものもありました。
実録GOROの作業記録
研修の前提が「CLI必須」から変わった
デスクトップアプリでこのハードルがほぼ消えるため、初心者向けの説明も研修プログラムも第一選択を変えるべき。
CLIとデスクトップは同じエンジンで CLAUDE.md・MCP・スキル・設定を共有
出典：GOROの社内の作業記録
一方で、Claude Codeを使うにはPro・Max・Team・Enterpriseのいずれかのプランが必要で、無料プランでは使えません（Install Claude Desktop - Claude Help Center）。申し込み前に確認しておきましょう。
ブランド独自のルールなど細かな調整は人の判断が要る
AIが最初に出す案が、そのまま仕上がりになるわけではありません。表記ルールや独自の言い回し、法令上の注意点など、社内の基準に合わせる判断は人が担う必要があります。こうした判断の分担については、Claude Codeはデザイナーの仕事をどう変える？非エンジニアでもできる活用法でも扱っています。
非エンジニアがゼロからWebサイトを公開できた制作の流れ
では実際に、非エンジニアがどの順番で手を動かし、公開まで到達したのでしょうか。GOROが事業会社のデザインチームに行った研修の事例をもとに見ていきます。
最初の一歩は既存ファイルの修正から
この研修の1回目は、次の順番で進めました。
実録支援先の声（GOROの事例より）
環境構築から既存ファイルの修正、採用サイト制作までを一気通貫で体験
CLIの操作が初めてのメンバーも手順に沿って全員が環境構築を越え、既存のHTMLファイルを修正する小さな体験から、ゼロから採用サイトを制作するところまで進めました。
出典：Claude Code未経験の非エンジニア10名が、2時間の研修でサイト公開まで到達した事例（GOROの事例記事）
この回で、参加者全員が2時間でAIのみでWebサイトを公開しています。
構成の検討からワイヤー作成、公開までの流れ
自社で試す場合は、ゼロからサイトを作る工程を次のように区切ると進めやすくなります。
| 工程 | やること |
|---|---|
| 1. 目的の整理 | 掲載したい情報・ページの目的を言葉で伝える |
| 2. ワイヤー作成 | 構成案をAIに出してもらい、過不足を確認する |
| 3. 見た目の調整 | 配色・余白・フォントなどを指示で整える |
| 4. コード生成 | 指示をもとにHTML・CSSを生成させる |
| 5. 確認と公開 | ブラウザで表示を確認し、公開する |
テキストの指示だけでブランドのトーンに寄せていく
同じ研修で採用サイトを作った場面では、テキストで指示を出すとワイヤーが生成され、余白・色・フォント・コンポーネントのルールを反映しながら、支援先のブランドのトーンに沿ったビジュアルへ調整されていきました。自社で試す場合も、余白・色・フォントなど、ブランドのルールとして決まっている項目を指示に含めておくのがひとつの方法です。
デザインの質はどう担保する？レビューと修正を自動化する方法
AIが出した案を公開できる品質に仕上げるには、デザインのレビューと修正のやり取りが欠かせません。このやり取りは、外部ツールとの連携で自動化できる部分があります。
HTMLプロトタイプをFigmaに取り込みコメントで修正する流れ
同じデザインチームの研修の2回目は、デザインレビューの作業をテーマにしました。HTMLのプロトタイプをFigmaに取り込み、付いたコメントをClaude Codeが読んで修正を反映し、変更差分をFigmaへ自動で投稿するところまでを、参加者が通しで体験しています（Claude Code未経験の非エンジニア10名が、2時間の研修でサイト公開まで到達した事例）。研修の1回目と2回目の内容は、Claude Codeの活用事例で詳しく紹介しています。
レビューと修正を支える仕組み
この流れを支える仕組みは、大きく2つに分けられます。
ひとつは、外部ツールとつながる仕組みです。公式ドキュメントでは、Claude CodeはModel Context Protocol（MCP）を通じて数百の外部ツールやデータソースと連携できるとされています。活用例として、Slackに投稿されたFigmaの新しいデザインをもとにメールテンプレートを更新する依頼も挙げられています（Connect Claude Code to tools via MCP - Claude Code Docs）。デスクトップアプリのローカルのセッションでは、プロンプト欄の横にある「＋」ボタンからConnectorsを選ぶと、Google Calendar・Slack・GitHub・Linear・Notionなどを追加できます。ConnectorsはGUIで設定できるMCPサーバーです（Desktop application - Claude Code Docs）。
もうひとつは、変更内容を確認する仕組みです。デスクトップアプリでは、Claudeがコードを変更したあと、差分（diff）表示で変更内容をファイルごとに確認できます（Desktop application - Claude Code Docs）。AIが反映した修正も、この画面で人が確認してから取り込めば、品質の最終判断を人の側に残せます。
| 役割 | 仕組み |
|---|---|
| 外部ツールとの接続 | MCP（Model Context Protocol） |
| 接続の設定 | GUIで設定できるConnectors |
| 変更内容の確認 | 差分（diff）表示 |
社内に蓄積した情報を活かして制作することも可能に
Figmaとの連携は、外部ツールと組み合わせる方法のひとつに過ぎません。連携先を社内の情報管理ツールに広げると、制作の入口そのものが変わります。
Notionにまとめた情報をAIが参照して構成を作る
クリエイティブ職の制作会社で行った研修では、参加者一人ひとりがNotionと連携して自己紹介サイトを作りました。
実録支援先の声（GOROの事例より）
Notionの情報を参照してサイトの構成を生成
まずNotionに、サイトに掲載したい情報を整理し、Claude Codeは、その内容を参照しながら、Webサイトの構成やデザインを生成します。
出典：Claude Code未経験のクリエイター12名が、たった4時間の研修でWebサイトを公開した事例（GOROの事例記事）
生成された構成やデザインに、参加者が追加で指示を出して仕上げています。
情報を連携させる狙いは『慣れているツールだから』ではない
Notionを選んだ理由は、単に参加者が普段から使い慣れているためではありません。支援先の制作会社が、議事録やプロジェクト情報をNotionにまとめていたことが理由です。Claude Codeと連携すれば、Notionに蓄積された情報や背景を参照し、文脈を踏まえて制作を進められます。
採用サイトや製品紹介ページのように、載せたい情報がすでに社内のドキュメントにまとまっている場合は、同じ進め方を検討できます。
MCP連携で広がる外部ツールとの接続
Claude CodeとNotionをつなぐ方法としては、前述のConnectors（MCP）があります。公式ドキュメントでは、審査済みのコネクタをAnthropic Directoryで探せることと、そこに掲載されたリモートサーバーをClaude Codeにも追加できることが説明されています（Connect Claude Code to tools via MCP - Claude Code Docs）。
| 連携先の例 | 参照できる情報 |
|---|---|
| Notion | 議事録・プロジェクト情報・サイトに載せたい情報 |
| Figma | デザインへのコメント・変更差分 |
| Slack | 投稿された資料・やり取りの内容 |
社内の情報がどのツールに蓄積されているかによって、連携先の選び方は変わります。自社で使っているツールが対象かどうかは、Anthropic Directoryで確認できます。
AI Web制作は内製化に向いている？判断軸の整理
連携先を広げられると分かったところで、次に気になるのは内製化そのものの向き不向きです。ここでは費用の構造と業務の切り分け、導入前の確認点を整理します。詳しい進め方や失敗パターンは、Web制作の内製化とは？判断軸・失敗パターンと外注に頼らない進め方で扱っています。
外注と比べたときのコスト構造の違い
外注の場合、制作費用の多くは外部への支払いとして発生します。修正のたびに追加費用や納期調整が必要になる点も、見積もりの段階で織り込みにくい部分です。
内製に切り替えると、費用の中身が変わります。外部への支払いは減りますが、担当者が指示を出し、画面を確認し、調整を重ねる時間が社内コストとして残ります。
| 項目 | 外注 | 内製 |
|---|---|---|
| 主な費用 | 制作会社への支払い | 担当者の作業時間 |
| 修正の発生時 | 追加費用・納期調整が必要 | その場で指示し直せる |
| 完成までの待ち時間 | 発注から納品まで発生 | 確認しながら進められる |
どちらが安く済むかは、修正の頻度や担当者が確保できる時間によって変わります。一度の比較ではなく、継続的に発生する作業量で見積もる必要があります。
向いている業務・向いていない業務
内製化に向いているのは、構成がある程度固まっていて、更新頻度が高い業務です。
- 採用ページやキャンペーンLPなど、期間限定で差し替えが多いもの
- 社内向けの告知ページや資料の公開ページ
- 既存サイトの文言修正や画像の差し替え
一方で、決済機能や会員管理など、外部システムとの複雑な連携を伴う業務は、慎重な判断が必要です。情報の扱いに専門的な確認が必要な場面では、担当者の判断だけで進めず、情シスや専門家に相談する工程を残しておく必要があります。
社内導入を検討する前に確認しておきたいこと
内製化を始める前に、次の点を社内で確認しておくと判断がしやすくなります。
- 誰が制作の担当者になり、誰が公開前の確認をするか
- ツールの利用権限や契約を、どの部署が管理するか
- 公開後の修正や更新を、どのくらいの頻度で誰が行うか
- 既存のシステムやブランドのルールと矛盾しないか
これらを決めないまま始めると、担当者が不在のときに更新が止まる、確認する人がいないまま公開されるといった事態につながりかねません。小さな業務から試し、確認の流れを決めてから対象を広げる進め方が、判断材料を増やしやすい方法です。
この記事と合わせて読みたい
- Claude Codeでホームページ作成｜非エンジニアでもできる作り方と手順を解説 — AI Web制作の全体像を理解したあと、具体的な操作手順やつまずきポイントを知りたい読者に、実際の公開手順を解説したこの記事が役立つため
- Web制作の内製化とは？判断軸・失敗パターンと外注に頼らない進め方 — 内製化に向いているかどうかの判断軸をもっと深く知りたい読者に、内製化の判断軸や失敗パターンを詳しく扱うこの記事が役立つため
- Claude Codeはデザイナーの仕事をどう変える？非エンジニアでもできる活用法 — AIによる制作プロセスを理解したあと、デザイナーという職種の仕事自体がどう変わるのか気になる読者の疑問に答える記事であるため
Claude Codeの社内導入を検討している方へ
GOROは、デザイナー・マーケ担当・ディレクターなど非エンジニアの部署を対象にしたClaude Code法人研修を提供しています。事前ヒアリングで業務の内容を伺い、研修の内容を設計します。研修の当日に、受講者が実際の成果物を作り切る形式です。
