00はじめに — 「コードが書けない」は、もう壁じゃない
大事なのは、完璧なコードを書く力よりも「何を作りたいか」を言葉にして、AIと一緒に直していける力です。
このページの緑色のマーカーが付いた専門用語は、クリック（タップ）すると意味の解説がポップアップで開きます。Web制作・AI・Git（ギット）などの言葉が初めての方も、わからない用語はその場で確認しながら読み進められます。
数年前まで、Webサイトを一から作るには、やを自分で書き、サーバーを借り、公開設定を整える——という長い道のりが必要でした。 いまは （あなたの指示で実際にコードを書いて直してくれる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 のいずれか。ここが主な費用です。
パソコン側の道具
- 。AIエージェントの多くは、このエディタや専用アプリ、から動かします。
- （と連携する仕組み）。AIに「インストール手順を教えて」と聞けば、そのまま案内してくれます。
- 。多くの制作ツールが動く土台。これも必要になった時点で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
まず に（プロジェクトの入れ物）を1つ作ります。ここがコードの正式な保管場所になり、 「いつ・どこを・なぜ変えたか」の履歴がすべて残ります。失敗しても以前の状態に戻せるので、安心して試せます。
- ＝変更を1つの区切りとして記録すること。「ヘッダーの色を変更」のように、意味のまとまりで小まめに残すのがコツ。
- ＝本番に影響しない"作業用の分身"。試したいことはブランチで作り、うまくいったら本番（）に合流させます。
- AIエージェントの多くは、このコミットやブランチ操作もあなたの代わりに実行してくれます。
このフォルダを Git で初期化して、GitHub に new-site という名前の非公開リポジトリを作って push して。最初のコミットメッセージは init で
中身をつくる — AIにコードを書いてもらう Claude Code / Codex
いよいよ制作です。とはいえあなたが書くのは"指示"であって、コードはAIが書きます。 最初の一歩は、作りたいものをできるだけ具体的に伝えること。色・雰囲気・載せたい要素・参考にしたいサイトを言葉にします。
- 小さく始める。 「トップページだけ」「お問い合わせ欄だけ」と区切ると、確認も修正も早く回せます。
- 都度プレビュー。 出来たら必ずブラウザで見て、ズレや違和感をAIに伝えて直してもらいます。
- 専門用語は要らない。 「もっと余白がほしい」「スマホで文字が小さい」のような普段の言葉で十分伝わります。
カフェの一枚もののサイトを作りたい。落ち着いたベージュ基調で、上に店名、次に営業時間、最後に地図リンク。まずは枠だけ作って、出来たら見せて
データをつなぐ — 必要になったら Supabase
お知らせを増やしたい、投稿を受け付けたい、写真一覧を後から足したい——そんな「あとから増える・変わるデータ」が必要になったら、 の出番です。静かな紹介サイトなら、無くても全く問題ありません。
- ＝データの表（例：「お知らせ」表に日付と本文を並べる）。AIに頼めば作成用の指示まで用意してくれます。
- は必ずON。 「公開していい行だけ読める」状態にする安全装置。ここを切ったまま公開しないのが鉄則です。
- 秘密の鍵は隠す。 管理用のキーは絶対にコード内へ直書きしないこと（後述の落とし穴も参照）。
Supabase に『お知らせ』テーブルを作りたい。日付と本文の2列。誰でも読めるが書き込みは不可。RLS を有効にした安全な設定で、手順を教えて
世界へ公開する — pushしたら自動で出る Vercel
最後は公開です。 を GitHub リポジトリにつなぐと、以後はコードを push するたびに自動でビルドして本番に反映されます。 HTTPS（鍵マーク）も世界中への高速配信も、独自ドメインの設定も、Vercel が面倒を見てくれます。
- 初回だけ接続作業。 Vercel でリポジトリを選び「Import」するだけ。2回目以降は何もしなくても自動です。
- 。 ブランチで作業すると、本番とは別の確認用URLが自動で発行されます。公開前のチェックに便利。
- で秘密を渡す。 などは 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❓ よくある質問（前編）
「作って公開する」前に気になる4つ。料金やツール選びのFAQは後編にあります。
完成までどれくらい時間がかかりますか？
1ページの小さなサイトなら、アカウント準備を含めて数時間〜1日で「公開」までいけます。このAI探検隊や姉妹サイト「大阪探検隊」も、最初の公開は1日仕事でした。育てて大きくするのはそのあと少しずつで大丈夫です。
HTMLやCSSを自分で書く必要はありますか？
ほぼありません。コードはAIエージェントが書き、直しも「ここをこう変えて」と日本語で頼めばOK。大事なのは書く力より、どう変えたいかを言葉にする力です。本文のプロンプト実例集がそのまま使えます。
スマホだけでも作れますか？
制作はPCをおすすめします。AIエージェントやGitHubの操作はPCのほうが圧倒的にスムーズです。スマホは「見る人の画面で崩れていないか」の確認用として活躍します（実例集にもスマホ確認のプロンプトがあります）。
作ったサイトはどうやって世界に公開されるのですか？
VercelをGitHubにつなぐと、コードを保存（push）するだけで自動で公開されます。サーバーの契約や難しい設定は不要で、無料枠で始められます。手順は本文の「4ステップ」のとおりです。