学生
時間を設定する欄、開始・一時停止・リセットの操作、カウントダウン終了時のメッセージがある学習タイマーを作成してください。
使える初版なら、残り時間がはっきり表示され、時間がゼロ未満にならず、選んだ時間にリセットできます。通知音や学習履歴を追加する前に、すべての操作をテストしましょう。
小さく始める
初心者でも完成させられるバイブコーディングのアイデアを試そう
初心者に最適なバイブコーディングのアイデアは、目標が絞られていて、結果を確かめる方法が明確なものです。まずタスクを1つ選び、誰の役に立つかを説明して、機能を追加する前に動く初版を作ってもらいましょう。
このシナリオで実現すべきこと
結果が目に見え、短い確認テストで確かめられるアイデアを選びましょう。次の3つの出発点なら、最初の制作物を確認しやすい規模に抑えられます。
クラブの運営者
日時、場所、スケジュール、問い合わせ先と明記されたリンクを掲載した1ページのイベントサイトを作成してください。
訪問者がスマートフォンで、不要な内容を延々とスクロールせずに必要な情報を見つけられるようにしましょう。初版は参加者のデータを収集せず、情報提供に徹してください。
家庭料理をする人
人数を変えると材料の分量も変わるレシピの分量調整ツールを作成してください。
レシピを1つ入力し、人数を倍にして、計算された各分量を手作業で確認しましょう。まずは数値で表せる分量から始め、「ひとつまみ」などの記載には人による判断が必要だと説明してください。
各項目
作成ツールには、一度に1つの完結した作業手順を伝えましょう。仕様を小さくまとめると、出力が実際に動くのか、完成しているように見えるだけなのかを判断しやすくなります。
- 個人用ツール
- 情報ページ
- 計算ツール
-
初心者向け
学習タイマー：カウントダウンを1回完了させる
アカウント、連続記録、通知を追加する前に、まずは1画面で使えるタイマーを作ってもらいましょう。一時停止したときとゼロになったときに、画面に何を表示するか指定してください。どのボタンも結果をすぐ確認できるため、初心者に適したバイブコーディングのプロジェクトです。
学習タイマーを作成する- 初期時間を25 minutesに設定し、分と秒を表示します。
- 開始すると毎秒カウントダウンし、一時停止すると残り時間を消さずに止まります。
- リセットすると、ユーザーが選択した時間に戻ります。
- ゼロになったらタイマーを止め、完了したことが分かるメッセージを表示します。
-
初心者向け
イベントページ：訪問者の疑問に答える
実際のイベント情報を自分で用意してから、読む順序が明確なモバイル対応ページを依頼しましょう。ここでは、先に内容を確定させることがバイブコーディングの成功につながります。洗練されたレイアウトでも、住所の記載漏れや曖昧な開始時刻は補えません。
イベントページを作成する- イベント名、日付、タイムゾーン、会場、問い合わせ先を用意します。
- 基本情報、スケジュール、アクセス、問い合わせの各セクションを依頼します。
- 狭い画面幅と広い画面幅の両方でページを確認します。
- 表示されたすべての情報を、用意した内容と照らし合わせて確認します。
-
初心者向け
レシピの分量調整ツール：計算をテストする
分量を測れる材料と元の人数が記載されたレシピを1つ用意します。計算ルールを表示するようツールに依頼してください。初心者にとっては、材料の量を誤って丸める見栄えのよい画面より、明確なルールのほうが役立ちます。
レシピの分量換算ツールを作る- 元の人数と、数値で表した分量および単位が付いた材料を入力します。
- 各材料の分量に、希望する人数を元の人数で割った値を掛けます。
- 換算後の分量の横に単位を表示したままにします。
- 半量、倍量、空欄の入力をテストします。
合格基準
すでに持っている情報で動作を検証できるプロジェクトを選びましょう。最初の制作物は、中心となる機能が簡単なテストに合格すれば完成です。
または
または
または
選択肢1
すぐに結果を確認したくて、準備するコンテンツがない場合。
学習タイマーを選びましょう。表示を見ながら短いカウントダウンを開始、一時停止、リセットし、最後まで動かしてみます。
サンプルデータがなくても、期待どおりに動くか確認できます。一時停止後もタイマーが進む、または表示がゼロ未満になるなら、修正すべき点を具体的に伝えられます。
選択肢2
イベントの詳細があり、それをわかりやすく伝えることが主な目的の場合。
イベントページを選びましょう。日付、会場、連絡先のリンクを、スマートフォンと大きな画面の両方で確認します。
合格基準は読みやすさと情報の正確さであり、アニメーションやセクションの数ではありません。仮の情報として作り上げた詳細を公開しないでください。
選択肢3
数字の確認が好きで、サンプルのレシピを用意できる場合。
レシピの分量換算ツールを選びましょう。出力を、手計算した半量と倍量の結果と比較します。
計算ツールなら、合否を具体的に判定できます。バイブコーディングで画面のたたき台は作れますが、計算が正しいか、特殊な入力を適切に処理できるかは自分で確認する必要があります。
よくある手戻り
最初の結果が期待と違う場合は、全面的な作り直しを頼むのではなく、うまくいかない操作と期待する結果を伝えましょう。たとえば、「一時停止してもカウントダウンが進みます。表示をリセットせずに止めてください」と伝えます。一つの動作を修正して再テストし、それから次の機能を追加しましょう。そうすれば、機能が増えても初心者が理解しやすいプロジェクトにできます。
アイデアはそのままに、修正点を絞る
- 曖昧なフィードバックを、再現可能なテストに置き換えましょう。
- デザインを磨く前に、中心となるタスクを確認しましょう。
- 生成された文章、リンク、計算結果は自分で確認しましょう。
シナリオ別のよくある質問
学習用タイマーは、コンテンツを集めたり外部サービスに接続したりせずに、すべての操作をテストできるため、最初のプロジェクトに適しています。まずカウントダウン画面を1つ作るよう依頼し、開始、一時停止、リセット、終了時の状態を確認しましょう。
一文で説明でき、数分でテストできる、1つの主要なタスクに絞りましょう。最初に作るなら、献立作成アプリ全体よりも、1つのレシピに対応する分量換算ツールが適しています。
はい。ただし、機能を広げる前に最もシンプルな版を完成させましょう。タイマーには後から時間設定機能を、イベントページには後からスケジュールを追加できますが、追加した機能はそれぞれテストが必要です。
想定するユーザー、1つのタスク、必要な入力項目や操作、成功の条件を明記しましょう。該当する場合は、25-minuteのタイマーや4人分のレシピなど、具体的な値も含めてください。
動かない操作を具体的にテストし、期待した結果と実際に起きたことを伝えましょう。その問題だけの修正を依頼してから、再度テストしてください。見た目が整っていても、正しく動くことの代わりにはなりません。