Vibe Codingのやり方

Page content

「Vibe Coding（バイブ・コーディング）」とは、アンドレイ・カルパシー（元OpenAI/Tesla）などが提唱して話題になった**「詳細な構文やロジックを人間が書くのではなく、実現したいこと（Vibe/雰囲気/ノリ）をAIに伝えて、コードの大部分を書かせるスタイル」**のことですね。

Google AI Studioは、特に**Gemini 1.5 Proの超ロングコンテキスト（大量の情報を一度に読み込める能力）**を持っているため、このVibe Codingに非常に適しています。

Google AI StudioでVibe Codingを実践する具体的な手順とコツを解説します。

1. 基本的な準備

まず、Google AI Studio にアクセスします。

  1. Create New をクリックし、Chat prompt を選択します。
  2. Model は Gemini 1.5 Pro を選択することをお勧めします（コーディング能力と理解力が高いため）。

2. Vibe Coding の実践ステップ

Vibe Codingの極意は**「詳細な仕様書を書くのではなく、素材をぶち込んで『いい感じにして』と頼む」**ことです。

A. 「見た目」からコードを作る（スクショ活用）

これが最もVibe Codingらしい使い方です。

  1. 作りたいアプリやWebサイトの手書きメモ、あるいは「こんな感じのデザインにしたい」という参考サイトのスクリーンショットを撮ります。
  2. Google AI Studioのプロンプト入力欄にある 「+」ボタン（Add to prompt） から画像をアップロードします。
  3. プロンプトにこう書きます：

    「この画像のUIを再現するHTML/Tailwind CSS/Reactのコードを書いて。モダンで洗練された雰囲気（Vibe）にして。」

B. 「全部読んで」から修正させる（ロングコンテキスト活用）

既存のプロジェクトがある場合、ファイルの中身を理解させるのが面倒ですが、Google AI Studioなら「全部」読ませられます。

  1. 自分のプロジェクトのソースコードファイルを複数（あるいはフォルダごとzipにして）アップロードします。
  2. プロンプトで指示します：

    「アップロードしたコードを読んで。これにダークモード切り替え機能を追加して。既存のデザインのVibeを壊さないで実装して。」

3. System Instructions で「Vibe（ノリ）」を固定する

画面上部の System Instructions 欄を使うと、AIの「人格」や「コーディングの癖」を固定できます。毎回指示しなくて済むので効率的です。

おすすめの設定例:

あなたは世界最高峰のフルスタックエンジニアです。

  • コードは常に簡潔で、最新のベストプラクティスに従ってください。
  • エラーハンドリングよりも、まずは動くプロトタイプを最速で作ることを優先してください（Vibe Coding重視）。
  • 説明は短く、コードを長く出力してください。
  • フレームワークは Next.js 14 (App Router) と Tailwind CSS を使用してください。

4. 生成されたコードの運用

Google AI Studio自体には、VS Codeのような高度なエディタ機能やプレビュー機能はありません（コードの実行機能はありますが限定的です）。

  1. Geminiが出力したコード右上の Copy を押すか、Export to Code を使います。
  2. 自分のPCのエディタ（VS Codeなど）や、StackBlitz / Replit などに貼り付けて動作確認します。
  3. エラーが出たら？
    • エラー文をそのままコピーして、AI Studioのチャットに貼り付けます。
    • 「直して」と一言添えるだけで修正版を出してくれます。

Google AI Studio で Vibe Coding をするメリット

他のAIエディタ（Cursorなど）と比較した際の、Google AI Studioならではのメリットは以下の通りです。

  • 圧倒的なコンテキスト量 (1M/2M トークン): ドキュメント丸ごと、本一冊、あるいは動画ファイルさえも読み込ませて、「この動画の挙動と同じアプリを作って」という指示が可能です。
  • 無料枠が強力: 現在（2025年時点）、高性能なGemini 1.5 Proをかなりの回数無料で使えます。
  • マルチモーダル: 「ホワイトボードの汚い字」や「動画」からコードを起こす能力が非常に高いです。

まとめると： 「きっちり設計してから書く」のではなく、「画像やファイルを放り込んで、自然言語で『こんな感じ！』と指示し、コードコピペ＆エラー修正のループを高速で回す」。これがGoogle AI StudioでのVibe Codingです。