HUMANMODE
バイブコーディングAIを活用した開発

バイブコーディングの始め方。最初の一歩と、つまずきやすいところ

バイブコーディングを試してみたい。けれど、何から手をつければよいのか分からない。この記事は、そういう方に向けた手順のご案内です。

先に申し上げると、最初の一歩は思ったより簡単で、二歩目からが難しくなります。順番に見ていきます。言葉の意味や、できること・できないことの全体像は、バイブコーディングとはにまとめています。

始める前に決めておく2つのこと

道具を選ぶ前に、これを決めておくと迷いが減ります。

誰が使うものを作るか。自分だけが使うのか、ほかの人にも使ってもらうのか。ここで難易度が大きく変わります。最初は自分だけが使うものにしてください。

うまくいかなかったら、どうするか。途中で行き詰まることは普通にあります。「2時間やってみて進まなければ、いったん止める」くらいの線を先に引いておくと、消耗せずに済みます。

道具を選ぶ

バイブコーディングに使える道具は、大きく2種類あります。

ブラウザだけで完結するもの:Webサイトを開いて、その場で指示を打ち込むと、画面ができあがっていく形です。何も用意しなくてよいため、最初の1本にはこちらが向いています。Replit、Bolt.new、Lovable などが知られています。

自分のパソコンに入れて使うもの:Cursor、Claude Code、Windsurf などがあります。できることは広く、本格的なものを作るときはこちらになりますが、最初の設定でつまずきやすい面があります。

どれが良いかは作るものによりますが、初回はブラウザだけで動くものから試すのが無難です。慣れてから移っても遅くありません。無料で試せる範囲があるものが多いので、まずは触ってみてください。料金や機能はよく変わるため、契約の前に各サービスの公式サイトでご確認ください。

最初に作るものを決める

これが一番大事な工程です。最初の題材を間違えると、たいてい途中で止まります。

向いているのは、次のようなものです。

  • 自分が毎回手で作っている集計を、自動でやってくれる画面
  • 手元のファイルを読み込んで、並べ替えたり書き出したりする道具
  • 覚え書きを入れて、あとから探せるだけの簡単な一覧

向いていないのは、いきなり「会社の勤怠管理を作る」「顧客管理を作る」といった題材です。人が複数関わり、権限を分ける必要があり、間違えると困るものは、最初の題材には重すぎます。

目安として「半日で動くところまで行きそうか」を考えてみてください。行きそうにないなら、もっと小さく切ってください。

指示の書き方

AIへの指示は、思っているより具体的に書く必要があります。コツは3つです。

完成形を先に伝える。「何のために使うものか」「誰が使うか」を最初に書くと、途中の判断が安定します。

一度に頼むことを1つに絞る。まとめて頼むと、どこが原因で動かないのかが分からなくなります。画面を作る、項目を足す、色を変える、と分けて頼んでください。

動いたら、そのつど保存する。うまくいった時点の状態を残しておくと、壊れたときに戻れます。使っている道具に履歴を残す機能があれば、それを使ってください。これをやっているかどうかで、後半の消耗がまるで変わります。

指示の例を挙げます。「経費の一覧を作りたい。自分だけが使う。日付、金額、用途、支払方法を入力できて、月ごとの合計が出るようにしてほしい。まずは入力の画面だけ作ってください」。このくらい具体的で構いません。

うまくいかないときの戻し方

必ず行き詰まります。そのときの手順です。

  1. エラーの文章をそのままAIに貼り付けて、直してもらう
  2. 直らなければ、直前に保存した状態まで戻す
  3. 戻したうえで、頼み方を変えて(もっと小さく分けて)やり直す

同じところを3回以上行き来しはじめたら、それ以上は粘らないでください。作りたいものを一段小さくするか、別のやり方を考えたほうが早いことがほとんどです。

仕事の道具を作るなら、ここで一度立ち止まってください

自分用の道具として作る分には、ここまでの手順で十分です。ただ、作ったものを社内で使いたくなったときは、確認したい点があります。

  • 顧客の個人情報や取引金額を入れる予定はありませんか
  • 自分以外の人が、毎日使う前提になっていませんか
  • 止まったときに、業務が止まりませんか

ひとつでも当てはまるなら、そのまま業務に載せるのはおすすめしません。AIは指示したとおりに書きますが、指示しなかったことは書きません。誰がどこまで見てよいか、同時に操作されたらどうするか、間違った値が入ったらどうするか。こうした部分は、聞かれなければ抜けたまま動いてしまいます。

この線引きの詳しい考え方は、バイブコーディングで業務アプリは作れるかでご説明しています。

自分で作るか、依頼するかで迷ったときは

株式会社ヒューマンモードは、システム開発・アプリ開発と自社サービス運営を行う会社です。AIを活用した開発で安く早く形にし、実際に触れるデモを公開しています。

やっていること自体は、バイブコーディングと地続きです。違うのは、AIに任せる範囲と、人が責任を持つ範囲を分けている点です。設計と最終的な確認は人が行います。

判断の材料として、実際に動くデモを公開しています。登録は不要で、その場で操作していただけます。

「自分で作ろうとしているものが、これに近いかどうか」を見ていただくと、線引きの感覚がつかめると思います。ほかの業種のものもデモ一覧からご覧いただけます。

費用は、おためし開発が10万円〜(最短1日〜2週間)、しっかり開発が50万円〜(2週間〜2ヵ月)、運用・改善サポートが月額3万円〜です。内容によって変わりますので、事前にお見積りをお出しします。無料相談はこちらからお気軽にご連絡ください。無理な営業のご連絡はいたしません。

よくある質問

Q. 途中まで作ったものがあるのですが、続きから相談できますか?

できます。すでに動くものがあると、必要な画面と項目がはっきりしているため、要件を決める工程が短く済みます。作ったものをそのままお見せいただければ、どこを活かせて、どこを作り直したほうがよいかを含めてご案内します。ご自身で試された経験は無駄になりません。

Q. 無料で使える範囲だけで、どこまで作れますか?

自分だけが使う小さな道具であれば、無料で試せる範囲でも動くところまで辿り着けることが多いです。制限に当たりやすいのは、続けて指示を出すうちに回数の上限が来る場合と、作ったものをほかの人に見せられる状態にする場合です。まずは無料の範囲で1本作ってみて、続けたいと思ってから支払いを検討する順番をおすすめします。

この記事に関連する、触って試せるデモ

登録不要でそのまま操作できます。実際の画面で使い勝手をご確認ください。

無料相談受付中

システム開発の依頼を検討中の方へ

業務システムの開発・既存システムの見直しなど、まずはお気軽にご相談ください。触れるデモもご用意しています。

無料で相談する