AIホームページ作成5ステップ｜ツール選びとプロンプト例

AIでホームページを作ってみたけれど、それらしい見た目にはなるのに「自社のサイト」にならない。そんな手詰まりで検索された方が多いはずです。この記事では、AIホームページ作成の具体的な手順を5ステップに分けて、ツールの選び方・AIに渡すプロンプト例・公開前のチェックリストまで一気にお伝えします。

想定している読者は、社員数が数名〜数十名の会社で、広報や営業を兼任しながら自社サイトを作り直したい方です。読み終わる頃には、今日どのツールを触り始めて、AIに何を渡し、どこを自分の目で直せばいいかが決まった状態を目指します。

なお、ドメイン取得やレンタルサーバー契約といった手前の準備は本記事では扱いません。そこから知りたい方はホームページの自作は初心者でも可能｜手順とツール選びで失敗回避を先に読んでいただくと、この記事の内容がそのまま続きになります。

Contents / 目次

1. 結論。AIでホームページを作るときにやることは3つだけ
2. AIホームページ作成ツールのおすすめの選び方。4つの判断軸
3. AIでホームページを作る手順。5ステップとプロンプト例
4. AIで作ると何が変わるか。効果の見立て方
5. よくある失敗と回避法。現場で見かける3パターン
6. 使う側の本音。AIで作れる範囲と、任せた方が早い範囲
7. AIホームページ作成のよくある質問
8. まずは今日、A4一枚から始めてみてください

結論。AIでホームページを作るときにやることは3つだけ

AIでホームページを作る作業は、突き詰めると3つに分解できます。材料をそろえる、AIに形にさせる、事実とデザインを人が直す。この3つです。順番も、この通りにやるのが一番早く終わります。

多くの方がつまずくのは1つ目です。ツール選びから入ってしまい、AIに「建設会社のホームページを作って」とだけ頼む。すると、どの会社でも通用する当たり障りのないサイトが出てきます。AIは材料がなければ、平均的なものしか作れません。

ここでいう材料とは、次のようなものです。

• 誰に何を売っているか
• 他社と何が違うか
• 実績や取引先
• 料金の考え方
• 現場の写真
• 問い合わせ後の流れ

これらはAIの中には存在せず、あなたの会社の中にしかありません。

ポイント。AI生成サイトの品質は、プロンプトの上手さより「渡した材料の量と具体さ」でほぼ決まります。凝った指示文を書く前に、A4一枚分の情報を集める方が効きます。

AIホームページ作成ツールは3タイプ。まず自分がどれを使うか決める

AIでサイトを作るツールは、使い方の違いで大きく3タイプに分けて考えると整理しやすくなります。以下は筆者が制作の現場で使い分けている整理の仕方で、公式の分類ではありません。得意な範囲と後から困る点が違うので、最初にどれで進めるかを決めてしまうのが失敗を減らすコツです。

タイプ	作り方	向いている会社	後で困りやすい点
対話型ノーコード	用意された質問に答えていくと、ページの構成や下書きが用意される形式	とにかく早く公開したい。社内に触れる人が1人しかいない	細かいデザイン調整の自由度に上限がある
プロンプト型ノーコード	指示文を書いて画面を組み立てていく形式	見た目にこだわりたい。ブランドの世界観を出したい	操作の学習に時間がかかる。担当が辞めると止まる
AIコーディング	エディタやコマンドライン上で、HTML・CSS・JavaScriptなどのコードをAIに書かせる	WordPressを使い続けたい。既存サイトの一部を作り替えたい	コードの管理と公開作業を誰かが担う必要がある

この3タイプは筆者の整理であり、どのサービスがどれに当てはまるか、また各ツールで何がどこまでできるかは、公式サイトやドキュメントで自分の目で確認してください。ツールの機能範囲は更新も頻繁です。

迷ったときの目安はシンプルです。次の2択で考えると、たいてい決まります。

• 今のサイトがWordPressで、そのまま使い続けたい：AIコーディング寄り
• 更新担当が非エンジニアで、まず公開までたどり着きたい：対話型ノーコード

なお、どのタイプにどのサービスが当てはまるか、無料プランの有無や機能の範囲は、サービスごとに違ううえ変更もあります。候補を絞ったら、契約前に必ず各社の公式サイトで最新の内容を確認してください。

AIホームページ作成ツールのおすすめの選び方。4つの判断軸

おすすめのツールを1つに絞ることはできません。判断軸が4つあり、会社によって重みが違うからです。逆に言えば、この4つを自社の状況に当てはめれば、候補は2つ程度まで絞れます。

• 更新するのは誰か：週1回でも自分で更新するなら、操作画面が日本語で完結するものを選ぶ。担当が変わっても引き継げるかが判断基準になる
• データを持ち出せるか：やめるときに文章・画像・ページ構成を書き出せるか。持ち出せないツールは、乗り換えのたびに作り直しになる
• 独自ドメインを使えるか：会社サイトなら必須。プランによって扱いが違うので、契約前に公式の料金ページで確認する
• 問い合わせフォームと計測を後から足せるか：フォーム、Googleアナリティクス、サーチコンソールを入れられないと、成果が測れないサイトになる

ai ホームページ作成 無料。どこまで無料で作れて、どこから有料か

無料プランで作れるのは「見た目の確認まで」と考えてください。何が使えて何が制限されるかはサービスごとに大きく違い、変更もあります。独自ドメインが使えるか、サービス側の表示が入るかといった点は、必ず各社の公式の料金ページで自分の目で確かめてください。

ただ、無料プランには大きな価値があります。お金を払う前に、そのツールの操作が自社に合うかを確かめられることです。3社くらいで同じ内容を作ってみて、一番ストレスなく触れたものを選ぶ。この使い方が一番賢いやり方です。

費用の考え方としては、無料で試す段階に1〜2週間、その後に独自ドメインと有料プランへ切り替え、という流れが現実的です。サーバー代・ドメイン代・ツール利用料は毎年かかる固定費なので、見た目の安さではなく「3年使っても納得できるか」で判断してください。

無料プランのサブドメインで公開したあと独自ドメインに移すとき、URLがどう変わるかはサービスによって違います。名刺やチラシに旧URLを印刷済みだと刷り直しになりかねないので、印刷物を作る前にドメインを決めておくと安全です。

ai ホームページ作成 wordpress。WordPressでAIを使う3つのやり方

WordPressを使い続けるなら、AIの使いどころは3つに分かれます。サイトを丸ごと自動生成させるのではなく、工程ごとに切り分けるのが現実的です。

1. 文章と構成をAIに書かせる。ページの見出し構成、会社紹介文、サービス説明、よくある質問の下書きをAIに作らせ、既存テーマの編集画面に貼り付ける。もっとも失敗が少ない使い方です
2. 部品のHTMLとCSSをAIに書かせる。料金表、実績一覧、問い合わせ導線などをAIにコードで書かせ、カスタムHTMLブロックに貼る。デザインの自由度が上がります
3. テーマやテンプレートの改修をAIに任せる。子テーマのファイル編集など、コードを直接触る作業。効果は大きい反面、バックアップと検証環境がないと事故になります

非エンジニアの方は、まず1と2だけで十分に成果が出ます。3に進むのは、テスト環境を用意できてからにしてください。WordPress自体の設定がまだ固まっていない場合は、WordPress初期設定の正しい順番と必須10項目を先に済ませておくと、後戻りが減ります。

AIでホームページを作る手順。5ステップとプロンプト例

ここからが本題です。使うツールが対話型でもAIコーディングでも、進め方の骨格は同じです。5つのステップに分けて、それぞれ「何を用意し、AIに何を渡し、出てきたものをどう直すか」を具体的に説明します。

ステップ1。AIに渡す材料をA4一枚にまとめる

最初にやるのは、ツールを開くことではなく材料集めです。下のシートを空欄なく埋めてください。ここが埋まっていれば、以降のステップは驚くほど速く進みます。

■ サイト設計シート（AIに渡す材料）

1. 会社名／事業内容（1行）
2. 誰に売っているか（業種・規模・地域・役職まで具体的に）
3. その人が抱えている困りごと（3つ）
4. 自社を選ぶ理由（他社と違う点を3つ。設備・体制・対応速度など事実で）
5. 実績（取引先の業種、対応件数、対応年数など出せる範囲で）
6. 料金の考え方（金額を出せないなら「見積り根拠」だけでも）
7. 問い合わせ後の流れ（初回連絡→ヒアリング→提案→着手 の日数感）
8. 使える写真・素材（現場写真、スタッフ写真、ロゴ、会社案内PDF）
9. サイトのゴール（問い合わせ／電話／資料請求のどれを一番増やしたいか）
10. NGワード・トーン（言い切りすぎない、堅すぎない、など）

3〜7が埋まらない会社は珍しくありません。その場合は営業担当に15分聞いてください。聞くのは次の3つです。

• お客さまが最初に聞いてくる質問
• 断られた理由
• 成約した決め手

この3つを聞き出すだけで、5と6はほぼ埋まります。

ステップ2。ページ構成をAIに作らせる（プロンプト例つき）

材料がそろったら、いきなり文章を書かせずに「ページ構成」から作らせます。全体像が決まる前に文章を作ると、後で並べ替えが発生して二度手間になるからです。

プロンプトは作り込む必要はありません。いまのAIは、ざっくり頼めば足りない情報を質問し返してくれます。次のような短いたたき台から始めて、あとは会話しながら詰めてください。

あなたは中小企業のWebサイト設計者です。
以下の「サイト設計シート」をもとに、コーポレートサイトのページ構成案を作ってください。

条件
・トップページの縦の並び（セクション順）と、下層ページの一覧
・各セクションで「訪問者のどの不安を消すか」を1行で添える
・問い合わせを増やすことを最優先にする
・不足している情報があれば、埋める前に私に質問してください

［ここにサイト設計シートを貼り付け］

出てきた構成案は、次の観点で人が見てください。トップページの上から3画面分に「何屋か・誰向けか・問い合わせ先」が入っているか。ここが抜けている構成案は、見た目が良くても問い合わせが増えません。

ステップ3。文章を書かせて、事実だけ人が書き換える

構成が固まったら、セクションごとに文章を書かせます。ここで守るルールは1つだけです。AIが書いた文章のうち、数字・固有名詞・実績・料金・資格・対応エリアは、必ず人が実際の値に書き換えること。

AIは「創業20年の実績」「対応件数1,000件超」といった、それらしい数字を平気で埋めてきます。悪意はなく、空欄を埋めようとしているだけです。しかし、そのまま公開すれば誇大表示になります。

作業の進め方は次の3つです。

• 色を付ける：原稿を上から読みながら、数字と固有名詞にマーカーを引いていく
• 裏を取る：色が付いた箇所を一つずつ、社内の資料で確認する
• 消す：裏が取れないものは削除する

ページ数と数字の多さで作業時間は大きく変わるので、まとまった時間を確保してから取りかかってください。

私たちが現場でお客さまに伝えているのは、「AIが作れるのは形まで。事実を入れるのは人の仕事」という一文です。ここを外注しても社内でやっても、誰かが必ず通らないといけない工程です。

なお、プライバシーポリシーや特定商取引法に基づく表記のような法務まわりのページも、AIの下書きは便利ですが、自社の実態に合わせる作業が必須です。進め方はプライバシーポリシーをAIで下書き｜中小企業サイトの整え方にまとめています。

ステップ4。デザインを整えて、問い合わせ導線を置く

デザインでAIに任せていいのは配色とレイアウトのたたき台まで、と考えてください。ロゴの色、写真、フォントの雰囲気は自社の資産なので、AIの提案をそのまま採用すると「どこかで見たサイト」になります。

指示の出し方としては、色を言葉で説明するより、ロゴの色コード（#から始まる6桁の値）と、参考にしたいサイトのURLを2〜3件渡す方が正確に伝わります。「落ち着いた感じで」だけでは、毎回違うものが出てきます。

問い合わせ導線は、AI任せにせず自分で配置してください。下のコードは、WordPressのカスタムHTMLブロックにそのまま貼れる問い合わせブロックです。角括弧の中を自社の内容に書き換えれば動きます。

ボタンは、指で押しやすいよう高さ44px以上を確保しています。スマホでの押しやすさは実機で必ず確かめてください。

<!-- 問い合わせ導線ブロック。WordPressの「カスタムHTML」ブロックにそのまま貼り付けて使えます -->
<!-- ［ ］の中を自社の内容に書き換えてください -->
<section class="cl-cta">
  <p class="cl-cta__title">［お客さまの困りごとを1行で。例 図面の管理に時間を取られていませんか］</p>
  <p class="cl-cta__lead">［誰に何を提供しているかを1〜2文。例 大分・福岡の建設会社さま向けに、現場写真の整理を自動化する仕組みをご提供しています］</p>
  <a class="cl-cta__btn" href="/contact/">まずは無料で相談する</a>
  <p class="cl-cta__note">お電話でも受け付けています（［電話番号］／平日9:00〜18:00）</p>
</section>

<style>
.cl-cta{
  /* 余白と背景色。背景色は自社のブランドカラーの薄い色に変更してください */
  background:#f5f3ef;
  border-radius:12px;
  padding:32px 24px;
  text-align:center;
  margin:40px 0;
}
.cl-cta__title{ font-size:1.25rem; font-weight:700; margin:0 0 12px; line-height:1.6; }
.cl-cta__lead{ font-size:1rem; margin:0 0 20px; line-height:1.9; }
.cl-cta__btn{
  /* ボタンの色。［#c0623c］を自社のアクセントカラーに変更してください */
  display:inline-block;
  background:#c0623c;
  color:#fff;
  text-decoration:none;
  font-weight:700;
  padding:16px 32px;
  border-radius:999px;
  /* スマホで押しやすいよう、高さは44px以上を確保しています */
  min-height:44px;
}
.cl-cta__note{ font-size:0.85rem; margin:16px 0 0; }
</style>

注意点が1つあります。リンク先の /contact/ は、自社の問い合わせページのURLに必ず書き換えてください。ここを直し忘れて、リンク切れのまま公開してしまう例をよく見かけます。

ステップ5。公開前チェックを9項目で行う

公開ボタンを押す前に、次の9項目を確認してください。AIで作ったサイトで問題が起きるのは、ほぼこの中のどれかです。印刷して、担当者以外の人にも見てもらうと精度が上がります。

• 数字と固有名詞：創業年、実績数、資格名、対応エリア、料金が実態と合っているか
• 会社情報：社名、住所、電話番号、代表者名が登記や名刺と一致しているか
• リンク切れ：すべてのボタンとメニューを実際に押して、正しいページに飛ぶか
• フォームの送信テスト：自分で送信し、自動返信メールと管理者宛メールの両方が届くか
• スマホ表示：自分のスマホで開き、文字がはみ出していないか、ボタンを押せるか
• 表示速度：写真が重すぎないか。大きすぎる画像は圧縮してから差し替える
• タイトルと説明文：各ページのタイトルが「サンプル」「無題」のまま残っていないか
• 画像の権利：AI生成画像やフリー素材の利用条件を確認したか。他社サイトからの転用がないか
• 計測タグ：Googleアナリティクスとサーチコンソールを入れたか

特に4番目のフォーム送信テストは飛ばさないでください。届かないまま何か月も気づかず、問い合わせを取りこぼしていた、という相談が本当に多いです。表示速度の測り方はCore Web Vitals改善｜表示速度を自分で測って直す3手順で解説しています。

AIで作ると何が変わるか。効果の見立て方

もっとも大きく変わるのは、公開までのスピードと、公開後に手を入れる回数です。材料がそろっていれば、下書きから公開できる形になるまでの時間は、これまでより大きく短くなります。

ただし、ここは正直に線を引いておきます。速く作れることと、問い合わせが増えることは別の話です。AIで作ったからといって、勝手にお客さまが来るわけではありません。

成果が出ている会社に共通しているのは、作って終わりにせず、公開後の改善を回している点です。具体的には、次のような動き方をしています。

• 月1回、数字を見る：どのページが見られ、どこで離脱しているかをアナリティクスで確認する
• 1か所ずつ直す：一度に全部変えず、見出しやボタンの文言を1か所ずつ変えて比べる
• お客さまの言葉を足す：営業や問い合わせで実際に聞かれた質問を、そのままFAQに追加していく
• 実績を増やす：納品事例を1件ずつ追加し、写真とお客さまの声を載せる

この改善作業こそ、AIがもっとも役に立つ場面です。たとえば次のような使い方があります。

• 文章の言い換え案を10パターン出す
• FAQの候補を洗い出す
• 既存ページの読みにくい箇所を指摘させる

こうした作業は、人が手を動かすと気が重くなりがちですが、AIに任せると心理的な負担がかなり軽くなります。

なお、AIで作ったサイトが検索で不利になることを心配される方が多いのですが、判断されるのは作り方ではなく中身です。人が足すべき要素についてはAIで作ったサイトがSEOで評価される｜人が足すE-E-A-T3要素で詳しくまとめています。

よくある失敗と回避法。現場で見かける3パターン

AIでのサイト制作で起きるトラブルは、だいたい決まっています。ここでは実際によく見かける3つを、起きる状況・どうなるか・防ぎ方の順で説明します。

失敗1。AIが埋めた数字をそのまま公開してしまう

起きる状況は、原稿チェックを見た目の確認だけで済ませたときです。文章が自然なので、書かれている内容も正しいと感じてしまいます。

結果として、実在しない実績や資格がサイトに載ります。お客さまから「この件数は本当ですか」と聞かれて発覚する、というのが典型的なパターンです。信用の問題なので、ダメージは小さくありません。

防ぎ方は単純です。公開前に、サイト内の数字をすべて一覧に書き出し、根拠資料と突き合わせてください。根拠が出せない数字は消す。この判断を最初に決めておくと、迷いません。

失敗2。AIに修正を頼み続けて、直したはずの箇所が壊れる

起きる状況は、「ここを直して」「もう少し良くして」といった曖昧な指示を繰り返したときです。特にAIコーディングで、まとまったコードを何度も書き換えさせると起こります。

すると、ヘッダーを直したはずなのにフッターの表示が崩れる、といった予期しない変化が積み重なります。どこから壊れたのか分からなくなり、最初から作り直すことになります。

防ぎ方は2つです。

• うまく表示できた時点のファイルを別名で保存しておく
• 指示を「どこを・どう変えるか」まで具体的にする

「見出しの文字サイズを1.5倍に、色は#333に」のように、変更範囲を限定して伝えてください。

失敗3。作った本人しか更新できないサイトになる

起きる状況は、担当者が一人でAIと対話しながら作り上げ、作業内容を誰とも共有していないときです。楽しくて一気に作れてしまうため、記録を残す発想になりにくいのです。

その担当者が異動や退職をすると、更新が完全に止まります。管理画面のログイン情報が分からない、どのファイルを触れば直るのか誰も知らない、という状態です。

防ぎ方は、作りながら次の3つを1つのファイルに書き残すことです。

• 使っているサービス名とログイン情報の保管場所
• ドメインとサーバーの契約先と更新日
• よく直す箇所の手順

この記録があるだけで、引き継ぎのコストが大きく下がります。AIで一気に作ったサイトの更新体制についてはVibe codingのサイトが詰む前の更新設計｜非エンジニアの4手順もあわせてどうぞ。

社内でAIを使う範囲が広がるほど、入力してよい情報の線引きも必要になります。生成AIの利活用ルールについては、デジタル庁が公開している「行政の進化と革新のための生成AIの調達·利活用に係るガイドライン（第2.0版）」が、自社ルールを考えるときの参考になります。

使う側の本音。AIで作れる範囲と、任せた方が早い範囲

ここは率直にお伝えします。AIでホームページを作るのは、すべての会社に向いているわけではありません。向き不向きがはっきり出ます。

筆者が支援の現場で見ている限り、AIで自社制作しても問題が起きにくいのは、ページ数が少ない小規模なサイトで、更新頻度が低く、社内で調べながら手を動かせる人がいる会社です。会社案内サイトや、単発のキャンペーンLPはここに当てはまります。

逆に、外部の力を借りた方が結果的に早いのは、次のような場合です。下の表は公的な基準ではなく、筆者の実務での判断の目安です。

状況	自社でAIを使う	相談した方が早い
ページ数の少ない会社案内	○	—
既存サイトからの引っ越し（URLが変わる）	△	○（リダイレクト設計が必要）
採用・製品・IRなど複数の目的が混在	△	○（情報設計から）
予約・会員・決済など機能が必要	×	○
問い合わせを継続的に増やしたい	△	○（改善の運用込み）

見落とされがちなコストの話もしておきます。AIツールの利用料が月数千円でも、社内の担当者が作業にかけた時間は人件費として発生しています。かかった時間を実際に記録してみると、思っていた金額と合わないことが多いです。「無料で作った」と思っていても、実際には社内工数という形で払っていることは意識しておいてください。

とはいえ、全部を外注するのが正解とも思いません。私たちがよくご提案するのは、設計と初期構築だけプロが入り、更新は社内でAIを使って回すという分担です。一番難しい「最初の型」を固めてしまえば、その後の更新は非エンジニアでも十分に回せます。

判断の目安。1週間触ってみて公開の目処が立たないなら、それは能力の問題ではなく設計が固まっていないサインです。その段階で一度相談した方が、結果的に早く安く終わります。

AIホームページ作成のよくある質問

まずは今日、A4一枚から始めてみてください

この記事の内容で今日すぐできる一歩は、ステップ1の「サイト設計シート」の2番と4番だけを埋めることです。誰に売っているかと、自社を選ぶ理由を3つ。ここが書けたら、残りはAIが手伝ってくれます。

作ったあとの更新体制まで考えておきたい方は、更新されないサイトの信用低下を直す更新体制の作り方｜担当と頻度を続けて読んでみてください。

ここまで読んで「自社でやり切るのは難しそうだ」「どこまで自分たちでやって、どこから任せるか判断がつかない」と感じた方は、一度お話を聞かせてください。株式会社コレットラボでは、AIで作るLP・コーポレートサイトの伴走支援や、社内でサイトを内製化したい会社さま向けの並走をしています。いきなり契約ではなく、現状を整理するだけのご相談でも構いません。AI業務システム化の詳細はこちらからどうぞ。