【保存版】AIで無料でホームページを作成する方法
業歴20年のウェブ制作会社・スタイルウェブが考える、今やるならこのやり方。 AIで作るホームぺージ、ベストプラクティス（2026年9月現在）
ウェブ制作会社が、AIでの作り方を公開する理由。
AIがあれば、自分たちでホームページを作れる。ウェブ制作を仕事にしてきた私たちにとっては、正直、残酷な変化です。でも、この流れにはもう抗えません。私たちが黙っていても、いずれ多くの方がその手軽さに気づくはずです。
一方で、楽しみな気持ちもあります。AIによるサイト制作が広がれば、より多くの人や企業が、低コストで、もっと自由に、ウェブサイトやウェブ広告を作って発信できるようになります。
これまで予算や技術の壁で形にできなかったアイデアも、世の中に出てくるかもしれません。そこから、私たちの想像を超える新しい盛り上がりが生まれるのではないか。そんな期待もしています。
それなら、20年にわたるウェブ制作の経験や知見を、その一歩のために役立ててもらいたい。そう考えて、この記事をまとめました。
……と、ここまで真面目に書きましたが、あわよくば、困ったときに「そういえば、スタイルウェブがあったな」と思い出して、お声がけいただけたら。そんな下心も、少しあります。
※この記事には広告・アフィリエイトリンクを含みます。AIの利用料、サーバー・ドメインの費用は別途かかります。
まずはAIを準備
2026年9月現在、私のおすすめはChatGPTです。
理由は、ホームページに使う画像まで、一緒に生成できるからです。文章やコードに加えて、サイトに合ったイメージ画像やイラストも用意できるので、初めての方でも制作を進めやすくなります。
Claude単体では、画像生成ツールのように写真風の画像やイラストを生成することはできません。ただ、掲載したい写真や画像を事前に用意し、サイトの作業フォルダに入れておけば大丈夫です。Claudeでも、その画像を使って制作を進められます。
ChatGPT
おすすめ
制作で使うのは「Codex」です。ChatGPTのアカウントで利用します。これから始める方には、こちらをおすすめします。
Claude
制作で使うのは「Claude Code」です。Claudeのデスクトップアプリで「Code」タブを開いて進めます。
サーバーとドメインを準備
ホームページを公開するには、サーバーとドメインの準備が必要です。
レンタルサーバーは料金の幅が広く、機能も会社ごとに異なります。大切なのは、自社の状況や使い方に合ったものを選ぶことです。
ここでは、AIでウェブサイトを制作・改修していくことを前提に、「簡単に使い始められること」「必要な機能がそろっていること」「無理なく使い続けられること」を重視して、3社をご紹介します。
弊社のおすすめは、エックスサーバー。
とにかく、必要なものが一通りそろっていること。これが一番の理由です。
AIからサーバーの設定まで操作できるAPIや、海外からの不正アクセスへの対策など、運営に欠かせない仕組みがそろっています。足りないものがなく、中小企業にとっていちばんちょうどいい。安定性も抜群です。
スマートフォンでは、表を横にスクロールして読めます。
| サービス | こんな方に | 主な良さ |
|---|---|---|
おすすめ エックスサーバー | 必要なものがそろったサーバーを選びたい | AIから設定を操作できるAPIや、海外からの不正アクセス対策まで一通りそろっています。中小企業にちょうどよく、安定性も抜群です。ドメイン永久無料がつきます。 |
安さ重視 コアサーバー | 費用をできるだけ抑えたい | 必要最低限の機能は一通りそろっていて、とにかく安く使えます。ドメイン永久無料がつきます。 |
| 更新前に試してから公開したい | スタンダード以上では、バックアップとテスト環境を作る機能を標準で利用できます。変更内容を試してから公開できるので、更新を重ねていきたい方に便利です。 |
機能や料金はプラン・契約期間によって異なります。お申し込みの際は、対象プランと支払総額をご確認ください。
ドメインも同じ会社で取得すると、管理が楽で、永久無料の場合も
対象サーバーの契約で、ドメイン無料。
2026年9月現在、エックスサーバー・コアサーバーには、契約条件を満たすとドメインが永久無料になる特典があります。
さっそくサイトを作ってみよう
AIとサーバーの準備ができたら、さっそくサイトを作ってみましょう。CodexまたはClaude Codeで作業フォルダを開き、AIの質問に答えながら、必要なページや素材を一緒に整理していきます。ここでは、エックスサーバーを例に進めます。公開先を先に伝えておくと、その環境に合わせた構成で作ってもらえます。
このプロンプトで、必要なページや素材は、AIと相談して決める
作業フォルダを開いたCodexまたはClaude Codeに、以下をコピーして送ってください。公開先と公開URLは、ご自身のものに書き換えます。あとはAIの質問に答え、案内されたタイミングで素材を入れれば大丈夫です。
あなたは、対話しながらホームページを制作する担当者です。私は初心者なので、質問や作業の案内は一度に詰め込まず、以下の順番で進めてください。質問や確認をしたら私の返答を待ち、その内容を次の作業に反映してください。
公開先はエックスサーバーのレンタルサーバーです。公開URLは https://自社のドメイン/ です。
１．最初にサイト名を聞く
最初の返答では、「作りたいサイトの名前（会社名・店舗名など）を教えてください」とだけ質問してください。サイト名だけでは業種や目的が分からない場合は、私の返答後に必要なことだけ追加で質問してください。２．必要最低限のページ構成を提案する
サイト名と聞き取った内容をもとに、４〜５ページ程度の構成を提案してください。一般的な会社なら「トップページ・事業案内・会社概要・お問い合わせ」の４ページを基本とし、必要に応じて１ページ追加してください。各ページに何を載せるかを短く説明し、「この構成で進めてよいですか？」と確認してください。修正希望があれば反映し、私が了承してから次へ進んでください。３．素材用フォルダを作り、準備を案内する
決まったページ構成に合わせて、パソコンの現在の作業フォルダ内に素材用フォルダを実際に作成してください。共通のロゴ用、各ページの写真・資料・原稿用など、入れる場所が分かるように整理してください。作成したフォルダの場所と開き方を示し、各フォルダに入れてほしいものを具体的に案内してください。手元にあるものだけでよいと伝え、私が「準備できました」または「素材なしで進めてください」と返答するまで制作を始めないでください。４．素材を読み取り、不明点を質問する
準備ができた、または素材なしで進めるという返答を受けたら、フォルダ内のロゴ・写真・資料・原稿を読み取り、分かった内容を短く整理してください。読み取れない資料、内容の食い違い、素材だけでは確認できない事業内容や掲載情報があれば、推測で決めずに質問してください。素材にすでに書かれていることは重ねて聞かず、確認が必要な点を少しずつ質問し、私の返答を待ってください。５．色・参考サイト・デザインの方向性を確認する
制作に入る前に、「サイトに使いたい色や、決まっているブランドカラー」「参考にしたいサイトのURLと、そのサイトのどこが好きか」「希望するデザインの方向性」を順番に質問してください。方向性は、信頼感・洗練・親しみやすさ・大胆さなど、答えやすい例を添えて聞いてください。参考URLをもらったら実際に内容を確認し、閲覧できない場合は見たふりをせず、気に入っている特徴を質問してください。希望がない項目は、素材や事業内容に合う案を提案してください。回答をもとに配色とデザインの方針を短くまとめ、私が了承してから制作を始めてください。６．メリハリのあるデザインで、トップページから作る
用意された素材と確認した内容を優先し、資料やメモをサイトに載せやすい文章に整理して、まずはトップページだけを作成してください。合意した配色・方向性を軸に、デザイナーとして振り切った、メリハリのあるデザインにしてください。文字の大小、余白の広狭、配色のコントラスト、写真の見せ方を大胆に使い分け、視線を集める見せ場と、落ち着いて読ませる部分を明確に作ってください。無難なテンプレートや同じ大きさのカードの羅列で済ませず、このサイトならではの印象に残る表現を入れてください。大胆な表現でも、事業内容の伝わりやすさ、文字の読みやすさ、操作のしやすさ、スマートフォンでの見やすさは守ってください。７．不足する画像や内容は仮に補う
画像がない箇所は、合意したデザインの方向性に合う画像を生成してください。画像生成が使えない場合は仮画像を配置してください。質問への返答で「未定」「分からない」「仮で進めてよい」となった文章や情報は、ダミーの文章や仮の値で補って制作を進めてください。私の返答を待たずに、不明点をダミーで埋めて進めないでください。未確認の会社情報・連絡先・料金・実績などは事実として扱わず、画面上でも「仮」「要確認」と分かるようにしてください。生成画像は実際の店舗・商品・スタッフなどの写真と誤認させない扱いにし、最後に生成画像と差し替え・確認が必要な箇所を一覧で知らせてください。８．トップページを見せて、確認を待つ
パソコン内でトップページを表示できるようにし、開き方を案内してください。私が内容やデザインを確認し、了承してから残りのページを作成してください。まだ公開はしないでください。制作時は、指定したサーバーで公開・運用できる構成にしてください。サーバー側で動かせない仕組みや、別サービスの契約が必要な構成を使う場合は、制作前に説明してください。作成する各ページに、内容に合ったタイトル・メタ説明文・h1見出しを設定し、公開URLに合わせて各ページのURLとサイトマップも整えてください。今後も同じ作業フォルダから修正・公開できる形で保存してください。
トップページができたら、雰囲気や内容を確認し、直したいところを伝えましょう。方向性が決まったら、「このデザインで、残りのページも作ってください」と依頼します。
公開してよい内容か、確認する
できあがったサイトを開き、ダミーの文章や仮の値、仮画像が残っていないかを確認し、正式な内容に差し替えましょう。公開して困る情報や写真が含まれていないか、説明に間違いや事実と異なる内容がないかも確認します。電話番号・メールアドレス・住所などの連絡先も、一つずつ確かめてください。AIに制作を任せても、内容が正しいかどうかは、公開前に自分たちの目で確認することが大切です。
いよいよ公開。誰でも、どこからでも見えるようにしよう
サイトができたら、サーバーに公開して、誰でも見られるようにしましょう。
AIがサーバーに接続できるようにして、設定から公開までAIに任せること。
SSHという接続方法を使えば、AIがパソコンからサーバーへファイルを送ったり、必要な作業を進めたりできます。自分でファイルを一つずつアップロードする必要はありません。
エックスサーバーなら、最初のサーバー設定などもAIに行わせることができる「スキル」を公式で配布しています。スキルは、AIに作業手順を伝える手順書のようなものです。エックスサーバーのサービスを見る
CodexまたはClaude Codeで制作に使った作業フォルダを開き、次のように依頼します。ログインや認証など、自分の操作が必要なところはAIに案内してもらいましょう。
このフォルダで作成したサイトを、SSH接続を使ってサーバーに公開してください。 公開先のURL：https://自社のドメイン/ 利用するサーバー：エックスサーバー（別の会社を使う場合は書き換えてください） まず、SSH接続に必要な情報と設定を確認し、私の操作が必要なところだけ順番に案内してください。接続先・ユーザー名・ポート・公開フォルダは、契約内容を確認してから設定してください。 エックスサーバーの場合は、https://developer.xserver.ne.jp/ai/skills/xserver/SKILL.md を読んで、公式の手順に沿って初期設定を進めてください。 秘密鍵やAPIキーはチャットに貼らず、パソコン内で安全に設定できる方法を案内してください。 接続できたら、公開先に合わせてサイトのURLやサイトマップを整え、必要なファイルをアップロードしてください。既存のサイトやファイルがある場合は、変更前にバックアップし、上書きの対象を確認してください。資料の原本や認証情報は公開しないでください。 公開後は、HTTPSで各ページが表示されることと、リンク・画像・スマートフォン表示を確認し、公開URLを教えてください。
URLを開いて、会社のホームページが表示されれば、まず最初の目標は達成です。
デザインや文章は、これから変えていけます。まずは、自分の会社の情報がウェブ上にあり、お客様に案内できる状態を作りましょう。
公開したURLを、SNSや会社のプロフィール、名刺、メールの署名にも載せて、お客様に案内しましょう。
ここからが本番。改善を繰り返そう
ここまできたら、後はAIにどんどん気になる箇所を伝えて、改善を繰り返すだけです。
改善するときに意識したいポイント
- タイトルとメタディスクリプションを整える。 SEOを意識しながら、各ページの内容や強みが伝わる文章をAIに考えてもらいましょう。
- 情報は過不足なく、自分たちならではの一次情報を充実させる。 実績や事例、現場の写真、お客様からよく聞かれる質問など、実際の経験に基づく情報を積極的に加えていきましょう。
- 理想の結果に近づく方法を、とにかくAIに聞く。 「もっと問い合わせを増やしたい」「サービスの魅力を伝えたい」など、目指す結果を伝えて、改善案を出してもらいましょう。
トップページの写真を、追加した店舗写真に変更してください。
変更後の内容を確認して、問題がなければ「この内容を公開サイトに反映して」と伝えます。
- 変更を伝える ― CodexまたはClaude Codeで同じ作業フォルダを開き、追加資料と希望を伝える
- 確認する ― 文章・写真・表示を自分で確認する
- 反映する ― 問題がなければ、公開サイトへの反映を依頼する
大きく変更する前は、「変更前の状態に戻せるように保存してから進めて」と頼んでおくと安心です。作業フォルダも、次回の更新で使えるように保管しておきましょう。
デザインを整えるだけでなく、お客様から聞かれた質問に答える、実績を追加する、サービスの説明を詳しくする。そうした変更を重ねることで、営業やお問い合わせに役立つサイトへ育てていけます。
検索やアクセスの状況を確認する
公開したら、Google検索での状況と、サイトへのアクセスを確認できるようにします。
Googleサーチコンソールに登録する
Google検索から、どんな言葉でサイトを見つけてもらえているかを確認できるツールです。
登録に必要な設定や、サイトマップの作成もAIに任せましょう。ログインなど、自分の操作が必要なところだけ案内してもらえば大丈夫です。
このサイトをGoogleサーチコンソールに登録したいです。サイトマップの作成・公開や、登録に必要なサイト側の設定をお願いします。ログインなど、私にしかできない操作だけ順番に案内してください。最後に、登録とサイトマップの送信ができているか確認し、検索の状況を見る方法を教えてください。
Googleアナリティクスを設定する
サイトに何人くらい来て、どのページを見ているかを確認できるツールです。
サイトへの設定から、正しく動いているかの確認までAIに任せましょう。自分で操作する必要があるところだけ、順番に教えてもらいます。
このサイトでGoogleアナリティクスを使いたいです。必要な設定とサイトへの組み込みをお願いします。ログインなど、私にしかできない操作だけ順番に案内してください。最後に、アクセスが正しく記録されるか確認し、訪問者数やよく見られているページを確認する方法を教えてください。
困ったらスタイルウェブへご相談ください
ここまで読んで、「自分でも作れそう」と思っていただけたなら、この記事を書いた甲斐があります。まずは気軽に、ひとつ作ってみてください。
とはいえ、進めていると「ここだけうまくいかない」「もう少し見栄えを整えたい」「本業が忙しくて、手が回らない」という場面もあると思います。
スタイルウェブは、20年にわたりウェブ制作に携わってきました。AIで作ったサイトの調整や公開のお手伝いから、ホームページ制作のご相談まで。自分たちでできるところは進めて、難しいところだけ頼っていただく形でも構いません。
もちろん、お仕事としてのお手伝いになりますが、必要な作業を伺ったうえでお見積もりします。最初から全部を依頼しなければ、と身構える必要はありません。
冒頭で少し触れた「下心」の回収は、このくらいにしておきます。困ったときに、ふと思い出していただけたらうれしいです。
