ハンズオン③ 自己紹介サイトをAIと一緒に作る

今日から、自分の自己紹介サイトを育てはじめます。使うのは前回つくったブラウザの環境（claude.ai/code＋hello-ai）そのまま。そして今日の本当のテーマは、サイトそのものよりAIとの仕事の回し方——「計画→実行→直す」のループです。

STEP0：前回の続きを開く

1. 1ブラウザで claude.ai/code を開いてログイン。
2. 2前回つないだ hello-ai のリポジトリで作業を始める。

STEP1：いきなり作らせない。“計画”から

無料講座の「Claude Code」の回でやったプランモードの考え方を実践します。大きめの作業は、先に計画だけ出させて、OKしてから実行——これが事故らないAIとの仕事の基本形です。こう頼んでみましょう。

自己紹介ページを作りたい。ファイル名は index.html で、CSSもファイルの中に <style> で書いて1ファイルで完結させて。構成は「名前の見出し／かんたんな自己紹介文／好きなものリスト3つ」。まだ作らないで、どんなページにするか計画だけ先に見せて。

AIが「こういう構成で作ります」と計画を返してきます。読んで、注文があればここで言う（例：「リストは5つにして」）。納得したら実行をお願いします。

OK、その計画で作って。できたらコミットして保存して。

STEP2：できたものを“読んで”みる

GitHubの hello-ai で index.html を開いて、中身を眺めてみましょう。**第1回で自分の手で打った <h1> や <ul> が見つかるはず**。全部わからなくてOK。「読める部分がある」が大事な成長です。

STEP3：「直して」のループを回す（ここが本番）

一発で理想のページにはなりません。それで正常です。出てきたものに「ここをこうして」と注文を重ねます。たとえば——

• ・「背景をクリーム色、見出しを紺色にして」
• ・「好きなものリストの各行の先頭に、合う絵文字を付けて」
• ・「スマホで見ても読みやすいように、文字サイズと余白を調整して」

最低2回、できれば3〜4回、自分の言葉で注文してみてください。終わるたびに「コミットして保存して」も忘れずに。

STEP4：うまくいかないときは“戻す”（安心の保険）

AIに頼むと、ときどき思った方向と違うものになったり、動かなくなることがあります。でも大丈夫——いつでも前の状態に戻せます。これを知っているだけで、こわがらずに何でも試せるようになります。

まだ保存（コミット）していない変更を捨てる

「いまの変更は全部破棄して、さっきの状態に戻して」とAIに頼む。

保存したけど、やっぱり前が良かった

「mainを1つ前のコミットに戻して」または「さっきの変更を取り消して（revert）」。

STEP5：変更を“本線（main）”に合流させる

Web版Claude Codeは、安全のためにブランチ（別の作業レーン）で作業することがあります。次回④の公開は本線（main）の中身が使われるので、今日の成果をmainに合流させておきましょう。

1. 1GitHubで hello-ai を開き、Codeタブ（main）で index.html の中身が最新になっているか確認。
2. 2最新なら、このSTEPは完了！
3. 3もし「Compare & pull request」と出ていたり、別ブランチにしか変更が無ければ——プルリクエストを開いて Merge ボタンで本線に取り込む（Gitの回で学んだ“PR”の実物です）。
4. 4迷ったらAIに「ここまでの変更をmainブランチに反映して」と頼んでもOK。

おさらい：今日使った“言葉”

計画→OK→実行

大きな作業の前に計画だけ出させる、事故らない頼み方（プランモードの実践）。

index.html

トップページを意味する特別なファイル名。

修正ループ

頼む→見る→直す。一発で完璧を狙わないのがコツ。

<style>

HTMLファイルの中にCSSを書くための場所。

マージ（Merge）

ブランチの変更を本線（main）に合流させること。