【完全保存版】AIでホームページを自作してみた体験談|初心者がゼロから作るまでの全記録

AI関連のブログ 「ノートパソコンでホームページ制作をしている人物の写真に、青い文字で『AIでここまでできる!ホームページを作る方法と手順』と書かれたバナー画像」 AI
#image_title

はじめに:AIを使って自社サイトを作れる時代がやってきた

以前の私は、ホームページは「プロが作るもの」「費用も時間もかかるもの」というイメージを持っていました。でも今は違います。AIの力を借りれば、Web制作の知識がほとんどない人でも、自分の会社やサービスのホームページをゼロから作ることができる時代です。

このブログでは、私が実際にAIを活用して、サービス紹介用の自社ホームページを立ち上げた時の流れや使ったツール、つまずきポイント、学びをすべて記録します。専門用語をなるべく使わず、誰でも理解できるよう丁寧に説明していきます。

参考:AIライティング支援ツール「ChatGPT」を活用しました。


ステップ1:AIに「サイト全体の構成」を相談する

まず最初にやったのは、「どんなページが必要か?」という全体設計です。

AI(ChatGPT)に以下のように聞きました。

「高齢者向けの生活サポートサービスを紹介するホームページを作りたい。どんなページ構成が必要ですか?」

すると、以下のような構成案が返ってきました:

  • トップページ
  • サービス紹介ページ
  • 料金プランページ
  • ご依頼の流れ
  • よくある質問(FAQ)
  • 会社概要
  • お問い合わせページ

この時点で「なるほど!」と思ったのは、何をどう見せるか=設計の段階からAIに相談できるという点です。これで大きな迷いがひとつ減りました。


ステップ2:ページごとの文章もAIで生成

構成が決まったら、次はページ内に入れる文章です。これもAIに聞きながら進めました。

たとえば、サービス紹介ページではこう尋ねました。

「高齢者の一人暮らしをサポートするサービスの内容を、やさしい言葉で説明してください」

AIは、まるで実際のスタッフが語っているかのような、あたたかくてわかりやすい文章を出力してくれました。しかも「高齢者にも伝わるように」「優しい口調で」「箇条書きで」など、条件を付ければどんどん自分らしい表現に近づけていけます。

これは、プロのライターに頼まなくても、自分の想いやサービスの魅力を伝える文章が作れるという意味で非常に大きなメリットです。


ステップ3:WordPress+無料テーマでサイト構築

文章ができたので、いよいよサイト作りです。使ったのは、無料で使えるCMS(コンテンツ管理システム)の代表格である**WordPress**。テーマは、ビジネス用途にも強くてシンプルなデザインの「Lightning」を選びました。

理由は以下のとおり:

  • 初心者でも扱いやすいブロックエディター対応
  • スマホにも自動対応(レスポンシブ)
  • 最初からビジネス用途向けの構成ができている

テーマ選びやプラグイン設定でも、AIがとても役立ちました。

「SEO対策に必要なプラグインは?」 「お問合せフォームを設置したい」

などと聞くだけで、最適なツールと設定方法をガイドしてくれます。


ステップ4:画像・イラストもAIで作成

ページの文章が整ってきたら、次はビジュアル素材です。アイキャッチ画像や挿絵、サービス紹介に使うイラストもAIで作りました。

使ったツール例:

  • DALL·E(ChatGPT内蔵の画像生成)
  • Canva AI(テンプレート+生成画像)

たとえば「高齢者とスタッフが話している優しい雰囲気のイラスト」や「買い物を一緒にしている様子」など、イメージ通りのビジュアルをAIで簡単に作成できたのは衝撃的でした。

今まで「画像は探してダウンロードするもの」だと思っていましたが、これからは“つくる”時代なんだと実感しました。


ステップ5:お問い合わせフォームを設置

ホームページに欠かせないのが「お問い合わせフォーム」です。私は「Contact Form 7」というWordPressプラグインを使いました。

ここでもAIの活躍がすごかったです。

「Contact Form 7で名前・電話番号・相談内容の3項目を入れたい。設定方法を教えて」

という指示で、正しいショートコードの例をすぐに提示してくれました。

さらに、「自動返信メールの設定方法」「スパム対策(reCAPTCHA)の設定方法」まで教えてくれるので、途中で詰まることがありませんでした。


ステップ6:公開&調整、そして運用へ

サイトが一通り完成したら、いよいよ公開です。Googleにインデックスされるよう、サイトマップ送信やメタディスクリプションの設定もAIに聞きながら対応。

公開後も、AIに以下のような相談をしています。

  • 「トップページに載せるキャッチコピーを考えて」
  • 「FAQに入れるべき質問を教えて」
  • 「SEO的に改善すべき点があれば教えて」

AIは、“改善のアドバイザー”としても非常に優秀だと感じました。


実際に使ってみて感じたAIの魅力

  • 聞けばなんでも答えてくれる安心感(何度でもOK)
  • 専門家に相談しているような感覚(用語も解説してくれる)
  • 自分のペースで進められる(夜中でもOK)
  • 1人では浮かばない視点をくれる(構成や表現の提案)

AIを使うことで、「Web制作を誰かに丸投げするのではなく、自分で考えながら進められる」ようになったことが、何より大きな収穫でした。


おわりに:AI+自分で作る時代へ

ホームページを作るというのは、単に「情報を並べる」ことではありません。 自分の想いをカタチにし、人に届けるための第一歩です。

その一歩を、AIと一緒に踏み出せたことで、私は確かな自信を得ることができました。

これからホームページを作ろうとしている方に伝えたいのは、

「最初はうまくできなくて当たり前。でもAIがいれば、必ず“できる”に変わっていきます。」

ということです。

あなたもぜひ、AIの力を借りて、自分だけのWebサイトを作ってみてください。きっと想像以上の成果が待っています。


※この記事ではサービス名や地域名などはあえて伏せています。実在の事例として詳しい内容が知りたい方は、個別にお問い合わせください。