コードの所有からドメイン接続、GitHub、ランチパッド公開まで。クラスの最後の関門
完成すると手に入るもの
自分の成果物を本当のアドレスで公開し、コードとデータの所有権まで押さえたまま、世に公開できるようになります。
VibeCampusアカウント必須
登録さえすれば、このコースの実習をすぐ追いかけられます。公開と無料アドレスの発行まで追加費用はありません。
推奨先行: 信頼できる成果物任意
ローンチするビルドは、検証を経たビルドが良いです。信頼性のコースを終えてから来ると、このコースが完成します。
これまであなたはたくさんのものを作りました。しかしそれらはまだスタジオの中にあります。このコースが終われば変わります。友だちに「僕のサイトのアドレスだよ」と送れる本当のアドレス、検索窓に打てば開く自分のドメイン、ランチパッドでフィードバックと応援を受ける公開されたプロジェクト。作った人から、ローンチした人になるのです。
ローンチと言うと、サーバー、デプロイ、DNSのような単語が壁のように感じられるかもしれません。大丈夫です。このコースはその壁のレンガをひとつずつ用語カードでほぐし、実際のボタンは数回のクリックで終わるようになっています。怖いのは名前であって、実体ではありません。
そしてこのコースには、もうひとつのテーマが流れています。所有です。コードも、データも、ドメインも、あなたのものです。ローンチはプラットフォームに縛られることではなく、自分の資産を世に立てることだと確認することになるでしょう。
スタジオでコードタブを押すと、今のビルドのソースコード全体が見えます。一行も隠しごとはありません。読めなくても大丈夫です。重要なのは、いつでも全部見られて、コピーできて、持っていけるという事実です。
これがなぜ重要なのでしょう。ある道具は成果物を自分の中に閉じ込めます。その道具を離れると何も残りません。VibeCampusは逆です。成果物のコードが丸ごとあなたのものなので、いつでも別の場所に移し、別の開発者に見せ、自分で直せます。
コードを眺めてみると、意外に読める部分もあります。ボタンの文言、カラーコード、セクションの見出しのようなものが見え始めたら、コードが宇宙語から文書に変わる第一歩です。
こう出れば成功
コードタブで全体のソースが表示され、コピーボタンでクリップボードに収められます。スクロールしながら、自分のサイトの文言たちがコードの中にあるのを発見できれば、このステップは十分です。
ダウンロードボタンを押すと、ビルドがファイルとして保存されます。このファイルはあなたのコンピュータにある完全なコピーです。インターネットが切れても、何が起きても、成果物が自分の手に残っているという意味です。
ダウンロードしたファイルは、ブラウザでそのまま開けます。ダブルクリックすると、さっきまでスタジオで見ていたサイトが自分のコンピュータで開きます。サーバーなしでも開くこの経験が、ウェブの正体を理解する良い瞬間になります。
重要なビルドは、バージョンごとにダウンロードしてフォルダで整理しておく習慣をおすすめします。v1、v2のように名前を付けておけば、自分だけの歴史の保管庫になります。
ヒント
ダウンロードは無料なので、大きな修正をする前に一度ずつ保存しておきましょう。いちばん原始的ですが、いちばん確実なバックアップです。
引き継ぎパックはダウンロードの完全版です。完成した成果物(index.html)に加え、実行とホスティングとバックエンド接続を案内するREADME、そしてAIツールにこのプロジェクトを引き継ぐAGENTS.mdまで、zipひとつに収めてくれます。無料です。
このzipの力は連続性です。解凍してClaude Code、Cursor、VS Codeのようなツールで開くと、そのAIたちがAGENTS.mdを読んでプロジェクトを理解した状態で続きの作業をします。開発者に渡すときも、READMEのおかげで説明が要りません。
そしてどこに置いても、フォーム、会員、チャットボットのような機能が動き続けるように作られています。引っ越しても電気と水道がそのまま出る引っ越し荷物というわけです。
こう出れば成功
引き継ぎを実行すると vibecampus-handoff.zip が保存されます。解凍して index.html、README、AGENTS.md の3ファイルがあることを確認できれば成功です。
埋め込みは、自分の成果物を別のページの中にはめ込む、コピペ用のコード片です。すでに運営中のブログや会社のホームページがあっても、スタジオで作ったプロモ動画やコンテンツをその中に入れられるという意味です。
動画埋め込みのページでは、スタジオのプロモ動画でもYouTubeでもVimeoでも、動画のアドレスを貼り付ければ、画面比率、自動再生(ミュート)、繰り返し、最大幅、角の丸みまで決めた埋め込みコードを作ってくれます。コピーして望む場所に貼れば終わりです。
ローンチ戦略として見れば、埋め込みは橋です。既存のチャンネルを捨てずに、新しく作ったものをその上にのせて、2つの世界をつなぎます。
ヒント
埋め込みコードを貼るときは、リアルタイムプレビューで見た目を先に確認しましょう。比率と幅を貼り先のページに合わせれば、元からあったコンテンツのように自然になります。
いよいよアドレスの話です。公開するだけでも無料アドレスが生まれますが、ブランドを作るつもりなら自分のドメインが必要です。myflower.com が mysite-abc123 のようなアドレスより名刺に似合うのは、説明が要りませんね。
ドメインのまわりには、いつも一緒に付いてくる2つの単語があります。DNSとSSLです。下のカード3枚に整理したので、ひとつずつ開いてみてください。この3枚があれば、ドメインの会話のほとんどが聞き取れます。
先に安心させておくと、VibeCampusではこの3つを直接いじることはほとんどありません。概念さえ分かれば、ボタンは道具が押してくれます。
用語カード・タップで開く
インターネット世界の、自分のお店の看板であり住所です。myflower.com のように。
人々があなたのサイトを訪ねるときに入力する名前です。公開すれば無料アドレスがすぐ生まれ、自分のドメインはブランドのために追加でつなぐ選択の段階です。普通は年単位で登録して更新します。
看板の名前を実際の建物の場所に変換して教えてくれる、インターネットの電話帳です。
ドメイン名をサーバーのアドレスにつないでくれるシステムです。ドメインをつなぐときにレコードを追加する作業が、まさにこの電話帳に新しい行を書くことで、新しい行が世界中に行き渡るのに少し時間がかかります。
お客とお店の間の会話を封筒に入れて密封する鍵です。
アドレスバーの鍵マークのことで、訪問者とサイトの間の通信を暗号化します。最近のブラウザは鍵のないサイトに警告を出すため事実上の必須で、VibeCampusでつなげば証明書が自動で発行されます。
注意
ドメインは所有というより賃貸に近いものです。更新を忘れるとアドレスを失い、人気のある名前は他の人がすぐ持っていけます。登録するとき自動更新をオンにしておくことをおすすめします。
ドメインのページで望む名前を入力すると、世界中のドメインの登録状況を一度に確認できます。公開レジストリのデータをリアルタイムで照会するので、登録可能と登録済みがすぐ表示されます。登録なしでも検索は無料です。
名前の候補は3〜4個用意しましょう。心に決めた名前がすでに登録されているケースは思ったより多いのです。.com がふさがっていたら、.co や .jp のような別の拡張子を検討するのも手です。
登録可能な名前が見つかったら、購入までつなげられます。VibeCampus経由で登録すれば、公開したビルドへ自動で接続されてDNS設定が要りません。次のステップでは、すでに持っているドメインをつなぐ道も学びます。
こう出れば成功
検索結果で拡張子ごとに、登録可能または登録済みの状態が表示されます。登録可能な候補をひとつ以上見つけられたら、このステップは成功です。
ヒント
良いドメインの基準は3つです。短く、発音すれば表記が浮かび、ブランドにつながること。電話で読み上げたとき、相手が一度で入力できれば合格です。
すでにドメインを持っているなら、接続ページで公開したビルドに付けられます。流れは3つです。ドメインを追加すると画面にDNSレコード(タイプ、ホスト、値)が表示され、その値をドメインを買った登録代行会社の管理画面にそのまま追加した後、戻ってきてDNS確認を押せばOKです。
確認が取れるとホスティングとHTTPSが自動で仕上げられ、完了すると状態がライブに変わります。あなたがしたのはコピーと貼り付けだけなのに、裏では電話帳への掲載と鍵の発行が終わったのです。
公開が怖く感じられても大丈夫です。いつでも非公開に戻せますし、ドメイン接続も解除できます。ローンチは取り消せない判子ではなく、調節できるスイッチです。
注意
DNSの反映は数分から数時間かかることがあります。レコードを追加してすぐ確認が取れなくても間違いではないので、時間を置いてまた確認を押してみてください。
エラーが出たら？
「公開する」を押すと何が起きるのでしょう。成果物が常に点いているコンピュータに上がり、世界中どこからでも開ける無料アドレスが発行され、バックエンドが自動でオンになります。この全過程をデプロイと呼びます。
以前はこの仕事に、サーバーの賃借、設定、セキュリティ、証明書まで何日もかかりました。今あなたは、ボタンひとつでその全部を終えます。ただ、ボタンの裏で何が起きているかを知れば、問題が起きたときにどこを見ればいいか分かる人になります。
下のカード3枚で、デプロイ、ホスティング、サーバーを整理しました。3つは一文につながります。デプロイとは、サーバーという建物に入居してホスティングを受けることです。
こう出れば成功
「公開する」を押すとしばらくして無料のセキュアURLが発行され、そのアドレスはあなたのスマホでも別の国でも開きます。アドレスをコピーして別の端末で開いてみることで確認しましょう。
用語カード・タップで開く
お店のオープンです。作ったものを、本物のお客が入れるように世に出す瞬間です。
成果物をインターネットに上げて、誰でも開けるようにすることです。VibeCampusでは「公開する」ボタン一回で無料URLまで発行され、いつでも非公開に戻せます。
自分のお店が入居している建物の管理サービスです。24時間明かりが消えません。
サイトのファイルを保管し、訪問者に届けてくれるサービスです。公開すればVibeCampusがホスティングを代わりに受け持つので、建物の管理を気にする必要はありません。
注文が入るたびに働く、常に点いているコンピュータです。
サイトを昼夜問わず動かしてくれるコンピュータです。直接買ったり設定したりしなくても、公開と同時に裏で準備され、バックエンド機能まで自動でオンになります。
引き継ぎパックでコードを手に入れたので、今度はそのコードを守る方法の話です。開発者たちはコードをGitというバージョン管理システムに記録し、その記録をGitHubというオンラインの金庫に保管します。下のカード3枚が、この世界の鍵です。
画面のコマンドは、ダウンロードしたプロジェクトのフォルダで最初の記録を残す3行です。git init はこのフォルダの歴史を記録するという宣言、git add は記録するファイルを選ぶこと、git commit はメッセージとともに判子を押すことです。実行すると「v1 最初のローンチ」というセーブポイントが生まれます。
今すぐ必須ではありません。でもプロジェクトが大切になるほど、セーブポイントの価値は大きくなります。引き継ぎパックを解凍してこの3行を実行した瞬間、あなたのコードはミスと事故から、もう一枚安全になります。
$git init$git add -A$git commit -m "v1 — first launch"
[main (root-commit) a1b2c3d] v1 — first launch
用語カード・タップで開く
ゲームのセーブポイントのように、コードの瞬間瞬間を保存しておいて、いつでも戻れるようにする仕掛けです。
コードの変更の歴史を記録するシステムです。失敗しても以前のセーブ地点に戻れるので、修正が怖くなくなります。ひとりで作業するときも、いちばん頼もしい安全網です。
セーブボタンを押す行為です。「ここまで完成」という判子です。
今の状態をメッセージとともに歴史に記録する単位です。意味のある地点ごとに残しておけば、後で望む瞬間を正確に探して戻れます。
セーブファイルを保管してくれるクラウドの金庫であり、世界中の開発者たちの作業場です。
Gitの記録をオンラインに保管し共有するサービスです。コンピュータが壊れてもコードが安全で、他の開発者やAIツールにプロジェクトを渡すのも簡単になります。
ヒント
コミットメッセージは未来の自分に送るメモです。「修正」より「予約フォームのエラー案内を追加」のように何をしたか書いておけば、1か月後の自分が感謝します。
コードと同じくらい重要なのがデータです。予約、会員、注文の記録がプラットフォーム所有の倉庫にあるなら、離れる瞬間に全部置いていくことになります。VibeCampusは構造が違います。バックエンドをつなぐと、データは最初からあなた所有のデータベース(Supabase)に直接保存されます。
この構造の意味は、引っ越すときに現れます。引き継ぎパックでコードを持って別の場所に上げても、データベースがあなたのアカウントにあるので、フォームと会員とデータがそのまま続きます。荷物をまとめる引っ越しではなく、家だけ替えて家財はそのままの引っ越しです。
ローンチ前に一度だけ確認しましょう。フォームやログインのあるビルドなら、バックエンドがつながっているか、データが自分のダッシュボードに積もっているか。この確認ひとつが、未来の所有権を守ります。
注意
バックエンド接続なしで公開すると、フォーム送信のようなデータが保存されないことがあります。お客を迎え始めた後に気づいたら、それまでの問い合わせが消えたということなので、公開前に必ず点検しましょう。
ローンチは終わりではなく、運営の始まりです。これから修正が必要になったとき、あなたには三筋の道があります。第一に、スタジオで続けること。リファインチャットとクリック編集で、これまでどおり直すいちばん簡単な道です。
第二に、引き継ぎパックとAIツール。コードをダウンロードして、Claude CodeやCursorのようなツールで直接扱う道です。AGENTS.mdのおかげで、そのAIたちもプロジェクトを理解した状態で始めます。第三に、人に任せること。READMEのあるコードは、どんな開発者でもすぐ引き継げます。
3つの道は互いを妨げません。普段はスタジオで、大きな改編はAIツールで、専門領域は人に。状況に合わせて乗り換えられること自体が、コードを所有した人の特権です。
ヒント
今すぐ決める必要はありません。ただ「詰まったら別の道が2つある」という事実だけ覚えておいてください。その余裕が、運営のストレスを半分に減らしてくれます。
アドレスができたので、知らせる番です。Vibe Launchpad(ランチパッド)は、作っているものとローンチしたものを世界に見せる舞台です。プロジェクトを投稿を押して、名前、キャッチコピー、説明、カテゴリー、実際のURLを埋めれば公開されます。
公開されたプロジェクトにはフィードバックが付き、気に入ってくれた人たちがブーストでクレジットを送って応援してくれます。ローンチ前の段階なら、「公開時に通知」で待機者を集めることもできます。「公開済み」に変えた瞬間、待機者全員に通知が飛ぶ仕組みです。
キャッチコピーに手をかけましょう。一覧で人々が読むのは、その一行がすべてです。何をしてくれるものか、誰のためのものかが一文に入れば、クリックが付いてきます。
こう出れば成功
投稿を終えると自分のプロジェクトページが生まれ、訪問者がフィードバックを残してブーストできるようになります。最初のプロジェクト公開にはクレジットの報酬もあります。
修了クイズです。アイデアが世に出るまで、このクラスで学んだ流れとして最もふさわしいのはどれでしょう?
クラスの最後のミッションです。下の「スタジオで試す」ボタンに、街のフラワーブティックのワンページサイトのプロンプトが用意されています。シーズンのカタログと注文フォームのある、小さくても本物のサイトです。
今回は作るところで止まりません。公開まで、そして知らせるまでがミッションです。この一周を自分で回りきれば、あなたはローンチを知っている人ではなく、やった人になります。
実際にやってみるミッション
プリフィルされたプロンプトでフラワーブティックのワンページサイトをビルドし、「公開する」で無料アドレスを発行してもらいましょう。発行されたアドレスをスマホで開いて確認した後、ランチパッドにプロジェクトとして投稿してください。余裕があれば、ドメイン検索でフラワーブティックに似合う名前の候補も探してみましょう。
チェックポイント: ①公開後に無料URLが発行されましたか? ②スマホで開いたとき、注文フォームまでちゃんと見えましたか? フォームのあるビルドなら、バックエンド接続の有無も確認しましょう。③ランチパッドの投稿で、キャッチコピーに「街のフラワーブティックのための」のように対象を入れたなら満点です。④ドメインの候補まで探せたなら、登録と接続は学んだとおりです。この一周が、これからすべてのプロジェクトで繰り返される、あなたのローンチルーチンです。
おめでとうございます。最初の15分のときめきから始まり、プロンプト、ウェブサイト、アプリ、ゲーム、メディア、編集、信頼、そしてローンチまで。あなたはクラスの全過程を完走しました。スタジオに積もった作品たちと本当のアドレスが、その証拠です。
もうあなたは、アイデアを画面に、画面を検証された成果物に、成果物を世の中のアドレスにする全体の循環を、ひとりで回せます。この能力は消えません。繰り返すほど速く、深くなるだけです。
そして次の扉があります。作り方を学んだのだから、今度は売り方と育て方です。ひとり起業スクールで、アイデアの検証、ファンディングマーケット、チーム、マーケティングまで、作ったものを事業に変える旅が待っています。扉は開いています。
