スマホで見つけた崩れを言葉にして伝え、直してもらいます。
受講生
スマホ対応は、
細かい直しが多くて大変…
先生
見つけるのはあなた、
直すのは Claude Code です。
どこが・どう崩れているかを書きます。
見本：Claude Code でのスマホ対応
このiMacでの実測（2026年10月19日・Claude Code）
頼んでから終わるまで：42秒（画面の表示）
確認の画面：4回（index.html の書きかえ4）
直ったところ：メニューを1つのボタンに（押すと縦に開く）・画面の下にいつも予約ボタン・パソコンの見た目はそのまま
ここがポイント
「パソコンでの見た目は変えないでください」と書くと、スマホの幅のときだけ変わるように直してくれました。変えてほしくない所も書くのがコツです。「画面での確認はわたしがします」も最初に書いておくと、AIが自分で画面を撮ろうとしません。
あなたの番：スマホの崩れを直してもらおう
まず、レッスン3の終わりのように、自分の index.html をスマホの幅で見て、崩れている所を探します。見本と同じ崩れなら、この文をそのまま使えます。ちがう崩れなら、文の前半を、見たままに書きかえてください。
お願いカード
見つけた崩れを書くメニューはボタン1つ予約ボタンを画面の下にパソコンの見た目は変えない確認はわたしがする貼る文（全文）
index.html をスマホ（横幅375px）で見ると、上のメニューが右にはみ出して、アクセスと予約が画面の外に切れてしまいます。メニューはまとめてボタン1つにし、体験レッスンの予約ボタンは画面の下にいつも出るようにしてください。パソコンでの見た目は変えないでください。画面での確認はわたしがします。直したところを箇条書きで教えてください。
今回は、今あるファイルを書きかえる確認（Do you want to make this edit to index.html?）が4回出ました。ファイルの名前を見て、1. Yes で進めます。
こうなっていればOK
AIが「決まりとぶつかる」と教えてくれた
Claude Code は直したあとに、「開いた直後は、上の予約ボタンと下の予約ボタンが同じ色で2つ見える。スタイルガイドの『かき色のボタンは1画面に1つ』とぶつかる」と書いてきました。直すかどうかは、あなたが決めます。この講座では、レッスン6の見直しでもう一度出てくるので、そこで直します。
つまずきやすいところ
※「実際の画面」「録画」は、2026年10月19日に吉田のiMac（Mac）のターミナルで、Claude Code 2.1.303 を動かして撮ったものです。確認の画面は「毎回たずねる」設定のまま、毎回中身を読んでから選びました。アカウントの情報（メールアドレス・プラン名）は消してあります。どのプランで同じことができるか、Windows でどう見えるかは、この講座では確かめていません。作業時間は、画面に出た Claude Code の作業時間（「✻ … for 1m 14s」など）です。
- 崩れは、どこが・どう崩れているかを見たまま書く
- 変えてほしくない所（パソコンの見た目）も書いておく
- AIの「気になる点」は、直すかどうかをあなたが決める
次のレッスンでは、「写真」の四角に写真を入れていきます。