ゼロからヒーローへの道 · ステージ 1 / 4

0%

SKIP TO CONTENT

公開しよう:あなたの画面から世界へ

beginner~12 0/4 ステップ

公開しよう:あなたの画面から世界へ

厳しい真実をひとつ。自分のパソコンの中にしか存在しないページは、まだ公開されたとは言えません。誰も見られないし、誰も使えないし、誰も「すごいね」と言ってくれません。**公開とは、ただひとつのこと — 世界中の誰でも開ける 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 がどう作られるかは、もう知っています。次は、もっとたくさん作る番です。

さあ、公開しましょう。

手順

1

ページに本物の <title> をつけましょう — "Untitled" を、ブラウザのタブにふさわしい名前に置き換えます。検索エンジンやブックマークが最初に表示するのはこれです。

ヒント: <head> の中の `<title>Untitled</title>` を見つけて、`<title>Idea Board — Never Lose a Spark</title>` のような名前に変えましょう。最低でも数文字 — あなたらしい名前に。

2

<head> に <meta name="description"> タグを追加しましょう — 検索エンジン(と好奇心旺盛な人間)にアプリの内容を伝える一文です。

3

Open Graph タグを追加しましょう — <meta property="og:title"> と <meta property="og:description"> です。WhatsApp や X、LinkedIn でシェアされたときのリンクの見え方を決めます。

4

カードの下部に <footer> を追加し、"Built with vibes" のクレジットと <a id="share-link"> を入れましょう — 公開されたプロダクトはみんな、作品に署名を残すものです。

あなたのコード

html
44
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

ライブプレビュー

ライブプレビュー