00はじめに — 「コードが書けない」は、もう壁じゃない
大事なのは、完璧なコードを書く力よりも「何を作りたいか」を言葉にして、AIと一緒に直していける力です。
数年前まで、Webサイトを一から作るには、HTMLやJavaScriptを自分で書き、サーバーを借り、公開設定を整える——という長い道のりが必要でした。 いまは AIエージェント（あなたの指示で実際にコードを書いて直してくれるAI）が登場し、その道のりが大きく短くなっています。
このページは、「AIに丸投げすれば誰でも一瞬で完成」という魔法の話ではありません。 そうではなく、AIを"優秀だけど時々間違える相棒"として使いこなし、安全に・長持ちする形で公開するための、 現実的な手順と考え方をまとめた実践ガイドです。実際にこのサイトを運営して得た知見をベースにしています。🛠️
01🗺️ 全体像 — どのツールが、何の係か
最初に「登場人物（ツール）の役割分担」をつかむと、迷子になりません。家を建てるのにたとえると分かりやすいです。
BUILDER比較・登録へ ↓
GitHubSTORAGE
SupabaseDATABASE
VercelPUBLISH
いちばん大事な考え方
「AIに作ってもらう」より「AIと一緒に育てる」。一発で完璧を狙わず、小さく作って→確認して→直して、を何度も回します。 回数を重ねるほど、あなたの意図がAIに伝わり、サイトも良くなっていきます。これが個人開発でいちばん効くコツです。
02🧰 準備するもの — アカウントと道具
最初の30分で揃えられるものばかり。基本は無料枠から始められます。
そろえるアカウント（個人なら無料枠でOK）
- GitHub アカウント — コードの保管とバージョン管理。すべての土台になります。
- Vercel アカウント — 公開（ホスティング）。GitHubアカウントでそのままログインできます。
- Supabase アカウント — データベースが必要になったら。最初は無くても始められます。
- AIエージェントの利用契約 — Claude Code（Anthropic）/ OpenAI Codex / Google Antigravity のいずれか。ここが主な費用です。
パソコン側の道具
- エディタ（VS Code など）。AIエージェントの多くは、このエディタや専用アプリ、ターミナルから動かします。
- Git（GitHubと連携する仕組み）。AIに「インストール手順を教えて」と聞けば、そのまま案内してくれます。
- Node.js。多くの制作ツールが動く土台。これも必要になった時点でAIに導入を手伝ってもらえます。
ヒント：分からない準備こそAIに聞く
「Macです。Git をインストールして GitHub とつなぐところまで、初心者向けに一歩ずつ教えて」—— こう頼めば、AIがあなたの環境に合わせて手順を出してくれます。準備段階からAIを"先生"として使うのが近道です。
03🤖 AIエージェントの使い分け
1つだけでも完結できます。複数を「役割分担」させると、それぞれの得意を活かせます（このサイトは3つで協働しています）。
使い分けの考え方
- まずは1つに集中。 いきなり3つは情報過多。慣れた1つで「作る→公開する」を最後まで通すのが先決です。
- 役割で分ける。 「実装はA・コンテンツはB・最終チェックはC」のように担当を決めると、混乱が減ります。
- セカンドオピニオン。 あるAIが詰まったら、別のAIに同じ問題を見せると、違う解き方が出ることがあります。
- ルールブックを置く。 プロジェクトに「守ってほしい約束」を書いた指示ファイル（このサイトでは
CLAUDE.mdなど）を置くと、AIが毎回それに従ってくれます。
04🔨 作って公開するまでの4ステップ
ここからが本番。「土台 → 作る → データ → 公開」の順に進みます。各ステップの実作業は、ほぼAIに頼めます。
土台をつくる — コードの置き場所 GitHub
まず GitHub にリポジトリ（プロジェクトの入れ物）を1つ作ります。ここがコードの正式な保管場所になり、 「いつ・どこを・なぜ変えたか」の履歴がすべて残ります。失敗しても以前の状態に戻せるので、安心して試せます。
- コミット＝変更を1つの区切りとして記録すること。「ヘッダーの色を変更」のように、意味のまとまりで小まめに残すのがコツ。
- ブランチ＝本番に影響しない"作業用の分身"。試したいことはブランチで作り、うまくいったら本番（
main）に合流させます。 - AIエージェントの多くは、このコミットやブランチ操作もあなたの代わりに実行してくれます。
このフォルダを Git で初期化して、GitHub に new-site という名前の非公開リポジトリを作って push して。最初のコミットメッセージは init で
中身をつくる — AIにコードを書いてもらう Claude Code / Codex
いよいよ制作です。とはいえあなたが書くのは"指示"であって、コードはAIが書きます。 最初の一歩は、作りたいものをできるだけ具体的に伝えること。色・雰囲気・載せたい要素・参考にしたいサイトを言葉にします。
- 小さく始める。 「トップページだけ」「お問い合わせ欄だけ」と区切ると、確認も修正も早く回せます。
- 都度プレビュー。 出来たら必ずブラウザで見て、ズレや違和感をAIに伝えて直してもらいます。
- 専門用語は要らない。 「もっと余白がほしい」「スマホで文字が小さい」のような普段の言葉で十分伝わります。
カフェの一枚もののサイトを作りたい。落ち着いたベージュ基調で、上に店名、次に営業時間、最後に地図リンク。まずは枠だけ作って、出来たら見せて
データをつなぐ — 必要になったら Supabase
お知らせを増やしたい、投稿を受け付けたい、写真一覧を後から足したい——そんな「あとから増える・変わるデータ」が必要になったら、 Supabase の出番です。静かな紹介サイトなら、無くても全く問題ありません。
- テーブル＝データの表（例：「お知らせ」表に日付と本文を並べる）。AIに頼めば作成用の指示まで用意してくれます。
- RLS（行レベルセキュリティ）は必ずON。 「公開していい行だけ読める」状態にする安全装置。ここを切ったまま公開しないのが鉄則です。
- 秘密の鍵は隠す。 管理用のキーは絶対にコード内へ直書きしないこと（後述の落とし穴も参照）。
Supabase に『お知らせ』テーブルを作りたい。日付と本文の2列。誰でも読めるが書き込みは不可。RLS を有効にした安全な設定で、手順を教えて
世界へ公開する — pushしたら自動で出る Vercel
最後は公開です。Vercel を GitHub リポジトリにつなぐと、以後はコードを push するたびに自動でビルドして本番に反映されます。 HTTPS（鍵マーク）も世界中への高速配信も、独自ドメインの設定も、Vercel が面倒を見てくれます。
- 初回だけ接続作業。 Vercel でリポジトリを選び「Import」するだけ。2回目以降は何もしなくても自動です。
- プレビュー配信。 ブランチで作業すると、本番とは別の確認用URLが自動で発行されます。公開前のチェックに便利。
- 環境変数で秘密を渡す。 APIキーなどは Vercel の設定画面（環境変数）に登録し、コードには書かない——これで安全に公開できます。
# 公開の基本サイクルは、たったこれだけ
git add .
git commit -m "トップページを追加"
git push # → Vercel が自動でビルドして公開05💡 AIに伝わるプロンプトのコツ
同じAIでも、頼み方しだいで結果は大きく変わります。「曖昧な丸投げ」から「具体的な共同作業」へ。
😵 伝わりにくい頼み方
- 「いい感じのサイト作って」（基準が無い）
- 「全部直して」（どこを・なぜが不明）
- 一度に10個の要望を詰め込む
- エラーを見せず「動かない」とだけ言う
✅ 伝わる頼み方
- 目的・対象・雰囲気をひと言ずつ添える
- 「この部分の文字色だけ濃くして」と範囲を絞る
- 1メッセージ＝1テーマで小さく回す
- エラー文や画面の様子をそのまま貼る
効くプロンプトの型
- 役割を与える。 「初心者向けに、専門用語は補足しながら説明して」と前置きすると、説明の粒度が合います。
- 制約を伝える。 「外部ライブラリは増やさず、今ある書き方に合わせて」など、守ってほしい枠を明示。
- 確認を挟ませる。 「変更する前に、何をどう直すか先に説明して」と頼むと、暴走を防げます。
- ゴールを見せる。 参考サイトのURLや「こうなったら完成」の条件を渡すと、ねらいがブレません。
- 記憶を残す。 プロジェクトの約束事は指示ファイル（
READMEやCLAUDE.mdなど）に書いておくと、毎回説明せずに済みます。
いちばん効くのは「小さく・何度も」
大きな1回の指示で完璧を狙うより、小さな修正を何度も回すほうが、結局は速くて確実です。 確認 → フィードバック → 修正のリズムを作れれば、AI開発の8割はうまくいきます。
06💬 そのまま使える プロンプト実例集
各カード右上の 📋 コピー ボタンを押すと、プロンプトをワンタップでコピーできます。あとは 〈 〉 の部分を自分の言葉に置き換えて、AIに貼り付けるだけ。場面別に9個そろえました。
最初に打つプロンプト（つくり始め）
いきなり完成を頼まず、「ゴールと流れ」から共有するのがコツ。
Webサイトを作るのは初めてです。〈自分の自己紹介ページ〉を作りたい。専門用語はかみくだいて、完成までの流れだけ先に教えて。コードはまだ書かなくていいです。
なぜ効く：ゴールと段取りを先に合わせると、この後の提案がブレません。
シンプルな1ページのサイトを作って。上に名前、まん中に紹介文、下にSNSリンク。落ち着いた色で。まずは骨組みのHTMLだけ作って、出来たらブラウザで見せて。
なぜ効く：小さく区切ると、確認も手直しも速く回せます。
このフォルダに、HTML・CSS・JavaScript の最小構成で新しいサイトを作って。ファイルの置き場所も決めて、ローカルで表示確認できる状態まで整えて。手順も一緒に説明して。
なぜ効く：環境づくりごと任せれば、つまずく前に前へ進めます。
行き詰まった時のプロンプト（何をしたらいい？）
止まったら、状況を「そのまま」渡すのが正解。きれいにまとめ直さなくてOK。
さっきの変更でエラーが出ました。これがエラー文です：〈ここに貼り付け〉。原因を初心者にもわかるように説明して、直し方を1つずつ教えて。
なぜ効く：エラー文をそのまま渡すのが最短。推測で語らせないこと。
思った見た目になりません。〈◯◯のはずが××〉になっています。考えられる原因を可能性の高い順に挙げて、ひとつずつ試して直して。
なぜ効く：症状を具体的に書くと、原因の切り分けを任せられます。
今どこまで出来ていて、次に何をすればいいか分からなくなりました。これまでの作業を整理して、残りのToDoを優先順位つきの箇条書きにして。
なぜ効く：詰まったら“現在地の地図”を描かせると、すぐ復帰できます。
そのほかのお助けプロンプト
作業をなめらかにする“あると便利”な3つ。
このコードが何をしているのか、1行ずつ日本語のコメントで説明して。初心者が読んで理解できるように。
なぜ効く：中身を理解できると、次の指示がぐっと的確になります。
公開する前に、危ない所（秘密の鍵の漏れ・壊れやすい所・セキュリティ）がないか点検して。問題があれば直して、何を直したか教えて。
なぜ効く：公開前の“健康診断”。事故を未然に防げます。
スマホで見たときに崩れないか確認して。文字が小さい・はみ出る所があれば直して。
なぜ効く：見る人の多くはスマホ。仕上げに必ずチェックを。
07🙋 わからなければ、AIに聞けばいい
これがいちばんの安心材料。覚える必要はありません。詰まったら“検索する前に”まず聞く。
AIは、24時間つきあってくれる家庭教師
知らない用語、英語のメッセージ、次の一手——「これ、どういう意味？」と聞いていいのがAI開発の最大の利点です。 恥ずかしがらず、何度でも、自分がわかるまで質問しましょう。下のような“聞き方”をそのまま使えます。
08💴 主要AIエージェントの 無料枠＆料金 ひとめ表
どれも無料枠から始められます。まず触ってみて、合うものを選ぶのが正解。
| サービス | 無料で試せる | 月額プラン（目安） | コーディング向け | ひとこと |
|---|---|---|---|---|
|
|
◯ 無料枠あり ※チャット版のみ |
Pro 約$20〜 / Max 約$100〜 | Claude Code 有料専用 ターミナル＆デスクトップ |
実装と長い文章の理解が得意。安全志向。 |
|
|
◯ 無料枠あり | Plus 約$20〜 / Pro 約$200 | Codex | 汎用力が高く、情報や事例も豊富。 |
|
|
◎ 無料枠が寛容 | AI Pro 約$20〜 / Ultra 約$250〜 ※本体は無料で利用可（Google AI プラン） |
Antigravity | 無料で使える範囲が広い。文章・画像に強い。 |
「Claude Code」は 有料プラン専用 です
大事なポイント： 無料で試せるのは Claude のチャット版（claude.ai）です。本記事のイチオシ Claude Code（コード版）は、Claude Pro / Max などの有料プランか、API のお支払い設定が必須で、無料では使えません。まずチャットで雰囲気をつかみ、本格的に作るなら有料プランへ——という順番がおすすめです。
※ 価格・プラン名は2026年6月時点の目安です。最新・正確な料金は各社の公式ページで必ずご確認ください。各社ロゴ・名称は各社の商標で、識別のために掲載しています。
このサイトの結論：迷ったら、まず Claude。
そして デスクトップ版 Claude Code が最強。
実はこのページも、このサイト全体も、Claude Code で作られています。何より「言葉で頼むと、実際にファイルを横断して手を動かしてくれる」体験が強力。 まず Claude のチャットは無料で試せますが、Claude Code を使うには有料プラン（Pro / Max など）が必要です。雰囲気をつかんでから加入するのが現実的なはじめ方です。
※「最強」は当サイト運営者の主観です。正解は人それぞれ。まずは無料枠で触って、自分に合う相棒を選ぶのがいちばんです。
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つを協働させています。
フレームワーク（React など）は必要ですか？
必須ではありません。小規模なサイトなら、素の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
CMS
AI × 静的サイト
正直なところ
「ただ文章を書いて残したい」だけなら、ブログサービスのほうが速くて楽です。優劣ではなく目的の違い。 でも「思いどおりの形を、自分の場所で育てたい」なら、自分で作る自由は何物にも代えがたい。 これまでは保守の手間が壁でしたが、AIがいる今、その壁はぐっと低くなりました。
13🚀 まずは"かんたん"で、世界に出してみよう
完璧を目指さなくて大丈夫。公開はゴールじゃなくて、スタートです。
最初の一歩は、びっくりするほど小さくて構いません。1ページだけ、自己紹介だけ、写真が数枚だけ—— それでも「世界のどこからでも見られる、自分の場所」を持てたという事実は、思っている以上に大きいものです。まずは"かんたん版"を、えいやと公開してみましょう。
そして公開したら終わり、ではありません。少しずつ、自分のやりたいことを足していく。色を変える、文章を直す、新しいページを増やす—— その小さな更新の積み重ねが、いつのまにか「自分だけのサイト」を育てていきます。
つくる過程で、見つかるもの
手を動かしているうちに、「自分はこれが好きだったんだ」「本当はこういうことがやりたかったんだ」と気づく瞬間が訪れます。 サイトを育てることは、新しい自分や、まだ言葉になっていなかったやりたいことに出会う旅でもあります。 うまくいかない日は、AIに相談すればいい。完璧じゃなくていい。あなたのペースで、少しずつ。
14🔎 公開のあと — 多くの人に見てもらうために
作って終わりにせず、"届ける"工夫も少しだけ。代表的なのが Google の無料ツール2つです。
まず登録しておきたい無料ツール
- Google Search Console — 検索結果でサイトがどう扱われているかを見る道具。sitemap（サイトの地図）を送信して見つけてもらいやすくしたり、どんなキーワードで来たか、表示の問題がないかを確認できます。公式ページで登録 ↗
- Google アナリティクス（GA4） — どれくらいの人が、どこから来て、どのページを見たかを知る道具。人気ページや反応がわかると、次に何を足すかのヒントになります。公式ページで登録 ↗
ほかにも、こんな"届ける"工夫
sitemap.xml や OGP（SNSでシェアしたときの見た目）、構造化データを整えると、検索やSNSで伝わりやすくなります（このサイトも実装しています）。 もちろん、SNSで自分から紹介するのも、いちばん早い一歩。※ アナリティクスなどは、Cookie やプライバシーへの配慮（同意表示など）が必要になる場合があります。
15📅 もっと詳しい手順は、これから
この記事は"全体像と考え方"が中心です。一歩ずつの具体的な手順は、順番に増やしていく予定です。
計画中のコンテンツ（更新時期は未定）
今後、各ステップのより詳細な手順（GitHub・Supabase・Vercel の具体的な操作つき解説）や、 Search Console / Google アナリティクスの登録手順、独自ドメインの設定などのくわしい設定ガイドを追加していく計画です。 ただ、いつの更新になるかは今のところ未定です。気長にお待ちいただけたら嬉しいです。 先に最新情報を知りたい方は、YouTube チャンネルものぞいてみてください。🌱
深呼吸。完璧じゃなくて、いい。
AIと一緒なら、いつでも、何度でも、やり直せます。
※ 本ページは、AIエージェントを使った個人でのWeb制作の進め方を、一般向けにかみくだいて紹介したものです。各ツールの料金・機能・名称は変更される場合があります。利用にあたっては各サービスの公式情報・最新の利用規約を必ずご確認ください。AIの出力には誤りが含まれることがあるため、重要な判断はご自身でも確認してください。掲載情報は2026年6月時点。