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

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

雰囲気で作る、という響きだけ聞くと、なんとなく雑に見えるからです。

でもスワぽいを作っているうちに、これは「AIに全部任せる」話ではないと分かりました。アイまーるを作っているうちにも、同じことが言えます。

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

自分がやっていること

Andrej Karpathy が使った言葉として広まった、という話はよく聞きます。細かいコードを書くより、「こういう感じにしたい」と伝えて、動くものを見ながら直す、というイメージです。

自分が実際にやっているのは、もっと泥くさいです。

スワぽいを作り始めたときの最初の指示は、こんな感じでした。

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

アイまーるでは、最初に決めたのは機能リストではなく、「何を守るか」でした。眼精疲労対策であること、20-20-20を中心にすること、会員登録なしで使えること、記録はなるべく端末の中に置くこと。この4つだけは、途中で変えないようにしました。

「タイマー画面を作って」だけ頼むと、タイマーはできます。でも休憩を忘れにくい道具にはなりませんでした。「休憩を忘れにくくしたい」「スマホで片手でも迷わず使いたい」と書くほうが、近づきました。

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

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

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

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

派手な機能より、こういう地味なところのほうが時間を取られることが多いです。実験ログ#001でも書きましたが、自分から言わないとスルーされがちな条件（ニュースの重複除外、90日より古い記事を出さない、など）も、自分で決めないといけませんでした。

判断は人間側に残る

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

スワぽいでは、ニュースを全文転載しないようにしました。見出しと要約だけ見せて、本文は配信元へ送る形です。著作権まわりで変なことをしたくなかったからです。PROは月額980円、無料は1日50回まで、という課金の線引きも、動くものが出てから自分で確認しました。

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

ガイド記事の下書きにもAIを使っています。ただ、出てきた文章をそのまま公開はしていません。健康に関する内容なので、言い切りを避け、医師の監修がないことを明記し、参考にした情報も確認しています。

こういう判断は、AIが勝手に決めてくれるわけではありません。

丸投げすると何が起きるか

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

真壁探偵事務所を作ったときも同じでした。AIに頼むと、きれいなランディングページはすぐ出ます。ただ、ミステリーのサイトでそれをやると、普通の販売ページになってしまいます。欲しかったのは「買ってください」より先に、「ここは何かありそう」と思える空気でした。CTAも「購入」だけにせず、「案件を開く」「報告ポータルへ」といった言葉にしています。

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

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

自分が実際に作ったもの

スワぽい — ニュースをカードで見て、右スワイプで保存、左スワイプでスキップするWebアプリ。React系 + Tailwind、Cloudflareにmainをpushすると公開される
アイまーる — 20-20-20タイマーと目の体操をまとめた眼精疲労対策アプリ。React + Vite + TypeScript。公開後にメニューを何度か組み替えた
真壁探偵事務所 — USBメモリとWebポータルを使った体験型ミステリー。Webアプリと違って、USBを送ったあと「やっぱり全部差し替え」は言いにくい

全部が最初からうまくいったわけではありません。計測が止まったり、アイまーるではURL末尾のスラッシュの扱いで検索まわりが面倒になったり、公開してから細かく直しています。

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

よくある誤解への答え

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

最初から詳しくなくても始められます。ただ、完全に見ないまま進めるのは怖いです。エラーが出たら、そのままAIへ貼る。直ったら、何を直したのかざっくり聞く。少なくとも、どの画面・どの機能が変わったかは自分で確認する。このくらいは必要だと思います。

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

小さく試す段階なら、かなり助かります。ただ、ログイン、課金、個人情報、健康やお金に関わる表現は、雑に扱わないほうがいいです。動くことと、安全に出せることは別です。

何から始めればいい？

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

次に読むなら

概念だけだと分かりにくいので、実際に作った記録を読んでみてください。

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