【実験ログ#001】バイブコーディングで、ニュースをスワイプで仕分けるアプリを開発

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

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

きれいな成功手順書ではなく、2026年7月に実際に試行錯誤して、途中で詰まったことをそのまま記録します。2026年10月11日時点で変わったことは、各所に書き足しました。

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

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

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

画像だけだと動きが分かりにくいので、実際にニュースをスワイプで仕分けている画面も置いておきます。

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

スワぽいの構成（2026年10月11日時点）

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

• フロントエンド・デザイン：React系とTailwind CSS。AIが「これでいけそう」と提案したものを、触りながら理解していきました。
• ホスティング：Cloudflare Pages。GitHubの main にpushすれば、すぐ反映されます。
• バックエンド・データ更新：別のプログラムが毎時0分に自動で動いて、日本語のニュースを取得し、常に40件前後をストックします。
• ニュースの出し方：著作権に配慮して、見出しと要約だけを表示します。本文は、配信元のメディアに移動して読みます。
• ジャンル：テクノロジー、ビジネス、スポーツ、エンタメ、科学、政治、健康、国際の8つから、表示するジャンルを選べます。
• ログイン・決済：Googleかメールリンクでログインします。決済はStripeとGoogle Playです。カード情報は、自分のサーバーでは預かりません。
• 料金プラン：無料は1日50回までスワイプできます。PROは、月額プランが980円、買い切りプランが9,980円で、広告も消せます。

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

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

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

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

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

一番つまずいたこと

AIでの開発は楽ですが、丸投げすると事故が起きます。特に次の3つは、人間の側で確認する必要がありました。

1. Cookie同意とアクセス解析 同意バナーを入れたあと、計測が急に0になりました。「同意前に計測を飛ばす設定」が抜けていて、エラーログにも出なかったので、焦りました。
2. データの整理（重複や古い記事） 重複した記事を除く、「90日より古いニュースを消す」といった条件は、人間のほうから指示しないと、AIは入れてくれません。
3. セキュリティと決済 AIに「決済を作って」と頼むと、画面は出てきます。ただ、自分でカード情報を保持する危ない作りになりがちです。Stripeなどを通す安全な設計になっているか、人間が確認する必要があります。

これから始める人へ

最初から完璧なアプリを目指さなくて大丈夫です。「スワイプが1回動く画面」や、「ニュースが3件取れる状態」から始めれば十分です。

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

公開の順番は Cloudflare Pagesは無料で、ドメインは後 に、Android版を止めた理由は Google Playに住所が出る に書いています。半額コードSAVE50は終了しています。記録は スワぽいPROの半額コードSAVE50 にあります。