WEEK 01
「俺のホームページ」を世界に出す週
何も知らない状態から、URL を 1個持つところまで
所要時間
Day 1: 45分 / 週合計: 約2〜3時間 (ゆっくりで OK)
ツール
Lovable (無料、ブラウザだけ)
費用
0円
とにおのひとこと
最初の週は「とにかく何か動くもの」を 1個世に出す。 内容はどうでもいい、「俺の URL」を持って帰ることが全て。 9割の人がここで挫折するけど、9割の挫折は「環境構築」のせい。 この教材は環境構築ゼロ、ブラウザだけで完結する。 だから諦める理由がない。
なぜ今週これをやるのか
人は「動くもの」を 1個作るまでが地獄。 動いた瞬間、世界がガラッと変わる。 だから Week 1 で「動くもの」を作る。 内容より「動いた」事実が全て。 「URL 持ってる人」と「持ってない人」の差は、給料の差より人生の差として大きい。 親戚の集まりで「俺ホームページ持ってる」って言えるだけで自分の見方が変わる。
始める前に必要なもの
- インターネットに繋がる PC かタブレット (スマホでも一応可能、画面が小さいと辛い、PC 推奨)
- Google アカウント 1個 (Gmail 使ってる人ならそれで OK)。 持ってない人は accounts.google.com で先に作る、これだけで今日 1日使っていい
- クレジットカードは不要。 今週は完全無料で完走できる
- ChatGPT を 1回でも使ったことがある (なくても大丈夫、Lovable も似たような感覚)
今週初めて出てくる言葉
分からない言葉が出てきたら、ここに戻って確認していい。 全部覚えなくていい、使ってるうちに自然に身につく。
ブラウザ
インターネットを見る道具。 Chrome、Safari、Edge とか。 普段ネット見てるあれ。
URL (ユーアールエル)
インターネット上のページの住所。 「https://〜」のやつ。 これを誰かに送ると同じページが見れる。
Lovable (ラバブル)
AI が Web ページを代わりに作ってくれるサービス。 自分でコード書かない。 lovable.dev でアクセス。
プロンプト
AI への指示文。 「こういうの作って」と日本語で書く、それだけ。 ChatGPT に話しかけるのと同じ。
プロジェクト
Lovable で「1個のアプリ/ページ」を入れる箱。 ホームページ用、TODO アプリ用と分けて作る。
プレビュー (Preview)
公開する前に「こうなります」を見る画面。 ボタン押して見るだけ、誰にも見えない。
公開 (Publish)
インターネットに出して、世界中の人がアクセスできるようにすること。 Lovable では Publish ボタン 1個。
今週の卒業条件
自分の名前が入った Web ページが、自分以外の人もアクセスできる状態。 そしてその URL を X に貼っている。
日々の進め方
各ステップに「なぜ」「やり方」「こうなれば成功」「詰まったら」がある。 焦らない、1日 1ステップでも OK。
Day 1
45分 (ゆっくりで 1時間半でも OK)
Lovable に入って、「俺のホームページ」を公開する
1
ブラウザで lovable.dev を開く(2分)
なぜ
まず Lovable がどんな見た目か知る。 これから 8週間で何回も開く場所。
やり方
いつも使ってるブラウザ (Chrome、Safari、Edge どれでも OK) を開く。 一番上のアドレスを入れる欄に「lovable.dev」と打ち込んで Enter キーを押す。
こうなれば成功
Lovable のトップページが開いて、画面のどこかに「Sign in」か「Get started」みたいなボタンが見える状態。
詰まったら
lovable.dev が開かない: 入力欄が検索欄になってる可能性。 https://lovable.dev/ と頭から打つ。 / または「lovable」と Google 検索して公式リンクをクリックでも OK。
2
Google アカウントでサインインする(3分)
なぜ
Lovable に「自分」として入るため。 Gmail のアカウントをそのまま使う、新しくパスワードは作らない。
やり方
画面の右上の「Sign in」または「Get started」を押す。 ログイン方法の選択画面が出る。 「Continue with Google」(または「Google で続ける」)を押す。 自分の Gmail を選んで、確認画面が出たら全部 OK を押す。
こうなれば成功
自分のメアドが画面のどこかに表示されてる。 「New Project」みたいな大きなボタンが見える。
詰まったら
「Continue with Google」が見当たらない: 他のボタン (Continue with GitHub など) ではなく Google を探す。 / Gmail なくて先に進めない: 今日はここで終わっていい。 別の日に Gmail (accounts.google.com) を作ってから戻る。 これは恥じゃない、初日のハードルはそういうもの。
3
「New Project」を押して、最初のプロジェクトを作る(2分)
なぜ
Lovable では作るもの (ホームページ、TODO アプリ等) を「プロジェクト」という単位で分ける。 今は最初の 1個目を作る段階。
やり方
画面に「New Project」(新しいプロジェクト) というボタンがあるはず。 押す。 プロジェクト名を入れる欄が出たら、何でもいいので入れる。 例:「my-first-page」「父ちゃん1号」「とにお練習」。 日本語でも英語でも数字でも OK。 入れたら「Create」(作る) を押す。
こうなれば成功
チャット画面みたいな入力欄が下にある、真っ白か簡単な見本があるページが開く。
詰まったら
ボタンの場所がわからない: 画面の右上か左上を順番に見る。 「New」「+ Create」「Start」みたいな単語を探す。 / プロジェクト名で何にすればいい?: 何でもいい。 後から変えられるし、見せる相手もいない。 「abc」でも OK。
4
プロンプト (AIへの指示) を日本語で書く(10分 (考える時間込み))
なぜ
Lovable は「こういうの作って」と日本語で言うだけで Web ページを生成してくれる。 これが「バイブコーディング」の本体。 自分が AI に対して「お願いする人」になる体験。
やり方
下のチャット欄に、自分が作りたいホームページを日本語で書く。 完璧じゃなくていい、思いついたまま書く。
例 (このまま貼っていい):
「俺の名前は田中。 コーヒー好きで、3歳の娘がいる。 シンプルで黒っぽい、ミニマルなデザインの個人ホームページを日本語で作って。 上に名前と挨拶、真ん中に「好きなもの」のリストを 3つ、下に X や LINE のリンクを置く場所を作って」
書いたら、送信ボタン (紙飛行機マークか「Send」) を押す。
こうなれば成功
画面の右側 (または上) で何かがピカピカ動き出す。 30秒〜1分待つと、画面にホームページが現れる。
詰まったら
英語で書かないとダメ?: 日本語で完全に動く。 むしろ日本語で丁寧に書く方がいい結果出る。 / 「思いつかない」: 上の例文をそのまま使う、自分の名前だけ変える。 / プロンプト送ったら長文の英語が返ってきて画面に何も出ない: 待つ。 1〜2分かかることがある。 それでも何も出ない場合、「Preview」を押すと画面が切り替わる。
5
「Preview」で出来たページを見る(5分)
なぜ
「自分のページ」が画面に表示される、Week 1 の山場。 ここで「あ、できた」ってなる。 諦めずにここまで来てくれてありがとう。
やり方
画面の上か左にある「Preview」ボタンを押す (英語の意味は「見る」)。 自分が指示したホームページが画面に出る。 全画面で見たければ拡大マークを押す。 ここで「あ、ホームページだ」と思える状態になってる。
こうなれば成功
自分の名前と、書いた内容っぽいページが画面に出てる。 デザインは綺麗じゃないかもしれないが、それで OK。
詰まったら
画面が真っ白: もう 30秒待ってからリロード (F5 か Ctrl+R)。 / 「全然違うのが出てる」: そのまま次へ、ステップ 6 で直す。 / 「ちょっとイマイチ」: それは普通、誰でも 1回目はそう思う。 ステップ 6 で何度でも直せる。
6
気になるところを直す指示を追加で出す(10分)
なぜ
AI に対して「修正」を出す体験。 これがこの教材の本体。 「完璧な指示」を 1回で書くんじゃなくて、「ちょっと違うから直して」を何回も繰り返す。 これがバイブコーディング。
やり方
下のチャット欄にもう一度書く。 1メッセージで 1個だけ直すのがコツ。
例:
・「もっと黒っぽい色に変えて」
・「フォントを丸ゴシックっぽくして」
・「画像を置く場所を 1個追加して」
・「下に SNS のリンクを 3つ並べて」
書いて送信。 また 30秒待つ。 Preview で確認。 まだ違ったら、また書く。 これを 3〜4回繰り返す。
こうなれば成功
「うん、まあこれでいいや」と思える状態のページ。 完璧じゃなくていい、最初のページなんてみんなダサい。
詰まったら
直したらおかしくなった: 「Undo」(取り消し) ボタンや、過去の状態に戻す「History」が左下にある。 戻して別の言い方で書き直す。 / 何度言っても変わらない: 同じ指示を 3回出してもダメなら、表現を変える。「赤を青に」じゃなく「全体的に青を基調にして」など。
7
「Publish」ボタンで世界に公開する(3分)
なぜ
Preview は自分しか見れない、Publish (公開) すると世界中の人がアクセスできる。 ここで「URL を持つ人」になる。
やり方
画面の右上か上部にある「Publish」ボタンを押す。 「あなたのプロジェクトを公開します、いいですか?」みたいな確認が出たら、確認 (Confirm/OK/Publish) を押す。 30秒待つと、URL が表示される。 「https://〜.lovable.app」みたいな URL になってる。
こうなれば成功
URL が画面に出てる。 そのURL をクリックすると別のタブで自分のページが開く。 これが「俺の URL」。
詰まったら
Publish ボタンが見つからない: 「Share」「Deploy」「Publish」のどれかになってる。 探す。 / 「Pro plan が必要」と出る: 無料枠の Publish 回数上限。 別のプロジェクトを 1個消すか、明日に持ち越し。
8
X (Twitter) に URL を貼る(5分)
なぜ
「公開した」事実を残すため。 これやらないと心に残らない。 反応はゼロでも OK、自分のための儀式。
やり方
X を開く。 投稿欄に書く。 例:
「人生初めてのホームページ作って公開した。 中身はショボいけど URL ある: [自分の URL を貼る] #アプリ作る部 #Day1」
ハッシュタグはあってもなくても OK。 投稿する。
こうなれば成功
X に投稿が出てる。 自分の URL が含まれてる。 これで Day 1 完了。
詰まったら
X やってない: Instagram でも note でも LINE のステータスでも、どこでもいい、誰かに 1人見せる場所に貼る。 これは「人に見せる」が目的。 / 恥ずかしい: 恥ずかしいから意味がある。 5年後にこの URL を見返すとき、自分が変わってる証拠になる。
成果物: 自分の URL を X (またはどこか人に見せる場所) に貼った状態。 これで Day 1 卒業、完璧。
Day 2-3
計 30分〜1時間
ページに「動く要素」を 1個足す
1
昨日のプロジェクトを開く
なぜ
昨日 Lovable に作ったプロジェクトはちゃんと残ってる。 そこに「機能」を 1個足す。
やり方
lovable.dev を開く、Sign in する。 トップ画面に昨日作ったプロジェクトが並んでる。 押して開く。
こうなれば成功
昨日の自分のページが Preview に出る。
詰まったら
プロジェクトが見当たらない: Dashboard か Projects のページに移動する。
2
「動く要素」を 1個追加するプロンプト
なぜ
ただ表示するだけじゃなく、「ボタンを押すと何か起きる」を体験する。 これが Web の本質。
やり方
チャットに書く例:
・「ページに「いいね」ボタンを追加して。 押すと数字が 1ずつ増える」
・「画面の真ん中に「クリックすると挨拶が変わる」ボタンを追加」
・「ページの一番下に「お問い合わせ」のメール送信ボタンを追加」
好きなのを 1個選んで貼る。
こうなれば成功
画面に新しいボタンが追加されてる、押すと何か変わる。
詰まったら
「動かない」: そのまま「ボタンを押しても数字が変わらない、直して」と次のプロンプト。
3
再 Publish
なぜ
Publish は何度も押せる。 URL は変わらない、中身だけ更新される。
やり方
Publish ボタンを押す。 同じ URL で新しい内容が見えるようになる。
こうなれば成功
自分の URL を別のブラウザで開くと、追加した要素が見える。
成果物: ボタンが追加されたページ
Day 4-7
計 1〜2時間
プロフィール LP として整える
1
自分の経歴と好きなものをページに入れる
なぜ
実在感を出すと「俺のページ」になる。 架空の田中じゃなく、自分の言葉で。
やり方
プロンプト例:「自己紹介セクションを追加。 内容は: [ここに自分のこと書く]。 仕事は内装屋、英語勉強中、家族 1人、コーヒー好き、ジムに行ってる、みたいな自分のこと」
こうなれば成功
自分の文章がページに載ってる。 嘘ない実物のページ。
2
写真を 1枚足す
なぜ
テキストだけだと寂しい。 写真 1枚で「人がいる」感が出る。 顔出さなくていい、コーヒーカップでも OK。
やり方
写真をアップロードするには、Lovable のチャット欄に画像ファイルをドラッグ&ドロップ。 もしくは「unsplash で freeなコーヒーの画像を 1枚使って表示して」とプロンプト (Unsplash は無料画像サイト)。
こうなれば成功
画像がページに表示されてる。
詰まったら
アップロードできない: 「画像を入れる場所を作って」とプロンプトだけ送って、後で手動で差し替えてもいい。
3
Week 1 卒業ツイートを書く
なぜ
区切りをつけるため。 「Week 1 終わった」と書くことで、自分に「次は Week 2」と告知する。
やり方
例文:
「Week 1 終わった。 ホームページ作って公開した: [URL]。 ダサいけど、5週間後にダサいって思える、それがいいんだと思う。 次は Week 2 でボタン押したら何か起きるアプリ作る #アプリ作る部」
こうなれば成功
X に Week 1 卒業ツイートが投稿されてる。
成果物: プロフィール LP として人に見せられる状態 + 卒業ツイート
つまずきポイント (先回り Q&A)
詰まったらここを読む。 答えがなければ Discord か X で聞いていい。
Q. そもそも「ブラウザ」がよくわからない
A. 普段ネット見るとき開いてるアプリ、あれがブラウザ。 PC なら Chrome か Safari か Edge。 「インターネット」って書いてあるアイコンがそれ。 どれでも OK。
Q. 「URL」がよくわからない
A. ネットのページの住所。 アドレス欄 (上の入力欄) に表示されてる「https://〜」のやつ。 これをコピーして人に送ると同じページが見られる。
Q. Gmail (Google アカウント) がない
A. accounts.google.com で 5分で作れる。 今日は Gmail 作るだけで終わっていい、それで充分。 これは恥じゃない、初日はそういうもの。
Q. プロンプトの「英語で書かないとダメ」と思ってた
A. 日本語で完全に動く。 むしろ「シンプル」「黒っぽい」「丸ゴシック」みたいな日本語の形容詞が AI に通じる。 英語で頑張る必要なし。
Q. クレカ登録要求された
A. 無料枠を超えた可能性。 ただし Week 1 のレベルなら超えないはず。 別のプロジェクトを作る前に「My Projects」を見て、いらないやつを削除する。 それでもダメなら明日に持ち越し (無料枠は毎日リセット)。
Q. 画面が真っ白で何も出ない
A. まず Preview を再読み込み (F5)。 ダメなら最後のプロンプトが壊れてる可能性。 1つ前の状態に戻す (画面左下の History か Undo)。
Q. 英語のエラーが出てきて読めない
A. Google 翻訳にコピペする。 でも大体は「Token limit exceeded」(今日の無料枠使い切り、明日また使える) か「Server error」(サーバー側の問題、5分待つ) のどっちか。 ほぼ自分のせいじゃない。
Q. 俺の年齢 (40代/50代/60代) でこんなのできるんだろうか
A. できる。 これはコーディングじゃなく「AI にお願いする力」を使う作業。 ChatGPT に「これやって」って言える人なら全員できる。 年齢関係ない、むしろ「俺用のツール欲しい」動機が強い世代の方が続く。
Q. Day 1 が 1日で終わらなかった
A. 完璧。 「45分」は最速で進める人の話。 Day 1 を 3日かけて終わらせる人が一番多い。 焦らない、ペースは自分で決める。
Q. ボタンや画面の英語がいちいち怖い
A. 今週覚える英単語 5個:Sign in (入る)、New (新しい)、Create (作る)、Preview (見る)、Publish (公開する)。 これだけで Week 1 完走できる。
Q. プロジェクトを間違えて消した
A. よくある。 Lovable は最近作ったプロジェクトは復元できる場合もある。 ダメだったら、もう一度作る。 1〜2時間の損失だが、次回は早い、これも経験。
Q. 本当に「これが Web ページなの?」と疑ってる
A. うん、それが Web ページ。 URL があって、誰でも開ける、それが Web ページ。 デザインの綺麗さ・派手さは関係ない。 Yahoo! も Google も最初は文字だけだった。
卒業チェック
自分の URL が X (またはどこか) に貼ってある + 1人以上に「これ作ったよ」と見せた。 これで Week 1 卒業。 反応がゼロでも卒業条件は満たしてる。
週末のとにお
Week 1 やり切った人、本気でおめでとう。 「俺もアプリ作れる」と思ったら、それで Week 1 の目的達成。 周りの非エンジニア 99% できない、誇っていい。 ただし「俺はもうプロ」とは言わない、Week 2 でいきなり詰まるから。 Week 2 で初めて「コードって何?」が少しだけ顔出す、でも全然怖くない。
次の週に向けて
Week 2 では「ボタン押したら何か変わる」アプリを 1個作る。 TODO リストとか、子供のお手伝いポイント記録とか。 内容より「機能のあるアプリを 1個作った」体験が目的。