【バイブコーディング体験記】Claude Codeでプログラミング経験ゼロからWebアプリを作れた話
この記事で伝えたいこと
「プログラミングなんて自分には無理」と思っていたIT未経験の自分が、コードを1行も書かずにWebアプリを完成させた体験記です。
使ったのは「Claude Code」というAIツール。日本語で「こういうアプリ作って」と指示するだけで、AIがコードを書いてくれるバイブコーディングという新しい開発スタイルです。
この記事では、実際に何をどうやったのかを、非エンジニアの視点で全部書きます。
自己紹介：ガチの非エンジニアです
まず前提として、自分のスペックを書いておきます。
- 本業はIT系とは無縁の仕事
- プログラミング経験：完全にゼロ
- HTML/CSSも知らない
- AIツールは好きで色々触ってる（Midjourney、Suno AI、Kling等）
- パソコンは普通に使える程度
こんな自分が、Webアプリを作って公開できた、という話です。
きっかけ：「バイブコーディング」という言葉を知った
2025年頃から「バイブコーディング（Vibe Coding）」という言葉をSNSで見かけるようになりました。
AIに日本語で指示を出すだけで、プログラミングの知識がなくてもアプリが作れる、という開発スタイルのことです。
「そんなうまい話あるのか？」と半信半疑でしたが、実際に試してみることにしました。
バイブコーディングで使ったツール
Claude Code
Anthropic社が提供するAIコーディングツールです。ターミナル（黒い画面）で動くツールで、日本語で「〇〇なアプリを作って」と指示すると、AIがコードを自動生成してくれます。
最初は「黒い画面」に抵抗がありましたが、やることは日本語を入力するだけなので、慣れればそこまで難しくありません。
Midjourney（画像生成AI）
タロットカードの画像22枚は、Midjourneyで生成しました。「Modern Fantasy」スタイルで、1枚ずつ丁寧にプロンプトを作り込んでいます。
画像生成AIは以前から使っていたので、ここは自分の得意分野でした。
Vercel（デプロイ先）
完成したアプリをインターネットに公開するために使ったサービスです。無料プランで使えて、GitHubと連携するだけで自動的に公開されます。
完成した占いアプリの紹介
AIタロット占い（無料で使えます）
🔗 https://ai-tarot-eta.vercel.app/
主な機能
- ワンオラクル（1枚引き）：サクッと今日の運勢を占える
- 3枚引き（過去・現在・未来）：じっくり深く占える
- 4つのカテゴリ：総合運・恋愛・仕事・お金
- AI占い結果：Google Gemini APIが、引いたカードに基づいて詳細な鑑定文を生成
- 正位置・逆位置に対応
- SNSシェア機能
技術的な構成（参考）
- フレームワーク：Next.js（React）
- 言語：TypeScript
- AI：Gemini API（サーバーサイドで実行、APIキーは非公開）
- 画像：Midjourney生成のWebP画像 × 22枚
- デプロイ：Vercel（無料）
…と書きましたが、正直ほとんど理解していません。 Claude Codeが勝手に選んで構築してくれたものです。
実際の開発プロセス
Day 1：プロジェクト作成〜基本機能
Claude Codeに最初に出した指示はシンプルです：
「タロット占いのWebアプリを作りたい。」
これだけ。するとAIが「大アルカナ22枚を使って、ワンオラクルと3枚引きができるのはどうですか？カテゴリは総合・恋愛・仕事・お金の4つで」と向こうから提案してくれました。
自分で仕様を考える必要すらなかった。提案に「いいね、それで」と答えたら、アプリの骨格が一気にできました。
カードをタップするとめくれるアニメーション、シャッフルの仕組み、結果表示の画面…全部AIが作ってくれました。
Day 2：AI占い機能の追加
「引いたカードの情報をGemini APIに送って、占い結果を自動生成する機能を追加して。日本語で、プロの占い師のような口調で。」
この指示で、カードを引くとAIが鑑定文を書いてくれる機能が完成。
ちなみにGemini API（Google）を選んだのは無料枠があるから。APIの設定もClaude Codeが全部やってくれました。
Day 3：デザイン調整〜公開
「全体的にもっと神秘的な雰囲気にして。紫と金をベースにした配色で。」
「Midjourneyで作ったカード画像を組み込んで。」
デザインの微調整と画像の組み込みをして、Vercelにデプロイ。これで完成です。
かかった費用
| 項目 | 費用 | 備考 |
|---|---|---|
| Claude Code（Anthropic） | 月額約3,000円 | もともと契約済み |
| Midjourney | 月額約1,500円 | もともと契約済み |
| Gemini API | 無料枠内 | |
| Vercel | 無料プラン | |
| このアプリのために追加で払った金額 | 0円 |
自分の場合はAIツールをもともと使っていたので、追加費用ゼロで作れました。これから始める人でも、Claude CodeとMidjourneyの契約で月5,000円以下。プログラミングスクールに通えば数十万円かかることを考えると、かなり安く始められます。
やってみて感じたこと
よかった点
1. 本当にコードを書かなくてよかった
自分が書いたのは日本語の指示文だけです。TypeScriptやReactの知識はゼロのまま完成しました。
2. 「作れる側」になれる感覚
エンジニアでもなんでもない自分が、自分でサービスを作れるようになった。この感覚の変化は大きいです。
3. AIツールの組み合わせが面白い
Claude Code（開発） × Midjourney（画像） × Gemini（占い文生成）。複数のAIを組み合わせることで、一人では絶対にできなかったものが形になりました。
大変だった点
1. エラーが出ると何もわからない
たまにエラーが出ますが、中身が全く理解できません。ただ、Claude Codeに「エラーが出た。直して」と言えば大体直してくれます。
2. 細かいデザイン調整が面倒
「もうちょっと右に寄せて」「フォントサイズを大きくして」みたいな微調整は、何度もやり取りが必要でした。
3. 用語がわからないので指示が難しい時がある
「APIのエンドポイントを修正して」みたいな指示は出せないので、「占い結果が表示されない、直して」のように症状を伝えるやり方になります。
正直、基礎的な用語だけでも知っていれば、もっとスムーズだったと思います。ガッツリ学ぶ必要はないけど、入門レベルだけ触れておくのはアリかもしれません。
これからやりたいこと
- 占いの精度をさらに上げる（プロンプト改善）
- 独自ドメインの取得
- 小アルカナ（56枚）の追加
- LINE連携で毎日の運勢配信
バイブコーディングなら、アイデア次第でどんどん機能を追加できます。「自分で考えて、AIに作ってもらう」というスタイルは、エンジニアでなくても始められる新しいものづくりの形だと思います。
まとめ
- プログラミング経験ゼロでもWebアプリは作れる
- Claude Codeに日本語で指示するだけ
- 費用は月5,000円以下
- 大変なこともあるが、エラーもAIが直してくれる
- 「自分にも何か作れる」という体験は、純粋に楽しい
バイブコーディングに興味がある人は、まずClaude Codeで何か小さいものを作ってみるのがおすすめです。
