自分が正しさを判断できる小さなものから
イベントページ、作品紹介、見積もりの計算ツールなどを選びます。個人情報を保存しないものなら、アカウントやデータの問題を減らせます。
ここでは架空の見積もり計算ツールを例にします。数量・単価・送料から合計を出し、ブラウザー内で計算するだけ。決済や注文の保存はしません。
1. 要望を1枚に書く
次をAIに渡し、自分の用途に合わせて変えてください。
自分の費用見積もりに使う、日本語の計算ツールをつくってください。数量・単価・送料の入力、計算ボタン、合計表示が必要です。式は数量 × 単価 + 送料。数量は正の整数、単価と送料は負にできません。不足した入力があれば該当欄を示します。スマートフォンとパソコンで使う1ページから始め、ログイン、決済、データベースは追加しません。変更前に要望を言い直し、確認が必要な点を挙げてください。
この要望を別に保存し、追加したい機能は先に追記します。プロジェクト概要テンプレートを使っても構いません。
2. 自分のパソコンで動く形をつくる
利用でき、プロジェクトのファイルを操作できるAIコーディングツールを選び、現在の公式手順で作成・起動します。まず配置と項目を決め、次に計算を加えます。
起動方法、入口のファイル、次回の開き方をAIに説明してもらい、自分でも実行して記録します。使える機能が一つできたらバージョンを保存。Gitを使う場合は、どの変更を保存したかも説明してもらいましょう。
3. 答えのわかる入力で試す
| 入力 | 期待する結果 |
|---|---|
| 数量10・単価12・送料8 | 合計128 |
| 送料0 | 正常に計算する |
| 数量が空欄または0 | 正の整数が必要と表示する |
| 単価が負 | 単価を負にできないと表示する |
スマートフォンの幅で入力、ボタン、結果を試します。計算を変更したら同じ例をもう一度確認。変更に失敗したら、エラー情報を残してから前のバージョンに戻します。
4. 他の人が開けるURLに公開する
実際の構成に合うホスティング、必要なアカウント、費用、公開手順をAIに挙げてもらいます。簡単なページなら静的ホスティングから。ドメイン代や利用地域ごとの登録・届出条件は、選んだサービスで確認してください。
公開後は新しいブラウザー画面で開き、先ほどの入力例を再度試します。スマートフォン、リンク、再読み込みも確認。動くバージョンを保管し、更新失敗時の戻し方を理解します。公開前チェックリストから必要な項目を選べます。
公開した後も直していく
実際に使いそうな人に試してもらい、止まった場所やわかりにくい表現を記録します。保存、書き出し、アカウントを増やす前に、利用を妨げる問題を直しましょう。機能を足すたびに、確認用の入力例も追加します。
困ったら、要望、再現手順、エラー原文、現在のバージョンを用意すると具体的に相談できます。15分の無料相談で個別指導が合うかを確認することもできます。予約時は対応言語と日時をご確認ください。
よくある質問
HTML・CSS・JavaScriptを先に学びますか？
最初は何をつくればよいですか？
公開にはサーバーの購入が必要ですか？
どのくらいで完成しますか？
次に読む
- Vibe Codingから仕事へ — 課題・実行・確認・再利用を理解する
- 公開前のチェックリスト — 実際にある機能に合わせて確認する
- 1枚のプロジェクト概要 — 最初に何をつくるか決める
