プログラムを一切書かずにWebアプリを作る方法｜Claudeと対話するバイブコーディング実践記
また一つ、コードを1行も書かずにアプリを作りました。
前回つくった「診断ツール」に続く、2本目のWebアプリです。
今回の違いは、裏側にデータベースを繋いだこと。
データを溜めて、管理して、公開する——いわゆる「ちゃんと動くアプリ」に一歩近づきました。
しかも、相変わらず私はプログラミングができません。
やったことは、生成AIのClaudeと日本語で会話しただけ。
専門知識がなくても、ここまで作れる時代になりました。
今日はその全工程を、つまずいた部分も含めて正直に公開します。
Contents
そもそも「バイブコーディング」とは何か
バイブコーディングとは、自分でコードを書く代わりに、生成AIに「こういうものが欲しい」と自然言語で伝え、対話しながらアプリを作っていく開発スタイルのことです。
従来は「プログラミングを学んでから、ようやく作れる」のが当たり前でした。
つまり、作りたいものがあっても、その前に分厚い学習コストの壁が立ちはだかっていた。
バイブコーディングは、この順番をひっくり返します。
先に作りながら、必要なことを後から学ぶ。
私がよく言う「最終学歴より最終学歴」とは、まさにこのこと。
学校で何を習ったかより、今この瞬間、何を学んで手を動かしているか。
生成AIは、その「作りながら学ぶ」を現実にしてくれる道具です。
今回の主役ツール ― LovableとSupabase
Lovableとは
Lovableは、日本語で「こんなアプリが欲しい」と指示すると、Webアプリの形にしてくれるノーコードのアプリ開発ツールです。
前回の診断ツールもこれで作りました。
詳しくは前回の記事に書いているので、ここでは深入りしません。
Supabaseとは？
Supabaseとは、アプリの裏側でデータを保管・管理する「データの保管庫」です。
もう少し具体的に言うと、こんなことができます。
- ユーザーが入力したデータを溜めておく（蓄積）
- 誰がログインしているかを確認する（認証）
- 「この人は見ていい／この人はダメ」を仕分けする（アクセス権限の管理）
前回の診断ツールには、この「保管庫」がありませんでした。
質問に答えて結果が出る、そこで完結。
でも今回作りたかったのは、投稿が溜まっていき、それを管理して公開するアプリ。
だからデータベースが必要でした。
2本目にして、いきなりデータベース付きに挑戦したわけです。
（PostgreSQLやRLSといった専門用語も出てきますが、要は「頑丈な保管庫」と「鍵のかかる引き出し」だと思えば大丈夫。難しい言葉は、Claudeがその都度かみ砕いて教えてくれます。）
作る前に「壁打ち」した ― これが一番効いた
正直に言うと、今回いちばん効いたのは「作る作業」そのものではありません。
作り始める前に、Claudeとした壁打ちでした。
いきなり「アプリ作って」ではなく、まず「こんなことをやりたいんだけど」と相談したんです。
すると、Claudeのほうから次々と質問が返ってきました。
- 「相談は無料にしますか、有料にしますか？」
- 「投稿は誰でも見られる公開ですか、それとも非公開ですか？」
- 「集めたデータはどこに、どう置きますか？」
——こういう問いを投げられて、私は初めて「あ、そこまだ決めてなかった」と気づくわけです。
頭の中でぼんやりしていた構想が、質問に答えるうちに、くっきり固まっていく。
生成AIは「作る道具」であると同時に、「考えを整理する壁打ち相手」でもある。
これは初心者がいちばん見落としやすい、最大のコツだと思います。
私が普段のセミナーで「答えを教えるより、一緒に考えて自走できるようにする」と言っているのと、まったく同じこと。
Claudeは、その伴走相手をしてくれます。
プログラムを書かず、エラーはスクショで解決する
開発中、私が実際にやっていた作業は、驚くほどシンプルです。
- 日本語で「こうしたい」と指示する
- エラーが出たら、その画面をスクリーンショットで貼る
- Claudeが原因と直し方を、日本語で返してくれる
この往復だけ。たとえば、セキュリティに関する警告が画面に出たことがありました。
何が起きているのか私にはわかりません。
でも、その画面をスクショして「これ出たんだけど」と見せると、「ここをこう直せば大丈夫」と教えてくれる。言われたとおりにすると、ちゃんと直る。
この「スクショで対話する」やり方こそ、生成AI活用の基本動作だと思っています。
必要なのは専門知識ではなく、「困った状況をそのまま見せて、聞く力」。
エラーは敵ではなく、対話のきっかけです。
（※実際のスクショには個人情報や認証用の文字列が写り込むので、公開時は必ず伏せています。これも大事な作法のひとつ。）
どんなアプリを作ったのか（仕様書チラ見せ）
完成したアプリを、仕様書風にざっくり紹介します。
何のためのアプリか
業種別の「お困りごと」を集め、無料相談につなげ、解決事例として蓄積していくためのアプリです。
3つの画面
- 投稿フォーム：誰でも、自分の業種と困りごとを投稿できる
- 公開される事例一覧：承認されたものだけが、みんなに見える
- 管理者だけの承認画面：私だけがログインして、公開するかどうかを判断する
ポイントは、承認したものだけを公開し、個人情報は一切表に出さない設計にしたこと。
誰かの困りごとを預かる以上、ここは絶対に妥協できません。
だからこそ、開発中もセキュリティ周りはClaudeと何度もやり取りして、丁寧に詰めました。
中身を全部見せるとネタバレなので、続きはぜひ実際に触ってみてください。
完成したアプリはこちら
こちらが、今回作ったアプリです。
業種と、いま困っていることを一つ投稿してもらえれば、それがそのまま無料1時間相談につながります。
「うちの業界でも、こんなことできるの？」——その入り口として、気軽に使ってみてください。
ちなみに、独自ドメイン（soudan.solobizjourney.com）での公開設定も、自分でやりました。
ここまで含めて、非エンジニアの私が再現できた、ということです。
まとめ
専門知識ゼロでも、
- 壁打ちで要件を固める
- 日本語で指示して作る
- エラーはスクショで対話して直す
——この3ステップで、データベース付きの本格的なアプリが作れる時代になりました。
あなたの現場にある「困った」も、きっと同じように形にできます。
最初の一歩は、完璧な設計図ではなく、「Claude、ちょっと相談なんだけど」のひと言で十分。
誰もまだ飛び込んでいない海に、最初に飛び込むペンギン（first penguin）でいいんです。
作りながら学べばいい。まずは一つ、あなたの「困った」をClaudeにぶつけてみてください。
