話題のバイブコーディング。初心者が3時間で自己紹介サイトを作ってみた

最近、Xやnoteでよく目にする「バイブコーディング」。

テック界隈の方々が「これからはバイブコーディングだ！」と熱く語っているのを読み、気になっていました。

すると11月にGoogleからGemini 3が登場。 同時に、バイブコーディングに使えるAntigravity（アンティグラビティ）も公開されました。

なんだか、すごく便利らしい……

そこで、バイブコーディングのバの字も知らない超・初心者の私が、そのAntigravityを使って、自分のポートフォリオサイトを作ってみることに。

これね、かなり感動しますよ。

サイト公開までの時間は、約3時間。
しかも、無料。

ペライチのシンプルなものですが、完成したサイトはこちらです。

note書きさんにこそ、自己紹介サイトおすすめです。

note内で固定記事として自己紹介を書いている方、多いですよね。

そこにプラスして「自分の好きなモノ・コト」を詰め込んだWebサイトへのリンクがあったらどうでしょう。

趣味の道具、日常の風景、お気に入りのコレクション……。

文章だけでは伝えきれない人柄も、写真を並べたギャラリーサイトなら一瞬で伝わります。

「でも、サイト作りなんて難しそう……」と思いますよね。

私もそうでした。

ところが実際は、AIとチャットするだけ。

私はあまりにも感動したので、その勢いでこの記事を書いています（笑）。

私のような初心者がつまづきやすいポイントもまとめますので、ぜひ参考にしてみてください。

そもそもバイブコーディングって何？

はい、私もさっぱり知りませんでした。

ざっくり言うと、

コードを書くのではなく、「こんなサイトにしたい」など、普通の言葉（バイブス）で伝えるだけ。

AIが勝手にコードを書いてくれます。

アイディアと「こうしたい！」というバイブス（熱量）さえあれば、形にできる時代が来たんです。

じゃあ、Antigravityって何？

最初、Geminiに聞いたら「ギャグサイトです」と言われました（笑）

昔、同じ名前の有名なジョークサイトがあったらしいんですよ。

先月出たばかりとは言え、「あなたのことでしょーが」とGeminiに突っ込んだら、「あ、Antigravityには私が内蔵されていますね」と思い出してくれました。

Antigravityは一言でいうと、「AIが住んでいる高機能な作業場」みたいなものです。

私が3時間で作ったポートフォリオサイトはもちろん、「家計簿アプリ」や「業務効率化ツール」も作れます。

ホントにサイトがサクッと作れるの？

サイトを作る所要時間ですが、目安はこんな感じだと思います。

私の場合、トップ画像は手元にあるものを使ったので、サイト全体の雰囲気はパッと決められました。

つまり、箱＝サイトはあっという間に完成。

作品紹介のセクションに並べる画像の選定では、別途1時間くらいかかりました。

なお、サイト作りって、バイブコーディングに限らず、細部にこだわると永遠に終わりませんよね……沼ります。

サイト作りをたっぷり楽しみたい方は別として、途中で挫折しないためにも、最初はペラッとシンプルなサイトを作るのがおすすめです。

一度公開したあとでも、修正や作り込みはできるので。

私が使った「3つのツール」

各ツールの登録はごく普通に、メルアドやGoogleアカウントで完了できます。

それぞれの役割を説明しますね。

① v0＝ 設計図を描く人

• URL： https://v0.dev/（ブラウザで使える）

• チャットで「黒基調で」「おしゃれに」などと伝えるだけで、デザイン案を一瞬で作ってくれます。

② Antigravity ＝ 優秀な大工さん

• URL: https://antigravity.google/（インストールが必要）

• v0で作った設計図を自分のパソコンに取り込み、ここで実際に組み立てます。

• 細かい修正もチャットでOK。

③ Netlify ＝ 世界に公開する場所

• URL: https://www.netlify.com/（ブラウザで使える）

• 完成した家を置いて、みんなが見に来れるようにします。

• Antigravityで完成したデータフォルダをポイっとドラッグ＆ドロップするだけ。「https://...」という住所（URL）が即発行されます。

• サーバー契約とか難しいことは一切不要。

つまり、

これだけです。

サイトを爆速で作るポイント

その後は、Geminiがとことん伴走してくれます。

各ツールに指示出しをするときも、Geminiが完璧な現地の言葉（専門用語）に翻訳してくれます。

• 私の頭の中（やりたいこと）
  「なんかピンク色になってるから、もっとカッコいい紺色にして！あと、プレビュー画面が出ないから出して！うぉーー！」

• Geminiが翻訳した指示（プロンプト）
  「npm install を実行し、背景色を #0F172A に変更し、ローカルサーバーを起動して……」

こんな感じで、私はわからないことがあれば全てGeminiに相談 → 指示文をそのままコピペ → Antigravityに貼る、を繰り返しました。

これがなんといっても爆速でサイトを作るポイントです。

実際の制作フロー（ざっくり4ステップ）

サイト作りの大まかな流れはこんな感じです。

Step 1:
v0にアクセスし、自分の希望イメージをチャットで指示出し。
そこから「もっと暗くして」「画像を置いて」と2〜3回やり取りしても、15分もあれば「おっ、いいじゃん」という見た目は完成します。
カップラーメンを食べている間にプロ級のデザイン案が出てくるので、感動しますよ。

Step 2:
コードをダウンロード。

Step 3:
Antigravityでそのフォルダを開き、自分の作品（画像や動画）を組み込む。

Step 4:
Netlifyで公開。

初心者がぶつかった「3つの壁」

「v0（入り口）」と「Netlify（出口）」には、初心者を突き落とすような深い落とし穴はまずありません。

でも、Antigravityには「初心者がぶつかる壁」がいくつかあると感じました。

私がGeminiに泣きついた3つの状況を挙げてみますね。

壁①：「インストール完了！……で、何をすれば？」問題

最初、Antigravityを起動しても、真っ黒な画面が出るだけで、どこを押せばいいかわかりませんでした。

Windowsでフォルダをダブルクリックしても、ファイル一覧が開くだけ。

1. まずAntigravity（エディター）を立ち上げる。

2. 左上のメニュー「File」→「Open Folder」をクリック。

3. v0からダウンロードしたフォルダを「選択」する。

壁②：「謎の英単語（npm）で門前払い」問題

次に、Geminiに言われたとり、Antigravityの画面下のターミナル（黒い画面）で npm install と入力すると……

「'npm' は、コマンドとして認識されていません」 という真っ赤なエラーメッセージが出て、門前払いされました。

ここで挫折する人が多いかもしれません。

Antigravityが「運転席」なら、Node.jsは「エンジン」。これがないと車（サイト）は動きません。

「Node.js」公式サイト：https://nodejs.org/ja

これを入れてPCを再起動すると、魔法の呪文（コマンド）が通るようになります！

壁③：「コードの海で溺れて、微調整ができない」問題

黒い画面にズラッと並んだ暗号（コード）。

これを見て、静かにパソコンを閉じる人もいるでしょう。

たとえば、Antigravityのチャット欄に「右下の再生ボタン、消して」と指示すると……

勝手に該当箇所を見つけ出し、一瞬で削除してくれます。

結局、いくらかかったの？（費用）

今回は「0円」で完成しました。

つまり、必要なのは「パソコン」と「やる気」だけでした。

【おまけ】調子に乗って「エンジェル版」も作ってみた

冒頭でご覧いただいた「闇落ちバージョン（黒）」のほかに、「エンジェルバージョン（白）」のサイトも作ってみました。

やったことは、

たったそれだけで、ものの数分で全く別の顔を持つサイトが誕生しました。

この「着せ替えの速さ」こそ、AIの真骨頂だと思います。

トップ画像と背景色だけを変えたエンジェルバージョンがこちらです。

まとめ：AIで遊べることが増えました～

AIで

• 絵が描ける

• 動画が作れる

• 音楽が作れる

そして……
Webサイトも作れる。

そんな時代がやってきました。

AIは私たちの想像を超えるスピードとクオリティで応えてくれます。

自分ひとりでは絶対にたどり着けなかったような場所に、AIが連れて行ってくれる。

プログラミング知識ゼロの私でも、3時間でサイトが建てられました。

この記事を読んで「ちょっとやってみたいかも」と思ったなら、ぜひ今すぐv0を開いてみてください。

あなただけの「城」が今日、建つかもしれません。

長文、最後までありがとうございました。
スキ・フォロー、とても励みになります☺️