リンクをコピーしました

バイブコーディングで3つ作った体験談｜Web未経験でもとりあえずリリース出来た話

「バイブコーディングって実際どうなの？何が作れるの？」
Webの知識がほぼない僕が、バイブコーディングだけで3つのサービスをリリースしました。
この記事では、作ったものとそこで得た学びをまとめます。
これからバイブコーディングを試したい方や、プログラミングをなんとなく始めてみたい方の参考になれば幸いです。

この記事でわかること

  • バイブコーディングで何が作れるか（具体例3つ）
  • 精度を上げるために自分でやったこと
  • 各サービスで学んだ技術・ツール（Stripe、Canvas など）

僕の経歴とスキル

テクにカールアティストとして、ゲーム業界に身を潜めていたものです。
主にデザイナーの手伝い、プログラマーと他の部署との架け橋となる感じの仕事です。

詳細はこちら👇

私について
ゲーム開発者 testkun の自己紹介ページです。
nannyakore.com

ざっくりいうと、満遍なく全体をカバーできて、スクリプトも出来るというレベルです。

バイブコーディングで精度を上げるには「自分で調べて知識をアップデートする」が必要と感じる

もともとWeb開発の知識がなかったので、作りながら公式ドキュメント・ブログ・AIの回答からサンプルを集めては試す、の繰り返しで勉強しました。

そのなかで気づいたのは、底上げの勉強はどこでも必要ということです。
（仕事でやる事を淡々とやる感じでしょうか。。。）
特に「ワンショットで仕上げたい」ときは、事前に用語や流れを少しでも押さえておくと、プロンプトの精度が上がりやすいです。

なので、以下のようなルーティンで開発するようにしています。

  • 1,知識量を増やす(AIや検索でもっと深くまで理解する)
  • 2,AIと会話して、プロンプトの精度を高める
  • 3,実践

作ったもの①：株分析アプリ（yfinance スクリーナー）

「わが投資術」を一年ぶりに読み返して、日本の割安株を見つけて見ようと思ったのがきっかけです。
また、yfinanceを使用してほぼ全銘柄して分析してみるっていう記事をあまり見かけなかったのでやってみた。という感じです。

日本株スクリーニング｜yfinance×わが投資術 - 小型株割安株探し・CSVで分析
日本株3795銘柄以上をyfinanceで取得し、CSVでドラッグ&ドロップ分析。小型株・業種別・高ネットキャッシュ企業のスクリーニングが可能。個人投資家向け無料ツール。
yfinance-jp-screener-search.vercel.app

ここで学んだこと

指標・計算式の再確認
yfinanceを触るなかで、PER・ROE・配当利回りなどの指標や計算式・用語を改めて整理できました。英語のドキュメントも読むので、プログラミング＋投資用語の勉強にもなっています。

Amazonアフィリエイトの実感
「わが投資術」のリンクをZennの記事やプロジェクトに置いたところ、約2,962円の成果がありました。

Amazonアフェリエイト去年分

自分は「本当に勧められるものだけ」を紹介したいタイプなので、アフィリエイトは向き不向きがあると実感しました。
一方で、このアプリの記事が1日で約8,000ビューになり、今も1日10〜20人ほど見てくださっているので、どれくらいの規模感で収益が出るかの肌感はつかめました。

（Zennでアフィリエイトをしていることについて違和感を持たれた方、この場でお詫びします）

作ったもの②：通貨ボード画像生成アプリ

YouTuber試しにをやっていた頃、各国の価格表示用に画像をイラストレーターでレイアウトして書き出し、動画に使っていました。
**「複数APIを組み合わせて整形して画像出力する」**のは、AIがまだ苦手そうだと思ったので、WiseのAPIを使って自分用ツールを作りました。

リアルタイム為替レートボード作成/埋め込み無料ツール
リアルタイムで複数通貨をボード形式で比較できる通貨換算ツール。無料でブログやウェブサイトに埋め込み可能。150以上の通貨に対応し、画像エクスポートやカスタマイズも自由自在。ECサイト、メディア、動画制作に最適な為替レート表示ツールです。
currency-converter-board.com

ここで学んだこと

SPAからSSRへの移行
SEOを意識してSSR対応を進めました。サーバーとクライアントの状態の違いによるエラーに少し手間取りましたが、SEOと表示の両立のイメージはつかめました。

SEO対策（検索エンジンとAIの両方）
「SEOって何？」という状態から、検索エンジンのクローラーだけでなく、AIが理解しやすい構造にすることまで含めた「いまの時代のSEO」を学びました。

Stripeの導入
有料化を検討してStripeを組み込みました。
サンドボックスもあり、思ったより簡単に試せました。
細かい情報収集や項目の整理には手が回らず、いったん有料は見送って無料公開にしています。
別サービスで有料化するときには、今回の経験を活かせそうです。

※一点だけ、、StripeのWebが重いので、その点は改善してもらいたい笑

作ったもの③：グラデーションサムネイルメーカー

きっかけ
もともと自分の note 用サムネイルを作るときは、Photo Gradient でグラデーションだけ作ってから Photoshop でテキストを乗せる、という二度手間なフローでした。
「どうせなら、グラデーション作成とテキストレイアウトまで一気にできるツールが欲しい」と思い、自分用に Web アプリとして実装しました。

ここで学んだこと

抽象的プロンプトの限界
デザイン面では特に、抽象的表現の限界がありました。
なので、大量のリファレンスとモックを作成してそこからさらに情報を詰め込んだ指示を出すと言うことを繰り返しました。

基本的には自分用ですが、note やブログの見出し画像・OGP を作りたい人なら誰でも使えるように公開しています。

まとめ：バイブコーディングの感想とこれから

バイブコーディングで作ることのハードルはかなり下がりました。
そのぶん、アイデアや革新性がより重要になっていくなぁ〜と感じました。

バイブコーディングで素早くモックを作り、アイデアを形にする。そのうえで、詰めの段階ではセキュリティやUI/UXにも時間を割いて仕上げる——そんな使い方がいちばんしっくりきています。

本業のゲーム開発と並行して、「くだらないけど面白い」ものを作っていく予定です（たぶん）。

それでは、良い1日を！