【バイブコーディング体験記】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://www.uranaia.com
主な機能
- ワンオラクル（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で何か小さいものを作ってみるのがおすすめです。
星占いアプリ制作の記事も書きました。のぞいていただけるとうれしいです。
本格的な占いを試したくなったら？プロへの相談もおすすめ
※ 本記事にはアフィリエイトリンクを含みます。購入の際、当サイトに収益が発生する場合があります。
この記事では、非エンジニアの私が占いアプリを作った過程を綴ってみましたが、占いに興味がある方ってかなり多いようです。本格的に占ってもらいたくなったら、次はプロの占い師に相談してみるのもおすすめです。
「どうしても答えを出したい悩み」や「誰かに聞いてほしい気持ち」は、人に話すことで整理が進むこともあります。声で相談したいなら電話、じっくり文章で伝えたいならメール——あなたに合う方法でどうぞ。ココナラの占い、充実してますよ。
[PR]
恋も、将来のことも。ひとりで抱え込まなくていい。
好きな人の気持ち、彼との関係の不安、夫婦のこと——友達には言いづらい悩み、「ココナラ電話占い」に話してみませんか。国内最大級の在籍数だから、レビューを見ながらぴったりの占い師を選べます。
1分100円からで、今なら初回最大30分無料。満足度97%超、TVCMでも話題のサービスです。
誰にも言えない悩み、チャットならそっと話せる。
占いの館やカウンセリングに行かなくても、「ココナラ」なら1対1の完全非公開トークルームでオンライン相談。恋の悩み、将来の不安、人間関係のストレス、誰にも打ち明けられなかった心の内も、メール形式だから自分のペースで話せます。
彼・彼女の気持ち、運勢、縁結びなどを見る占い師も、心理カウンセラーも多数在籍。口コミを見ながら自分に合う相談相手を選べます。会員登録はメールアドレスと生年月日だけ、お得な価格で始められます。
