バイブコーディングのやり方

バイブコーディングは、作りたいものを言葉で伝えて、AI にコードを書かせて作る作り方です。Claude Code か Codex を用意して、作るものを小さく1つ決め、AI に伝え、動かして直してもらい、公開する、の順で進めます。いちばんつまずくのは、提出先や公開先の「書かれていない決まり」です。

バイブコーディングとは

プログラムを1行ずつ自分で書くのではなく、「こういうものを作って」と AI に話しかけ、出来たものを見ながら「ここを直して」と頼んで仕上げていく作り方です。2025年に Andrej Karpathy 氏が名付けました。コードが読めなくても始められますが、出来上がりを確かめるのは自分です。

用意するもの

AI のコーディング道具：Claude Code（Anthropic）か Codex（OpenAI）。入れ方と料金は、それぞれの公式の案内に従ってください
作業用のフォルダ：作るもの1つにつき1つ。ほかのものと混ぜない
公開するなら公開先：人に見せるときだけ。Vercel などがよく使われます

やり方（5ステップ）

作るものを小さく1つ決める：「予約システム」より「予約フォームの1画面」。最初は個人情報を扱わないものにします
作業フォルダで AI を起動して、作りたいものを伝える：誰が何のために使うか、見た目の好み、決まっている数字（大きさ・文字数など）を一緒に伝えます
動かして確かめ、直してほしい所を伝える：「ボタンを大きく」より「スマホで親指が届く位置に」のように、目的で伝えると早く直ります
提出先・公開先の決まりを確かめる：審査の規格や実機でしか起きない不具合は、AI が知らないことが多い所です（次の節）
公開・提出する：鍵（API キー）はコードに書かず、誰でも見られる状態になっていないかを確かめてから出します

つまずきやすい所（実際に踏んだ例）

AI は一般的な作り方は知っていますが、提出先の審査や、実機でしか起きない不具合は知らないことが多いです。nice to have のキットを作った人たちが、実際の仕事で踏んだ例です。

LINE スタンプ：緑の背景を色でまとめて抜くと、キャラクターの内側に目に見えない穴が残り、「イラストの内部が透過されています」で審査に落ちます。外周からつながった緑だけを抜くと通ります。（LINEスタンプ開発キット）
画像生成：「透過 PNG で」と頼んでも、透過に見える市松模様を描いた画像が返ってくることがあります。そのまま使うと背景が残ります。（ドット絵モーションキット）
YouTube のゲーム（Playables）：Unity で Time.timeScale = 0 にしても一時停止にはならず、毎フレームの処理や音は動き続けます。メモリの上限に引っかかると、手元では動くのに iPhone で黙って落ちます。（YouTube ゲーム開発キット）
資料：手元のブラウザでは出る記号が、公開した URL では出ないことがあります。公開したあとに URL を開いて確かめる手順を入れておくと、刷ってから気づく事故を防げます。（資料生成キット）
AI への指示ファイル：Claude Code は CLAUDE.md、Codex は AGENTS.md を読みます。どちらでも使うなら入口を2つ置き、中身をそろえます。（キットをつくるキット）

毎回ゼロから頼まない：キットという「型」

同じ種類のものを作るなら、うまくいった手順と落とし穴の直しをまとめた「型」から始めると、出来がそろいます。nice to have は、その型（キット）を並べた棚です。Claude Code や Codex に1行貼るだけで、AI がキットを取り込んで作業を始めます。

資料生成キット：きれいな資料を、毎回おなじ体裁で
LINEスタンプ開発キット：絵から、申請できる形に（動くスタンプも）
ドット絵モーションキット：絵を1枚渡すと、動く16コマに
縦型リール量産キット：撮りっぱなしの素材から、商品紹介の縦型ショートを、確かめたいことを決めて作り分ける
家具を3Dにするキット：寸法図と商品写真から、ARに出せる3Dモデルに
YouTube ゲーム開発キット：ゲームを、YouTube の要件どおりにして、申請まで
ペット名付けキット：写真や情報から名前候補を広げ、最後は声に出して決める
X自動投稿キット：書きためた下書きを、決めた時刻に毎日1本ずつ自動で出す
管理画面ととのえキット：いまある管理画面を、見やすく・キーボードでも使える形に整える
契約書レビューキット：契約書を渡すと、直す所と修正のお願いまで作る
OSS ライセンス確認キット：アプリのフォルダを渡すだけで、OSSのライセンスを洗い出し表記を作る
サービス紹介LPキット：サービス紹介のLPを、実在のサイトを数えてから作る
年末調整キット：申告書を渡すだけで年末調整の点検と計算ができる
労働条件通知書キット：話すだけで労働条件通知書ができ、最低賃金まで点検
請求書・領収書発行キット：話すだけで、インボイスの請求書と領収書ができ、入金まで追える
素材の権利表記チェックキット：サイトのフォルダを渡すだけで、画像とフォントの出どころと表記が分かる

棚でキットを探す →

よくある質問

プログラミングの知識がなくてもできますか？

はい、始められます。ただし、出来たものが正しく動くか、公開してよい状態かを確かめるのは自分です。鍵（API キー）をコードに書いていないか、誰でも見られる状態になっていないかは、必ず確かめてください。

無料でできますか？

Claude Code も Codex も、使うにはそれぞれのサービスの有料プランか API の契約が要ります。nice to have のキットには、無料で使えるものがあります。

Claude Code と Codex は、どちらがいいですか？

どちらでもバイブコーディングはできます。nice to have のキットは、同じ1行でどちらでも動くように作ってあります。

最初は何を作ればいいですか？

個人情報やお金を扱わない、小さなものから始めるのがおすすめです。紹介ページ（LP）・資料・LINE スタンプのように、出来上がりを目で確かめられるものは始めやすいです。