プログラミングができなくても、アイデアをそのままアプリ化できるVibe Coding。2025年に登場した新しい技術ですが、その手軽さから利用者が急速に増えています。
本記事では、Vibe Codingについて徹底解説します。ChatGPTやGeminiを使って無料でアプリを作る方法も、操作画面付きでわかりやすく解説するので、Vibe Codingに興味がある方、手軽にアプリを作ってみたい方は、ぜひ参考にしてみてください。
Vibe Codingとは？
Vibe Coding（バイブコーディング）とは、コードを書かずにアプリを作る新しい開発スタイルです。「Vibes（雰囲気）」でコーディングをするという意味の造語で、プログラミング言語やアルゴリズムを深く理解していなくても、「何を作りたいか」を伝えるだけでアプリを構築できます。
Vibe Codingという言葉が広まったきっかけ
Vibe Codingという言葉が広まったきっかけは、元OpenAIの創業者の一人であり、本手法の提唱者でもあるアンドレイ・カーパシー氏が、2025年2月にXへ投稿した内容でした。
カーパシー氏は、Claude 3.5 SonnetをはじめとするLLMの性能向上を背景に、「コードの存在すら意識せず、Vibes（雰囲気）だけで開発する」という新しい開発スタイルを提示しました。
実際の投稿では、音声入力ツールを使い、ほとんどキーボードに触れることなく、「サイドバーの余白を半分にして」といった自然な指示だけでアプリを構築。エラーが出た場合も、内容を細かく理解することなく、そのままAIに渡して修正させるという開発体験を共有しています。
この実体験に基づく発信が大きな反響を呼び、「Vibe Coding」という概念が一気に広まっていったのです。
Vibe Codingの仕組み
Vibe Codingの仕組みは、大きく分けて以下の2つの形があります。どちらも、「コードを生成して実行する」という仕組みで成り立っています。
2つのツールを組み合わせる
こちらは、ChatGPTなどのAIにコードを書かせ、それを実行専用の外部ツール（CodePenなど）に貼り付けて動かすVibe Codingです。実行の際は、「HTML」やマーメイド記法向けなど、適したツールを選択します。
1つのツールで完結させる
これは、Vibe Codingでも注目のオールインワンスタイルです。代表ツールのGoogle AI Studioでは、「Build」を使い、搭載されている「Gemini 2.5 Flash」などを使い指示・生成・実行・修正のすべてを一画面で完結させます。
セミナーでプロンプトエンジニアリングをマスターしよう！
Vibe Codingの提唱者、カーパシー氏のように直感的な指示でアプリを構築するためには、AIのポテンシャルを引き出す「指示の出し方」が重要です。
生成AIセミナーでは、ChatGPTやCopilotの基礎はもちろん、例文を提示して生成AIの回答精度を高める「Few-shot prompting」などの高度なテクニックも習得できます。
Vibe Codingで使えるツール
Vibe Codingを行う際は、以下のようなツールが使えます。
| カテゴリ | ツール名 | 特徴 | 無料枠 |
| コード生成 | ChatGPT | 自然な対話でコードを生成 | あり（上限不明） |
| GitHub Copilot | エディタに追加して利用 |
|
|
| 実行環境 | CodePen | HTML/CSS/JSに対応 | 無制限 |
| Mermaid Live Editor | シンプルなフロー図を表示 | 1日5回/図3点 | |
| 統合環境 | Google AI Studio | Build機能でアプリを生成 | 基本機能無料 |
| Cursor | 標準搭載したAIから選択可能 | 上限不明 |
Vibe Codingはどの方法でも簡単にできますが、はじめての方は、ツールひとつで完結できるタイプがおすすめです。ChatGPTを普段から使っている方は、ChatGPTを無料の実行環境に組み合わせると、コスト負担なくVibe Codingできます。
参照：GitHub Copilot、コードペンPRO、Mermaid Viewer、Cursor
Cursorも、ChatGPTやGeminiなど、好きなモデルから選んでアプリを構築できるオールインワンタイプです。以下の記事では、Cursorの使い方をダウンロードからわかりやすく解説しているので、利用を検討している方はぜひ参考にしてください。
Vibe Codingでできること
次は、Vibe Codingでできることを、具体的なアプリ事例を挙げて見ていきましょう。
| アプリ例 | 概要 | 主な利用シーン |
| 写真のイラスト化 | 写真をAIでイラスト風・アニメ調に変換 | SNS投稿、プロフィール画像 |
| 写真の3D化 | 写真をもとに立体的な3Dモデルを生成 | 商品紹介、メタバース活用 |
| クイズ | テーマに沿った問題を出題・結果表示 | 社内研修、学習・教育用 |
| 手相占い | 手の写真を解析し占い結果を表示 | エンタメ系サービス |
| 注文管理システム | 注文内容を入力・一覧で管理 | 小規模店舗、事業の業務効率化 |
| 業務フロー図 | 業務手順を自動で図式化 | 案内チラシ、社内共有資料 |
上記の様に、Vibe Codingを使うと、写真をもとにした「3Dモデルの生成」や「イラスト化・アニメ調変換」といった高度なCG処理も、専門ソフトを使わずに言葉だけでアプリ化できます。
さらに、「スケッチから3Dモデルを起こす」など、アイデア次第でクリエイティブの可能性は無限に拡大します。次項では、その基盤となる「写真を水彩画風に変換するアプリ」を実際にVibe Codingで作っていきましょう。
Gemini（Google AI Studio）のVibe Codingのやり方
では、Gemini（Google AI Studio）を使ったVibe Codingのやり方をお伝えしましょう。Google AI Studioは、Gemini 2.5 Flashによるコード生成に対応しています。
今回は、写真を水彩画風に変換する方法を紹介しますが、指示を変えればアニメ風や3Dモデル化も可能です。手順は画像付きでお伝えするので、この基本の使い方をマスターして、ぜひ自由にVibe Codingしてみてください。
写真をアップロードしたら、それを水彩画風に変換してダウンロードできるアプリを作って
STEP1. アプリの構築
はじめに、アプリの構築からお伝えします。
- Google AI Studioにアクセスし、「Build AI apps」をクリック
- 画面中央にアイデアを入力→「Build」をクリック
- 写真を水彩画に変換するアプリが完成
STEP2. アプリの保存
できあがったアプリは、ダウンロードや共有、GitHub、Google AI Studio内に保存できます。ここでは、Google AI Studio内に保存する方法をお伝えしましょう。
- 画面の「保存・ダウンロード」をクリック
- アプリはGoogle AI Studioの「Your apps」に保存
- リンクをクリックすればアプリが開く
これで、Google AI Studioを使ったVibe Codingは完了です。アプリ名の右側にある「×」アイコンで削除、ピンのアイコンで一覧の上部に固定できます。
ChatGPTを使ったVibe Codingのやり方
ここからは、ChatGPTを使ったVibe Codingの進め方を、操作画像とともに紹介します。実行には無料で使えるCodePenを利用し、手順はシンプルな2ステップで説明していきます。
画面中央に大きなボタンがあり、クリックするたびに背景色がランダムに変わるシンプルなアプリを作って。HTML、CSS、JavaScriptのコードを一つの塊（CodePen用）で出力して。
STEP1. ChatGPTでコードを生成
はじめに、ChatGPTでVibe Codingの核であるコードを生成します。
- ChatGPTにアクセスし指示文を入力→矢印をクリック
- コードブロックの右上にある「コードをコピーする」をクリック
STEP2. CodePenで実行
次は、ChatGPTで作ったコードをCodePenで実行します。
- CodePenにアクセスし「ペン」をクリック
- 「HTML」「CSS」「JS」の各ボックスにコードをそれぞれ貼り付け
- プレビューエリアにボタンが表示
- ボタンを押して色が変わるかを確認
これで、ChatGPTを使ったVibe Codingは完了ですが、上記の様にコードを貼り付けたらボタンが2個生成されていました。また、赤枠で囲んでいない方のボタンは反応しませんでした。
こういった場合、再度ChatGPTに修正依頼してください。
今回のVibe Codingは「ボタンが二つ表示されていたのでコードを修正してください。」と指示したところ、HTMLのみで使うコードを生成し、実行したところ以下の様に改善しました。
さらに、「色をパステルカラーにして」など、追加でChatGPTに指示を重ねることも可能です。修正後は、以下の様に淡い色に変化しました。
この2つのツールを組み合わせるVibe Codingも、画面を切り替えてコードを貼るだけなので手軽に実行できました。ぜひ、自分に合ったスタイルでVibe Codingにチャレンジしてみてください。
セミナーでVibe Codingのスキルを高めよう！
このように、Vibe Codingを使いこなすポイントは「プロンプトの作成スキル」にあります。
生成AIセミナーは、Vibe Codingに必須のプロンプトエンジニアリングから、Claudeを用いた高度なコード生成、さらには自社専用AIの構築まで、実践的なスキルを幅広く習得できます。効率的にアプリを開発し、AIの力で業務改善したい方に最適なカリキュラムです。
セミナー名 生成AIセミナー 運営元 GETT Proskill（ゲット プロスキル） 価格(税込) 27,500円〜 開催期間 2日間 受講形式 対面（東京・名古屋・大阪）・eラーニング
プロンプトの書き方については以下の記事でも解説しています。実際のプロンプト例も紹介しているので、具体的にプロンプトの書き方を知りたい方はぜひ参考にしてください。
Vibe Codingを上達させる4つのコツ
Vibe Codingをするにあたり、AIに任せきりにすると本当に希望したアプリはできにくいものです。ここでは、Vibe Codingを成功させるための4つのコツを解説します。
①目的をはっきり伝える
Vibe Codingで重要なのは、作る前に目的をはっきりさせることです。まずは、
- 何のために作るのか
- 誰が使うのか
- 最低限、どんな機能が必要か
これらをAIへ伝えてください。もし自分で整理できない場合は、「要件を決めて」とAIに頼んでしまってOKです。AIは質問形式で聞き返してくるため、それに答えていくだけで、必要な機能や画面構成などをもれなく実装できます。
②定期的にリファクタリング（整理）する
Vibe Codingで機能を追加し続けると、コードは必ず複雑になります。それを放置すると、
- エラーが増える
- 修正が怖くなる
- どこを直せばいいか分からなくなる
といった状態に陥りがちです。そこで有効なのが、「このコードをリファクタリングして」という一言です。これにより、重複コードを削除するなど、綺麗な状態でコードを維持できます。
③依頼案件を管理する
Vibe Codingの強みのひとつは、複数の開発を同時に進められる点です。例えば、最大8つのタスクを並行して扱える「Cursor」を使えば、1つの環境で効率よく開発を進められます。
しかし、依頼できる案件が増えるほど、管理が複雑になりがちです。人間の手作業では実現できない効率性がある一方で、進行状況を整理し、適切に管理することも心がけましょう。
④トラブル時は別のAIに相談する
Vibe Codingを行う際、1つのAIでどうしても解決できないバグに遭遇することもあります。そんなときは、以下のように別のAIにそのままコードを投げてみてください。
- ChatGPT→Claude
- Claude→Gemini
といったように視点を変えると、「驚くほどあっさり解決策が見つかった」という嬉しい結果を得られやすいです。これは人間のレビューと同様に考えると良いでしょう。
Vibe Codingの注意点
Vibe Codingは便利な一方で、気をつけるべき点もあります。
最初から高度なアプリを作らない
Vibe Codingを進めるうえでは、はじめから高度なアプリを作らないことが大切です。言葉だけで開発できるとはいえ、トークン数の制限や処理量の上限などがあるため、大規模サービスをVibe Codingで作るのは現実的ではありません。特に初心者は
- レシピアプリ
- 画像加工アプリ
- クイズアプリ
など、構造が単純なVibe Codingから始めましょう。機能を追加したいときは、随時修正点を依頼して段階的に希望のサービスに近づけることが重要です。
バージョン管理を徹底する
Vibe Codingの際、システムの「保存」だけに頼らないようにしましょう。GitHubなどを活用して、アプリのバージョンを残すようにしてください。これをしていないと、
- 一瞬のミス
- 上書き
- エラー
で、数週間・数ヶ月の成果が消えるリスクがあります。なお、GitHubと連携していれば、「Gitにコミットしてプッシュ（保存）して」と依頼すれば自動で行ってくれます。
Vibe Codingについてまとめ
Vibe Codingは、コードを簡単に生成し、実行環境へ貼り付けるだけでアプリを構築できる手法です。思い通りに動かない場合は、AIとのやり取りを重ねながら調整していく方法もありますが、まずは利用する側である人間自身が、プロンプトの使い方を理解しておくことが大切です。
