バイブコーディングとは？非エンジニアがアプリを作るときに変わったこと

正直、最初は「バイブコーディング」という言葉を軽く見てました。

雰囲気で作る、って響きだけ聞くと、なんか雑に見えるんですよね。

でも スワぽい を作って、アイまーる を作って、真壁探偵事務所 まで触るうちに、これは「AIに全部任せる」話じゃないって分かりました。

自分の中では、作りたい体験を言葉にして、AIと一緒に画面や処理を直し続ける作り方、くらいに捉えてます。きれいな定義は置いとく。

自分が実際にやっているバイブコーディング

細かいコードを書くより、「こういう感じにしたい」と伝えて、動くものを見ながら直す。よく言われるイメージはそれです。

自分がやってるのは、もっと泥くさい。

スワぽいの最初の指示は、だいたいこれでした。

「右スワイプで保存、左でスキップ。カード1枚ずつ出したい」

設計書はありません。それでも、カード1枚が出るところまでは行けました。そのあとスワイプ、保存一覧、ニュース取得、ログイン、課金、と足していきました。

アイまーるでは、最初に決めたのは機能リストじゃなくて「何を守るか」でした。眼精疲労対策であること。20-20-20を中心にすること。会員登録なしで使えること。記録はなるべく端末の中に置くこと。この4つは途中で変えませんでした。「タイマー画面を作って」だけだと、タイマーはできます。でも休憩を忘れにくい道具にはならない。「休憩を忘れにくくしたい」「スマホで片手でも迷わず使いたい」と書くほうが、近づきました。

非エンジニアにとって何が変わったのか

一番変わったのは、「最初の画面」までの距離かも。

以前なら、HTMLやCSS、JavaScriptをある程度覚えないと、動くものを作るところまで行けませんでした。今は Cursor を使うと、まず動くものを出してから考えられます。

スワぽいでは、朝ぼんやり考えていたものが夜には動いていた日もあります。Cookie同意を入れたあと、アクセス解析の新規ユーザーが急に0になった日もあります。同意前に計測を飛ばしていなかったのが原因で、直すまでは「壊れたのか、設定ミスなのか」と焦りました。あのときは本当に微妙でした。

派手な機能より、こういう地味なところのほうが時間を取られます。ニュースの重複除外や、90日より古い記事を出さない、といった条件も、自分から言わないとスルーされがちでした。バイブコーディングは速いですが、条件の指示は人間側の仕事です。

判断は人間側に残る

「作れる」と「ちゃんと出せる」は別物です。

スワぽいでは、ニュースを全文転載していません。見出しと要約だけ見せて、本文は配信元へ送る形です。著作権まわりで変なことをしたくなかったからです。PROは月額980円、無料は1日50回まで。課金の線引きも、動くものが出てから自分で確認しました。決済は Stripe と Google Play に寄せて、カード番号を自分のサーバーで預かることはしていません。課金・決済を自前で組むとセキュリティ上のリスクが大きい。ログインは Google かメールリンク、ジャンルはテクノロジーから国際まで8つ、という中身も、いま公開している実物に沿った話です。

アイまーるでは、目の疲れの記録を外部に送らないようにしました。サイトには「AI疲労推定」と書いていますが、利用履歴をChatGPTへ送って判定させているわけではありません。連続使用時間や休憩できたかなどから、端末内で参考スコアを計算しています。休憩間隔は12〜20分のあいだで変わる設定もあります。便利だからといって、何でもサーバーに置きたくなかったからです。

ガイド記事の下書きにもAIを使ってます。出てきた文章をそのまま公開はしてない。健康の話なので、言い切りを避けて、医師の監修がないことも書いて、参考にした情報も確認した。医療機器じゃない、ってこともサイトに書いてあります。

こういう判断は、AIが勝手に決めてくれない。

「いい感じにして」だと何が起きるか

「いい感じにして」とだけ頼むと、見た目は整っていても、なぜその画面が必要なのか分からないものが出てきます。

真壁探偵事務所でも同じでした。AIに頼むと、きれいなランディングページはすぐ出ます。ただ、販売は Booth 側でやっているのに、公式サイトまで「買ってください」の押し売りになると、事務所の入口としての空気が壊れます。欲しかったのは、「ここは何かありそう」と思える入口です。CTAも「購入」だけにせず、「案件を開く」「報告ポータルへ」といった言葉にしています。CASE FILE OPEN や調査の流儀も、先に言葉として置いてから画面を直しました。

「誰が、どの場面で、何に困っているのか」を伝えると、かなり良くなります。

スワぽいなら「ニュースを読む前に仕分けたい」、アイまーるなら「休憩を忘れる自分を止めたい」が軸でした。この軸がないと、機能だけ増えて散らかります。

自分が実際に公開したもの

スワぽい は、ニュースをカードで見て、右スワイプで保存、左スワイプでスキップするWebアプリです。React系 + Tailwind。GitHub の main に push すると Cloudflare で公開。アイまーる は、20-20-20タイマーと目の体操、呼吸、ガイドをまとめた眼精疲労対策アプリ。React + Vite + TypeScript。公開後にメニューをホーム側へまとめ直しました。Android版もあります。真壁探偵事務所 は、USBメモリとWebポータルを使った体験型ミステリー。公式サイトは事務所の入口、販売は Booth。USBを送ったあと「全部差し替え」は言いにくい。

全部が最初からうまくいったわけじゃないです。計測が止まったり、アイまーるではURL末尾のスラッシュの扱いで検索まわりが面倒になったり、公開してから細かく直しています。開発途中の名前（OptiGuard）がコードの置き場所に残っているのも、その名残です。

それでも、非エンジニアが「自分で出せる」ところまで来やすくなったのは確かです。

よくある誤解への答え

プログラミングを一切知らなくていいの？

最初から詳しくなくても始められます。でも、完全に見ないまま進めるのはやめたほうがいいかも。エラーが出たら、そのままAIへ貼る。直ったら、何を直したのかざっくり聞く。どの画面・どの機能が変わったかは自分で確認する。Cookie同意のあとに計測が止まったときのように、画面上のエラーだけでは分からないこともある。数字や挙動も一緒に見ます。

AIが書いたコード、品質は大丈夫？

小さく試す段階なら、かなり助かります。ログイン、課金、個人情報、健康やお金に関わる表現は、雑に扱わない。動くことと、安全に出せることは別です。スワぽいの全文転載をやめた判断も、アイまーるの端末内保存も、課金を Stripe に寄せた判断も、その線引きです。

何から始めればいい？

自分が困ってることから始めるのが一番早い。スワぽいは「ニュースを読む前に仕分けたい」から、アイまーるは「休憩できない自分をどうにかしたい」から作った。自分の不便だと、直すべきところも見えやすい。

次に読むなら

概念だけだと分かりにくいので、制作記録を読んでみてください。実験ログ#001（スワぽい）、実験ログ#002（アイまーる）、実験ログ#003（真壁探偵事務所）、Cursorで最初に何を作るか、Cursor ProのAPIが6日で100%になった話 です。

一人で進めるのが不安な人は、トミークリエイトの伴走サポートもあります。必要ならメールください。