コード知識ゼロからアプリが作れる「Vibe Coding」完全ガイド
「AIでアプリを作れるらしい」という話は聞くけれど、実際どうやるのかわからない。プログラミングの知識がないから、自分には無理だと思っている。そんな人に朗報です。
Vibe Codingという手法を使えば、コードを1行も書かずに、自分のアイデアをアプリとして形にできます。ランディングページからゲーム、データベースを使った本格的なウェブアプリ、さらにはApp Storeに公開できるモバイルアプリまで。
この記事では、AIコーディングツールの基本的な使い方から、実際にいろんな種類のアプリを作る方法、そして作ったアプリを公開するまでの流れを、順を追って解説していきます。
Vibe Codingって何？なぜ今注目されているのか
Vibe Codingとは、自然言語でAIに指示を出して、AIがコードを書いてくれる開発手法のことです。「こういうアプリを作って」と話しかけるだけで、実際に動くアプリができあがる。
これ、数年前なら考えられなかったことですよね。
AIコーディングモデルは毎月のように強力になっていて、プログラミング経験がゼロの人でも、かなり複雑なアプリを作れるようになってきました。開発者が毎日使っているのと同じツールを、初心者でも使えるようになったんです。
で、なぜ今がVibe Codingを始めるのに最適なタイミングかというと、今のうちに慣れておけば、1〜2年後に誰もがやるようになったときに差がつくから。少し難しいうちに始めておくのがポイントなんです。
使うツールは主に3つ
Vibe Codingで使うツールを紹介します。どれも世界最高レベルのAIコーディングモデルを搭載しています。
Claude Code
Anthropicが開発したAIコーディングツール。多くの人が「現時点で最も人気がある」と言っています。ドキュメントを読み込んで、既存のコードベースを理解した上でコードを書いてくれるのが特徴。
Codex（OpenAI）
OpenAIが提供するコーディングモデル。GPT-5を搭載していて、「世界で最も強力なAIコーディングモデル」と評する人も多いです。
Gemini CLI
Googleが提供するツール。Gemini 2.5 Proを使えます。
これら3つすべてを、sandbox.devというウェブサービス上で使えます。ローカル環境を構築する必要がないので、ブラウザさえあればすぐに始められるんですよね。
あとモバイルアプリを作る場合は、Vibe Codeアプリ（vibecodeapp.com）を使います。こちらは携帯電話から直接アプリを作れるツールです。
sandbox.devでの基本的な使い方
まずsandbox.devにアクセスしてサインアップします。ログインしたら「新しいサンドボックスを作成」をクリック。
- 使用するモデルを選択（Claude Code、Codex、Geminiから）
- スタックを選択（ウェブサイトならNext.jsがおすすめ、ゲームならThree.jsなど）
- 続行を押すと、開発環境が立ち上がる
画面は左側がターミナル（ここに指示を入力する）、右側がウェブビュー（作ったものがプレビューされる）という構成になっています。
やることはシンプルで、左側のターミナルに作りたいものを日本語で入力するだけ。
「Hello Worldと表示するランディングページを作って」
これだけで、AIがコードを書いて、右側に実際のページが表示されます。共有可能なリンクも自動で生成されるので、作ったものをすぐに誰かに見せられます。
覚えておきたいコマンド
Claude Codeにはいくつか便利なコマンドがあります。スラッシュ（/）を押すとコマンド一覧が表示されます。
/model
使用するモデルを切り替えるコマンド。デフォルトはSonnetとOpusの混合ですが、Opusだけに切り替えることもできます。Opusはより強力ですが、約5倍高価になります。複雑なタスクのときはOpusを使う、というのが基本的な考え方。
/cost
これまでにいくらかかったかを確認できます。「35セント使った」みたいに表示される。
/clear
チャットを完全にリセットします。AIとの会話が長くなると、コンテキストウィンドウ（AIが覚えておける情報の量）が埋まって、パフォーマンスが落ちてくるんですよね。そういうときにこのコマンドでリセットする。
/compact
チャットの内容を要約してくれます。完全にリセットするのではなく、これまでの内容を圧縮して、新しい指示を受け入れる余地を作る感じ。
/resume
以前のチャットに戻りたいときに使います。
このあたりを覚えておけば、基本的な操作はOKです。
静的ページを作ってみる
まずは比較的シンプルな「静的ページ」から始めましょう。データベースや複雑な機能がない、表示するだけのページです。
ランディングページ
マーケティングやビジネスで最もよく使われるタイプ。
作り方の例を紹介すると、まず参考にしたいデザインの画像をスクリーンショットで保存します。Claude Codeには画像をアップロードする機能があるので、その画像を添付して、こんな感じで指示を出す。
「私のアプリ○○のランディングページを作ってください。現在のサイトはこれですが、添付した画像のようなスタイリングにしたいです。コンバージョンに優れたものにしてください」
すると、AIが画像を分析して、似たようなデザインのランディングページを作ってくれます。
気に入らない部分があれば、「背景色をダークグレーにして」「このボタンをもっと押しやすくして」と追加で指示を出せばいい。
面白いのは、同じ指示を3つのツール（Claude Code、Codex、Gemini）に同時に出して、一番気に入ったものを選ぶこともできること。それぞれのモデルは少しずつ違う方向性でデザインするので、比較してみるのも面白いです。
リードマグネット
メールアドレスなどの情報を集めるためのページ。ガイドやPDFを配布する代わりに、読者の連絡先を収集する仕組みです。
これを作るには、Tallyというフォーム作成サービスと組み合わせます。
- Tallyでフォームを作成（名前、メールアドレスなどを収集）
- フォームの埋め込みコードを取得
- Claude Codeで「ランディングページを作って、このTallyフォームを埋め込んで」と指示
こうすると、見た目がきれいなランディングページに、情報収集フォームが組み込まれた状態で完成します。
プレゼンテーション
これ、個人的にはかなり面白いと思っていて。
普通はPowerPointやGoogleスライドで作るプレゼン資料を、ウェブページとして作れるんです。
作り方はこう。
「PowerPoint形式のランディングページを作ってください。スライドデッキで、全画面表示にしたい。このトピックに関するプレゼンを作成してください。最小限のデザインで、白い背景、黒いテキスト。少なくとも9つのスライドを作ってください」
すると、矢印キーでスライドを切り替えられるプレゼンテーションが完成します。共有可能なリンクも付くので、そのまま他の人に見せられる。
内容を変えたければ「このトピックについて調べて、スライドの内容を書き換えて」と指示すれば、インターネットを検索して情報を集め、スライドを更新してくれます。
ダッシュボード
ビジネスデータを可視化するダッシュボードも作れます。
例えば、ChatGPTで架空のビジネスデータを生成して、そのデータをコピーしてClaude Codeに貼り付ける。
「このデータを使って、私の理髪店のビジネスダッシュボードを作ってください。投資家を惹きつけるために使います」
すると、グラフやチャートが配置されたインタラクティブなダッシュボードができあがります。
ゲーム
Three.jsというスタックを選ぶと、3Dゲームも作れます。
「飛び回ってコインを集めるゲームを作って。GitHubで人気のあるThree.jsのゲームからインスピレーションを得て、楽しくてクールなものにして」
こういう指示を出すと、実際に遊べるゲームが完成します。紙飛行機を操作してコインを集めながら、障害物を避けるようなゲームとか。
プログラミング知識ゼロでゲームが作れるのは、正直すごいことだと思います。
プロトタイプを作る
本格的なアプリを作る前に、まずプロトタイプ（試作品）を作るのがおすすめです。
Excalidrawというツールで簡単なスケッチを描いて、それをClaude Codeに見せる方法がわかりやすい。
例えば「YouTubeサムネイルを編集できるアプリ」を作りたいとします。
- Excalidrawでざっくりした画面構成を描く
- ここにサムネイル画像が表示される
- ここに編集用のテキスト入力欄がある
- 下にバージョン履歴が並ぶ
- そのスケッチをスクリーンショット
- Claude Codeに画像をアップロードして、「このプロトタイプを作ってください。今はレイアウトに集中してほしい」
こうすると、実際には動作しないけれど見た目だけは完成したプロトタイプができます。これをベースに、後から本当の機能を追加していくわけです。
データベースと認証付きのウェブアプリを作る
ここからが本番。友達がサインインできて、データがリアルタイムで更新されるような、本格的なウェブアプリの作り方です。
Instant DBを使う
データベースと認証には、Instant DBというサービスを使います。
多くの人がSupabaseを使っていますが、AIはSupabaseが苦手で問題に遭遇しやすいんですよね。Instant DBの方がAIと相性がよく、はるかに簡単に作業できます。
設定手順はこう。
- instantdb.comでアカウント作成
- 新しいアプリを作成（例：Riley To Do App）
- 「パブリックアプリID」をコピー
次に、sandbox.devでClaude Code（Next.js）を開いて、こんな感じで指示を出します。
「Instant DBを調べてください。これはデータベースと認証に使うものです。サインインページを実装して、ユーザーがメモを作成・編集できるようにしてください。Instant DBにはこのパブリックアプリIDを使ってください：（コピーしたID）。ドキュメントを読んで、最初の試行で機能するようにしてください」
するとAIがInstant DBのドキュメントを検索して、サインイン機能付きのメモアプリを作ってくれます。
実際にメールアドレスを入力すると、確認コードが送られてきて、そのコードを入力するとサインインできる。メモを作成すると、Instant DBのダッシュボードでデータが保存されているのを確認できます。
エラーが出たときの対処
画像のアップロード機能を追加しようとすると、「許可が拒否されました。ストレージのパーミッションがありません」というエラーが出ることがあります。
そういうときは、そのエラーをそのままコピーしてClaude Codeに貼り付ける。
「このエラーが発生しました。Instant DBのパーミッションに何か貼り付ける必要がある場合は教えてください」
するとAIが解決策を教えてくれます。Instant DBのパーミッション設定画面に特定のコードを貼り付けると、画像アップロードが機能するようになる。
エラーが出ても慌てなくていい。エラーメッセージをそのまま渡せば、AIが解決してくれることがほとんどです。
APIを使った本格的なアプリを作る
さらに一歩進んで、外部のAPIを使ったアプリを作ってみましょう。
例として、Googleが提供するNano Banana（画像編集AI）を使った、YouTubeサムネイル編集アプリを作ります。
APIキーを取得する
APIを使うには、APIキーが必要です。これはアカウントをアプリケーションに接続するためのパスワードのようなもの。
Google AI Studioでアカウントを作成して、APIキーを発行します。Googleは無料でかなりのクレジットを提供してくれるので、試すだけなら費用はかかりません。
アプリを作る
まず、PerplexityやChatGPTに「Nano BananaのAPIをNext.jsで使う方法を教えて」と聞いて、ドキュメントを取得します。
次に、先ほど作ったプロトタイプを開いて、こう指示します。
「このプロトタイプを本物にしたい。GoogleのNano Banana APIで機能させて。これがAPIキーです。YouTubeサムネイルエディタとして完全に機能させてください」
PerplexityからもらったドキュメントとAPIキーを渡すと、AIがAPIを組み込んだ本物のアプリを作ってくれます。
完成したアプリでは、サムネイル画像をアップロードして「この人にサングラスをかけて」と入力すると、AIが画像を編集してくれる。「髪を長くして」「タートルネックを着せて」といった指示も通ります。
バージョン管理もあるので、いろんな編集を試して、気に入ったバージョンを選べる。
こういう本格的なアプリが、コードを1行も書かずに作れるわけです。
モバイルアプリを作る
ここまではウェブアプリでしたが、App Storeに公開できるモバイルアプリも作れます。
使うのはVibe Codeアプリ（vibecodeapp.com）。スマートフォンにインストールして使います。
面白いのは、OpenAI、Gemini、Anthropicなど複数のAPIがあらかじめ組み込まれていること。11 labsの音声合成APIも入っています。
音声メモアプリを作る例
「ボイスノートを話せるアプリを作って。OpenAI APIのWhisperを使って文字起こしを取得し、AIで要約して。携帯電話の下部に大きな録音ボタンを配置して、録音したメモがリストで表示されるようにして」
こういう指示を出すと、携帯電話上でアプリを構築してくれます。sandbox.devと同じような操作感で、エラーが出たらエラーをコピペして修正を依頼する。
完成すると、実際にボイスメモを録音して、AIが文字起こしと要約を生成してくれるアプリができあがります。
PCと連携する
Vibe CodeアプリにはWebアプリもあって、PCからも作業できます。PCで変更を加えると、スマホのアプリにリアルタイムで反映される。
QRコードをスキャンすると、今作業しているアプリがスマホで開く。PCで細かい調整をしながら、スマホで実際の動作を確認できるのは便利です。
App Storeにデプロイする
作ったアプリをApp Storeに公開するには、いくつかの準備が必要です。
必要なもの
- Expoのアクセストークン（expo.devで無料アカウントを作成して取得）
- Apple Developer Account（年間99ドル）
Apple Developer Accountの設定は少し時間がかかりますが、一度設定すれば無制限にアプリをApp Storeにアップロードできます。
デプロイの手順
Vibe Codeアプリの設定画面で：
- バンドル識別子を確認（自動生成されているのでそのままでOK）
- アプリ名を入力
- バージョンを設定（1.0など）
- アプリアイコンを生成（AIが作ってくれる）
- Expoのアクセストークンを貼り付け
- Apple Developer Accountを連携
- 「Start Build Process」をクリック
ビルドが完了すると、Appleにレビュー申請できる状態になります。
あとはアプリの説明文を作成して、利用規約やプライバシーポリシーのリンクを用意すればOK。Notionでシンプルなドキュメントを作っておくだけでも大丈夫です。
ウェブアプリをインターネットに公開する
ウェブアプリをインターネットに公開したい場合は、コードをダウンロードしてデプロイします。
コードのダウンロード
sandbox.devのダウンロードボタンを押すと、メールでダウンロードリンクが届きます。
そのファイルをCursorで開いて、「このコードをGitHubリポジトリにアップロードして、Vercelにデプロイして」と指示すれば、インターネットに公開されます。
（sandbox.devでは、今後ワンクリックでデプロイできる機能も追加予定とのこと）
Vibe Codingのコツ
ここまでの内容を踏まえて、うまくいくためのポイントをまとめておきます。
具体的に指示を出す
「アプリを作って」より「音声を録音して、AIで文字起こしして、要約を生成するアプリを作って。下部に大きな録音ボタン、上部にメモ一覧」のように、できるだけ具体的に。
参考画像があれば添付すると、イメージに近いものができやすい。
複雑なタスクはOpusを使う
APIを組み込んだり、新しいテクノロジーを使ったりする複雑なタスクでは、より強力なモデル（OpusやGPT-5 High）を使う。シンプルな変更ならデフォルトのモデルで十分。
エラーはそのまま渡す
エラーメッセージが出たら、そのままコピーしてAIに貼り付ける。「このエラーが出ました。修正してください」でたいていは解決する。
コンテキストを管理する
チャットが長くなるとAIのパフォーマンスが落ちるので、適宜/clearや/compactを使う。新しいタスクを始めるときはリセットしておくといい。
3つのツールを比較する
同じ指示をClaude Code、Codex、Geminiに出して、結果を比較するのも面白い。それぞれ少しずつ違う方向性で作るので、一番気に入ったものを選べます。
まとめ
というわけで、Vibe Codingで作れるものをざっと紹介しました。
静的ページ（ランディングページ、プレゼン、ダッシュボード、ゲーム）から、データベースと認証付きのウェブアプリ、外部APIを使った本格的なアプリ、そしてApp Storeに公開できるモバイルアプリまで。
コードを1行も書かずに、自然言語で指示を出すだけでここまで作れるのは、正直すごいことだと思います。
まずはsandbox.devでアカウントを作って、シンプルなランディングページあたりから試してみるといいんじゃないでしょうか。「Hello World」と表示するだけでもいいので、触ってみると感覚がつかめると思います。
これからAIモデルはさらに進化していくはずなので、今のうちに慣れておくと、いろいろと可能性が広がりそうです。