このBrainを読み終えたときの「完成形」

こののBrainゴールは、「理解」ではありません。
実際に、公開されたURLを1つ持つことです。

最終的に、あなたは👇この状態になります。

✅ AIに日本語で頼みながらアプリを作れる
✅ 作ったコードを GitHubに保存 できる
✅ Vercelで公開し、本物のURLを発行 できる
✅ エラーが出ても 「スクショ → AI相談」 で前に進める

つまり──
「作って終わり」ではなく、「世界に出してドヤれる」状態です。

※ 詰まったら、このページに戻ってくればOKです。

まずはこれだけ（ゴール宣言）

このBrainでできるようになること

ゴールは、とてもシンプルです。

AIと対話しながら
簡単なWebサイトやアプリを
自分のPCで、実際に作れるようになること

難しい理論や暗記はしません。
マンガ・図解・スクショ・実演を使って、
「迷わず手を動かせる構成」にしています。

手順どおり進めるだけでOKです。

1章：Vibe Codingという考え方（概念）

Vibe Codingとは何か

この記事で紹介するのが、
Vibe Coding（バイブ・コーディング）という考え方です。

Vibe Codingとは、
AIと会話しながら開発を進める、新しい作り方。

従来のプログラミングは、
人間がコンピュータの言葉を正確に書く必要がありました。

でも今は違います。

あなたは
「何を作りたいか」「どうしたいか」を
日本語で伝えるだけ。

実際のコードや調整は、AIが担ってくれます。

なぜ初心者向きなのか

完全無料：高いスクール代も、有料ツールも不要
環境構築ほぼゼロ：面倒な初期設定に悩まされない
会話ベース操作：PC操作でも、やることは「日本語で頼む」だけ

「コードを書く」というより、
AIにディレクションする感覚に近いかもしれません。

この記事を読み終えたとき、
あなたは「プログラミングの0地点」に立ちます。

0地点とは、
「完璧に理解している状態」ではありません。

エラーが出ても、慌てない
分からなければ、スクショしてAIに聞ける
止まっても、また前に進める

そんな挫折しないスタートラインのことです。

【重要】Vibe Codingの極意（失敗しない前提）

STEP 1に進む前に、これだけは絶対に覚えておいてください。
これをやらないと、100%挫折します。

◼️自分で手を動かし、調べる（でも、独りじゃない）

こんなNote書いておきながら矛盾するようですが、AIにコードを書いてもらうとしても、「自分で手を動かして、調べて、学ぶ姿勢」が一番大事です。

「全部お任せ」ではなく、「どういう仕組み？」とAIに聞きながら、自分の知識として腹落ちさせていく。これがVibe Codingの醍醐味です。

とは言え、最初は壁があります。
特に環境設定などでは、英語の公式サイトを見たり、謎の英語エラーが出たりして、「うっ」となる瞬間があるでしょう。

そこで「スクショ」の出番です。

英語のページも、意味不明なエラー画面も、全部スクショしてAIに投げてください。
「これどういう意味？」「次は何ボタンを押せばいい？」と聞けば、AIが完璧な翻訳ガイドになってくれます。

❌ 英語だ、分からない、怖い…（思考停止）
⭕️ スクショして「解説して！」と投げる。（AIという最強の翻訳こんにゃくを使う）

【TIP/鉄則】
「英語とエラーは、スクショで解決」
悩む時間はゼロでいい。浮いた時間で「中身の理解」に時間を使いましょう。

◼️ AIを「使い倒す」

遠慮は無用です。
「こんなこと聞いたら恥ずかしいかな…」
なんて思う必要はありません。

彼は疲れを知らない執事です。
100回聞いても、100回優しく答えてくれます。
そして、あなたが雑なほど、仕事は速くなります。

私はいつも、
「中学生でも分かるように解説して」
と頼んでいます。

遠慮せず、雑に聞く。
それが、AIを最速で使いこなすコツです。

必要な考え方は、ここまでで揃いました。
ここからは、実際にAIエディタ（後で解説）を使って、
Vibe Codingを始めます。

2章：準備フェーズ（AIと環境を整える）

なぜ「Antigravity」なのか？（vs Claude Code）

この講座では、Googleが開発した 「Antigravity」 というAIエディタを使います。
世の中には多くのツールがありますが、初心者がVibe Codingを始めるなら、Antigravity一択です。

理由はシンプル。
バイブコーディングは、
Claude Code や Codex（GPT系）でも実現できます。

ただし――
多くの場合、有料だったり、最初の環境設定が難しかったりして、
「触る前に疲れる」のが正直なところです。

Antigravityは違います。

完全無料
面倒な環境設定ほぼなし
インストールして、すぐ始められる

だから、考える前に触れる。

この「一歩目の軽さ」こそが、
Vibe Codingが挫折せずに続く最大の理由です。

「まずは無料で、一番簡単なやつで始めたい」

そんなあなたにとって、これ以上の選択肢はありません。

AIエディタとは何か（黒い画面の正体）

いきなり「Antigravity」と言われても、
正直よく分かりませんよね。

まずは結論から。

AIエディタとは、
文章やコードを“自分で全部書かなくても”、
AIと一緒に編集できるエディタです。

【普通のエディタとの違い】

Windowsの「メモ帳」や、
Macの「テキストエディット」を想像してください。

あれは、
あなたがキーボードを叩かないと
一文字も進みません。

でも、AIエディタは違います。

画面の横に、常にAIが待機しています。

あなたがやるのは、これだけ。

「ここ、もっと分かりやすくして」
「この機能、追加したい」
「エラー出た。どうすればいい？」

するとAIが、

「かしこまりました」

と言って、
文字やコードを勝手に書き換えてくれる。

この
「命令して、作ってもらう」
というスタイルこそが、Vibe Codingの正体です。

Antigravity と Gemini の関係

ここで名前が2つ出てきますが、
覚え方はシンプルです。

Antigravity：作業する場所（お屋敷）
Gemini：考えて動くAI（執事）

私たちは、
無料のAntigravityを使うだけで、
Google製の超優秀な執事（Gemini）を雇えます。

しかも、難しい設定は不要。

あなたが意識するのは、
「日本語で話しかける」ことだけです。

つまりAntigravityのすごさは、

黒い画面をほぼ触らなくていい
エラーを調べなくていい
「直して」「追加して」と言うだけで進む

こと。

これが、
「考える前に触れる」Vibe Codingを
本当に成立させている理由です。