バイブコーディングで1時間でアプリの原型を作った話
バイブコーディングという言葉を最近よく見かけるようになりました。「コードを書かずに、Claude Codeに話しかけるだけでアプリが作れる」らしいのですが、コードを書いたことがない私に本当にできるのか、正直半信半疑でした。
結論から言うと、1時間で「動くアプリの原型」ができました。ただし「完璧に動くアプリ」ではなく「原型」という言葉には理由があります。この記事では、実際に手を動かした一部始終を、うまくいった部分もつまずいた部分も含めて公開します。
バイブコーディングとは何か
調査ベースで整理すると、バイブコーディングとは「1行ずつコードを書くのではなく、自然言語でAIエージェントに指示を出し、AIにコードを生成・修正させながら開発を進める手法」を指す言葉のようです（2026年8月時点の複数の解説記事より）。
「バイブ（vibe＝雰囲気・感覚）」という名前の通り、コードの中身を理解していなくても、「こういう雰囲気のものが欲しい」という感覚を伝えるだけで開発が進むところが特徴だと紹介されていました。すでに非エンジニアが個人アプリを作った事例も複数公開されており、決して一部の人だけの話ではなさそうです。
実際に1時間で読書記録アプリを作ってみた
今回作ってみたのは、読んだ本のタイトルを入力して「読了」チェックを付けられる、ごく簡単な読書記録アプリです。ブラウザで開くだけで動くシンプルなものにしました。
やったことは次の3ステップです。
1. Claude Codeを起動し、「こんな感じのものが欲しい」と自然文で伝える
2. 出てきた画面を実際にブラウザで開いて触ってみる
3. 気になった見た目や動きを、また自然文で伝えて直してもらう
最初のプロンプトを送ってから、ブラウザで動くものが出てくるまでは体感10分もかかりませんでした。ただし、そこからが本番でした。
- 1回目：本のタイトルは入力できたが、チェックを入れても保存されず、ページを更新すると消えてしまう
- 2回目：「ブラウザを閉じても記録が残るようにしたい」と伝えたところ、保存の仕組み（ローカル保存）を追加してくれて解決
- 3回目：見た目が味気なかったので「もう少し落ち着いた配色にしてほしい」と伝えて微調整
この3往復でだいたい50分ほど。合計してちょうど1時間くらいで、自分専用の読書記録アプリの原型が完成しました。
うまくいった点・まだわからない点
正直に書くと、良かった点と不安が残る点の両方があります。
うまくいった点は、「保存されない」というバグに気づいたときも、エラーメッセージをそのまま貼り付けるだけで原因を特定して直してくれたことです。原因を自分で調べる必要がなかったのは大きかったです。
一方で、まだわからない点もあります。今回作ったのはあくまで自分のパソコンの中だけで動く原型で、スマホから使ったり、他の人に配布したりする方法はまだ試せていません。「公開するにはどうすればいいか」は、これから調べていく予定です。また、コードの中身を自分では読めていないため、何か大きな不具合が起きたときに自力で直せるかどうかも、正直まだ自信がありません。
読者がそのまま使えるプロンプト例
同じように「まず動くものを1つ作ってみたい」という方は、次のようなプロンプトから始めると進めやすいと思います。
簡単な読書記録アプリの原型を作ってください。
目的: 読んだ本のタイトルを記録し、読了チェックを付けられるようにしたい
対象: 新しいフォルダに新規ファイルとして作成してください（既存のファイルは変更しないでください）
要件:
- ブラウザで開くだけで動くシンプルな構成にしてください
- ブラウザを閉じても記録が残るようにしてください
作成する前に、想定しているファイル構成と使用する技術を一度提示してください。私が確認してからで結構ですので、その返答を待ってから作成を進めてください。
さらに、以下を確認事項として列挙してください（推測で進めないでください）。
- 保存先フォルダの場所
- 使う技術構成の候補と、それぞれの向き・不向き
- 決めきれない仕様があればその一覧
ファイルの新規作成のみを依頼するプロンプトですが、既存のプロジェクトの中で試す場合は、対象ファイルや影響範囲をより具体的に絞って伝えることをおすすめします。
なお、今回はmacOS上のClaude Code CLIとブラウザ（保存にはブラウザのローカル保存機能を利用）で試した内容です。OSやブラウザ、Claude Codeのバージョンによって、生成されるコードや挙動が変わる場合があります。
Claude Codeでアプリ作りに興味が出た方へ
今回はごく小さな原型でしたが、もう少し本格的にWebアプリを作る手順をまとめた記事も書いています。あわせて読むと、次にどこまで進められそうかイメージしやすいと思います。
- [Claude CodeでWebアプリを作るのに必要なこと](https://maahsachi.com/2026/05/19/claude-code-webapp/)
また、コードを書かずにClaude Codeと対話しながらGitの基本操作を学べる無料の学習アプリも公開しています。「動くものは作れたけど、変更履歴の管理はどうすれば」と気になった方はこちらもどうぞ。
- [本物のターミナルでGitを学べる学習アプリ](https://maahsachi.com/2026/05/30/git-learning-app/)
まとめ
- バイブコーディングは、コードを書かずに自然言語でAIに開発を任せる手法
- 実際に読書記録アプリの原型を作ったところ、体感1時間ほどで完成した
- エラーが出ても、そのまま貼り付けて直してもらえたのは想像以上に楽だった
- 一方で「公開方法」や「大きな不具合が起きたときの対処」はまだ試せていない
- まずは自分専用の小さな原型から始めてみるのがおすすめ
コードが書けなくても、「こんな感じにして」と伝えるところから始められる。それが今回、実際に手を動かしてみて一番実感したことでした。次は、この原型を誰かに見せられる形にするところまで試してみたいと思っています。
