可能性を見る
これらのバイブコーディングの実例では、普段の言葉で書いた依頼を、小さくてテスト可能なプロトタイプにする方法を紹介します。場面を選び、必要な動作を説明し、生成されたコードが完成していると思い込まずに、短いチェックリストに沿って結果を確認しましょう。
ほとんどのプロジェクトは、アイデアと大まかな機能リストから始まります。大切なのは、使う人を1人、作業を1つ、結果が機能するか確かめる方法を1つ決めることです。
本のリストを文書にまとめていますが、読み終えていない本を探すのに時間がかかります。タイトルの入力欄、読書状況の選択欄、フィルター、ページを更新しても残るメモを備えた読書記録ツールを依頼しましょう。すべての操作をすぐに試せるよう、サンプルの本を3冊入れて始めます。
使えるものになっていれば、本を追加し、読書状況を変更し、リストを絞り込み、再読み込みしても登録内容が失われません。最初のプロジェクト選びに迷うなら、「初心者向けのバイブコーディングのアイデア」で、もっと小さなテーマを探せます。
現在はイベントの詳細をメッセージで集め、共有ページにコピーしています。日付、会場、スケジュール、目立つ問い合わせリンクを備えた、モバイルでも見やすいイベントページを依頼しましょう。実際のイベント情報を渡せば、現実的な文章量でレイアウトを確認できます。
プロトタイプでは、狭い画面でも日時と場所が読みやすく、問い合わせリンクが意図したリンク先を開く必要があります。ページ作成の手順を詳しく知りたい場合は、「バイブコーディングでウェブサイトを作る」で、ウェブサイト固有の判断点を解説しています。
タスクがメモやチャットに分散し、何が対応待ちなのか分かりにくくなっています。3つのステータス、担当者欄、タスクの編集・削除機能を備えたシンプルなタスクボードを依頼しましょう。初回は権限管理や共有データの同期を対象外にします。
最初の版として十分なものなら、タスクのステータスを変更でき、ページを再読み込みしたときに何が起こるかも分かります。後からより本格的なアプリ制作の流れが必要になったら、「バイブコーディングでアプリを作る方法」で、制作と確認の手順を紹介しています。
Vibe Codeはプロトタイプの段階で役立ちます。範囲を絞った作業を説明し、できあがったものを確認して、うまくいかなかった点を修正します。答えを出したい問いに合う範囲を選びましょう。
選択肢 1
現実的な見出し、ラベル、サンプルコンテンツを使った1ページのモックアップから始めましょう。
データの保存方法を設計する前でも、読む順序やモバイルでのレイアウトを評価できます。同僚に特定の情報を1つ探してもらいましょう。相手がどこで迷うかは、完成度の高いスクリーンショットよりも役立ちます。
選択肢 2
追加、編集、絞り込み、削除ができるトラッカーなど、小さな操作可能なツールを作るよう依頼しましょう。
こうした操作を試すと、不足している状態がすぐに見つかります。グラフや装飾的な画面を追加する前に、空のリスト、無効な入力、再読み込み時の動作を確認しましょう。
選択肢 3
生成されたものは、すぐに運用できるサービスではなく、仕様書とプロトタイプとして扱いましょう。
認証、アクセスルール、プライバシー、データ復旧には、計画的な実装とテストが必要です。インターフェースを検討する間は、架空のサンプルデータを使いましょう。
各ワークフローは、なじみのある手作業から始まり、確認できる成果物へと進みます。手順では、何を依頼し何をテストするかを説明しています。完成品が必ず得られるという意味ではありません。
変更前：本のタイトルと進捗が複数のメモに分かれています。変更後：1つの画面で本をステータス別にまとめ、タイトルの追加や感想の記録をすばやく行えます。重要なのは、編集して再読み込みした後も記録がそのまま残るかを確かめることです。
作成前：参加者は住所や開始時刻を探すためにメッセージのやり取りをスクロールします。作成後：コンパクトなイベントページの上部近くに必要な情報をまとめ、スケジュールをひと目で確認できるようにします。共有する前に、スマートフォン幅の画面で確認しましょう。
作成前：担当者や進捗が会話の中に埋もれています。作成後：ボードでタスクをステータス別に表示し、各タスクの担当者を示します。これはローカル環境での作業例であり、複数人が同じデータを安全に編集できるという意味ではありません。
効果的なプロンプトでは、利用者、主な操作、必要な項目や内容、確認すべき動作を明示します。これらのバイブコーディングの例では、サンプルデータとデータがない場合の表示を依頼し、画面上のすべての操作を自分で試しましょう。試行段階のプロンプトには個人情報を含めず、実際の利用者向けにプロトタイプを使う前には別途レビューを計画してください。
日常的な言葉で読書記録ツール、イベントページ、シンプルなタスクボードを説明し、生成された結果を見ながら改善していくことなどが例です。重要なのは、期待する動作を指定し、生成されたものを確認して、的を絞った変更を依頼することです。
項目をいくつか設定し、フィルターを1つ付けた個人用リストを試してみましょう。たとえば、読書状況ごとに分類した本のリストです。共有アカウントや外部データソースがなくても、項目の追加、編集、絞り込みをテストできます。
出発点にはなりますが、動くデモとテスト済みのリリース版は同じではありません。誰かに使ってもらう前に、アクセシビリティ、エラー処理、データの動作、セキュリティ上の要件を確認してください。
想定されている操作を書き出し、サンプルデータを使って一つずつ実行してください。データがない状態、想定外の入力、幅の狭い画面、ページの再読み込みをテストし、次のプロンプトでは漠然と改善を求めるのではなく、具体的な不具合を伝えましょう。