朝、作業一覧を開き、終わった項目を数えて報告文に転記する。AIに文章を整えてもらっても、この手作業は残ります。バイブコーディングで試したいのは、そんな仕事の一部分を、自分で動かせる道具にすることです。
僕が運営するVibelyも、出発点はShiftBの社内ツールでした。社内で運用を確かめてから、オンラインスクール向けのサービスにしています。最初から大きく作らず、自分が中身を確かめられる範囲で試す考え方は、営業・企画・事務の仕事でも使えます。
この記事では、バイブコーディングの意味と任せられる範囲を整理し、Claude Codeを使った最初の1週間の練習計画を紹介します。日数は進め方の例です。自分で動かし、間違いを見つけ、翌日も再開できるところを目指します。
この記事を書いた人：立川修平（ぶべ）
バイブコーディングは、AIに作りたいものを言葉で伝え、生成されたコードを動かしながら形にしていく開発スタイルです。たとえば「作業にチェックを付けると、未完了の件数が減る画面を作って」と依頼し、表示を見て条件を直します。コードは、画面や計算の動きを決める指示書に当たります。
ただし、この言葉には幅があります。開発者のSimon Willisonは、2025年3月の本人の解説で、コードの中身を追わずにAIに任せるバイブコーディングと、生成物を読んで検証する開発を区別しています。「AIを使った開発はすべて同じ」と考えると、必要な確認が抜けます。
この記事で練習するのは、対話で作り始める入口です。仕事に持ち込む段階では、何を入力し、どう処理し、どこに保存するかを確かめます。最初からコードをすべて読めなくても、この流れを説明できることを目標にしてください。
ノーコードでは主に、用意された画面部品や設定を組み合わせます。バイブコーディングでは、AIとの対話を通してコードを生成・変更します。AI機能を備えたノーコード製品もあり、分類は重なります。
選ぶときは「欲しい動きが設定で実現するか」「生成されたファイルを持ち出せるか」「直せなくなったとき誰に相談するか」を確認します。選択肢の比較はノーコードとバイブコーディングの違い、開発全体の進め方はAI駆動開発の解説に分けています。
非エンジニアの最初の題材なら、チェックリスト、定型文の組み立て、架空データの並べ替えなどが候補になります。どれも、自分で操作して正しい結果と比べられる範囲に絞れます。「作れそうか」に加えて「間違っていたら自分が気づけるか」で選んでください。
今回は、始業前の作業を確認する練習用チェックリストを作ります。「予定を確認」「資料を準備」「連絡事項を確認」という3項目を表示し、チェックしたら未完了の件数が減る画面です。これは記事用の架空の題材で、実際の顧客名や社内資料は使いません。
売上管理全体を置き換えるより、この画面なら正解を自分で決められます。Vibelyも、最初の機能は教材管理・受講生のブログ投稿・進捗管理でした。僕は「機能はシンプルに、一点集中で」と発信しています。練習でも、欲しい機能を書き出したうえで、今回は作らないものを決めます。
AIは画面や処理を作れても、あなたの部署で何を正解にするかは自動では決まりません。担当者の確認前に通知してよいか、金額をどう丸めるか、退職した人のアクセスをどう止めるか。こうした条件を曖昧にすると、見た目が整っていても仕事で困ります。
Claude Codeの公式セキュリティ文書も、変更内容の確認と、機密情報の扱いへの注意を勧めています。最初は自分の端末で架空データを動かし、会社のデータや外部への送信を含む題材は、社内の利用ルールを確認してから扱います。
この条件に合う題材が決まらないと、AIを開いても依頼が大きくなります。自分の仕事のどこを切り出すかから相談したい場合は、AIシフトコースの無料相談会で、今の作業を材料に整理できます。
AI時代のアプリ開発コース
ShiftBのAIシフトコースは、Claude Codeで本格的なWebアプリケーションを作りながらAI駆動開発を身につけるコースです。ただ作って終わりではなく、コードを読め、セキュリティに責任を持って提案でき、要件定義などの上流工程まで担えるところまで現役エンジニアがサポートします。
AIシフトコースを見る →
メモに「誰が使うか」「入力」「出力」「作らないもの」を書きます。今回なら使うのは自分、入力はチェックの操作、出力は未完了の件数です。ログイン、社内共有、メール送信は作りません。初日は保存機能も外し、ページを開き直すと初期状態に戻る仕様にします。
つまずきやすいのは、「便利にしたい」という目的だけで依頼することです。「3項目のうち1項目を完了にすると、未完了が2件になる」と書けば、終わりの条件が決まります。Anthropicの実践ガイドも、テストや比較対象など、AIが結果を検証できる基準を与えるよう勧めています。
ここでは画面を見ながら始められるClaudeのデスクトップアプリを使います。公式の導入ページからインストールし、契約対象のアカウントでログインしてCodeタブを開きます。公式案内ではPro・Max・Team・Enterpriseが対象です。費用と組織での利用可否は、契約前に同ページから確認してください。
デスクトップアプリにはClaude Codeが含まれ、Node.jsやCLIを別に入れる必要はありません。CLIは文字で命令を入力する操作方法です。準備で止まったら、表示されたエラーを残します。
空の「vibe-practice」フォルダを作り、環境はLocal、作業場所はそのフォルダを選びます。資料が入ったフォルダをまとめて選ぶと、今回の対象が分かりにくくなります。最初はManual（旧表示名はAsk permissions）で変更を確認しながら進めます。画面の細かい操作やターミナル版の導入は、Claude Codeの使い方を参照してください。
悪い依頼は「仕事がはかどるアプリを全部作って」です。何を表示し、何を数えるかが決まっていません。今回のように、完成の条件まで含めて伝えます。
練習用の始業チェックリストを作ってください。
・index.htmlだけで動く、日本語の1画面にする
・HTML、CSS、JavaScriptを同じファイルに書く
・外部通信や追加ライブラリは使わない
・項目は「予定を確認」「資料を準備」「連絡事項を確認」の3つ
・各項目にチェック欄を付け、未完了の件数を表示する
・最初は未完了3件。1つチェックすると2件になる
・チェックを外すと件数が戻る
・保存、ログイン、共有、送信は今回は作らない
まず作業内容を説明し、その後にファイルを作ってください。
最後に、私がブラウザで開く方法と確認する操作を教えてください。AIの説明を読んでから作成を進め、生成されたindex.htmlをブラウザで開きます。HTMLは画面の構造、CSSは見た目、JavaScriptはチェックに応じた動きを担当します。ファイルを直接開く形の題材です。サーバー起動が必要なアプリでは、開き方が異なります。
「完成しました」という返答だけでは終わりにせず、実際の画面とファイルの場所を確かめます。真っ白な画面やファイルが見つからない状態なら、開いた場所と操作をAIに伝えます。見た目の修正は、まず件数が正しく動いてからです。
次の表は、この記事で決めた練習仕様の答え合わせです。実測した成果や速度の数字ではありません。各行は、ページを読み込み直してチェックがない状態から始めます。
| 確認 | 操作 | 未完了の件数 |
|---|---|---|
| 1 | 何もチェックしない | 3件 |
| 2 | 1項目にチェック | 2件 |
| 3 | 3項目すべてにチェック | 0件 |
| 4 | 1項目をチェックしてから外す | 3件 |
とくに試したいのは、チェックを外す操作です。追加する側だけが動いても、戻す側が壊れていることがあります。期待する動きを紙に書いてから画面を触ると、AIの説明に合わせて正解を変えてしまうのを防げます。
違っていたら、「1項目をチェックした後、外しても2件のままです。期待は3件です。表示のデザインを変えず、この計算を直してください」と伝えます。操作・実際の結果・期待する結果をセットにするのがコツです。エラーが表示されたら、秘密情報を含まないことを確認して文面も添えます。
修正後は失敗した操作だけでなく、表の他の操作も試します。完了件数を直した結果、最初の表示が変わっていないかを見るためです。ブラウザの幅を狭め、項目の文字やチェック欄が隠れないかも確認します。確認できなかった操作は「未確認」として残します。
動いた時点のindex.htmlを、作業フォルダの外へコピーして保存します。その後に「文字を少し大きくして」と小さな変更を依頼し、コピーしたファイルで元の表示を開けるか確かめます。最初の練習では、戻れることも成果物の一部です。
Claude Codeにはチェックポイント機能もあります。ただし、コマンド経由の変更や外部での操作まで何でも戻せる仕組みではありません。メールの送信やデータベースへの変更を、会話を戻すだけで取り消せると考えないでください。継続して作る段階で、Git（ファイルの変更履歴を管理する道具）による履歴保存も学びます。
保存機能を足したくなったら、「何を、どこに、いつまで残すか」を先に決めます。ブラウザ内の保存と、チーム全員が使う共有の保存先は別です。今回のチェック状態が再読み込みで消えるのは、依頼どおりの動きです。「消えるからバグ」と決めつけず、仕様と比べてください。
一度画面を閉じ、フォルダを開き直して同じ操作を試します。AIの会話を覚えているうちだけ使える状態から抜ける練習です。作業の最後に「何ができるか、開き方、確認した操作、未対応の機能をREADME.mdにまとめて」と依頼します。READMEは、使い方を残す説明ファイルです。
続けて開発するなら、「架空データのみ」「外部通信なし」などの継続ルールをCLAUDE.mdに短く残す方法もあります。公式のメモリー解説では、このファイルでプロジェクトの指示を伝えられると説明されています。ただし、指示文を書くだけでアクセス権限を制限できるわけではありません。
修正を頼むたびに別の場所が壊れるなら、依頼を追加する前に、最後に動いたファイルと現在の違いを確かめます。「チェックを外す操作だけ直す」のように対象を狭め、直ったと判断する条件を添えます。新しい会話で再開するときは、READMEと現在の症状を渡します。
エラーの意味が分からない場合は、「何が原因と考えられるか」「それを確かめる操作は何か」を先に説明してもらいます。確認しないまま機能を増やすと、どの変更で壊れたか追えなくなります。詳しい対処はバイブコーディングの失敗パターン、設計や保守で生じる問題はバイブコーディングの限界で扱っています。
最後に「何を入力するか」「どこで処理するか」「どこに保存するか」「誰が見られるか」を自分の言葉で説明します。今回なら入力はチェック、処理は開いたブラウザ内、保存と社内共有は未実装です。この線引きができたら、次に必要な機能を具体的に頼めます。
初めて同僚に見せるときも、練習用であることと未実装の範囲を添えます。「動いたから全員に配る」までを一度に進めず、実データを使う前に社内の確認を受けます。業務の題材選びから試用まで進めたい人は、非エンジニアがClaude Codeで業務アプリを作る手順へ進んでください。
画面は作れても、保存や共有を追加した途端に説明できなくなる。この段階では、動いているものを材料に基礎を学ぶと疑問が具体的になります。システム開発の学び方で順番を整理し、自分の作ったものを見ながら理解と修正を進めたい人は、AIシフトコースの無料相談会をご利用ください。
AI時代のアプリ開発コース
ShiftBのAIシフトコースは、Claude Codeで本格的なWebアプリケーションを作りながらAI駆動開発を身につけるコースです。ただ作って終わりではなく、コードを読め、セキュリティに責任を持って提案でき、要件定義などの上流工程まで担えるところまで現役エンジニアがサポートします。
AIシフトコースを見る →要約・疑問の解消に。記事のタイトル・URL・参照元を入れた質問文が自動で入力されます。
AUTHOR
RELATED ARTICLES
COURSE
ShiftBのAIシフトコースは、Claude Codeで本格的なWebアプリケーションを作りながら学ぶコースです。コードを読め、セキュリティに責任を持って提案でき、要件定義などの上流工程まで担える状態を目指します。まずは無料相談会でご相談ください。