みんなのホームページ屋さん

お役立ち記事

AIでホームページを自分で作る方法【ChatGPT・Claude・Gemini】実際の画面で手順と注意点を解説

更新日:2026年10月31日

先に結論です。

ChatGPT・Claude・GeminiなどのAIを使うと、ホームページの文章やデザインの「たたき台」は数分で作れます。ただし、写真や住所などの情報を入れること、内容が正しいか確かめること、インターネットに公開すること、作ったあとも直し続けることは、今も自分で行う必要があります。

パソコン作業に慣れていて時間がある方にはよい方法です。本業が忙しい方は、どこまで自分でやるかを決めてから始めるのがおすすめです。

この記事では、ChatGPTを使って、架空の整体院「こもれび整体院」のホームページを実際に作りながら、公開までの手順を画面つきで説明します。

※ 画面は2026年10月時点のものです。AIの返答は、同じ頼み方でも毎回少しずつ変わります。

そもそも、ホームページはなぜ必要なのか

作り方の前に、ホームページがお店や会社にとってどんな役割をしているのかを、調査の数字から確認しておきます。

来店前に、8割近くの人がネットで調べている

全国の18〜65歳、4,411人に聞いた調査では、お店に行く前にインターネットで調べた人は78%でした。調べるときに使ったものとしては、Google検索に次いで、お店の公式ホームページが70%と、Googleマップ(69%)やSNSより多く使われています。

同じ調査で、調べた内容として最も多かったのは「営業時間と所在地」(77%)でした。営業時間や場所がすぐに分からないお店は、比べる段階で候補から外れてしまうことがあります。

50代・60代も、9割以上がインターネットを使っている

総務省の調査では、個人のスマートフォンの保有率は80.5%。インターネットを使っている人の割合は、13〜69歳のすべての年代で9割を超えています。インターネットを使う目的としては「検索サービスの利用」が79.4%でした。

「うちのお客さんは年配の方が多いから」という場合でも、ご本人やご家族がスマホで調べてから来ることは、珍しくなくなっています。

出典:総務省「令和6年通信利用動向調査」(2024年8月末時点、2025年5月公表)

SNSがあれば、ホームページはいらない?

同じ総務省の調査では、インターネットを使う目的で最も多いのは「SNSの利用」(81.9%)でした。InstagramやLINE、Xでお店の発信をしている方も多いと思います。

それでも、先ほどの来店前の調査では、調べるときに使われたのはお店の公式ホームページ(70%)のほうが、X(39%)やInstagram(38%)より多くなっています。SNSとホームページは、役割が違うためです。

SNSホームページ
得意なこと新しいお知らせ、日々の様子、写真の発信営業時間・料金・場所・サービス内容など、いつ見ても変わらない正式な案内
情報の残り方投稿が新しい順に流れ、前の投稿は見つけにくくなるページごとに整理され、いつでも同じ場所で見られる
見られる相手そのSNSを使っている人が中心。アプリやログインが必要なこともあるスマホやパソコンがあれば誰でも、検索から直接見られる
運営のルール表示のされ方や規約は運営会社が決める。アカウントが使えなくなると発信もできなくなる載せる内容や見せ方を自分で決められる

SNSで知ってもらい、ホームページで詳しい案内を見てもらう。両方を持っておくと、それぞれの弱いところを補い合えます。SNSのプロフィール欄にホームページのアドレスを載せておくのもおすすめです。

ホームページがあると、できること

  • 正しい情報を、自分で伝えられる:口コミサイトやSNSの情報は、自分で内容を決められません。ホームページなら、営業時間・料金・サービス内容を、正しく、詳しく載せられます。
  • 名刺やチラシを見た人の「確認先」になる:紹介や名刺で知った人が、どんなお店・会社かを確かめるときに開くのがホームページです。
  • 時間を問わず、問い合わせを受けられる:営業時間外や休みの日でも、フォームやメールで相談を受け付けられます。
  • Googleマップの情報とつながる:Googleマップのお店の情報(Googleビジネスプロフィール)にホームページのアドレスを載せると、地図から詳しい案内へ進んでもらえます。
  • 求人や取引先の確認にも使われる:働きたい人や、取引を考えている会社も、ホームページで会社の様子を確かめます。

つまりホームページは、お客様が「ここにしよう」と決める前に見る、お店・会社の正式な案内です。その上で、自分で作るか、任せるかを考えていきましょう。

AIでホームページを作る方法は2つあります

方法特徴
① AIの機能があるホームページ作成サービスを使うWixやJimdoなど、質問に答えると下書きを作ってくれる機能があるサービス。公開まで同じ画面で進められるので、初心者向け。
② ChatGPT・Claude・Geminiにホームページのコード(HTML)を書いてもらうデザインの自由度は高いが、公開する場所(サーバー)の準備やファイルの扱いを自分で行う必要がある。

この記事では②の方法を説明します。①の方法は、別の記事「ホームページを無料で自分で作る方法」で、Wixの画面を使って説明しています。

手順1:載せる内容を自分で用意する

AIは、あなたのお店の正しい情報を知りません。先に、次の内容を書き出しておきます。

  1. お店・会社の名前、住所、電話番号、営業時間、定休日
  2. サービス・商品の説明と料金(税込か税別かも)
  3. 選ばれる理由・こだわり
  4. お問い合わせの受け付け方法
  5. 使いたい写真

ここをあいまいにしたままAIに頼むと、それらしいけれど事実と違う文章が書かれてしまうことがあります。AIが書いた文章は、そのまま使わず、必ず自分で読んで確かめます。

手順2:AIに頼む

ChatGPTを開き、作りたいホームページの内容を箇条書きで伝えます。今回は次のように頼みました。

次の内容で、小さな整体院のホームページを1ページで作ってください。
・お店の名前:こもれび整体院
・何をしているか:肩こり・腰痛の整体
・営業時間:10時〜20時、水曜定休
・料金の目安:初回60分6,000円
・スマホで見やすいデザインにする
・HTMLとCSSを1つのファイルにまとめて出力する
ChatGPTに頼む内容を入力した画面
ChatGPTの入力欄に、頼みたい内容を入れたところです。改行は、Shiftキーを押しながらEnterキーで入れられます(Enterキーだけだと、その時点で送信されます)。

返ってきたもの

ChatGPTがホームページのファイルを作った返答
約50秒で返答がありました。今回は、コードが画面に表示されるのではなく、1 ダウンロードできるファイルとして渡されました。

ファイルをダウンロードして使うこともできます。中身を見ながら進めたい場合は、「ダウンロードではなく、コードをそのままこの画面に表示してください」と頼むと、コードが表示されます。

ChatGPTが表示したホームページのコード
表示されたコードです。1 コピーのボタンで、コードを全部コピーできます。2 再生の形のボタンを押すと、ChatGPTの画面の中で見た目を確認できます。
ChatGPTの画面の中で表示した見た目
ChatGPTの画面の中で表示した見た目です。返答の下には「住所・電話番号・予約方法は追加していません」「料金の税込表記と施術方針は公開前に確認してください」と書かれていました。

手順3:パソコンに保存して、表示を確かめる

  1. コピーしたコードを、メモ帳(Macならテキストエディット)に貼り付ける
  2. 「index.html」という名前で保存する(Macのテキストエディットは、先に「フォーマット」メニューから「標準テキストにする」を選んでおく)
  3. 保存した「index.html」をダブルクリックして、ブラウザで開く

今回のコードを保存して開くと、次のように表示されました。

AIが作ったホームページの上半分
ページの上半分です。整った見た目ですが、写真は1枚も入っていません。1 飾りには絵文字(葉っぱ・クローバー・太陽)が使われていました。
AIが作ったホームページの料金と店舗案内
ページの下の方です。2 料金の下に「※料金は税込表記を想定しています」と、こちらが伝えていない一文が入っていました。3 店舗案内には、住所・電話番号・地図がありません(頼んでいないため)。
AIが作ったホームページをスマホの幅で表示したところ
スマホの幅で表示したところです。縦1列に並び替わり、スマホでも読める形になっていました。

AIが作るのは、あくまで「たたき台」です。このまま公開するのではなく、正しい情報・写真・連絡先を入れていきます。

手順4:直してほしい所を、AIに頼み直す

  1. 直したい所をメモする(例:住所と電話番号を入れる、料金は税込と書く、絵文字を消す)
  2. ChatGPTに「〇〇を直して、全部のコードをもう一度表示して」と頼む
  3. 新しいコードを「index.html」に上書き保存し、もう一度ブラウザで確かめる

この「頼む→保存→確かめる」を、納得がいくまで繰り返します。直した結果、前に直した所が元に戻ってしまうこともあるので、毎回ページ全体を見直します。ページを増やす場合は、ページごとにファイルを作り、ページ同士をつなぐリンクも整えます。

手順5:写真を入れる

写真は、ファイルを「index.html」と同じフォルダに入れ、コードの中の写真の場所に、そのファイル名を書きます。どこに書けばよいか分からなければ、「店内の写真(naibu.jpg)を、一番上の大きな画像として入れて」のようにAIに頼みます。

写真が大きすぎると表示が遅くなるので、横幅1,500ピクセル程度に小さくしてから使います。インターネットで見つけた写真を勝手に使うと、著作権の問題になります。自分で撮った写真か、利用条件で使ってよいと書かれている写真を使います。

手順6:お問い合わせフォームを付ける

手順2のコードには、お問い合わせフォームが入っていませんでした。そこで「お問い合わせフォームも付けてください。送信された内容が私のメールに届くようにしたいです」と頼みました。

お問い合わせフォームを頼んだときの返答
返答では、1 メールを送る部分に、外部の無料サービス(FormSubmit)を使う方法が示されました。ホームページのファイルだけでは、メールは送れないためです。
受け取り用のメールアドレスを書き換える場所
1 この部分の「YOUR_EMAIL@example.com」を、自分のメールアドレスに書き換えるよう案内されました。

この方法を使う場合は、次の点に気をつけます。

  • メールアドレスがページのコードに書かれるため、ページを開いた人は誰でもそのアドレスを見ることができる
  • 外部サービスの利用条件や、最初に必要な確認の手続き(確認メールのリンクを押すなど)を確かめる
  • 公開後に自分で送信してみて、メールが届くか、迷惑メールに入らないかを確かめる

フォームを付けない場合は、メールアドレスと電話番号を載せる方法もあります。

手順7:インターネットに公開する

作ったファイルは、そのままでは自分のパソコンでしか見られません。公開する場所(サーバー)に置く必要があります。無料で使えるものに、Cloudflare Pages・GitHub Pages・Netlifyなどがあります。ここではCloudflare Pagesの画面で説明します。

Cloudflare Pagesでファイルをアップロードする画面
アカウントを作って管理画面に入り、「Workers & Pages」から、ファイルを直接アップロードする作り方を選んだ画面です。1 プロジェクトの名前を決めます(これが「〇〇.pages.dev」というアドレスになります)。2 保存したファイルを、フォルダごとアップロードします。3「サイトをデプロイ」を押すと公開されます。

公開されたら、表示されたアドレスをパソコンとスマホの両方で開き、写真が表示されるか、リンクが正しく動くかを確かめます。画面の言葉には「デプロイ」「アセット」などの専門用語が多く、分からないときは画面の写真をAIに見せて質問すると進めやすくなります。

手順8:独自ドメインをつなぐ(任意)

  1. 「〇〇.com」などのドメインを取る(年1,700〜4,000円ほど)
  2. 公開したサービスの設定画面で、ドメインをつなぐ
  3. ドメインの管理画面で、案内された設定(DNS)を入れる

設定が反映されるまで、数分〜数時間かかることがあります。

手順9:検索に出るための準備をする

  • タイトルと説明文:今回のコードには、検索結果に出るタイトル(「こもれび整体院|肩こり・腰痛の整体」)と説明文が入っていました。地域名を入れるなど、内容を確かめて直します
  • Google サーチコンソール:Googleのアカウントでログインし、ホームページのアドレスを登録します
  • Google ビジネスプロフィール:Googleマップに出るお店の情報に、ホームページのアドレスを載せます

登録しても、検索結果に出るまで数週間〜数か月かかることがあります。

手順10:更新するたびに、同じ作業を繰り返す

営業時間や料金が変わったら、AIに頼んでコードを直し、保存し、もう一度アップロードして公開し直します。どのファイルが最新かを自分で管理しておかないと、古いファイルを上げてしまい、前に直した所が元に戻ることがあります。

実際に作ってみて、分かったこと

  • 見た目の整ったページは、頼んでから1分ほどででき上がった
  • コードは画面に出ず、ファイルで渡された。中身を見るには頼み直しが必要だった
  • 写真は1枚も入らず、飾りには絵文字が使われていた
  • 料金の「税込」など、伝えていないことが書き足されていた
  • 住所・電話番号・地図・お問い合わせ先は入っていなかった
  • メールが届くお問い合わせフォームには、外部サービスの登録と設定が必要だった
  • 公開には、サーバーのアカウント作成とファイルのアップロードが別に必要だった

AIが得意なこと・苦手なこと

得意なこと自分で行う必要があること
文章の下書き
デザインのたたき台
コードを書く・直す
内容が正しいかの確認
写真の用意
お問い合わせの受け付けの仕組み
公開・ドメインの設定
公開後の更新

もう一度、結論です。

AIを使えば、ホームページのたたき台は数分で作れます。けれど、正しい情報と写真を入れること、お問い合わせの仕組みを整えること、公開すること、作ったあとも直し続けることは、今も自分の手で行う必要があり、初めての方にはここに一番時間がかかります。

本業の時間を減らしたくない方は、作るのも、作ったあと直すのも、まとめて任せてしまうのも一つの方法です。

この記事の作業を、まとめて任せた場合の料金

みんなのホームページ屋さんにご依頼いただいた場合、この記事の手順はそれぞれ次の料金でお引き受けしています。

この記事の手順任せた場合(税別)
手順1 載せる内容の用意原稿の下書きはこちらで作成します(制作費に含む)。写真はスマホで撮ったもので構いません
手順2〜5 デザイン・ページ作り・写真・スマホ対応1ページ:10,000円
6ページ:30,000円
8ページ以上:50,000円
手順6 お問い合わせフォーム8ページ以上のプラン(50,000円)に含む
手順7 公開・サーバー月額保守に含む
手順8 独自ドメイン接続設定:5,000円(初回のみ)
新規取得の代行:3,000円
ドメイン代:実費(年1,700〜4,000円程度)
手順9 検索に出るための準備タイトル・説明文の設定は制作費に含む
Googleマップの情報の整備:10,000円(Googleビジネスプロフィールの初期設定)
手順10 公開後の更新月5,000円(サーバー代・SSLの管理・文言の修正・お知らせの追加込み。最低契約期間12ヶ月)

たとえば6ページのホームページなら、制作費30,000円と、公開後は月5,000円です。着手金はなく、お支払いは翌月末です。

ご依頼の前に、あなたのお店・会社の見本のホームページを無料でお作りしています。見本をご覧になってから、ご依頼いただくかどうかをお決めください。

ここから先は、みんなのホームページ屋さんの案内です

ホームページの制作・更新のご相談

みんなのホームページ屋さんでは、ご依頼の前に見本のホームページを無料でお作りしています。制作費は1万円〜、作ったあとは月5,000円ポッキリ(サーバー代・文言の修正・お知らせの追加込み)です。

まずは見本から

見本のホームページを無料でお作りしています

お店・会社の名前と、今のホームページのURL(なければ不要)をお送りください。見本をご覧いただいてから、頼むかどうかをお決めください。

見本をご覧になってからご判断ください→