Claude CodeでWeb制作会社を作り、LPを発注してみた

• Claude
• AI
• ホームページ制作

「Claude Codeの中にWeb制作会社を作って、そこへLP制作を丸ごと発注したら、何が起きるんだろう？」

これ、ちょっと試してみたくなりませんか。AIにHTMLを書かせるだけなら、もう珍しい話ではありません。でも、今回は少し違います。ディレクター、コピーライター、デザイナー、コーダー、レビュアーという役割を持つAI社員を組み、受注から企画、制作、検収、納品までを「会社の仕事」として回してみました。

題材は、架空のカフェ「MORI NO MA（モリノマ）」のLPです。

Claude Code Web制作の本当の可能性は、完成したHTMLよりも、その途中に残った「誰が、何を考え、何を確認したか」にありました。

この記事では、実際のスクリーンショットと生成ファイルを見ながら、AI制作会社がどう動いたのか、完成物はどこまで使えるのか、そして人間には何が残るのかを率直に紹介します。

最初に画面構成を紹介するため撮影したデモ画面です。画面上に作ったAI制作会社「ゼロ残業製作所（自称）」では、社員ごとに担当と作業状態が表示されます。この記事でこの後に掲載する受注以降の画面と動画は、実際にカフェLPのタスクを処理している最中の記録です。

実際の制作工程を16倍速で見る

下の動画は、今回のカフェLP制作を受注してから納品するまでの画面を16倍速にしたものです。約25分の工程を、約1分35秒で確認できます。

結論。25分でLPはできた。でも価値は「早さ」ではなかった

まず結果からお話しします。今回の実験では、最終的に1ページ完結型のカフェLPが生成されました。ヘッダー、ヒーロー、課題提起、特徴紹介、架空のお客様の声、CTA、FAQ、フッターまで揃っています。パソコンだけでなく、375px幅のスマートフォン表示も検品対象に入っています。

制作会社の中で作られた主な成果物は、次の6種類です。

1. 制作ブリーフ
2. LP構成案
3. コピー原稿
4. デザイン仕様
5. HTMLで実装されたLP
6. 検品・修正結果

ここが大事なんですよ。AIに「カフェのLPを作って」と一言だけ頼み、いきなりHTMLを出させたわけではありません。最初に顧客像と価値を決め、構成を作り、文章とデザインを別々に考え、実装し、最後に別の役割が検品しています。

通常のWeb制作でも、いきなりコーディングから始めることはありません。目的やターゲットが曖昧なままでは、見た目がきれいでも成果につながりにくいからです。今回のClaude Code Web制作では、その当たり前の工程をファイルと役割に分解したことで、「AIが何を根拠に作ったのか」を後から確認できました。

それでも、企画のたたき台を作る速度としては十分に驚きがありました。そして、速さよりも「戻れること」「直せること」「説明できること」の方が、仕事で使ううえでは重要だと感じました。

Claude Codeの中にWeb制作会社を作るとは、どういうことか

Claude Codeは、Anthropicが提供するエージェント型のコーディングツールです。Anthropicの公式案内では、Claude Codeはファイルを読み、コマンドを実行し、複数ファイルを編集しながらタスクを完了させるエージェントとして説明されています。単に質問へ答えるチャットではなく、作業フォルダの中で成果物を作っていくところが特徴です。

今回作った「Web制作会社」は、Claude Codeの標準画面に最初から存在する機能ではありません。私たちが用意した制作パイプラインと3Dオフィス画面を組み合わせた独自のデモ環境です。Claude Codeを土台に、役割、工程、成果物、検品条件を決め、それを会社のように見える形へ落とし込みました。

画面に登場した主な担当は、次の7役です。

• PM「段取 八分」：案件の進行と完了管理
• ディレクター「骨組 太志」：LP全体の構成
• コピーライター「一筆 入魂」：見出しと本文
• デザイナー「行間 澄」：色、文字、余白、レスポンシブ方針
• コーダー「組立 直」：LP初版の実装
• コーダー「組立 賢」：見た目と使いやすさの改善
• レビュアー「検品 鋭」：表示、アクセシビリティ、架空表示の検品

ほかに、オフィス内で雑談する「定時 帰還」と「休憩 望」もいます。ただし、この2人は成果物を作る担当ではなく、制作現場らしい空気をつくる賑やかし社員です。「そろそろ定時では？」「休憩室の豆だけは妥協しないでほしいです」といった会話を挟みます。

こういう遊びが必要なのか、と思う方もいるかもしれません。でも、私はかなり意味があると思っています。黒いターミナル画面で処理が進むだけだと、非エンジニアには何が起きているのか分かりにくいじゃないですか。誰が着席し、誰が作業中で、どの成果物が更新されたかを見えるようにすると、AIの処理が「仕事の流れ」として理解しやすくなります。

受注直後。PMが着席し、右側の成果物欄はまだ空です。

最初に決めたのは、デザインではなく「誰に何を届けるか」

今回、私が入力した条件はシンプルでした。題材は架空のカフェ。対象は、落ち着いた空間と、こだわりのコーヒーを求める20〜40代。主な価値は「丁寧に淹れたコーヒーと、日常を離れてくつろげる洗練された空間」です。

制作開始前に確認した発注条件。ここで対象顧客、価値、トーンを固定しました。

この区別は、とても重要です。生成AIは、それらしい店名や実績、口コミを作るのが得意です。でも、それを実在企業のLPへ事実のように載せると問題になります。そこで、今回の制作パイプラインには次の条件を最初から入れました。

• 実在企業・実在店舗・実在顧客を示唆しない
• 架空のお客様の声には、デモ用であることを明記する
• 予約、購入、外部サイトへの誘導を設けない
• フッターに架空LPであることを固定表示する
• 未確認の実績や数値を載せない

完成LPのフッターには、「本ページはAIデモンストレーションで生成した架空のLPです」と表示されています。架空のお客様の声の直後にも、AIデモ用の内容であることを示す注記を置きました。

生成AIを業務に使うとき、派手な生成結果ばかりに目が行きがちです。ただ、実務では「何を作らないか」の方が重要なことがあります。実績を捏造しない。許可のないロゴを載せない。予約できないのに予約ボタンを置かない。AI制作会社の設計とは、社員の人数を増やすことではなく、こうした判断基準を先に決めることなんです。

受注から納品へ。AI社員が成果物を受け渡していく

案件が始まると、最初にPMが受注を記録しました。18時2分34秒です。その後、PMが制作ブリーフを作り、ディレクターが構成案へ進みました。

制作ブリーフには、案件名、対象顧客、訴求価値、トーンだけでなく、制作上の注意も入っています。CTAは「席を予約する」ではなく、「メニューを見る」「空間を知る」といったページ内で完結する案内型にする。実在店のように誤認させない。深いグリーンと木質感を基調にする。短いファイルですが、その後の判断を揃える基準になりました。

完成した制作ブリーフ。見た目の指示だけでなく、誤認を防ぐルールも含まれています。

次にディレクターが、LPを7つの役割へ分解しました。

1. ヘッダー
2. ヒーロー
3. 課題提起
4. 解決策・特徴紹介
5. 社会的証明
6. CTA
7. FAQとフッター

各セクションの「目的」まで書かれた構成案。単なる見出し一覧ではありません。

ここで面白いのは、各セクションに目的が書かれていることです。たとえばヒーローは、「コーヒーと空間が生む、日常から少し離れる時間を一文で印象づける」。課題提起は、「20〜40代が日常で感じる慌ただしさを言語化し、静かに過ごせる場所を求める気持ちへ接続する」と定義されました。

Webページは、パーツを並べれば完成するわけではありません。誰の、どんな気持ちを、次のどんな行動へつなげるのか。それを各セクションで設計する必要があります。Claude Code Web制作で役割分担をさせる意味は、この意図を中間成果物として残せることにあります。

コピーとデザインを並行し、その後に2人のコーダーが引き継ぐ

構成案ができると、コピーライターとデザイナーがそれぞれ作業を始めました。イベント記録では、コピー制作が18時9分33秒、デザイン制作が18時9分41秒に始まっています。この2工程は並行して処理する設計です。

中央の社員ラベルに「作業中」と表示され、左下のログには成果物更新が追加されていきます。

コピーライターが付けたカフェ名は「MORI NO MA」。キャッチコピーは「静けさに、香りをひとつ。」です。ヒーローには「一杯のコーヒーから、静かな余白へ。」という見出しが置かれました。

見出しだけでなく、各セクションの本文、CTA、FAQ、注意書きまで作成されています。

私は、このコピーが意外と良かったんですよ。「高品質なコーヒー」「最高の空間」のような強い言葉で押すのではなく、待つこと、光を眺めること、呼吸できることを価値として表現しています。発注時に指定した「おしゃれで落ち着いた雰囲気」が、言葉の速度に反映されていました。

一方、デザイナーは、洗練されたグリーン、コーヒーブラウン、生成りを中心にした配色を設計しました。色だけではありません。本文の行間を1.75にする、見出しだけに字詰めを使う、本文は純黒を避ける、タップ領域は44px以上にするなど、日本語の読みやすさとアクセシビリティも仕様へ落とし込んでいます。

色、文字、余白、コントラスト、モバイル表示まで定義したデザイン仕様。

その後、1人目のコーダーが構成、コピー、デザイン仕様を読み、外部依存のないHTMLを新規実装しました。続いて2人目のコーダーが、初版を読み、視覚品質、アクセシビリティ、モバイル表示を改善しました。

コピー、デザイン、コーディングの担当が動く制作工程。画面の会話は演出ですが、成果物更新は実際のファイルと連動しています。

ここも、単に「AIを2回使った」のとは違います。1人目は、まず動くものを作る役割。2人目は、既存の構造を維持しながら磨く役割です。同じAIであっても、目的と禁止事項を分けることで、初版作成と改善を混ぜないようにしています。

実装されたLPは、CSSを内包した1枚のHTMLでできています。JavaScriptや外部の画像、ライブラリに依存せず、カップと湯気のビジュアルもCSSを中心に表現されています。写真素材がなくても、世界観を壊さずにLPを成立させる方向が選ばれました。

18時15分34秒、1人目のコーダーによる初版LPが成果物として追加された時点。ここから2人目のコーダーへ引き継ぎます。

自動カメラで「今、誰が仕事を引き継いだか」を見せる

初版ができた41秒後の18時16分15秒、2人目のコーダーが改善作業を始めました。その直後に撮影したのが、次のクローズアップ画面です。

18時16分19秒。右上は「自動カメラ: ON」、工程は「③制作」。カメラが制作フロアへ寄り、担当交代後の作業場所を大きく映しています。

この自動カメラには、全体俯瞰の「OVERVIEW」と、作業・発話した担当へ寄る「FOCUS」の2状態があります。担当者の作業イベントが起きると3〜6秒ほどクローズアップし、イベントが途切れると全景へ戻ります。工程が切り替わるときは一度ワイド画面を挟む設計です。

意図は、AIを人間のように見せることではありません。固定の俯瞰画面だけでは分かりにくい「今どの担当が動いているか」「成果物が誰から誰へ渡ったか」を、非エンジニアにも仕事の流れとして伝えることです。

もちろん、カメラが寄ったこと自体は仕事の品質を証明しません。品質の根拠になるのは、更新されたHTML、イベントログ、後段の検品結果です。クローズアップは、証拠を置き換えるものではなく、どの証拠へ注目すべきかを案内するナビゲーションとして使っています。

「完成しました」で終わらず、検品と修正を一周させた

AIで作ったLPの紹介では、完成画面だけが出てくることが多いですよね。でも、実務で怖いのは、きれいに見える画面の裏側に問題が残っていることです。

今回は、実装後にレビュアーが別工程で検品しました。確認対象には、次の項目が含まれます。

• 架空LPであることを示す固定文言
• 架空のお客様の声に対する注記
• モバイル表示と横スクロール
• 見出し階層とHTML構造
• CTAの数とリンク先
• 文字と背景のコントラスト
• キーボード操作時のフォーカス表示
• 動きを減らす端末設定への対応

工程表示が「④検収」に切り替わり、レビュアーが作業を開始。

初回レビューでは修正点が見つかり、2人目のコーダーへ戻されました。修正後、レビュアーが再度確認し、最終的に「STATUS: OK」と判定しています。最終記録には、前回のP1、P1、P2の指摘が解消されたと残っています。

具体的には、CTA上の文字色を本文用の色から分離し、背景色とのコントラストを4.744対1まで上げました。通常文字についてWCAG AAで目安とされる4.5対1以上を満たす値です。また、ヘッダーとフッターのリンク、CTAの操作領域を44px以上にし、375px幅で横スクロールが発生しないことも確認しました。

これは、AIが絶対に正しいという話ではありません。検品条件も、検査コードも、人間がどう設計したかに左右されます。今回の結果は、用意した検査範囲で合格したという意味です。それでも「初版が出たから終了」ではなく、レビュー結果を次の担当へ渡し、修正後に再検品する流れを持たせたことは、仕事として大きな違いでした。

完成したカフェLP「MORI NO MA」を見てみる

完成したLPは、深いグリーンと生成りを基調にした、静かな印象のページになりました。ファーストビューでは、「一杯のコーヒーから、静かな余白へ。」というコピーと、湯気の立つカップの抽象ビジュアルが並びます。

MORI NO MAの完成LP。上から下まで1枚にまとめたスクリーンショットです。

ページを見て、まず感じたのは「AIっぽい派手さが少ない」ことでした。強いグラデーション、巨大な数字、光るカードを並べるのではなく、余白、細い線、落ち着いた文章で世界観を作っています。これは、デザイナー役が先に仕様を作り、コーダーへ渡した効果だと思います。

もちろん、実在するカフェのLPとしては足りないものがあります。実物の写真、メニューと価格、住所、営業時間、運営者情報、地図、予約方法がありません。デモなので意図的に省いています。

でも、ブランドの方向性を相談するためのプロトタイプとしては、かなり具体的です。「落ち着いたカフェにしたい」という抽象的な話から、色、コピー、余白、CTA、FAQまで一気に見える状態になりました。経営者や担当者が完成イメージを共有するための最初の一案としては、十分に会話を前へ進められます。

納品時の画面では、ブリーフ、構成案、コピー、デザイン仕様、修正版LP、検品結果をそれぞれ開けるようになっています。完成物だけでなく、途中の判断も一緒に納品される構成です。

18時27分、制作完了。担当者の成果物と検品結果が揃った状態です。

Web制作会社を「AI化」するなら、社員の数より工程を設計する

今回やってみて、私は大きな誤解に気づきました。「AI社員を増やせば、すごい会社になる」と考えがちなんですよ。でも、人数を増やすだけでは、同じような回答が大量に出てくるだけです。

1. 入力をそろえる

誰に、何を、どんなトーンで伝えるのか。最初の条件が曖昧なら、その後の担当が増えるほどズレも増えます。今回は制作ブリーフを全員の共通基準にしました。

2. 成果物の受け渡しを決める

コピーライターが直接HTMLを作るのではなく、コピー原稿を残す。デザイナーも感覚的な指示で終わらず、色や行間を仕様として残す。次の担当が読むファイルを決めることで、仕事のつながりが生まれます。

3. 作る役と疑う役を分ける

制作担当は、自分の成果物を良いと思いがちです。これは人間もAIも同じです。だから、レビュアーを別にし、固定文言、コントラスト、モバイル表示などを具体的な項目で確認させました。

4. 終了条件を決める

「いい感じになるまで」では終わりません。レビュー結果の最終行が「STATUS: OK」なら完了、修正が必要なら最大2周まで戻す。止めどころを決めることで、AIが延々と調整を続けるのを防いでいます。

Claude Codeは、2025年5月に一般提供が始まり、ターミナル、IDE、バックグラウンド処理などへ利用範囲を広げてきました。Anthropic自身も、Claude Codeを開発工程へ組み込むエージェント型ツールとして案内しています。ただし、「Web制作会社としてどう働かせるか」は利用者側の設計です。

カンマンでは以前から、AIを使いこなせないWeb制作会社の未来について発信してきました。今回の実験は、その次の段階です。個人がAIツールを使うだけでなく、会社の制作工程そのものをAIと人間の協働前提で組み直す。そのとき、何が必要かを目に見える形で試しました。

「人間はいらなくなる」は、今回の結論ではない

25分でLPができた、と聞くと、「もうWeb制作会社はいらないのでは」と思うかもしれません。でも、私は逆の感想を持ちました。人間の仕事は減るというより、作業から判断へ移るんです。

今回、人間が決めたことは少なくありません。

• デモモードで実行する
• 題材を架空カフェにする
• 対象顧客と訴求価値を決める
• 実在企業のように誤認させない
• お客様の声へ注記を入れる
• 検品条件と終了条件を設定する
• 完成物を公開せず、まず確認する

AIは、条件が決まった後の展開が速いです。一方で、「本当にこのターゲットでよいか」「この店らしさは何か」「この表現を社会へ出してよいか」は、ファイルを生成するだけでは決められません。

実在案件なら、さらに取材、写真選定、競合調査、商標確認、プライバシー対応、アクセス解析、公開後の改善が必要です。売上や問い合わせにつながるかどうかも、公開後のデータを見なければ分かりません。完成画面があることと、事業成果が出ることは別です。

また、今回の3Dオフィスは分かりやすさのための演出を含みます。最初に掲載した全景画像は、画面構成を紹介するためのデモ表示です。そこから後の受注、制作、検収、納品のスクリーンショットと16倍速動画は、実際にカフェLPのタスクを処理している最中に記録しました。画面上の社員は人間ではなく、役割ごとに設定されたAIエージェントで、雑談はあらかじめ用意した候補から表示されます。一方、ブリーフ、構成、コピー、デザイン、HTML、レビュー結果は、その実行中に実際に生成・更新されたファイルです。

ここを混ぜて話すと、AI活用が急に怪しく見えます。だからこそ、「どこまでが演出で、どこからが成果物か」を明示する必要があります。

徳島の中小企業で使うなら、まず1業務だけ会社化してみる

カンマンは徳島で、Web制作やWebマーケティング、AI活用支援に取り組んでいます。地方の中小企業では、一人が複数の仕事を兼ねていることが珍しくありません。専任のディレクター、コピーライター、デザイナーを常にそろえられる会社ばかりではないですよね。

だからといって、いきなり会社全体をAI化する必要はありません。まず、成果物と確認条件がはっきりしている1業務を選ぶのがおすすめです。

たとえば、次のような仕事です。

• 新商品の紹介ページのたたき台
• 採用ページの構成と質問項目
• セミナー告知LPの原稿とデザイン案
• 既存サイトの改善点チェック
• 毎月のアクセスレポートの下書き

その仕事を、受注、企画、制作、レビュー、納品へ分けます。そして、各工程で残すファイルと、人間が承認する場所を決めます。

Claude Codeを非エンジニアが使う方法も、入口としては参考になります。ただ、導入のゴールは「Claude Codeを操作できること」ではありません。自社の仕事が、誰の判断で、どんな順序で、どの品質まで進むのかを説明できる状態にすることです。

今回のClaude Code Web制作会社は、その考え方を見える形にしたものです。AIを魔法の箱として使わず、担当、ファイル、検品、承認に分解する。そうすると、非エンジニアでも「ここは任せられる」「ここは人が見る」と判断しやすくなります。

よくある質問

Claude CodeだけでWeb制作会社を作れますか？

Claude Codeは、ファイルの読み書きやコマンド実行をしながら制作工程を進められます。ただし、今回の3Dオフィス、社員の役割、成果物の受け渡し、検品条件は独自に設計したものです。Claude Codeを入れただけで、同じ会社画面や工程が自動的に現れるわけではありません。

Claude CodeでLP制作をすれば、そのまま公開できますか？

技術的にはHTMLを公開できる状態まで作れますが、実在案件では公開前に人間の確認が必要です。会社情報、商品情報、価格、写真、実績、顧客の声、法的表示、フォームの送信先などを一次情報と照合してください。今回も完成後に自動公開せず、ローカルで確認しています。

25分で実務用LPも完成しますか？

今回の約25分は、架空カフェを題材にしたデモの実行時間です。取材、写真撮影、顧客確認、サーバー設定、公開、効果測定は含みません。実務では、生成時間よりも、正しい情報を集め、関係者が確認し、公開後に改善する時間の方が大きくなります。

AI社員を増やすほど品質は上がりますか？

人数だけ増やしても品質は上がりません。役割の重複、成果物の受け渡し、判断基準、終了条件が曖昧だと、むしろ確認が増えます。少人数でも、制作とレビューを分け、次の担当が読むファイルを明確にする方が効果的です。

AI制作会社は、未来の話ではなく「工程を見直す道具」だった

今回、Claude Codeの中にWeb制作会社を作り、架空カフェのLPを発注してみました。約25分後、1枚のLPと、そこへ至るブリーフ、構成、コピー、デザイン仕様、検品結果が残りました。

画面の中でAI社員が動く様子は、見ていて楽しいです。

AIに仕事を任せるというと、人を減らす話になりがちです。私は、そうではないと思っています。人間が全部の作業を抱え込まず、本当に判断すべき場所へ集中するために、仕事を分解する。そのための鏡としてAIエージェントを使うんです。

まずは、自社の仕事を一つだけ選んでください。 そして、受注、企画、制作、確認、納品へ分けてみてください。誰が担当するかより先に、何を受け取り、何を残し、どこで人間が判断するかを決める。そこから、あなたの会社に合ったAI活用が始まります。

徳島の中小企業で「自社の業務をAIエージェント化してみたい」「Web制作やマーケティングの工程を見直したい」という方は、カンマンへご相談ください。いきなり全社導入ではなく、まず一つの業務から、一緒に設計していきましょう。

参考資料

• Claude CodeユーザーFAQ（Anthropic公式）
• Introducing Claude 4：Claude Codeの一般提供について（Anthropic公式）
• AIを使いこなせないWEB制作会社の未来（株式会社カンマン）
• 非エンジニアがClaude Codeを使う場合はデスクトップアプリを使うべし（株式会社カンマン）