← ブログ一覧へ Claude Code ホームページ制作

Claude Codeでホームページは作れる。ただし集客は別問題

Claude Codeでホームページ制作の改善優先順位を整理するAI分析画面

Claude Codeはホームページを「作る」ことはできる。しかし、BtoB企業の集客サイトとして「機能させる」には、制作後の運用設計が決定的に重要だ。コードを生成できることと、問い合わせが増えるサイトを育てることは、まったく別のプロジェクトである。

今週中の3行動: ①「誰が・何を・どう判断するか」を1枚の文書にまとめてからClaude Codeに指示を出す ②技術実装はClaude Codeに任せ、サービス説明・事例・FAQは自社の言葉で書く役割分担を決める ③公開日に更新担当者・更新頻度・GA4のコンバージョン設定を決め、3か月後の評価基準を設定する


Claude Codeでホームページ制作で現場に起きる課題と判断軸を整理した図

制作できることと集客できることは、まったく別の問題だ

Claude Codeは、自然言語でコードを生成・修正できるAIエンジニアリング環境だ。HTMLのマークアップ、CSSのスタイリング、JavaScriptのインタラクション、さらにReactやNext.jsを使ったモダンなサイト構築まで、技術的にはカバーできる。「5ページ程度のコーポレートサイトを作ってほしい」と指示すれば、動作するコードは出力される。

かつてのサイト制作は、ディレクターがヒアリングし、ライターがコンテンツを書き、デザイナーがデザインを作り、コーダーがコーディングする——3〜4人月の工数が標準だった。Claude Codeはその工程を、ある程度まで1つのAIが担える時代を実現しつつある。現状はSEO観点や更新のしやすさからWordPressが主流だが、自然言語で更新・改修を指示できるClaude Codeを使ったHP運用を選ぶユーザーは今後増えていくと私たちは見ている。

ただし、サイトが「完成した状態」と「集客できる状態」の間には、戦略・コンテンツ・継続運用という3つの層がある。Claude Codeが担うのは最初の技術実装層だけであり、残り2層は人間の判断と継続的な改善が必要になる。

2,400社以上のWebマーケティング支援実績を持つ私たちが、支援現場で見えた判断基準をもとに解説する。サイトは公開日が終点ではなくスタート地点にすぎない。


支援現場で繰り返し起きている失敗と、意外な発見

「AIで作ったのに問い合わせがゼロ」の構造

支援現場での実感をそのまま伝えると、こうなります。

Claude Codeや類似のAIコーディングツールでサイトを制作し、公開したものの、3か月後も問い合わせがゼロという状況が繰り返し起きている。原因を分解すると、ほぼ必ず同じ3点が重なっている。

この3点は、制作ツールの問題ではなく設計の問題だ。Claude Codeを使っていても、制作会社に外注していても、同じ構造で失敗する。

1点目は、検索意図とページ構成の不一致。 Claude Codeに「会社概要ページを作って」と指示すると、一般的な会社概要の構成は出力される。しかしBtoBの購買担当者が「この会社に頼んでいいか」を判断するために必要な情報——実績数・支援領域の具体性・担当者の顔——は、指示しなければ入らない。

2点目は、ページタイトルとmeta descriptionが自動生成のまま放置されていること。 AIが生成するデフォルトのmeta情報は検索意図に最適化されていないことが多い。「株式会社○○ | Home」というタイトルで検索上位を目指すのは現実的ではない。

3点目は、更新される前提の構造になっていないこと。 静的HTMLで納品されたサイトは、コンテンツを追加するたびにコードを触る必要がある。Web担当者が非エンジニアであれば、更新を外部委託するか更新を諦めるかの二択になる。ホームページ放置のデメリットと解決策で整理しているが、更新が止まったサイトは検索評価もCVRも時間とともに下がる一方だ。

Claude Codeが最も力を発揮するのは「制作」より「改修」だ

支援現場での実感をそのまま伝えると、こうなります。

Claude Codeの実力が最も発揮されるのは、ゼロからのサイト制作よりも既存サイトの部分改修やプロトタイプ検証の場面だ。

これは使い方の優先順位に直結する。「CTAボタンの位置を変えてABテストしたい」「スマートフォンのナビゲーションを改善したい」「問い合わせフォームに入力補助を追加したい」といった改修要件は、Claude Codeへの指示が具体的になりやすく、出力の品質も安定する。一方、ゼロからの制作では「何を作るか」の設計判断がすべて人間側に委ねられる。設計が曖昧なまま指示すると、技術的には正しいが集客に機能しないサイトが完成する。

「AI専門家依存」という新しいリスク

制作会社に依存していたホームページ運用が、AI専門家に変わるだけでは本質的なメリットは享受できない。Claude Codeを使った日々の運用やメンテナンスも含めて自社にAIの知見がないと、依存先が変わるだけで自社の主体性が失われる。

GA4・BigQuery・ヒートマップ分析を交えた改善サイクルを回すには、分析ツールを読んで判断できる人間が社内にいることが前提になる。工数は制作より運用の方が圧倒的に厚くなるべきであり、その運用を誰が担うかを制作前に決めておく必要がある。 ホームページ制作の目的と運用方針を明確にすることが、Claude Codeを使うかどうかの判断以前に、最も重要な問いになる。


Claude Codeでホームページ制作の実行手順と確認項目を整理したワークフロー

最初に判断すべき優先順位:制作アプローチを選ぶ前に運用方針を固める

BtoB企業がホームページを持つ・作り直す際の主な選択肢を整理する。

アプローチ初期費用の目安集客機能の立ち上がり更新のしやすさ向いているケース
Claude Codeで自社制作低(工数コストのみ)設計次第で大きく変わるコード知識が必要エンジニアが社内にいる・プロトタイプ検証
ノーコードツール(Wix等)低〜中テンプレート依存非エンジニアでも更新可スピード重視・小規模サイト
WordPress+制作会社外注中〜高制作会社の戦略力に依存CMS導入で改善可複数人管理・制作品質を担保したい
AutoHP(AI運用込み)月額運用型運用改善を継続的に実施担当者が対応制作後の集客改善まで一貫して任せたい

この表で見えてくるのは、「初期費用の低さ」と「集客機能の立ち上がり」はトレードオフになりやすいという現実だ。Claude Codeで制作コストを下げることは可能だが、集客設計・コンテンツ戦略・継続改善に投資しなければ、コストを下げた分だけ成果も下がる。

複数人でサイトを管理する体制であれば、現時点ではWordPressの方が運用しやすい側面もある。Claude Codeを選ぶかどうかは「制作のしやすさ」だけでなく、誰が・どのように・どの頻度で更新するかという運用方針を先に固めてから判断すべきだ。


Claude Codeで集客できるサイトを作る5ステップ

Step 1:最初の指示は「作って」ではなく「相談する」にする

Claude Codeへの最初の一手は、指示ではなく設計の対話から入る。 具体的な指示を出すと、AIは即座に実働を始める。その前に「どんなサイトにすべきか」「どんな構成が目的に合うか」を対話で詰める時間が必要だ。

Claude Codeはプロンプト工学・コード生成精度・マルチドメイン対応の観点で、おおよそ5年目相当の知識を全方位で持っている。その能力を設計フェーズで使い、全体構想を固めてから実装に入ることが最初のポイントになる。「BtoB製造業の購買担当者が競合3社と比較検討する際に、自社を選ぶ根拠を見つけられるサイト」のように、ターゲット・場面・判断軸を明文化した文書を最初に作り、それをClaude Codeに読み込ませてから制作を進める。

Step 2:ページ構成は人間が決め、コーディングをClaude Codeに任せる

「5ページのサイトを作って」ではなく、「トップ・サービス詳細・実績・採用・お問い合わせの5ページ構成で、各ページのH1とCTAを指定する」という形で指示する。構成の判断をAIに委ねると、検索意図から外れたページ設計になりやすい。BtoBホームページの問い合わせを増やす戦略でも解説しているが、BtoBサイトのCVRに最も影響するのはページ数よりも「検討段階に合ったCTAの設計」だ。

Step 3:技術SEOの実装はClaude Codeに任せる

技術SEOの実装はClaude Codeが得意な領域だ。 以下の要素を指示に含める。

  • 各ページのtitle・meta descriptionを変数で管理できる構造
  • 構造化データ(schema.org)の実装——FAQスキーマ・HowToスキーマなど、ページ内容に応じた具体例を指定する
  • Core Web Vitals(LCP・CLS・INP)に影響するコードの最適化
  • OGP・Twitterカードの設定
  • GEO(生成AI検索最適化)・LLMO(LLMからの引用・言及を最適化する施策)対応に必要なセマンティックHTML構造

これらは指示が具体的であるほど出力精度が上がる。「SEOに強いサイトにして」という曖昧な指示では、表面的な実装しか得られない。実装要件を箇条書きで渡すと、Claude Codeは確認なく実装まで進むため、事前に要件を書き出す習慣をつけることが重要だ。

2026年時点で、Claude Codeが生成するコードはセマンティックHTMLとメタデータの実装には対応できる。ただし、AI検索での引用対象になるには「正確な情報」「出典の明記」「定期的な更新」が前提になる。Claude Codeは技術的な構造は実装できるが、コンテンツの正確性と更新継続は人間の責任だ。

Step 4:コンテンツは自社の言葉で書く——70点の初稿からブラッシュアップする

サービス説明・実績・事例・FAQは、必ず自社の言葉で書く。 AIが生成する汎用的な文章は、BtoB購買担当者の「この会社は自分たちの課題を理解しているか」という判断をクリアできない。

支援現場での実感をそのまま伝えると、こうなります。

全体的に70点のホームページはClaude Codeで作れるが、そこから最後の仕上げは画像・構成・コンテンツ含めて作り込みが必要になる。これは人間による制作工程でも同じ構造だ。初稿から試行錯誤を重ねてブラッシュアップしていく。

「70点の初稿を出発点として、何を加えれば自社らしくなるか」を判断できる人間が社内にいることが、最終品質を決める。具体的な改善の方向性を示すと次のようになる。

  • タイトル:AIが生成した「サービス概要」を「製造業向けの課題解決実績」に変更すると検索流入が変わる
  • 画像:AIが生成した汎用イメージから、実際の導入現場の写真に差し替える
  • CTA:各ページの終わりに「お問い合わせ」を置くのではなく、検討段階に合わせて「資料ダウンロード」「無料相談」を使い分ける
  • 業界用語:AIが生成した一般的な表現を、顧客が実際に使う業界用語に修正する

抽象的な指示で「そこそこのもの」が出てきたとき、そこで諦めるか磨き続けるかが分岐点になる。

Step 5:公開後の計測と更新フローを公開前に設計する

公開日に更新フローが決まっていないサイトは、3か月後に放置される。 更新担当者・更新頻度・更新内容のカテゴリ(ブログ/実績/採用情報など)を公開前に決め、Claude Codeで作るサイトにはCMSまたは編集しやすい構造を組み込む。

計測の設計も同時に行う。GA4のコンバージョン設定・ヒートマップツールの導入・BigQueryとの連携など、分析基盤がなければ「何を改善すべきか」が永遠にわからないまま運用が止まる。中小企業のホームページ改善で成果を出す手順で整理しているが、計測できていないサイトは改善の優先順位が決まらず、担当者の「感覚」だけで動き続けることになる。

「3か月後に何の数値で成否を判断するか」を公開前に決めておくことが、運用を継続させる唯一の構造的な担保だ。


支援現場で見えているのは、Claude Codeの問題はコード品質ではなく、集客設計の不在と運用継続の仕組みから直すべきだということです。


現状のサイトに何が足りないかを確認する

「Claude Codeで作ったサイトが集客できているか」「今のサイトに何が足りないか」を整理したいなら、AutoHPの無料AI運用診断が一つの選択肢になる。現状のサイト構造・コンテンツ・CVRの課題を診断し、優先して取り組むべき改善点を提示している。社内で改善方針を決める前の情報整理として活用してほしい。


次に読むべき記事

Claude Codeによる制作を検討している場合も、既存サイトの改善を考えている場合も、「サイトを作ること」と「サイトで集客すること」は別のプロジェクトとして設計する必要がある。以下の記事で、それぞれの論点を深掘りしている。


よくある質問(FAQ)

Q. Claude Codeを使えばエンジニアなしでホームページが作れますか?

簡単なランディングページや静的サイトであれば制作できる可能性はある。ただし、出力されたコードのデバッグ・サーバー設定・ドメイン管理には最低限の技術知識が必要になる。「コードが書ける」と「サイトを公開・運用できる」は別のスキルセットだ。

Q. Claude CodeはWordPressサイトの制作にも使えますか?

PHPテンプレートやCSSのカスタマイズ、プラグインの動作修正には活用できる。ただし、複数人でサイトを管理する体制であれば、現時点ではWordPressの方が運用しやすい側面もある。目的と運用方針を先に決めてから選択すべきだ。

Q. Claude Codeで作ったサイトはSEOに不利ですか?

コードの品質自体はSEOに中立だ。問題になるのはtitle・meta・構造化データの設定漏れや、ページ読み込み速度の最適化不足。これらはClaude Codeへの指示を具体化することで改善できる。GEO・LLMO対応も、構造化データと明確なコンテンツ設計が前提になる。

Q. 制作後の運用改善をAIで自動化できますか?

コンテンツの更新提案・ABテストの仮説生成・アクセス解析のサマリー作成にはAIを活用できる。ただし「何を改善すべきか」の判断と「改善した結果を評価する」プロセスには業界・ビジネスモデルの文脈理解が必要で、完全自動化は現時点では難しい。

Q. AutoHPはClaude Codeで制作したサイトにも対応していますか?

既存サイトの構造・コンテンツ・CVRを診断し、改善提案を行うサービスのため、制作手法を問わず対応できる。まず無料AI運用診断で現状を確認することを勧めている。

Q. Claude CodeはGEO・LLMO対応に向いていますか?

セマンティックHTMLと構造化データ(FAQスキーマ・HowToスキーマ)の実装はClaude Codeで対応できる。ただし、AI検索での引用対象になるには「正確な情報」「出典の明記」「定期的な更新」が前提になり、これらは人間の責任だ。技術的な基盤は整えられるが、コンテンツの質と更新継続がなければ引用されない。


現状のサイトに問題があるかどうかを確認したい場合は、AutoHPの無料AI運用診断を活用してほしい。サイト構造・コンテンツ・CVRの課題を整理し、優先して取り組む改善点を提示する。制作から運用改善まで一貫した支援を検討している場合は、資料ダウンロードまたは無料相談から現状をお聞かせいただきたい。


監修:長橋 真吾(デジタルアスリート株式会社 代表取締役)
Webマーケティング支援2,400社以上・15年の実績を持つデジタルアスリートの代表。
YouTubeでマーケティング×AIの実践情報を発信中。
YouTube X 会社概要

※本記事の実績数値等はデジタルアスリート株式会社の社内集計値(2026年7月時点)です。数値を伴う事例は、特に明記がない限り匿名加工された実例に基づきます。

関連ガイド

ホームページ運用をAIで回す全体像は、ホームページのAI運用 完全ガイドで整理しています。分析、改善案、実装、検証を一つの運用ループとして見直したい場合は、先に全体設計を確認してください。