最初の15分: アイデアが画面になる瞬間

想像ではなく予告です。レッスンの時間割がきれいに並び、トレーナー紹介が写真とともに続き、いちばん下には実際に入力できる予約フォームが付いたピラティススタジオのサイト。15分後にあなたの画面に開いている成果物です。

これを作るのに必要なのはコーディングの腕前ではなく、文章ひとつです。あなたが文章を書けばAIがコードを書き、あなたは途中途中で選択肢をクリックして方向を決めるだけでいいのです。なぜこの順番で学ぶかというと、スタジオの流れを一度でも最後まで通り抜けた人とそうでない人とでは、この後のすべてのコースの吸収速度がまったく違うからです。

さあ、タイマーを付けたつもりで始めましょう。次のステップからは手がずっと動き続けます。

まずは自分の席を作りましょう。下の「スタジオで試す」ボタンを押すと登録画面が開きます。メールまたはソーシャルアカウントで1分あれば終わり、費用はかかりません。

登録して入ると、チェックイン報酬が待っています。VibeCampusは毎日アクセスするたびに、キャンパスの通貨であるクレジット(Vibes)を積み立ててくれます。このクレジットが後々ビルドや各種機能の燃料になります。なぜ初日から確保するよう勧めるかというと、毎日のチェックインは、先延ばしすると消えてしまう唯一の報酬だからです。

いよいよ作業場に入ります。スタジオ画面の中央に大きな入力欄が見えるはずです。ここがあなたが文章を書く場所、つまりこのプラットフォームの心臓です。

入力欄のまわりを見回してみましょう。ウェブページ、アプリ、ゲーム、動画といったビルドの種類の選択があり、クイックビルドとディープビルドを選ぶビルドモードのスイッチがあります。プロンプト支援ボタンは、何を書けばいいのか分からないときに押す救援ベルで、テンプレートから始めるを開けば125種類の完成例が待っています。

今は名前を目に慣らすだけで十分です。それぞれは後のコースでひとつずつしっかり扱います。なぜツアーから始めるかというと、画面のどこに何があるかを知るだけで、最初のビルドの緊張感が半分に減るからです。

下の「スタジオで試す」ボタンを押すと、スタジオの入力欄に最初のプロンプトがあらかじめ入っています。小さなピラティススタジオのための予約サイト、レッスンの時間割とトレーナー紹介と予約フォームまで盛り込んだリクエストです。

入っている文章を一度声に出して読んでみてください。誰のためのものか(ピラティススタジオ)、何が必要か(時間割・紹介・予約フォーム)が書かれています。良いプロンプトの骨組みはこういう形をしています。気に入ればそのまま、変えたいところがあれば自由に直してから送信を押します。

送った瞬間からはAIが働きます。あなたがしたのは文章をひとつ送っただけなのに、ここから画面が忙しくなり始めます。

プロンプトを送っても、AIはすぐにコードを書き始めません。まず clarify、つまり聞き返しが来ます。どんな雰囲気が好みか、予約はどんな方式かといった質問が、選択肢のボタンで並びます。

合うものを選んでクリックすればOKです。「複数選択できます」と表示された質問は複数選んでもよく、気に入る選択肢がなければ自由入力もできます。選び終わったら「これで作る」を押しましょう。急ぐときは「スキップして作る」もありますが、最初の一度は質問に答えてみることをおすすめします。AIが何を知りたがっているのかを見ること自体が勉強になります。

なぜこのステップがあるかというと、同じ文章でも頭の中の絵は人によって違うからです。聞き返しは、その隔たりを数回のクリックで埋めてくれる仕組みです。

答え終わるとAIが制作プラン(ブループリント)、つまり何をどう作るかを整理した設計サマリーを見せてくれます。どの画面が入るのか、どの機能が動くのか、どんな雰囲気に仕上げるのかが項目ごとに書かれています。

ここであなたがすることは、検収者の目でざっと確認することです。自分の言った予約フォームは入っているか、時間割は抜けていないか。問題がなければ承認し、抜けが見えたらこの時点で言うのがいちばん安上がりです。家を建て終えてから壁を動かすより、図面の段階で直すほうがずっと速いのと同じ理屈です。

承認するとビルドが始まり、ゲージが満ちていきます。この時間は遊んでいるのではなく、AIエージェントが制作プランを手に、実際のコードを一行ずつ書き進めている最中です。画面の左側にコードが流れていくのが見えるはずですが、それが今まさにあなたのサイトが建てられている現場です。

すべて理解する必要はまったくありません。ただひとつだけ覚えておいてください。あのコードは全部あなたのものです。VibeCampusは成果物のコード全体を提供するので、後でダウンロードしてどこへでも持っていけます。

完成したサイトが右側のプレビューに表示されています。眺めるだけでなく触ってみましょう。ボタンを押し、予約フォームに名前を入れてみて、いちばん下までスクロールしてみるのです。本当に動いていることを手で確かめる瞬間が、このコースのハイライトです。

次はスマホ表示です。実寸のスマホフレームでサイトを包んで見せてくれて、iPhoneとGalaxyを並べて比較することもできます。最近の訪問者の大半はスマホから来るので、スマホでどう見えるかが事実上の本当の姿です。

結果が最初の一口で100%気に入らなくても正常です。だから道具が2つあります。無料再生成は、現在のビルドをより高い品質で最初から作り直してくれる機能で、リファインはチャットで「ボタンをもっと大きく」「時間割を表形式に」のような部分修正を頼む機能です。

間違えても大丈夫。再生成は無料です。この一文を信じて思い切り実験する人がいちばん早く伸びます。全体の雰囲気がずれたら再生成、特定の部分だけ直したければリファイン。この使い分けだけつかめば十分です。

気に入る結果が出たら保存を押します。保存したビルドはマイ作品にどんどん積み上がり、いつでも開き直して続きを編集したり共有したりできます。

下の「スタジオで試す」ボタンでマイ作品を開いてみましょう。さっき作ったピラティスのサイトが最初の枠を占めているはずです。これからこの棚に、アプリ、ゲーム、動画がひとつずつ増えていきます。ここがあなたのポートフォリオであり、作業場の棚です。

あなたはたった今、プロンプト、clarify、制作プラン、ビルド、プレビュー、保存というスタジオの骨組みの流れを完走しました。これから何を作っても、この流れは同じように繰り返されます。今日の15分が、これからのすべてのビルドを支える土台になります。

次の地図は二手に分かれます。開発用語がまだ外国語のように聞こえるなら用語完全攻略コースへ、結果の品質を引き上げたいならプロンプトの技術コースへ進みましょう。どちらでも、今日作ったピラティスのサイトが引き続き教材として使われます。

そして明日もまた来てください。チェックイン報酬は毎日貯まり、あなたのマイ作品も毎日育てられます。