【実験ログ#001】バイブコーディングで「スワイプ×要約ニュースアプリ」を0から作った話

「非エンジニアがニュースアプリを公開？」最初は半信半疑でした。

設計もインフラも深く理解していない私が、今こうしてスワイプ×要約ニュースアプリ「スワぽい」を無事公開できています。使ったのは、いわゆる「バイブコーディング（AIとの対話開発）」です。

きれいな成功手順書ではなく、2026年7月時点で実際に試行錯誤し、途中で詰まったリアルな記録を残します。

私がやった「バイブコーディング」

正確な定義はわかりませんが、やったことはシンプルです。「やりたいことを日本語でAIに伝え、動かし、変なところを言葉で修正してもらう」の繰り返しでした。

最初の指示なんて、「右スワイプで保存、左でスキップ。カード1枚ずつ出したい」だけでした。

自分でコードを書くより圧倒的に速いです。ただ、「いま何を作っているか」を人間が把握しておかないと、一瞬で迷子になります。そこは間違いありません。

「スワぽい」の裏側

理想の構成ではなく、いま動いているものです。

• フロントエンド・デザイン： React系 ＋ Tailwind CSS。「これでいけそう」と提案されたものを、触りながら理解していきました
• ホスティング： Cloudflare Pages。GitHub の main に push すればすぐ反映されます
• バックエンド・データ更新： 別プログラムが毎時0分に自動実行し、日本語ニュースを取得して常に40件前後をストックします
• ニュースの出し方： 著作権に配慮し、見出しと要約のみを表示。本文は各メディアへ遷移します
• ログイン・決済： Google / メールリンク。決済は Stripe および Google Play。カード情報は自分のサーバーで預かりません
• 料金プラン： 無料（1日50回）／ PRO（月額980円・広告非表示）

アプリ本体だけでは伝わりにくいところもあるので、使い方を説明するブログも分けています。

仕様書なし、動かしながら直した

作った順番は、だいたい次のとおりです。

1. カードが出る
2. スワイプが動く
3. 保存一覧ができる
4. ニュースが取れる
5. ログイン
6. 課金

朝思いついた機能が夜には動いている日もあれば、同意バナーや計測などの地味な実装に何日もハマることもありました。

一番つまずいたこと

AI開発は楽ですが、丸投げすると事故ります。とくに次の3点は、人間側の確認が必須でした。

1. Cookie同意とアクセス解析
   同意バナー導入後、計測が急に0になりました。「同意前に計測を飛ばす設定」が抜けており、エラーログにも出ないため焦りました。
2. データクレンジング
   重複記事の排除や「90日以上古いニュースを消す」といった条件は、人間側から指示しないとスルーされます。
3. セキュリティと決済
   AIに「決済を作って」と頼むと画面は出ますが、自前でカード情報を保持する危険な構成になりがちです。Stripe などを通す安全な設計になっているか、人間が確認する必要があります。

これから始める人へ

最初から完璧なアプリを目指す必要はありません。「スワイプが1回動く画面」や「ニュースが3件取れる状態」からスタートすれば大丈夫です。

「ちゃんと作れる人だけがアプリを出す」と思っていましたが、言葉で伝え、修正を重ねることで形になりました。まずは登録なしで触れる「スワぽい」で、スワイプ体験を試してみてください。