「バイブコーディングって実際どうなの？何が作れるの？」
Webの知識がほぼない僕が、バイブコーディングだけで3つのサービスを公開しました。
作ったもの・あとから足した変更・そこで得た学びを、公開物ベースで書き直しています。
これから試したい方や、プログラミングをなんとなく始めてみたい方の参考になれば幸いです。
公開したもの（ざっくり条件）
| 公開物 | きっかけ・前提 | あとから変わったところ | 記事時点で分かっている結果 |
|---|---|---|---|
| 株分析アプリ（yfinance スクリーナー） | Webほぼ未経験。「わが投資術」を読み返し、yfinanceで広く銘柄を見てみたくなった | CSVのブラウザ保持、検索プリセット、画面まわり。Claude／DESIGN.mdでの見た目実験は参考止まり | Zenn／note経由でAmazonアフィリエイト約2,962円。記事が1日で約8,000ビュー、執筆時点でも1日10〜20人ほど |
| 通貨ボード画像生成 | YouTuberを試しにやっていた頃、国ごとの価格表示をIllustratorで作っていた。複数API→画像はAIがまだ苦手そうだったので自作 | SPAからSSRへ。Stripeは入れてみたが有料化は見送り、無料公開 | SEO（検索＋AI向け構造）とStripeサンドボックスの感触を得た |
| グラデーションサムネイルメーカー | note用にPhoto Gradient→Photoshopの二度手間だったので、グラデ＋テキストを一気にやりたかった | （この記事では追加イテレーションの詳細は書いていない） | 抽象プロンプトだけでは足りず、リファレンスとモックを重ねた |
共通の前提は、ゲーム業界のテクニカルアーティスト寄りの土台はある一方で、Web開発はほぼ未経験だったことです。
詳細な経歴は About にあります。
スクリプトは触れるものの、満遍なくカバーするタイプ、くらいの感覚です。
精度を上げるには、自分で調べて知識をアップデートする必要があった
もともとWeb開発の知識がなかったので、作りながら公式ドキュメント・ブログ・AIの回答からサンプルを集めては試す、の繰り返しで勉強しました。
気づいたのは、底上げの勉強はどこでも必要だということです。
特に「ワンショットで仕上げたい」ときは、事前に用語や流れを少しでも押さえておくと、プロンプトの精度が上がりやすいです。
いまはだいたい次の順で回しています。
- 知識量を増やす（AIや検索でもっと深くまで理解する）
- AIと会話して、プロンプトの精度を高める
- 実践
作ったもの①：株分析アプリ（yfinance スクリーナー）
「わが投資術」を一年ぶりに読み返して、日本の割安株を見つけてみようと思ったのがきっかけです。
yfinanceを使ってほぼ全銘柄を分析してみる、という記事もあまり見かけなかったのでやってみました。
- 解説記事: note - 株分析アプリ
- 関連: Zenn - Python yfinance
初期公開のあとで入れた変更
最初に出したあと、次を足しました。
- CSV をブラウザに記憶: 一度読み込んだ CSV をブラウザ側に保持し、後から同じデータでそのままスクリーニングできるようにした。毎回アクセスするたびに消えるのが微妙だったので。
- 検索プリセット: よく使う条件を プリセットとして保存と適用できるようにした。
- スクリーニング結果の UX/UI: 見やすさ・操作しやすさを中心に、画面まわりを調整した。
見た目の変化は、だいたい次のキャプチャのとおりです（上が変更前、下が変更後。Dataset の表示やお気に入りタブ・列の表示切り替えなど、今回の機能に合わせてレイアウトと配色を組み直しています）。
見た目の実験（採用しなかったもの）
アプリの見た目をもう一段モダンにしたくて、Claude 上で次のようなプロンプトを試しました。
このデザインをもっと現代的でスクリーニングしやすいインターフェイスにしたい
（対象 URL:https://yfinance-jp-screener-search.vercel.app/）
返ってきたのは、なんかスッキリしてそうな感じのUI。
まぁいいかなぁ〜とか思いつつも、とりあえずは参考程度にと止めました。
個人的にはリデザインなら Google Stitch がいいかな、と思っています。
次に試したのが DESIGN.md です。Google Labs の Stitch が案内しているものです。
getdesign.md ではさまざまなwebサービス風のサンプルが配布されています。
日本語版のまとめとして、こんなリポジトリも見かけました。
好みのトーンだった Wise の design-md（Wise / design-md）を取り、ローカルに DESIGN.md として置いて Claude か Cursor に読み込ませ、「現在のデザインをそのまま変更して」と頼んだだけです。
ボタンや色味は Wise っぽくなって好みには近づいたのですが、そこまでパッとしなかったので、これもいったん置いています。
webまわりは DESIGN.md のような宣言ファイルを置いてリミックスする流れが増えそう、という感触だけ持ち帰りました。
ここで学んだこと・結果
指標や計算式も、あらためて整理し直すことになりました。
yfinanceを触るなかで、PER・ROE・配当利回りなどの用語を追い直しています。英語のドキュメントも読むので、プログラミング＋投資用語の勉強にもなっています。
Amazonアフィリエイトの実感も、ちょっと意外でした。
「わが投資術」のリンクをZennの記事やプロジェクトに置いたところ、約2,962円の成果がありました。
自分は「本当に勧められるものだけ」を紹介したいタイプなので、アフィリエイトは向き不向きがあると実感しました。
一方で、このアプリの記事が1日で約8,000ビューになり、今も1日10〜20人ほど見てくださっているので、どれくらいの規模感で収益が出るかの肌感はつかめました。
（Zennでアフィリエイトをしていることについて違和感を持たれた方、この場でお詫びします）
関連メモ: GitHub Actions の無料プランでストレージ上限に達したときの対策
作ったもの②：通貨ボード画像生成アプリ
YouTuberを試しにやっていた頃、各国の価格表示用に画像をIllustratorでレイアウトして書き出し、動画に使っていました。
「複数APIを組み合わせて整形して画像出力する」のは、AIがまだ苦手そうだと思ったので、WiseのAPIを使って自分用ツールを作りました。
ここで学んだこと
まず、SPAからSSRへの移行です。
SEOを意識してSSR対応を進めました。サーバーとクライアントの状態の違いによるエラーに少し手間取りましたが、SEOと表示の両立のイメージはつかめました。
SEOも、検索エンジンだけでなくAI向けまで意識するようになりました。
「SEOって何？」という状態から、検索エンジンのクローラーだけでなく、AIが理解しやすい構造にすることまで含めた「いまの時代のSEO」を学びました。
Stripeも一度入れてみました。
有料化を検討して組み込み、サンドボックスもあり、思ったより簡単に試せました。
細かい情報収集や項目の整理には手が回らず、いったん有料は見送って無料公開にしています。
別サービスで有料化するときには、今回の経験を活かせそうです。
※一点だけ、、StripeのWebが重いので、その点は改善してもらいたい笑
作ったもの③：グラデーションサムネイルメーカー
もともと自分の note 用サムネイルを作るときは、Photo Gradient でグラデーションだけ作ってから Photoshop でテキストを乗せる、という二度手間なフローでした。
「どうせなら、グラデーション作成とテキストレイアウトまで一気にできるツールが欲しい」と思い、自分用に Web アプリとして実装しました。
- Webアプリ: グラデーションサムネイルメーカー
- 解説記事: note - 『あけおめ』note用のサムネイルメーカー作成しました
ここで学んだこと
いちばん効いたのは、抽象的なプロンプトだけでは足りない、ということでした。
デザイン面では特に限界が見えやすかったので、大量のリファレンスとモックを作成して、そこからさらに情報を詰め込んだ指示を出す、ということを繰り返しました。
基本的には自分用ですが、note やブログの見出し画像・OGP を作りたい人なら誰でも使えるように公開しています。
まとめ：バイブコーディングの感想とこれから
バイブコーディングで作ることのハードルはかなり下がりました。
そのぶん、アイデアや革新性がより重要になっていくなぁ〜と感じました。
素早くモックを作り、アイデアを形にする。詰めの段階ではセキュリティやUI/UXにも時間を割く——そんな使い方がいちばんしっくりきています。
本業のゲーム開発と並行して、「くだらないけど面白い」ものを作っていく予定です（たぶん）。
良い1日を！
