それから約半年後の2026年3月、Claude無料版を使ったバイブコーディングで、音声対話型のAIヒアリングシステムを2週間で開発しました。この記事では、設計から実装、トライアンドエラーの記録、月額$7〜8のコスト内訳まで、開発の全工程を包み隠さず公開します。

ムラサキ

2025年に心が折れた人にこそ読んでほしい記事です。AIのコード生成能力は半年で別物になっています。

バイブコーディングとは？2025年との決定的な違い

バイブコーディングの定義と基本の流れ

バイブコーディング（Vibe Coding）とは、AIに自然言語で「こういうものを作りたい」と指示し、コードを生成させる開発手法です。2025年にOpenAI共同創設者のAndrej Karpathy氏が提唱した概念で、従来のプログラミングのように構文を1行ずつ書くのではなく、AIとの対話を通じてシステムを構築していきます。

基本的な流れは「何を作りたいかを言葉で説明する → AIがコードを生成する → 動作を確認する → 問題があれば修正を指示する」の繰り返しです。使うツールはClaude Code、Cursor、ChatGPTなど複数ありますが、筆者はclaude.aiの無料プランを使いました。

2025年8月の挫折と2026年3月の成功

筆者は2025年8月にGitHub CopilotとChatGPTを使い、VSCodeの拡張機能からSQLフォーマッターを抜き出してWinMergeのプラグインに組み込む開発を試みました。結果は惨敗です。不具合が出るたびにAIが提案する修正が二転三転し、4回5回と方針が変わった末に答えにたどり着けませんでした。

2026年3月、Claude Sonnet 4.6がリリースされたタイミングで再挑戦しました。Anthropicの公式リリースによると、Sonnet 4.6はコーディング能力とエージェント的なタスク遂行能力が大幅に向上しています。実際に使ってみて、コード生成の正確性と文脈保持能力が2025年のツールとは別物だと感じました。半年でここまで変わるのかと驚いた、というのが率直な感想です。

今回作ったもの｜AIヒアリングシステムの概要

システムの全体像と機能

開発したのは、社内の採用業務で使うAI事前ヒアリングシステムです。エンジニア候補者に対して、面接前の事前確認をAIが自動で実施します。候補者はURLにアクセスするだけで音声による対話形式のヒアリングを受けられ、管理者は結果の確認と採否判定を行えます。

graph LR
    A["候補者ブラウザ"] -->|"音声録音"| B["React/Viteフロントエンド"]
    B -->|"API通信"| C["Node.js/Expressバックエンド"]
    C --> D["MongoDB Atlas候補者データ"]
    C --> E["AWS S3音声保存"]
    C --> F["Claude Haiku 4.5AI対話・評価"]
    C --> G["Whisper API音声→テキスト"]
    C --> H["Google TTSテキスト→音声"]
    style A fill:#e8f0fe,stroke:#4a86c8
    style B fill:#e8f0fe,stroke:#4a86c8
    style C fill:#e8f4e8,stroke:#5a9e6f
    style D fill:#f5f0e8,stroke:#c4a96a
    style E fill:#f5f0e8,stroke:#c4a96a
    style F fill:#f0e8f5,stroke:#9a7ab5
    style G fill:#f0e8f5,stroke:#9a7ab5
    style H fill:#f0e8f5,stroke:#9a7ab5

主な機能は、候補者向けのURL発行・音声対話・イニシャル表示による本人確認、管理者向けの候補者一覧・会話履歴確認・音声再生・評価レポート自動生成・採否判定です。AIは「面接官」ではなく「事前ヒアリング担当」として振る舞い、採否判断は一切行わない設計にしました。

技術スタックとコスト

初期費用はほぼ0円です。各サービスの無料枠で開始できました。2026年3月時点のランニングコストは月額約$7〜8で、内訳は以下の通りです。

Renderの料金ページによると、有料プラン（Starter $7/月）に上げるとスリープがなくなり本番運用に適した状態になります。MongoDB Atlasの無料枠（M0）は512MBのストレージを提供しており、開発・検証段階では十分です。Whisper APIは1分あたり$0.006と安価で、ヒアリング1回30分でも約$0.18です。

開発フローの実際｜環境制約でAIを使い分けた経緯

設計フェーズ ── Gemini Proで壁打ち

設計段階は本業の延長で進めていたため、Google WorkspaceのGemini 3.1 Proを使いました。アーキテクチャの検討、技術スタックの選定、コスト試算、開発ロードマップの策定をGeminiとの壁打ちで詰めていきました。

Geminiが得意だったのはアーキテクチャの比較検討です。「ターン制のREST API方式」と「WebSocketによるリアルタイム方式」の2パターンを提示させ、コスト・開発期間・UXのトレードオフを整理してもらいました。結論として、コスト優先でREST API方式を選択しています。

設計からコーディングへの情報の受け渡し

設計が固まった段階で、コーディング用の環境を準備しました。業務で使っているPCはソフトウェアのインストールが制限されており開発環境を構築できないため、別途スタンドアロンの開発用PCを用意しています。この開発用PCからはGoogle Workspaceに接続できないため、ブラウザだけで利用できるclaude.aiの無料プランをコーディング用AIとして選びました。

AIを乗り換える際に重要だったのが、設計フェーズで決めた内容の受け渡しです。Geminiとの長いチャット履歴をそのまま渡しても、過去のボツ案と最終決定をClaude側が混同してしまいます。そこでGeminiに「引き継ぎ用のドキュメントを作って」と依頼し、決定事項・進捗・次のアクションだけを圧縮した要約を作成しました。これをClaudeの最初のメッセージとして投げることで、情報のロスなく実装フェーズに移行できました。

実装フェーズ ── 無料のclaude.aiでバイブコーディング

claude.aiの無料プランでClaude Sonnet 4.6を使い、フロントエンド（React/Vite）・バックエンド（Node.js/Express）・各種API連携のコードを書いていきました。開発期間は2026年3月初旬から3月13日までの約2週間です。

驚いたのは、1つのチャットの中でフロントからバックエンド、API連携まで一貫して対応できたことです。以前のAIコーディングツールでは長いやり取りの中で方針がブレたり、過去の指示を忘れたりすることがありましたが、Claude Sonnet 4.6ではプロジェクト全体の流れを保ったまま開発を進められました。筆者がClaudeをブログ執筆に活用しているワークフローはClaudeでブログ記事を作成する実践ワークフローで公開していますが、記事作成とは異なり、バイブコーディングでは1つの長いチャットで完結できた点が印象的でした。

ぶつかった壁と解決策

開発中にぶつかった問題は10件以上あります。ここでは特に印象的だった3つを紹介します。

音声合成の選定 ── VOICEVOX → Google Cloud TTSへの移行

当初は無料の音声合成エンジンVOICEVOXを使用していましたが、Render環境での動作が不安定でした。ローカルでは問題なく動くのに、サーバー環境との相性が悪かったのです。この問題をClaudeに相談したところ、Google Cloud TTSのNeural2音声（ja-JP-Neural2-B）への移行を提案してきました。その通りに試したところ、自然な日本語音声を安定して生成できるようになりました。原因の切り分けから代替案の提示まで的確で、こいつやるなと感じた場面です。

AIが採否判断を下す問題

テスト中にAIが候補者に「この案件への参画は難しい判断となります」と直接断りを告げた場面がありました。ヒアリングシステムなのにAIが勝手に合否を伝えてしまうのは致命的です。プロンプトに「採否・合否・参画可否の判断は絶対にしないこと」「難しい・厳しいなど断りを示唆する表現は一切使わないこと」を明記して対処しました。バイブコーディングでは機能の実装だけでなく、AIの振る舞いの制御にも注意が必要です。

ムラサキ

AIが「情報収集に徹する」のか「判断まで下す」のかはプロンプト設計で明確に線引きする必要があります。ここをサボると本番で事故が起きます。

個人情報とファイルアップロードの方針転換

当初はスキルシートのPDF/画像をアップロードしてClaude APIで自動解析する機能を実装しました。しかし、外部のクラウドサービスに候補者の個人情報（氏名・住所等）を含むファイルを送信するリスクを考慮し、この機能は削除しました。代わりに、社内のセキュアな環境でスキルシートの個人情報をマスクしたテキストを作成し、システムにはマスク済みの情報のみを登録する運用に変更しています。個人情報を扱う部分は社内の閉じた環境に留め、外部に出るシステムには匿名化された情報だけが渡る設計です。

機能をまるごと削除する判断は一見もったいなく見えますが、むしろこれはバイブコーディングの強みが発揮された場面でした。AIに「この機能を削除して、関連箇所もすべて整合を取って」と指示すれば、一括で対応してくれます。人間がコードを手動で修正すると関連箇所の修正漏れ（デグレード）が起きるのが常ですが、AIはそのリスクを大幅に下げてくれました。AIの出力を検証・判断する力の重要性については生成AI時代に必要なスキルと若手教育の進め方でも解説しています。

バイブコーディングを成功させるコツと注意点

実装速度が上がるほどレビューの抜け漏れリスクも増える。LLMコードレビュー4手法の実測比較で、Claude Code 内蔵レビューを追加コストゼロで回す方法を解説している。

プログラミング経験があると何が有利か

バイブコーディングは「コードを書けなくてもアプリが作れる」と紹介されることがありますが、実際にはIT業界の用語や概念を知っているかどうかで、AIとのやり取りのスムーズさが大きく変わります。筆者自身、今回の開発でReactもNode.jsも手では書けませんし、生成されたコードの中身を読んで理解するというプロセスは一切踏んでいません。修正時にキーワード検索で該当箇所を目にすることはありますが、コードリーディングと呼べるものではありませんでした。

それでも2週間でシステムが完成したのは、S3・React・Node.js・環境変数・Gitといった用語をSEとして実務で利用していなくても知識があったため、AIとのキャッチボールがスムーズだったことが大きいと感じています。エラーが出たときも、エラーメッセージをそのままコピペするかスクリーンショットを貼るだけで、AIが原因を特定して修正案を出してくれました。長年コードレビューを担当してきた中で「ここは壊れやすい」「この設計だと後で困る」といった勘所が自然と身についていたことも、問題の早期発見に役立ったのかもしれません。

一方、これらの用語自体が初めての方は、AIへの質問を組み立てる段階で時間がかかります。バイブコーディング自体が不可能になるわけではありませんが、筆者の2週間という期間はこうした前提知識があっての数字です。筆者が実務で使っている業務自動化テクニックで紹介しているようなWindows標準機能やPowerShellの知識も、開発環境の構築で役立ちました。

経験があるとスケールも早い。Batch APIと組み合わせた3日間・713ページのpSEOサイト構築という規模感がその一例だ。

無料AIの制限との付き合い方

claude.aiの無料プランには数時間ごとのメッセージ上限があり、開発中に何度か上限に達しました。ただし本業の傍らで進めていたため、上限リセットまでの待ち時間は別の業務に充てられ、実質的な問題にはなりませんでした。それでも効率を意識した点が2つあります。

• エラー発生時はエラーメッセージをそのままコピペするかスクリーンショットを貼り付ける。自分で原因を解説しようとするより、生のエラー情報を渡す方がAIの回答が的確で早い
• 上限に達したらChatGPT（GPT-4oの無料枠）で軽い調査を進め、Claudeが復帰したらメインの開発に戻る

無料の範囲でも、今回のシステム規模（フロント1ファイル・バックエンド1ファイル・管理画面1ファイル）なら十分に開発を完了できました。

妥協の判断基準

すべてを理想通りに実装しようとすると、無料枠の制限や開発期間の中では終わりません。筆者は以下の基準で妥協を判断しました。

「8割の精度で動くものを素早く作り、使いながら改善する」のがバイブコーディングの強みです。完璧を目指して動かないより、まず動くものを完成させる方が結果的に早く前に進めます。

よくある質問（FAQ）

まとめ

この記事では、Claude無料版を使ったバイブコーディングで業務システムを2週間で開発した全工程を紹介しました。要点を3つに絞ります。

バイブコーディングは「完璧なコードを一発で書く」ツールではなく、「試行錯誤のサイクルを高速に回す」ツールです。ぶつかった壁は10件以上ありましたが、そのすべてをAIとの対話で解決できました。作りたいものがあるなら、まず小さな機能1つから始めてみてください。

ムラサキ

2025年に心が折れた筆者が、半年後にシステムを完成させられました。AIの進化を待っていた人は、そろそろ動き出すタイミングです。