AIでホームページを作る方法。月20ドル、サーバー代0円

「AIでホームページが作れる」と聞くけれど、具体的に何を契約して、何を打ち込めばいいのかが分からない。 そこで止まっている人向けの記事です。

先にお金の話をします。かかるのはこれだけです。

制作会社に頼めば数十万円かかるものが、実質ドメイン代だけで維持できます。

個人開発でマーケティング支援サービス「商略AI」( https://shoryaku.net ) を作っています。サイトのページはほぼ全部AIに書かせていて、業種別のページは7枚あります。何をどう頼んだのかを順番に書きます。

プログラミングの知識は前提にしません。 ただし「AIが全部やってくれる」とも書きません。どこまで任せられて、どこで必ず失敗するかも含めて書きます。

使うのは「AIエージェント」で、ChatGPTとは別物

まずここを揃えます。普段ブラウザで使うChatGPTやClaudeは、聞くと答えが返ってくる道具です。コードを教えてもらっても、それを保存して動かすのは自分の仕事です。

この記事で使うのはAIエージェントと呼ばれる種類の道具です。違いは1つだけです。

「トップページを作って」と頼むと、エージェントが実際にファイルを作ります。 「文字が小さい」と言えば、そのファイルを開いて直します。ここが決定的に違います。

代表的なものが3つあります。

「Codexって何？」と思っていた人向けに言うと、ChatGPTの中にある「自分でファイルを触れるモード」だと思ってください。

料金：どれも月20ドル前後から

2026年9月5日時点で、各社の公式ページに載っている個人向けの料金です。料金はよく変わるので、契約前に必ず自分で公式ページを確認してください。

（出典：claude.com/pricing、learn.chatgpt.com/docs/pricing、cursor.com/pricing。いずれも2026-09-05 確認）

3つとも契約する必要はありません。 ホームページ1つ作るなら、どれか1つで足ります。

3つの違いは「モデルの選択肢」と「使用量の数え方」

商略AIでは3つとも有料プランを契約して使い分けています。その上で、実際に効いてくる違いは2つでした。

違い1：選べるモデルが1社か複数社か

Claude Code は Anthropic のモデル、Codex は OpenAI のモデルを使います。Cursor だけが複数社から選べます。 公式のドキュメントによると、Cursor 独自のモデルに加えて Anthropic・OpenAI・Google などのモデルが使え、料金プランの中で切り替えられます。

「今日はこのモデルが調子悪いから別のを試す」ができるのは Cursor だけです。逆に言うと、選択肢が増えるぶん最初は迷います。

違い2：使用量がいつリセットされるか

ここが一番体感に効きます。 どれも「使い放題」ではなく、一定量を使うと待たされます。数え方が違います。

（各社の公式ドキュメント / ヘルプセンターで2026-09-05 確認。上限そのものの数値は3社とも公開されていません。 各ツールの利用状況画面で確認してください）

実務上はこう効きます。土日にまとめて一気に作りたいなら、時間枠で止まりにくい Cursor が扱いやすい。 平日に少しずつ進めるなら、どれでも困りません。

Claude を普段からブラウザで使っている人は、Claude Code の作業がその枠を食う点に注意してください。ホームページを作った日は、いつものチャットが早く止まります。

迷ったら

Codex です。 ChatGPT の無料プランにも含まれているので、契約せずに触ってみて、足りなければそのまま Plus に上げられます。最初の1つを決めるためだけに20ドル払う必要はありません。

手順：フォルダを1つ作って、開かせる

契約したら、やることはこれだけです。

1. パソコンのどこでもいいので、空のフォルダを1つ作る（例：mysite）
2. AIエージェントを起動して、そのフォルダを開かせる
3. 話しかける

Claude Code のデスクトップアプリなら、フォルダを選ぶ画面が出ます。Cursor なら「フォルダを開く」です。このフォルダの中身が、そのままあなたのホームページになります。

実際に打っているプロンプト

長い呪文は要りません。 短く、具体的に、順番に頼むほうがうまくいきます。

1. 最初に、何を作るかを説明する

いきなり「ホームページ作って」と言うと、当たり障りのないものが出てきます。誰に何を伝えるページなのかを先に言います。

整体院のホームページを1枚作りたい。
お客さんは30〜50代の女性で、肩こりと腰痛で来る人が多い。
一番やってほしいのは電話予約。次がLINE予約。
初回2,980円のキャンペーンを一番目立たせたい。
まずはHTMLとCSSだけの、シンプルな1枚もので作って。

「まずはHTMLとCSSだけで」は付けたほうがいいです。 指定しないと、エージェントは本格的な仕組み（ReactやNext.jsなど）を持ち出すことがあります。動くものは出ますが、あとで自分では何も触れなくなります。

2. できたものを自分の目で見る

「できました」という報告と、実際の画面は普通にズレます。 必ず見てください。見る方法は3つあります。

迷ったらドラッグ＆ドロップが確実です。エージェントを介さないので、「本当にそのファイルがそうなっているか」を疑わずに済みます。

そのうえで、エージェントにも見せます。

できたページをブラウザで表示して、スクリーンショットを撮って見せて。

3. 見た目を直す

ここが一番たくさん打つところです。専門用語は要りません。見たままを言います。

一番上の見出しが小さくて、スマホだと3行になって読みにくい。
もっと大きくして、2行に収めて。

電話番号のボタンが下のほうにあって気づかない。
スクロールしてもずっと画面の下に出しっぱなしにして。

全体的に色が多すぎる。青と白とグレーだけにして。

4. スマホでの見え方を必ず指定する

これは毎回言ったほうがいいです。

iPhone SEの幅（375px）で見たときに崩れていないか確認して。
スクリーンショットを撮って見せて。

エージェントは「パソコンの画面で正しく見える」ところで満足しがちです。実際のアクセスはスマホが多いので、幅を数字で指定して確認させます。

5. 増やすときは「同じ作りで」と言う

商略AIのページは、業種別に7枚あります。このとき、素直に頼むと7枚ぜんぶ別々のファイルとしてコピーされます。 そうなると、電話番号を1つ変えるのに7か所直すことになります。

なので、こう頼みます。

このページを、業種別に5枚に増やしたい。
ただしページのコピーは作らないで。
見出し・お悩み・料金・よくある質問だけを、業種ごとのデータとして1つのファイルにまとめて、
見た目の部分は1つを共通で使い回す形にして。

商略AIのページはこの形です。ページごとのファイルは6行しかなく、中身の差分は全部1つのデータファイルに入っています。文言を直したいときは、そのファイルだけを見ればいい状態です。

AIに任せると必ず起きる3つのこと

ここからが本題です。放っておくと必ず起きます。 全部、商略AIで実際に起きたことです。

1. 架空の実績を書く

一番危ないのがこれです。「導入企業500社」「お客様の声」「満足度98%」——ホームページのテンプレートにはこういう枠があるのが普通なので、指示しないとAIは親切に埋めてきます。

商略AIには有料のお客さんがまだ1人もいません。それなのに「導入企業ロゴ」の枠が出てきたことがあります。

書いた文章は景品表示法の対象になります。 うっかり残したまま公開すると、実害が出ます。

止め方は、毎回言うことです。

実績・お客様の声・導入企業・利用者数は、こちらが渡した事実以外は一切書かないで。
数字を出すときは、その根拠がどこにあるかも一緒に書いて。

2. 毎回ちがう色が出てくる

昨日は青、今日は紫。「さっきの色に戻して」と言うと、また別の青になります。

原因は、「正しい色」がどこにも書いていないからです。書いていないので、エージェントは毎回それを推測します。

止め方は、色を決めて、それをファイルに書き残すことです。

このサイトで使う色を決めたい。
メインの藍は #1e3a5f、差し色は #e8a317、文字は #101a26。
それ以外の色は使わない。
この決まりを COLORS.md というファイルに書いて残して。
今後は色を触る前に必ずそのファイルを読んで。

3. 頼んでいないところまで書き換える

「見出しを大きくして」と頼んだら、ついでにレイアウトごと変わっていた、というのが起きます。

止め方は2つです。

変更する前に、どのファイルのどこを変えるつもりか教えて。実際の変更はまだしないで。

もう1つは、作業の区切りごとに保存しておくことです。エージェントに頼めばやってくれます。

今の状態を git で保存しておいて。あとで戻せるようにしたい。

git（ギット）は変更履歴を残す仕組みです。中身を理解する必要はありません。 「保存して」「さっきの状態に戻して」が言えれば足ります。

【発展】ルールはファイルに書く

ここは、ページが増えて手直しが増えてきたら読んでください。1枚作るだけなら要りません。

上の3つの止め方には共通点があります。プロンプトに書いた注意は、その会話が終わると消えます。 明日また同じ失敗をします。

対策は単純で、守らせたいことをフォルダの中のファイルに1枚だけ書いておくことです。

このフォルダに RULES.md を作って。
今後この中身を守ってほしい。会話の最初に必ず読んで。

・実績や数字を勝手に作らない
・色は #1e3a5f と #e8a317 と #101a26 と白だけ
・スマホ（375px）で崩れていないか毎回確認する
・大きく変える前に、変更内容を先に説明する

あとは会話のはじめに「RULES.md を読んで」と言うだけです。ファイルが1枚あるだけで、毎回書いていた注意書きが要らなくなります。

ポイントは、ファイルを1枚に絞ることです。 商略AIでは同じ内容を複数のファイルに書いていた時期があり、片方だけ古くなって、古いほうを読んだエージェントが古いルールで書くという事故が起きました。今は正本を1つに決めて、他のファイルからは「そっちを読んで」と指すだけにしています。

注意点：AIに任せられないこと

正直に書きます。

• 「なんかダサい」の判断ができません。 色のルール違反は指摘できますが、余白が詰まって窮屈だとか、写真が古臭いとかは、人間が見るしかありません
• 何を書けば売れるかは分かりません。 お客さんが何に困っていて、どの言葉で刺さるかは、あなたが知っていることです。AIはそれを整えるのが仕事です
• 「できました」を信用してはいけません。 必ず自分の目で、パソコンとスマホの両方で見てください

逆に言うと、この3つ以外はだいたい任せられます。 HTMLの書き方も、スマホ対応のやり方も、覚える必要はありません。

詰まったら、画面を見せる

作業中に「言われた通りの画面が出てこない」ことが必ずあります。管理画面の見た目は頻繁に変わるので、手順の説明と目の前の画面が食い違うのです。

このとき、Claude のデスクトップアプリに Chrome拡張（Claude in Chrome） を入れておくと、いま開いている画面をそのまま見せて「どこを押せばいい？」と聞けます。 文章で手順を読むより確実です。

続きは作ったホームページを無料で公開する方法に書きました。サーバー代0円で公開する手順と、独自ドメインの取り方です。

• AI
• 個人開発
• プロダクト