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 などの有料プランか、 のお支払い設定が必須で、無料では使えません。まずチャットで雰囲気をつかみ、本格的に作るなら有料プランへ——という順番がおすすめです。
※ 価格・プラン名は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つを協働させています。
( など)は必要ですか?
必須ではありません。小規模なサイトなら、素の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
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月時点。