公開しよう:あなたの画面から世界へ
公開しよう:あなたの画面から世界へ
厳しい真実をひとつ。自分のパソコンの中にしか存在しないページは、まだ公開されたとは言えません。誰も見られないし、誰も使えないし、誰も「すごいね」と言ってくれません。**公開とは、ただひとつのこと — 世界中の誰でも開ける URL を持つこと。**それが「コーディングを勉強中」と「何かを作った」の境界線です。
朗報は?URL を手に入れるのは、今やいちばん簡単な部分だということ。無料サービスが数秒でやってくれます:
- Netlify Drop — サイトを開き、HTML ファイルをページにドラッグすると、ライブ URL がもらえます。プロセスはこれだけ。
- Vercel — フォルダか GitHub リポジトリを接続し、デプロイをクリックして完了。(このアカデミー自体も Vercel で動いています。)
もし行き詰まったら?あなたは vibe coder です — AI に聞きましょう。「この HTML ファイルを Netlify にデプロイする手順を、ステップごとに教えて」で見事に解決します。デプロイはかつて、コーディングの怖い部分でした。今では、ただの会話です。
ただし、ファイルをどこかにドラッグする前に、知っておくべきことがあります。動くページとローンチ準備が整ったページは別物です。本物のサイトにはプロの仕上げがあります:ブラウザのタブに表示されるきちんとしたタイトル、検索エンジンやリンクプレビューに表示される説明文、WhatsApp や X でシェアされたときにリンクが映えるソーシャルタグ、そして「これは本物の人間が作りました — どうぞシェアしてください」と語るフッター。この最終レッスンでは、モジュール4で作ったアイデアボードに、まさにその仕上げを施します。
この先のパス
これは Vibe Coding Fundamentals の最後のレッスンです — でも同時に、ゼロからヒーローへのパスの第一歩でもあります。ここから先は、ブラウザの Claude Code(会話からプロジェクト全体を作り上げる AI)に出会い、次に本物のツールを自分のマシンにインストールし、最終的には自分自身の AI エージェントを構築します。Web がどう作られるかは、もう知っています。次は、もっとたくさん作る番です。
さあ、公開しましょう。
手順
ページに本物の <title> をつけましょう — "Untitled" を、ブラウザのタブにふさわしい名前に置き換えます。検索エンジンやブックマークが最初に表示するのはこれです。
ヒント: <head> の中の `<title>Untitled</title>` を見つけて、`<title>Idea Board — Never Lose a Spark</title>` のような名前に変えましょう。最低でも数文字 — あなたらしい名前に。
<head> に <meta name="description"> タグを追加しましょう — 検索エンジン(と好奇心旺盛な人間)にアプリの内容を伝える一文です。
Open Graph タグを追加しましょう — <meta property="og:title"> と <meta property="og:description"> です。WhatsApp や X、LinkedIn でシェアされたときのリンクの見え方を決めます。
カードの下部に <footer> を追加し、"Built with vibes" のクレジットと <a id="share-link"> を入れましょう — 公開されたプロダクトはみんな、作品に署名を残すものです。
あなたのコード
このステップで作りたいものを伝えてください。コードを書きます。あとは「適用」をクリックすればエディタに反映されます。 このステップ:ページに本物の <title> をつけましょう — "Untitled" を、ブラウザのタブにふさわしい名前に置き換えます。検索エンジンやブックマークが最初に表示するのはこれです。