はじめに

このサイトは何のため?

提案や商談の現場で、顧客はよくこう言います。「こういうの、できる?」「実際どんな 感じになるの?」——その場で動くものを見せられたら、話は一気に進みます。

このサイトは、Web開発の知識がない人(営業・企画・デザインなど、提案する立場の方)が、 VibeCoding(AIに言葉で指示してアプリを作る進め方)を使って、

• 顧客の要望をその場で動くプロトタイプにし、
• それを見せながら仕様をその場で詰め、
• ネットに公開して顧客に触ってもらえる

ようになることを目指す、実践ガイドです。

🎧 音声で聞きたい方はこちら

読む時間が取りづらい方へ。サイト全体の要点を約23分の音声にまとめました。 移動中や作業の合間に、耳から全体像をつかめます → 音声で聞く

読み終えると、こうなれます

VibeCodingができる

AIに指示して、動くプロトタイプを自分で作って公開できる。

正しく指示できる

頭の中のイメージを、AIに伝わる言葉で具体化できる。

できる/できないが分かる

商談で何を即答してよく、何を持ち帰るべきかを判断できる。

提案・商談で武器になる

その場プロトタイピングで、要望のすれ違いを早期に潰せる。

おすすめの読む順

1. Web開発の基礎知識 — 商談で出てくる言葉と仕組みの地図(書ける必要はありません)
2. 環境構築 — Mac / Windows に作業環境をそろえる
3. VibeCoding の知識 — AIへの指示の出し方、できる/できないの見極め
4. 提案・商談で使う — セールスシーン別の活用と、要望を仕様に落とす進め方
5. セキュリティ — 顧客に見せる前に最低限守ること
6. 実践ハンズオン — 顧客要望から動くプロトタイプを作って公開するまでを通しで体験

ここまでが基礎トラック。慣れてきたら、次の発展トラックへ:

7. 本番を見据えた技術選定 — ローカル開発環境や認証など、作り込む段階の選び方
8. デザインシステム — デジタル庁の例で、一貫したUIをAIに作らせる進め方
9. おまけ — Web / Chrome APIやPWAなど「こんなこともできる」引き出し

急ぐなら

「とにかく一度作ってみたい」なら、環境構築のあと実践ハンズオンへ飛んでもOK。 わからない言葉が出たら基礎知識の章や用語集に戻ってください。発展トラックは、 基礎を一周してからで十分です。

困ったら、左のサイドバーから各章へ。さあ、始めましょう。