ChatGPT や Claude に「ホームページを作って」と頼めば、それっぽいサイトはすぐ出てきます。私たち Techt は普段から、ChatGPT と並ぶ対話型 AI「Claude（クロード）」に指示して、HTML / CSS のコードごと生成させる方式で、実際にお客様の本番サイトを制作しています。

だからこそ、現場の実感としてはっきり言えます。AI で「作る」ことはできます。でも、その作り方では問い合わせは増えません。ネットでよく紹介される「情報整理 → プロンプト → 生成 → 公開」だけの手順は、プロが必ずやる"ある工程"を丸ごと飛ばしているからです。

その工程が「検索される設計」——AI に作らせる前に、実際に検索されているキーワードから、ページ構成と見出しを設計することです。この記事では、ありきたりな手順の落とし穴と、私たちが実際に回している「成果が出る AI 制作の流れ」を、プロンプトの実演を交えて正直に解説します。

この記事で分かること

  • ネットでよく見る「AI制作手順」が成果につながらない理由
  • プロが実際にやる、成果が出るAI制作の5つの流れ
  • カギになる「検索される設計」（AIに作らせる前にやること）
  • 設計をAIに渡して実装させるプロンプトの型（実演）
  • ChatGPTとClaude、どちらで作るとよいか

ネットでよく見る「ありきたりなAI制作手順」の落とし穴

「ChatGPT ホームページ 作り方」で検索すると、たいてい次のような手順が出てきます。

  • ① 載せたい情報を整理する
  • ② AI に「サイトを作って」とプロンプトを入れる
  • ③ 出てきたコードを公開する

この手順は間違ってはいません。でも、これだけで作ったサイトは、見た目は整っていても問い合わせが来ません。私たちは AI で作られたこの手のサイトを数多く見てきましたが、共通点は「誰が・何で検索したときに見つかるかがまったく設計されていない」ことです。

ホームページは、作って終わりではなく「検索から見つけてもらって、問い合わせにつなげる」ためのものです。その入口（どう検索されるか）の設計を飛ばすと、いくらきれいでも、誰にも届かないサイトになります。ここがプロと素人を分ける一番の差です。

プロが実際にやる、成果が出るAI制作の流れ（5ステップ）

ここからが本題です。私たち Techt が、お客様の本番サイトを実際に作るときの流れを公開します。AI が登場するのは、実は3 番目です。

Step 1【AIに作らせる"前"】検索される設計

最初にやるのは、デザインでもプロンプトでもなく「検索される設計」です。具体的には、

  • 実際に検索されているキーワードを調べる（私たちは専用の検索データ分析ツールを使い、見込み客が実際に打ち込んでいる言葉とその検索回数を取得します）
  • 狙うキーワードを絞る（「自社の事業に合うか」「検索ボリューム」「競合の強さ」の3点で評価し、勝てて・かつ依頼につながる言葉に絞ります）
  • キーワードから逆算して、ページ構成と見出し（h1/h2）を決める（"作りたいページ"ではなく"検索される言葉"を起点に、トップページと各ページの見出しを設計します）

ここが素人の作り方と決定的に違う部分です。多くの人は AI に「構成も考えて」と丸投げしますが、AI は「世の中の平均的な構成」しか出せません。検索データから逆算した設計は、人とデータでしか作れません。

Step 2 Googleに正しく読ませる設計

次に、Step 1 で決めた見出しを、Google に正しく伝わる形に落とし込みます。具体的には、ページごとの title・h1・h2 の構造、意味のある URL、構造化データ（schema.org の JSON-LD）、関連ページをつなぐ内部リンクを設計します。この設計図があって初めて、AI に「実装させる」準備が整います。

Step 3【ここで初めてAI】設計図に沿って実装させる

Step 1〜2 の設計が固まって、ようやく AI の出番です。ポイントは「AI にゼロから考えさせる」のではなく「人が作った設計図を AI に実装させる」こと。だから出力の質が安定します。実際に使えるプロンプトの型を見せます。

プロンプト例（決めた設計を渡して実装させる）

あなたはWeb制作のエンジニアです。次の「ページ設計」をもとに、トップページのHTMLとCSSを書いてください。設計の見出し構成は変えないでください。 ・事業内容：（例）東京都江東区の電気工事会社 ・狙うキーワード：江東区 電気工事 ／ コンセント増設 江東区 ・見出し設計（H2を上から）： 　①即日対応エリアと料金の目安 　②対応できる工事一覧 　③施工事例 　④有資格者紹介 　⑤お客様の声 　⑥よくあるご質問 　⑦電話・LINEで相談 ・トーン：清潔感のある青系。信頼感を重視し、派手にしすぎない ・スマホでも崩れないレスポンシブ対応／1ファイルで動く形にする ・まずは「ファーストビュー」のセクションだけ書いてください

「見出し構成は変えないでください」と縛るのがコツです。設計を AI に勝手に変えさせない。そして「まずはこのセクションだけ」とスコープを絞ると、崩れにくく修正もしやすくなります。出てきたコードは「このボタンを大きく」「余白を広げて」と日本語で直せます。

出力後は、AI が書いた文章に事実誤認がないか人が必ず確認します。AI は「お客様満足度98%」「施工実績5,000件」のような実在しない数字をそれらしく書くことがある（ハルシネーション）ので、事業情報は実態と照合してください。

Step 4 成果を測る設計（公開前に仕込む）

公開してから「効果があったか分からない」では意味がありません。公開前に、何をもって成果とするか（問い合わせ送信・LINE 登録・予約完了など）を決め、GA4・Google Search Console などの計測を実装します。これで「どのページが・どの検索で・どれだけ問い合わせを生んだか」が後から分かるようになります。

Step 5 公開後、数字を見て改善する

公開して終わりではありません。月次で検索データを見て、「狙ったキーワードで表示が出始めたか（当たり）」「3ヶ月たっても反応がないか（外れ）」「狙っていない言葉で流入していないか（想定外）」を判定し、次の打ち手を決めます。特に"想定外"の流入を拾って記事やセクションを足すのが、伸びるサイトの共通点です。

差がつくのは「AIに作らせる前」と「公開した後」

AI が活躍するのは Step 3 の「実装」だけです。成果を分けるのは、その前の「検索される設計」と、後の「数字を見た改善」——どちらも人の仕事です。AI は速い"手"であって、何を作るかの"頭"ではありません。ここを取り違えると、きれいなだけのサイトが量産されます。

つまずきポイント（自分で作るとき）

自分で AI を使って作る場合に、引っかかりやすいポイントを先にお伝えします。

  • 出てきたコードの公開方法：AI が書いた HTML / CSS は、そのままではネット上に表示されません。独自ドメインを取得し、サーバー（レンタルサーバーや Netlify・Vercel 等）に設置して初めて公開されます。「作る」とは別の知識が要ります。
  • 画像：AI はテキストとコードは出しますが、写真は用意してくれません。自社の写真やライセンスの問題ない素材を別途準備します。
  • 事実誤認（ハルシネーション）：AI が補った実績・数字は人が必ず確認します。誤情報の掲載は信頼を一気に失います。
  • 機密情報を入力しない：未公開の顧客情報・社外秘の事業計画・パスワードなどは外部の AI に入力しないこと。入力内容が学習に使われる可能性があります。AI に渡すのは「公開予定の情報」だけにとどめてください。

ChatGPTとClaude、どっちがいい？

どちらでもホームページは作れます。所感としては、文章のニュアンスや長めの構成づくり・コード生成では Claude が扱いやすい場面が多く（私たちが制作に使っているのも Claude です）、ChatGPT は利用者が多く情報や使い方が見つけやすい強みがあります。HP 制作に限れば大きな優劣はないので、使い慣れているほうで始めるのが現実的です。ツールごとの違いはAIホームページ作成ツールの比較も参考にしてください。

参考：Techtのやり方

Techt は、ここで書いた流れ——検索される設計（人）→ Google に正しく読ませる設計（人）→ AI で実装（Claude）→ 成果を測る設計 → 公開後の改善——をそのまま業務として回しています。だから、こう言い切れます。「作る手」は AI で速くする。でも「検索される設計」と「戦略」は人が持つ。

  • 検索される設計を標準実装：実際に検索されるキーワードから、ページ構成と見出しを設計します。後付けの SEO ではなく、最初から検索に向けて作ります。
  • 戦略は人が担当：「何を・誰に・どう届けるか」をプロのコンサルタントと言語化。刺さらないと判断したら「このまま作っても刺さりません」と正直にお伝えします。
  • 制作は AI で高速化：実装を AI で効率化し、買い切り 5 万円〜・最短 1 週間を実現しています。

「自分で AI で作ってみたけど成果につながらない」「検索される設計から相談したい」という方は、HP 制作代行サービスのご案内をご覧ください。検索される設計の考え方は検索される設計で、AI 制作の全体像はAIでホームページ制作は本当にできる？で詳しく説明しています。

よくある質問

ChatGPTでホームページは作れますか？

はい、作れます。ChatGPT に「こういうサイトを作って」と指示すれば、HTML / CSS のコードごと出力してくれます。文章・デザイン・レイアウトの叩き台も一度に作れるので、ゼロから手で組むより圧倒的に速いです。私たち Techt も、ChatGPT と並ぶ対話型 AI「Claude（クロード）」に指示して本番サイトを制作しています。ただし、出力されたコードを公開できる形に整える知識は別途必要で、何より「誰に何を伝えるか」の構成を人が先に決めないと、テンプレ感の強いサイトになります。

AIで作ったホームページはSEOに弱いですか？

「AI で作ったから弱い」のではなく「検索される設計をしていないから弱い」が正確です。どのキーワードで・誰に向けて・どんな見出し構成で作るかは、AI ではなく人が検索データから逆算して設計する必要があります。逆に、検索される設計を人が用意した上で AI に実装させれば、AI 制作でも検索に強いサイトは作れます。私たち Techt は、実際に検索されているキーワードからページ構成と見出しを設計してから AI で実装しています。

ChatGPTでHPを作るプロンプトのコツは？

いきなり「かっこいいサイトを作って」と頼まないことが最大のコツです。先に「誰向けの、何を伝えるサイトか」「載せたいサービス・実績・写真」を整理し、まずページ構成（見出し）だけを作らせます。構成が固まってから、デザインと HTML / CSS を出力させる——この順番で頼むと質が大きく変わります。情報を具体的に渡すほど出力は良くなり、抽象的な指示ほどテンプレ感が強くなります。

ClaudeとChatGPT、HP制作はどっちがいいですか？

結論から言うと、どちらでもホームページは作れます。所感としては、文章のニュアンスや長めの構成づくり・コード生成では Claude が扱いやすいと感じる場面が多く、ChatGPT は利用者が多く情報や連携サービスが豊富という強みがあります。HP 制作に限れば大きな優劣はないので、すでに使い慣れているほうで始めるのが現実的です。私たち Techt は Claude を使って制作していますが、これは制作フローへの馴染みやすさで選んだものです。

AIが出力したコードはどうやって公開しますか？

AI が出力した HTML / CSS は、そのままではインターネット上に表示されません。公開するには、独自ドメインを取得し、そのコードをサーバー（レンタルサーバーや Netlify・Vercel などのホスティング）に設置する必要があります。画像も別途用意してアップロードします。ここは「制作」とは別の知識が要る工程で、AI でサイトの中身は作れても、公開・運用まわりでつまずく方は少なくありません。

AIに入力してはいけない情報はありますか？

あります。未公開の顧客情報・個人情報、社外秘の事業計画や財務情報、パスワードや API キーなどの認証情報は、外部の AI サービスに入力しないのが原則です。多くの AI サービスは入力内容を学習や品質改善に使う可能性があるためです。HP 制作で AI に渡すのは「公開予定の情報（会社概要・サービス内容・公開してよい実績）」にとどめるのが安全です。

まとめ

  • ChatGPT・Claude でホームページは作れる。でも「情報整理→プロンプト→公開」だけでは問い合わせは来ない
  • プロは AI に作らせる"前"に「検索される設計」をやる。実際の検索キーワードから逆算して構成・見出しを決める
  • AI の出番は3番目の「実装」だけ。設計図を渡して実装させるから質が安定する（ゼロから考えさせない）
  • 公開前に成果を測る設計（GA4/GSC）、公開後は数字を見て改善。どちらも人の仕事
  • 事実確認（ハルシネーション）と機密情報を入力しないことは必ず守る

AI の登場で、ホームページのコードは「誰でも出せる」時代になりました。だからこそ差がつくのは、AI に作らせる前の「検索される設計」です。Techt は、その設計を人が持ち、実装を AI で速くすることで、成果の出るホームページを低コストで提供しています。まずは無料相談で、貴社に合う進め方を整理するところから始めてみてください。