UNIT 07 · LEARN BY BUILDING
スマホで見て、問題を見つけて直す。
完成したLPを狭い画面で検品します。Claudeには読むだけで点検してもらい、自分でもEdgeで見てから、直す点を1つだけ選んで直してもらいます。
「作れた」から「安心して読める」へ。
パソコンでうまく見えても、スマホの幅では文字が詰まったり、ボタンが押しにくくなったりします。今日は新しい機能を作るよりも、作ったページを自分の目で検品する力を身につけます。
375px・390px程度の画面幅でLPを確認し、問題があれば現象を言葉にしてClaude Codeに修正案を出してもらい、修正後に再確認できる。
Macをお使いの方へ
この教材の操作手順は、Windowsのパソコンで実際に操作して確かめたものです。Macでは、フォルダの開き方やブラウザ、画面の一部が異なります。Macでの手順は、この教材では確かめていません。公式のデスクトップアプリを始めるもあわせて確認してください。
この UNIT の依頼文は、2026年11月12日に Windows 10 Home のパソコンで、Claudeアプリの Code に実際に送って確かめたものです。返事の引用は、そのときの会話の記録から写しています。ページの写真は、同じパソコンの Microsoft Edge を画面を出さない形で動かして撮ったページの表示です（Edge の枠は写っていません）。
同じページでも、画面幅が変わると並び方が変わる。
まずは下の教材内デモで「PC表示」と「スマホ幅」を切り替えてみてください。これは自分が作ったLPの検査結果ではありません。表示の仕組みを理解するための見本です。
あなたの伝えたいことを、すっきり届ける。
画面が狭いと、3つのカードは縦並びになります。
index.html を開いて確認してください。何が変わった？
横並びだったカードが、スマホ幅で縦に積まれます。文字が長くなるとカードも縦に伸びます。狭くしても文章を読めるかが検品のポイントです。
作成したHTMLを開き、5つの観点で確認する。
PCで lp_sample/index.html を開き、まずはブラウザのウィンドウ幅をゆっくり狭くします。できる方はChromeやEdgeの開発者ツールで幅を375px・390pxに指定してください。
画面を横にスクロールしないと文字が読めない状態になっていない。
見出しが途中で欠けず、拡大しなくても説明を読める。
PCで3列の特徴カードが、スマホ幅で狭い3列のまま残っていない。
ボタン同士が密集せず、押すと意図した場所へ移動する。
無理のない範囲で長い説明文を想定し、文字がはみ出していないか目で見る。実際のファイルを書き換えて試すときは、先に保存方法を確認する。
| 見つけた現象 | Claude Codeへ伝える言い方 |
|---|---|
| カードの文字が細く詰まる | 「スマホ幅では特徴カードを縦に並べたい」 |
| ボタンが画面からはみ出る | 「幅375pxでボタンが右にはみ出す」 |
| 見出しが途中で切れる | 「この見出しを省略せず全部表示したい」 |
変えずに、スマホの幅で問題がないかを調べてもらう。
- ClaudeアプリのCodeで、サイドバーの「新規作成」から新しいセッションにし、UNIT 03のSTEP 03と同じ方法で lp_learning を選びます。
- 入力欄の下にlp_learning、右側に「手動」と出ているかを見ます（UNIT 06の写真1と同じ画面です）。
- 下の1通目をコピーして貼り、文の先頭が1通目になっているかを見てから送ります。
現在選択している lp_learning フォルダの中にある lp_sample フォルダの index.html を読み、 スマホの幅で見たときに問題がないかを点検してください。 点検することは次のとおりです。 - 画面幅 375px と 390px で、横にはみ出したり、文字が欠けたりしないか - 特徴や流れのカードが、狭い画面で縦に並び、読みやすいか - 見出しや長い文が、不自然なところで切れないか - ボタンが押しやすい大きさと間隔か、押したあと同じページの #service へ移動するか - 実績、利用者の声、価格、保証など、根拠のない内容が入っていないか ファイルは読むだけにして、作成・変更・削除はしないでください。 コマンドの実行、公開、外部への送信はしないでください。 コードから確かめられたことと、画面で見ないと分からないことを分けて報告してください。 直したほうがよい点があれば、直し方の案と変更するファイルを示すだけにして、私の確認を待ってください。
この1通目は、ファイルを読むだけです。この教材の確認では、Claudeは index.html を探して読み、許可の確認は出ませんでした。返事は「コードから確かめられたこと」と「画面で見ないと分からないこと」に分かれていました。
- 375px・390px で横にはみ出す原因は見つからない。カードは 767px 以下で縦1列になる
- ボタンの高さは約59pxで、押す目安の44pxを超えている。押すと #service へ移動する
- 実績・利用者の声・価格・保証はない。「架空」の注記が4か所ある
- ボタンの白い文字と背景 #d9573b の色の差（コントラスト比）は約3.9:1で、目安の4.5:1に届かない
- 画面で見ないと分からないこと：日本語の改行の位置、端末の文字の大きさを変えたときの見え方 など
- 直し方の案を4つ示し、「ご確認をお待ちします」で止まった（ファイルは変えていない）
ORIHATAが同じページを画面を出さない Edge で10通りの幅に表示して確かめたところ、はみ出し・カードの並び・ボタンの高さ・#service への移動・色の差（3.91:1）は、Claudeの「コードから確かめられたこと」と一致しました（ボタンの幅だけは、Claudeの見積もり約208pxに対して実際は185px）。Claudeの報告は手がかりで、最後は自分の目で確かめます。
- ファイルを作成・変更していないこと（許可の確認が出ていない）
- コードで確かめたことと、画面で見ないと分からないことが分けて書かれていること
見つかった点のうち、1つだけを直してもらう。
STEP 02 で自分が見た結果と、Claudeの報告を並べて、直す点を1つだけ選びます。この教材では、本当に直す価値があったボタンの文字の読みやすさを選びました。直す範囲を「ボタンの背景の色の指定だけ」に絞って頼みます。
点検の結果を確認しました。ボタンの文字を読みやすくする点だけを直してください。 変更してよいのは、lp_sample フォルダの index.html の中の、ボタンの背景の色の指定だけです。 白い文字と背景の色の差（コントラスト比）が 4.5:1 以上になるようにしてください。index.html ですでに使っている色で足りる場合は、その色を使ってください。 文の内容、ほかの部分の色、レイアウトは変えないでください。 brief.md、start.md、lp_editor の中のファイルは変更しないでください。ほかのファイルは作成・変更・削除しないでください。 コマンドの実行、公開、外部への送信はしないでください。 終わったら、変更前と変更後の色と、変更した場所を教えてください。
- 「Claude に index.html の編集を許可しますか？」と出たら、ファイル名が index.html で、場所が lp_sample かを見ます（UNIT 06の写真5と同じ確認です）。
- よければ「一度だけ許可」を押します。この教材の確認では、確認は1回でした。
- 変更した場所：index.html の101行目（.button の background の1行）
- 変更前
var(--accent)＝#d9573b（約3.9:1）→ 変更後var(--accent-dark)＝#b8452c（約5.4:1）。新しい色はファイルの中ですでに使っている色で、色の定義は増やしていない - 残った問題：マウスを乗せたときの色の指定も同じ色なので、今は乗せても色が変わらない。「背景の色の指定だけ」という指示だったので、この行は変えていない
最後の「残った問題」は、頼んだ範囲の外のことを、勝手に直さずに報告してくれた例です。スマホでは「マウスを乗せる」操作がないので、この教材では直していません。直したいときは、また1つだけを選んで頼みます。
ORIHATAが直す前に取っておいた控えと比べたところ、変わったのは101行目の1行だけでした。色の差は 5.35:1 になり、はみ出し・カードの並び・#service への移動は直す前と同じでした。
同じ手順で、もう一度自分の目で見る。
- Edgeのタブで F5 を押して読み込み直します。
- STEP 02 と同じく、F12 → Ctrl ＋ Shift ＋ M → 幅 375 にして、ボタンの色が変わり、ほかは変わっていないかを見ます。
- ボタンを押して、「サービス内容」へ移動するかを見ます。
うまくいかないときの対処。
まだ変える段階ではないので「拒否」を押し、「ファイルは読むだけにして、私の確認を待ってください。」と返信します（この教材の確認では、1通目で許可の確認は出ませんでした）。
失敗ではありません。STEP 02 で自分が見た結果と比べ、自分も問題がなければ、2通目は送らずに次の UNIT へ進んで大丈夫です。
「拒否」を押し、変えてよいのは lp_sample の index.html の、選んだ部分だけであることを、もう一度伝えます。
何がどう変わったかをメモし、「変更前と変更後の違いを全部示してください。まだ直さないでください。」と頼んで、変わった場所を確かめます。
公式資料：デスクトップアプリを始める。サービスの仕様や画面は変わることがあります（2026年11月12日に確認）。
「検品できる」ことも、個人開発の力。
チェックはこの画面上の自己確認用です。Codeの実行結果を自動で調べているわけではありません。
確かめの問題（答えは押すと開きます）
Q1. Claudeが「問題なし」と答えました。自分で見る必要はありますか？
あります。Claudeはコードを読んで判断しているので、画面で見ないと分からないこと（改行の位置など）が残ります。最後は自分の目で確かめます。
Q2. 見つかった点を全部まとめて直してもらってもよいですか？
最初は1つずつにします。まとめて直すと、どの変更で何が変わったのかが分かりにくくなります。
Q3. Claudeが「頼まれた範囲の外なので変えていない」と報告しました。どうしますか？
よい報告です。その点を直したいかを自分で決め、直すなら、また1つだけを選んで頼みます。
ページの色・文字・余白の決まりを DESIGN.md に書き残し、次に直すときも見た目をそろえられるようにします。