③ トップページ：決まりを使ってページを組む

受講生

ページの構成も、
AIにまかせていいの？

先生

区切りの順番は、あなたが決めて書きます。
お客さんを予約までどう連れていくかは、
デザイナーの考えどころです。

今回は「体験レッスンの予約」がゴールです。一番上で予約ボタンを見せ、はじめての人の不安を消してから、クラス・料金・先生・アクセスと進み、最後にもう一度予約、という順にしました。

見本：Claude Code でのトップページ作り

録画（早送り）頼んでから、index.html ができるまで（早送り）。途中で一度、画面を撮るのを断っています

AIが作った実物Claude Code が作った index.html の一番上（パソコンの幅）

あなたの番：トップページを作ってもらおう

貼る文（全文）

style.html の決まりと css/style.css を使って、ひだまりヨガのトップページを index.html に作ってください。内容は 教室のメモ.txt から。上から、一番上（キャッチコピーと体験レッスンの予約ボタン）、はじめての方へ、クラスと時間、料金、先生の紹介、アクセス、予約（LINEと電話）の順にしてください。写真はまだ無いので、写真が入る場所は色の四角にして「写真」と書いておいてください。

受講生

作り終わったのに、
また確認が出た…

先生

Chrome でページを撮って、
自分の目で確かめようとしています。
まかせてもいいし、断ってもいいです。

撮影では、ページの確認は自分ですることにして、「3. No」で断りました。断っても、作った index.html は消えません。

断ったあとに貼る文（全文）

画面での確認はわたしがします。作ったページの中身を短く教えてください。

こうなっていればOK

スマホでも見てみよう

パソコンで整っていても、スマホではどうでしょう。撮影では、スマホの幅（375px）で見ると、上のメニューが右にはみ出して、「アクセス」と「予約」が画面の外に切れていました。

AIが作った実物同じ index.html をスマホの幅で見たところ（直す前）

Chrome なら、ページの上で右クリック →「検証」→ 左上のスマホの形のボタンで、スマホの幅で見られます。

つまずきやすいところ

※「実際の画面」「録画」は、2026年10月19日に吉田のiMac（Mac）のターミナルで、Claude Code 2.1.303 を動かして撮ったものです。確認の画面は「毎回たずねる」設定のまま、毎回中身を読んでから選びました。アカウントの情報（メールアドレス・プラン名）は消してあります。どのプランで同じことができるか、Windows でどう見えるかは、この講座では確かめていません。作業時間は、画面に出た Claude Code の作業時間（「✻ … for 1m 14s」など）です。