Web制作のプロがAIでホームページを作成してみた｜実際に試した手順・プロンプト・注意点を公開
公開日: 2026年10月3日
「AIを使えば、ホームページも簡単に作れる」
最近は、そんな話を目にする機会がかなり増えました。
では、実際にAIだけでホームページを作った場合、どこまで使えるものができるのでしょうか。
- 最低限の会社情報だけでもホームページは作れるのか
- ターゲットや情報設計まで考えると、完成するサイトは変わるのか
- Web制作の経験がある人がAIを使うと、どこまで仕上げられるのか
今回はこの疑問を確かめるために、Web制作を仕事にしている私自身が、同じ架空企業を題材に3つのホームページを実際に制作しました。
この記事では、完成したサイトや実際に使ったプロンプトも公開しながら、AIにホームページ制作をどこまで任せられるのかを検証していきます。
なお、今回紹介する内容は2026年10月時点での検証結果です。AIの機能や制作環境は今後も変化していくため、現時点での実践例としてご覧ください。
結論｜AIだけでもホームページは作れる。ただし「作れる」と「使える」は別
先に結論からお伝えすると、AIを使えば、ホームページを「作る」こと自体はかなり簡単になっています。
今回の検証では、主にChatGPTとClaude Codeを使用しました。
ChatGPTで会社情報や制作条件を整理し、Claude Codeへ渡す指示を作成。
その内容をもとに実際のホームページを実装しています。
最低限の会社情報だけでも、企業ホームページとしてそれなりにまとまったものを作ることができました。
一方、完成度を上げようとすると、「誰に何を伝えるのか」「その会社らしさをどう表現するのか」「どの情報を残し、何を削るのか」といった判断が必要になります。
今回最も強く感じたのは、「ホームページを作る作業」と「何を作るべきかを判断する作業」は別だということです。
今回の検証条件｜同じ会社を3つの方法で制作
今回設定したのは、「株式会社上毛設備サービス」という架空の設備工事会社です。
群馬県前橋市を拠点に、工場や倉庫などを対象とした電気設備工事、業務用エアコン工事、LED照明工事、設備修繕・メンテナンスを行う中小企業という設定にしました。
Version 1からVersion 3まで、会社名、所在地、事業内容、対応エリアなどの基本情報は共通です。
変えたのは、AIにどこまで情報を渡すか、そして人間がどこまで制作に関わるかです。
| Version | 制作条件 | 検証したこと |
|---|---|---|
| Version 1 | 最低限の会社情報だけを渡し、ほぼAIに任せる | 細かな設計なしでも、どこまで作れるのか |
| Version 2 | ターゲット・ペルソナ・情報設計を追加 | AIに渡す情報によって、内容はどう変わるのか |
| Version 3 | Web制作者が判断しながらAIを活用 | AIを制作ツールとして使うと、どこまで仕上げられるのか |
つまり、AIそのものを比較するのではなく、AIへの任せ方を段階的に変える実験です。
Version 1｜最低限の会社情報だけでAIに作らせたら、約10分で完成
Version 1では、できるだけAIに任せました。
細かなサイト設計やデザインは行わず、ChatGPTに渡したのは基本的な会社情報です。
実際に使ったプロンプト
Version1のプロンプト
以下の架空企業のホームページを作成したいです。
この情報をもとに、Claude Codeにそのまま渡してホームページを制作してもらえるプロンプトを作成してください。
ホームページの構成、文章、デザイン、配色、必要なコンテンツなどは基本的にお任せします。
会社名：株式会社上毛設備サービス
業種：電気設備・空調設備工事
所在地：群馬県前橋市
従業員数：18名
主な顧客：群馬県内の工場、倉庫、オフィス、店舗、管理会社
主なサービス：電気設備工事、業務用エアコン工事、LED照明工事、設備修繕・メンテナンス
対応エリア：前橋市・高崎市・伊勢崎市を中心とした群馬県内
会社規模：地域で20年以上事業を行っている中小企業
ホームページの目的：法人からの新規問い合わせを増やす
ファーストビューの構成や配色、セクションの順番などは指定していません。会社情報だけを見て、AIがどんなホームページを作るのかも含めて確認しました。
約10分で、想像以上にまとまったサイトが完成
ChatGPTでClaude Code用のプロンプトを作成してから、ホームページが完成するまでにかかった時間はおよそ10分でした。
ファーストビューには「工場・倉庫・オフィスの電気と空調を、ひとつの窓口で。」というコピーが入り、サービス紹介、困りごと、選ばれる理由、対応施設、ご依頼の流れ、FAQ、会社概要、問い合わせフォームまで用意されました。
こちらから一つひとつ指定したわけではありません。会社情報とサイトの目的から、AIが企業ホームページとして必要な内容を組み立てています。
ホームページのたたき台を作るという意味では、AIはすでにかなり使えると感じました。
ただし「その会社ならでは」の情報はAIだけでは分からない
一方、実際の企業サイトとして考えると、足りない情報もあります。
どんな工事をしてきたのか。どんな技術や資格があるのか。顧客から何を評価されているのか。競合と何が違うのか。
こうした会社固有の事実は、AIが勝手に知っているわけではありません。
むしろ生成AIは、存在しない実績や資格でも、それらしい文章として作れてしまいます。そのため、企業サイトではAIが補った情報をそのまま事実として掲載しないことも重要です。
Version 1から分かったのは、AIは与えた情報を整理してサイトにすることは得意でも、会社固有の事実まで代わりに用意してくれるわけではないということでした。
Version 2｜ターゲットと情報設計を決めると、どう変わる？
Version 1が想像以上にまとまったため、Version 2では単にプロンプトを詳しくするのではなく、実際のWeb制作に近い形で「誰に何を伝えるのか」を整理してから制作しました。
「誰に見せるサイトなのか」を先に決める
メインペルソナとして設定したのは、高橋健一さんという45歳の製造業の総務課長です。
設備管理も兼任しており、工場設備に問題が起きれば、業者を探して見積もりを取り、上司への説明や社内稟議まで行う立場を想定しました。
そうすると必要なのは、単なるサービス紹介だけではありません。
「自社の設備を相談できるのか」「工場にも対応しているのか」「問い合わせ前に何を準備すればよいのか」など、担当者が業者を比較・検討するための情報が必要になります。
ペルソナとホームページ設計書をAIに渡す
さらに、サイトの目的、顧客の課題、伝える内容、CTAなどを整理したホームページ設計書を作成しました。
そのうえで、ペルソナと設計内容を前提にClaude Codeへ制作を依頼しました。指示の主要部分は次のような内容です。
Version2のプロンプト
Version2では、ターゲット・ペルソナ・顧客課題・サイトの目的・コンテンツ構成・CTAなどを事前に整理したうえでホームページを制作します。
最優先ターゲットは、群馬県内の工場・倉庫などで設備管理を担当している総務・設備担当者です。
誰に向けたホームページなのかがファーストビューで分かること、電気設備と空調設備を一つの窓口で相談できること、法人施設にも対応していること、問い合わせ前の不安を減らす情報設計になっていることを重視してください。
※実際の指示では、ペルソナシートや設計書の参照先、架空の実績・資格などを生成しない条件も指定しています。
変わったのは、見た目より「情報の具体性」
Version 1とVersion 2で、サイト構成がまったく別物になったわけではありません。Version 1の時点でも、AIは一般的な企業ホームページの構成をかなりうまく作っていました。
大きく変わったのは、掲載する情報の具体性です。
「この工事は相談できるのか」
「問い合わせ前に何を準備すればよいのか」
「社内で比較するときに何を確認すればよいのか」
といった、設備担当者の判断材料を意識して設計できるようになりました。
これはAIそのものの能力が変わったからではありません。
AIに渡した材料が変わったことで、AIが考えるための前提も変わったということです。
Version 3｜Web制作のプロがAIを使うと、どこまで仕上げられる？
Version 3では、Version 2までの会社情報とペルソナを引き継ぎながら、私自身が構成やデザインの方向性を判断し、AIを制作ツールとして使って作り込みました。
ここでは、AIが出したものをそのまま採用するのではなく、実際のWeb制作と同じように確認・判断・修正を繰り返しています。
Version 3はこの流れで制作
- Version 2の会社設定・ペルソナを引き継ぐ
- サイト構成を見直す
- 参考サイトを調査し、デザインの方向性を決める
- FigmaでPC・スマートフォンのデザインを確認する
- 構成・文章・写真を修正し、確定後にClaude Codeで実装する
情報を増やすのではなく、まず構成を削った
Version 3で最初に大きく変えたのは、細かなデザインではなくサイト全体の構成です。
初期案では、サービス、対応範囲、想定シーン、FAQ、問い合わせなどを1ページにまとめていました。
しかしFigmaで画面にしてみると、企業ホームページというより長いランディングページに近く、情報量も多く感じました。
そこで、トップページは会社情報・事業紹介・問い合わせへの入口を中心にし、詳しい内容は「事業紹介」「会社概要」「お問い合わせ」の下層ページへ分けました。
AIを使うと、「これも入れた方がよい」と情報を追加する方向へ進みやすくなります。ただ、実際の制作では何を入れるかと同じくらい、何を入れないかを決めることも重要です。
デザインの「違和感」を具体的にして修正した
デザインについても、「もっとかっこよくして」とAIへ丸投げするのではなく、実際の企業サイトを確認しながら、参考にしたい要素を整理しました。
Figmaで確認すると、「情報が多すぎる」「事業内容がすぐ伝わらない」「コピーが抽象的」「写真が日本の地域企業という設定に合わない」など、具体的な問題が見えてきます。
問題が分かれば、「この情報を削る」「事業内容が一目で分かるコピーに変える」「この用途に合う写真へ変更する」とAIへの修正指示も具体的になります。
完成度を左右したのは、プロンプトの長さより、出てきたもののどこに問題があるのかを判断できるかどうかでした。
デザインを決めてからAIに実装を任せる
Version 1では構成から実装までAIに大きく任せましたが、Version 3ではFigmaのデザインを確定してからClaude Codeで実装しています。
最終的には、トップページに加えて、事業紹介、会社概要、お問い合わせページを作成し、PC・スマートフォンで表示や動作を確認して公開しました。
3パターン作って分かった、AIホームページ制作の現在地
3つのサイトを実際に作ってみると、AIホームページ制作について大きく3つのことが分かりました。
1．ホームページを「形にする」作業は、かなりAIに任せられる
構成のたたき台、文章の初稿、デザイン、HTMLやCSSの実装など、「手を動かして形にする作業」のハードルはかなり下がっています。
Version 1が約10分で形になったことを考えても、まず実物を作り、それを見ながら考えられるようになったことは大きな変化です。
2．プロンプト以上に、AIへ渡す情報が重要
Version 2では、ターゲットや顧客課題、サイトの目的を整理することで、掲載する情報が具体的になりました。
「うまい指示文」を探すこと以上に、会社の強み、顧客から選ばれる理由、実績、ターゲットなど、AIが考えるための材料を用意することが重要です。
3．完成度を上げるほど、人間の知識と経験が効いてくる
AIに指示すれば、それなりに整ったホームページは作れます。
ただし、今回Version 3を制作していて、イメージ通りのデザインが一度の指示で完成したことはほとんどありませんでした。
- 何が分かりにくいのか
- どこを削るのか
- どの文章なら事業内容が伝わるのか
- 会社のブランドに合うデザインや写真は何か
こうした判断には、Webデザインや情報設計、マーケティングなどの知識や経験が役立ちます。
最近、Webサイトを見ていて、AIが提案しやすい一般的な構成や表現をそのまま使ったように感じるケースも増えました。
それ自体が悪いわけではありません。しかし、そのまま使えば「その会社だからこのサイトになった」という固有性は弱くなります。
ブランドイメージや競合との差を重視するなら、AIの出力をそのまま完成形にするのではなく、人間の経験やスキルとAIを組み合わせることが重要だと思います。
これからAIでホームページを作るなら、この順番がおすすめ
今回の検証を踏まえると、自分でAIを使ってホームページを作る場合は、次の流れが進めやすいと思います。
- 目的とターゲットを決める
会社案内、問い合わせ、採用など、何のためのサイトかを整理します。 - 会社やサービスの情報を整理する
事業内容、強み、実績、資格、対応エリアなど、掲載できる事実を用意します。 - AIに構成・文章・デザインのたたき台を作ってもらう
最初から完璧を求めず、一度画面にして確認します。 - 実物を見ながら人間が判断して修正する
不足している情報、不要な情報、デザインの違和感などを具体化してAIへ伝えます。 - 表示・動作・掲載内容を確認して公開する
PC・スマートフォン、リンク、フォーム、事実関係などを最終確認します。
AIに渡す前に最低限整理しておきたい情報
- ホームページを作る目的
- 主なターゲット
- 会社・サービスの基本情報
- 自社の強みや得意な案件
- 実績・資格などの事実情報
- 対応エリア
- 増やしたい問い合わせ
簡単な会社案内であれば、ここまで細かく設計しなくてもVersion 1のようにかなり形になります。
一方、問い合わせや採用などの成果を求めるなら、目的やターゲットを決め、完成物を人間が確認する工程は省かない方がよいと思います。
AIだけで作りやすいケースと、専門性が重要になるケース
会社案内が目的なら、AIだけでもかなり現実的
会社概要、サービス内容、所在地、問い合わせ先などを掲載し、「まず会社のホームページがあればよい」という目的であれば、AIを使った自作も十分現実的になってきたと思います。
自分でAIを操作し、完成したサイトを確認しながら修正できるのであれば、制作費を抑えられるケースもあるでしょう。
ブランドや集客を重視するほど、専門性の価値が出る
一方、ブランドイメージをしっかり作りたい、競合との違いを伝えたい、ホームページから問い合わせを増やしたいという場合は、単にサイトを完成させるだけでは足りません。
ターゲット、競合との差別化、情報の優先順位、デザイン、コピー、さらに公開後のSEOや広告、アクセス解析なども関係してきます。
AIによって「作る」部分の時間や費用を抑えられる場面は増えましたが、成果やブランドを重視するのであれば、「何をどう作るか」に時間や費用をかける価値は残っていると思います。
「AIで自作するか、制作会社へすべて依頼するか」の二択でもありません。
制作作業はAIへ任せ、設計やデザイン、マーケティングなど判断が必要な部分だけ専門家の力を借りる方法もあります。
AIと人間のどちらが作るかではなく、どの部分をAIに任せ、どの部分を人間が判断するのか。
これからのホームページ制作では、この考え方が重要になっていくと思います。
＼ 自社に合うホームページ制作を相談したい方へ ／
目的・予算に合わせたホームページ制作をご提案します
「何から決めればよいか分からない」という段階でも、
構成設計・原稿作成・SEO内部対策まで一貫してサポートします。
AIでホームページを公開する前に確認したいこと
AIで作ったホームページを公開する前には、少なくとも次の点を確認しておきましょう。
- 実績・資格・料金などに事実ではない情報が入っていないか
AIが補った内容をそのまま掲載せず、事実確認を行います。 - 写真や画像を適切に使用できるか
素材の利用条件や、AI生成画像を実際の社員・施工実績などと誤認させないことを確認します。 - フォームやリンクが正常に動くか
問い合わせフォームは、実際に送信してメールが届くところまで確認します。 - スマートフォンでも見やすいか
文字、画像、メニュー、ボタンなどを実際の画面で確認します。
AIがコードを書いてくれたからといって、そのまま問題なく公開できるとは限りません。最終確認は人間が行う前提で考えた方がよいでしょう。
AIによるホームページ作成についてよくある疑問
AIでホームページは無料で作れますか？
無料で試せるAIツールやホームページ作成サービスもあります。ただし、企業サイトとして公開・運用する場合は、独自ドメイン、サーバー、AIサービスなどで費用が発生する場合があります。
AIで作ったホームページでもSEOはできますか？
AIで作ったホームページだからSEOができないわけではありません。ただし、AIがページを作ることと、検索からアクセスを集めることは別です。検索する人が知りたい情報を考え、必要なコンテンツを作り、公開後も改善していく必要があります。
まとめ｜AIで作れる時代だからこそ、「何を作るか」が重要になる
今回3つのホームページを実際に作ってみて、AIによってホームページ制作の技術的なハードルは大きく下がったと感じました。
一方で、AIが自動的にその会社に最適なホームページを作ってくれるわけではありません。誰に何を伝えるのか、何を載せて何を削るのか、完成したものが本当に会社の目的に合っているのか。こうした判断には、人間の知識や経験が必要です。
AIか人間かではなく、人間の専門性とAIをどう組み合わせるか。
AIでホームページを作れる時代になったからこそ、「作れるかどうか」以上に、「何を、誰のために作るのか」が重要になっていくのではないでしょうか。
＼ 自社に合うホームページ制作を相談したい方へ ／
目的・予算に合わせたホームページ制作をご提案します
「何から決めればよいか分からない」という段階でも、
構成設計・原稿作成・SEO内部対策まで一貫してサポートします。
