大阪探検隊
HOW TO BUILD A WEBSITE WITH AI — 後編・運用と集客

AIで、ひとりで
Webサイトを作って公開する

前編では、AIエージェントと GitHub・Supabase・Vercel で“作って公開する”ところまでを見てきました。この【後編】では、その先へ——わからない時の聞き方、主要エージェントの無料枠&料金、つまずきやすい落とし穴、バイブコーディングやWordPressとの違い、そして公開したサイトを“多くの人に見てもらう”ための一手までを、実用本位でそろえます。

GitHub Vercel Supabase Claude Code OpenAI Codex Google Antigravity
AIに伝わるプロンプトのコツを6つにまとめた図解。1.目的を明確にする、2.具体的に書く(5W1H)、3.条件や制約を伝える、4.出力形式を指定する、5.参考情報を与える、6.試して改善する。中央にAIの脳とPROMPT入力欄のイメージ
💡 コツは、たった6つ。目的・具体・制約・形式・参考・改善——この順で伝えるだけで、AIの返事はぐっと良くなります。

07🙋 わからなければ、AIに聞けばいい

これがいちばんの安心材料。覚える必要はありません。詰まったら“検索する前に”まず聞く。

AIは、24時間つきあってくれる家庭教師

知らない用語、英語のメッセージ、次の一手——「これ、どういう意味?」と聞いていいのがAI開発の最大の利点です。 恥ずかしがらず、何度でも、自分がわかるまで質問しましょう。下のような“聞き方”をそのまま使えます。

用語を聞く:〈専門用語〉ってどういう意味?小学生にもわかるように教えて」
迷いを相談:「この選択肢、AとBで迷ってる。初心者向けに長所と短所を比べて」
英語を訳す:「いま出た英語のメッセージ、何て言ってる?私は何をすればいい?」
もう一度:「さっきの説明、むずかしかった。たとえ話でもう一度お願い」

08💴 主要AIエージェントの 無料枠&料金 ひとめ表

どれも無料枠から始められます。まず触ってみて、合うものを選ぶのが正解。

サービス 無料で試せる 月額プラン(目安) コーディング向け ひとこと
Claude ★おすすめ
Anthropic
登録・インストール ↗
◯ 無料枠あり
※チャット版のみ
Pro 約$20〜 / Max 約$100〜 Claude Code 有料専用
ターミナル&デスクトップ
実装と長い文章の理解が得意。安全志向。
ChatGPT / Codex
OpenAI
登録・インストール ↗
◯ 無料枠あり Plus 約$20〜 / Pro 約$200 Codex 汎用力が高く、情報や事例も豊富。
Gemini / Antigravity
Google
登録・インストール ↗
◎ 無料枠が寛容 AI Pro 約$20〜 / Ultra 約$250〜
※本体は無料で利用可(Google AI プラン)
Antigravity 無料で使える範囲が広い。文章・画像に強い。

「Claude Code」は 有料プラン専用 です

大事なポイント: 無料で試せるのは Claude のチャット版(claude.ai)です。本記事のイチオシ Claude Code(コード版)は、Claude Pro / Max などの有料プランか、 のお支払い設定が必須で、無料では使えません。まずチャットで雰囲気をつかみ、本格的に作るなら有料プランへ——という順番がおすすめです。

価格・プラン名は2026年6月時点の目安です。最新・正確な料金は各社の公式ページで必ずご確認ください。各社ロゴ・名称は各社の商標で、識別のために掲載しています。

このサイトの結論:迷ったら、まず Claude
そして デスクトップ版 Claude Code が最強。

実はこのページも、このサイト全体も、Claude Code で作られています。何より「言葉で頼むと、実際にファイルを横断して手を動かしてくれる」体験が強力。 まず Claude のチャットは無料で試せますが、Claude Code を使うには有料プラン(Pro / Max など)が必要です。雰囲気をつかんでから加入するのが現実的なはじめ方です。

🗂️ ファイルを横断プロジェクト全体を読み、実際に手を動かして直す
🧠 長い文脈を保持前の会話やルールを覚えたまま、ブレずに作業
🛡️ 安全側の設計公開前点検や、危険な操作の確認を促してくれる

「最強」は当サイト運営者の主観です。正解は人それぞれ。まずは無料枠で触って、自分に合う相棒を選ぶのがいちばんです。

主要AIエージェントの料金・機能を比べる比較表のイメージ。ノートPCの画面に各サービスのロゴが並ぶ表が表示され、上にはClaude・OpenAI・その他AIのアイコンが浮かんでいる
💴 まずは無料枠で見くらべ。使い心地を試してから、自分の使い方に合うものへ。表の数字は目安です(最新は各公式でご確認を)。

09⚠️ つまずきやすい落とし穴と対策

AIは強力ですが万能ではありません。先に知っておくだけで、大きな事故を避けられます。

これだけは気をつける

  • AIは自信満々に間違える。 もっともらしい嘘()を言うことがあります。重要な事実・設定は必ず自分でも確認を。
  • 秘密の鍵を晒さない。 APIキーやパスワードをコードに直書きして push すると、世界に公開されてしまいます。必ず環境変数へ
  • データベースは公開設定に注意。 RLSを切ったまま公開すると、誰でもデータを読み書きできる危険な状態に。公開前に必ず点検。
  • 丸ごと信用しない。 大量の変更をまとめて受け入れる前に、何が変わるか説明させ、要点を理解してから取り込む。
  • コストを見張る。 AIの利用料や、外部サービスの従量課金は、使い方しだいで膨らみます。上限設定や通知を活用。
  • バックアップは履歴で。 こまめにコミットしておけば、AIの大胆な変更で壊れても、すぐ前の状態に戻せます。

このサイトが実践していること

大阪探検隊では、セキュリティを毎回チェックする約束を指示ファイルに明記し、AIが作業を終えるたびに点検を報告する運用にしています。 仕組みや裏側をもっと知りたい方は、姉妹記事「このサイトはこうして作られた」もどうぞ。

10❓ よくある質問

これから始める人がいちばん気になる3つ。

プログラミング未経験でも本当に作れますか?

作れます。コードはAIが書くので、最初は「何を作りたいか」を言葉で伝えられれば始められます。ただし公開後の安全管理や、AIの間違いに気づくための基礎知識は、作りながら少しずつ身につけていきましょう。

費用はどれくらいかかりますか?

GitHub・Vercel・Supabase は、個人利用ならいずれも無料枠から始められます。主な費用はAIエージェントの利用料で、使う量に応じたです。まずは無料枠と1つのAIで小さく試すのがおすすめ。

Claude Code・Codex・Antigravity はどれを選べばいい?

最初は「今すぐ使えるもの1つ」で十分です。慣れてきたら、実装・コンテンツ・検証のように役割で複数を使い分けると、それぞれの得意分野を活かせます。このサイトは3つを協働させています。

など)は必要ですか?

必須ではありません。小規模なサイトなら、素のHTML・CSS・JavaScriptのほうが軽くて壊れにくいこともあります(このサイトもその方針)。必要になったらAIに相談して選べばOKです。

11🌊 バイブコーディングとはこのページでやっていること

ここまでの作り方には、名前があります。いま世界で話題の「バイブコーディング(vibe coding)」です。

とは、細かいコードを自分で打ち込む代わりに、AIに自然な言葉で「こうしたい」と伝えて作ってもらうプログラミングのやり方です。 2025年にAI研究者の Andrej Karpathy(アンドレイ・カパシー) が広めた言葉で、コードの一行一行と格闘するより、"こうしたい"という流れ(vibe)に身をまかせて作る——そんな感覚を表しています。

つまり、このページで紹介してきた手順そのものが、バイブコーディングです。あなたは「カフェのサイトを作りたい」「もっと余白がほしい」と言葉で伝えるだけ。 実際のコードは AIエージェント が書き、あなたは出てきた結果を見て「ここを直して」とまた言葉で返す——その繰り返しで、サイトは形になっていきます。

得意なこと・気をつけたいこと

  • 得意なこと: アイデアを素早く形にする、個人サイト・・学習用。「とりあえず動くものを見たい」と相性抜群です。
  • 気をつけること: お金や個人情報を扱う・規模が大きくなるほど、中身を理解して確認する力が大切になります。雰囲気だけで全部AI任せにはしないこと。
  • 気をつけること: AIは自信満々に間違えることがあります。鍵の管理・セキュリティ・コストなどの要所は人の目で——詳しくは 09 つまずきやすい落とし穴 へ。

このページが勧める「健全なバイブコーディング」

このガイドの立場は、「AIに丸投げ」ではなく「AIと一緒に育てる」。 言葉で素早く作る気持ちよさはそのままに、要所だけは自分でも理解して確かめる——それが、長く安心して使えるサイトを作る"いいとこ取り"のバイブコーディングです。 コードが書けなくても大丈夫。まずは雰囲気で作ってみて、少しずつ「なぜ動くのか」を覚えていけば、それでじゅうぶんです。

12🆚 ブログサービスやWordPressと、何が違う?

「はてなブログや note で十分では?」という人へ。手軽さは魅力ですが、自由度はまるで別世界です。

ブログサービス
はてな / note / Ameba
とにかく手軽で、書くことに集中できます。反面、デザイン・・URLの形・表示速度・広告の有無などは用意された枠の中だけ。データやデザインはサービスに紐づき、引っ越しやサービス終了のリスクもあります。 手軽さ◎自由度△テンプレ内

テーマやかなり自由に作れます。ただし本体・プラグインの更新やセキュリティ、サーバーやデータベースの保守が続き、表示速度の調整にも手間がかかりがち。「便利な仕組みを管理し続ける」スタイルです。 自由度◯保守が必要プラグイン
自分で作る
AI ×
1ピクセル・1機能まで全部こちらの自由。見た目も動きも、URLの形も思いのまま。表示は速く、独自ドメインも使え、特定サービスへの縛り()がありません。代わりに自分で作って直す必要がありますが——そこをAIが相棒として肩代わりしてくれます。 自由度◎高速縛りなし

正直なところ

「ただ文章を書いて残したい」だけなら、ブログサービスのほうが速くて楽です。優劣ではなく目的の違い。 でも「思いどおりの形を、自分の場所で育てたい」なら、自分で作る自由は何物にも代えがたい。 これまでは保守の手間が壁でしたが、AIがいる今、その壁はぐっと低くなりました。

13🚀 まずは"かんたん"で、世界に出してみよう

完璧を目指さなくて大丈夫。公開はゴールじゃなくて、スタートです。

最初の一歩は、びっくりするほど小さくて構いません。1ページだけ、自己紹介だけ、写真が数枚だけ—— それでも「世界のどこからでも見られる、自分の場所」を持てたという事実は、思っている以上に大きいものです。まずは"かんたん版"を、えいやと公開してみましょう。

そして公開したら終わり、ではありません。少しずつ、自分のやりたいことを足していく。色を変える、文章を直す、新しいページを増やす—— その小さな更新の積み重ねが、いつのまにか「自分だけのサイト」を育てていきます。

つくる過程で、見つかるもの

手を動かしているうちに、「自分はこれが好きだったんだ」「本当はこういうことがやりたかったんだ」と気づく瞬間が訪れます。 サイトを育てることは、新しい自分や、まだ言葉になっていなかったやりたいことに出会う旅でもあります。 うまくいかない日は、AIに相談すればいい。完璧じゃなくていい。あなたのペースで、少しずつ。

14🔎 公開のあと — 多くの人に見てもらうために

作って終わりにせず、"届ける"工夫も少しだけ。代表的なのが Google の無料ツール2つです。

青く光るデジタル都市のスカイラインと、四方へ伸びるデータの光の筋。公開したサイトが世界へ広がっていくイメージ
🌃 つくったサイトを、世界へ。公開はゴールではなく、ここからが"届ける"スタートです。

まず登録しておきたい無料ツール

  • — 検索結果でサイトがどう扱われているかを見る道具。(サイトの地図)を送信して見つけてもらいやすくしたり、どんなキーワードで来たか、表示の問題がないかを確認できます。公式ページで登録 ↗
  • どれくらいの人が、どこから来て、どのページを見たかを知る道具。人気ページや反応がわかると、次に何を足すかのヒントになります。公式ページで登録 ↗

ほかにも、こんな"届ける"工夫

sitemap.xml(SNSでシェアしたときの見た目)を整えると、検索やSNSで伝わりやすくなります(このサイトも実装しています)。 もちろん、SNSで自分から紹介するのも、いちばん早い一歩。 アナリティクスなどは、 やプライバシーへの配慮(同意表示など)が必要になる場合があります。

15📅 もっと詳しい手順は、これから

この記事は"全体像と考え方"が中心です。一歩ずつの具体的な手順は、順番に増やしていく予定です。

計画中のコンテンツ(更新時期は未定)

今後、各ステップのより詳細な手順(GitHub・Supabase・Vercel の具体的な操作つき解説)や、 Search Console / Google アナリティクスの登録手順、独自ドメインの設定などのくわしい設定ガイドを追加していく計画です。 ただ、いつの更新になるかは今のところ未定です。気長にお待ちいただけたら嬉しいです。 作り方の手前で、そもそもAIで世界がどう変わるのかを、ちょっとまじめに考えてみた思索ノート「AIで世界はどう変わるのだろう」もあります。あわせてどうぞ。

青空と白い雲が広がる、抜け感のあるデジタル都市の風景

深呼吸。完璧じゃなくて、いい。
AIと一緒なら、いつでも、何度でも、やり直せます。

※ 本ページは、AIエージェントを使った個人でのWeb制作の進め方を、一般向けにかみくだいて紹介したものです。各ツールの料金・機能・名称は変更される場合があります。利用にあたっては各サービスの公式情報・最新の利用規約を必ずご確認ください。AIの出力には誤りが含まれることがあるため、重要な判断はご自身でも確認してください。掲載情報は2026年6月時点。

✦ おさらい — 前編へ

公開のあとが、見えた。
その“作り方”は、前編に。

まだ作っていなければ、【前編|作って公開する】に、全体像・準備・4ステップ・効くプロンプトがそろっています。手を動かすところから、どうぞ。

◀ 前編を読む — 作って公開する4ステップ 🔨 4ステップへ

作りながら、覚えていく。
AIと一緒なら、最初の一歩は軽い。

このサイト自体が、AIエージェントと GitHub・Supabase・Vercel で運営されている実例です。実際の技術構成や運用の裏側は姉妹記事で公開中。万博や横浜花博の記録づくりも、同じ方法で続けています。気になるところから、どんどん探検してください。