UNIT 06 · LEARN BY BUILDING
部品を足して、LPを1枚に仕上げる。
UNIT 05で作った最初の画面を壊さずに、特徴・説明用の見本・利用の流れ・最後の案内を足します。今回は今あるファイルの書き換えなので、載せる文を先に見せてもらい、「編集」の確認を見てから許可します。
最初の画面の下に、必要な情報を積み上げる。
UNIT 05では、最初に見える部分と案内ボタンを作りました。今回は同じ index.html を編集し、読む人が内容を理解できる1枚のページへ育てます。
特徴・説明用見本・サービスの流れ・最後の案内を追加し、上から下まで一貫したLPをブラウザで読めるようにする。
LPを、上から見てみよう
Macをお使いの方へ
この教材の操作手順と画面写真は、Windowsのパソコンで実際に操作して確かめたものです。Macでは、フォルダの開き方やブラウザ、画面の一部が異なります。Macでの手順は、この教材では確かめていません。公式のデスクトップアプリを始めるもあわせて確認してください。
Claudeアプリの画面写真は、Windows 10 Home（22H2、64ビット）で2026年11月12日に撮影したものです（暗い色の表示）。名前・フォルダの場所・会話の履歴が写る部分は灰色で隠し、説明に必要な部分だけを切り抜いています。STEP 05 のページの写真は、同じパソコンの Microsoft Edge を画面を出さない形で動かして撮ったページの表示です（アドレス欄などの Edge の枠は写っていません）。黄色の枠は、ORIHATAが重ねた印です。
情報の量を増やす前に、読む人の疑問を考える。
最初の見出しで興味を持った人は、次に何を知りたくなるでしょうか。今回は3つの疑問に答える構成にします。
サービスの特徴を3つに整理する。
実績と混同しない説明用見本で伝える。
相談から制作までの流れを示す。
ここに表示しているのは教材用の構造図です。Claude Codeの実行画面や生成結果ではありません。
新しいセッションで、lp_learning と「手動」を見る。
ClaudeアプリのCodeで、サイドバーの「新規作成」から新しいセッションにし、UNIT 03のSTEP 03と同じ方法で lp_learning を選びます。前のUNITの会話を続ける必要はありません。Claudeは、ファイルを読んで今の状態を確かめます。
lp_learningホームフォルダの中
start.mdUNIT 03で作った練習の前提メモ（変えない）brief.mdUNIT 04で作った企画メモ（読むだけ・変えない）lp_sampleUNIT 05で作ったフォルダindex.html今回はこのファイルだけを書き換える
図1 今回の作業の対象（ORIHATAによる概念図です。実際の画面ではありません）
- 入力欄の下にlp_learningと出ているか見ます（写真1の左の枠）。
- 入力欄の下の右側が「手動」になっているか見ます（写真1の右の枠）。
- STEP 03の1通目をコピーして入力欄に貼ります。貼ったら、文の先頭が1通目になっているかを見てから送ります。
まだ変えずに、どこに何を載せるかを見せてもらう。
次の文をCodeの入力欄に貼り付けて送ります。brief.md と index.html を読んで、4つの部分をどこに置き、どんな文を載せるかを先に示し、まだ変更しないで待つように頼んでいます。
現在選択している lp_learning フォルダの中にある brief.md と、lp_sample フォルダの index.html を読み、 index.html に次の4つの部分を追加する計画を立ててください。 変更するファイルは、lp_sample フォルダの index.html の1つだけです。 追加する部分は次のとおりです。 - サービスの特徴：brief.md に根拠がある内容から最大3つ。無理に数をそろえず、3つ作れない場合は理由を計画段階で説明する。 - 説明用の見本：実物の画像は使わず、HTML と CSS で描いた「架空の説明用デザイン見本」と明記する - 利用の流れ：「相談 → 内容確認 → 制作」の3段階。架空のサービスの想定の流れと明記する - 最後の案内：「サービス内容を見る」ボタンを置き、同じページの #service へ移動する 守ることは次のとおりです。 - 今ある見出し・補足文・ボタン・#service の説明は、文章と見た目（CSS）を維持する。新しい部分の追加に必要なCSSは追加してよいが、既存部分の表示を意図的に変更しない。 - HTML と CSS は index.html の中にまとめる。外部の画像・Webフォント・API・ライブラリ・サーバーは使わない - 画面幅 375px でも、文字やボタンがはみ出さないようにする - 実績、利用者の声、価格、保証などを創作して載せない。brief.md にない情報が必要なら、載せずに教えてください - フォーム・購入・送信の機能は作らない brief.md と start.md は変更しないでください。ほかのファイルは作成・変更・削除しないでください。 コマンドの実行、公開、外部への送信はしないでください。 まず、4つの部分をどこに置き、どんな文を載せるかを示して、私の確認を待ってください。 まだファイルは変更しないでください。
送ると、Claudeが brief.md と index.html を読んで計画を示します。読むだけなので、許可の確認は出ませんでした（撮影時）。写真2では、「まだファイルは変更していません」（上の枠）と、置く場所、特徴の文と brief.md の根拠、特徴を3つにしない理由（下の枠）が示されました。
- 変更するのがlp_sample の index.html だけで、まだ変更していないこと
- 載せる文に、brief.md の根拠があること（実績・利用者の声・価格・保証・効果の約束が足されていない）。特徴は3つそろわなくてもよい
- 見本と流れに、「架空」「想定」と書くことになっていること
どれかが違っていたら、2通目を送らずに、直してほしいところを返信します。
計画でよければ変更を頼み、確認が出るたびに見て選ぶ。
計画でよければ、次の文を送ります。変えてよいものをlp_sample の index.html だけに限り、今ある部分は消さずに足すこと、ほかの操作が必要なら実行せずに説明して待つことを頼んでいます。
提示された計画どおりに、lp_sample フォルダの index.html を変更してください。 変更してよいのは、lp_sample フォルダの index.html だけです。今ある部分は消さずに、4つの部分を追加してください。 brief.md と start.md は変更しないでください。 コマンドの実行、外部への送信、公開、その他のファイル操作が必要になった場合は、実行せずに理由を説明して、私の確認を待ってください。
今回は今あるファイルを書き換えるので、確認は「Claude に index.html の編集を許可しますか？」と出ます（写真5の上の枠。UNIT 05は「書き込み」でした）。その下に、書き換える場所と、足す中身が表示されます。
- ファイル名がindex.htmlで、書き込み先がlp_learning の中の lp_sampleかを見ます。
- よければ「一度だけ許可」を押します。違っていたら「拒否」を押し、何をしようとしたのか説明してもらいます。
- 確認は何回か続けて出ることがあります（撮影時は2回。別の回では4回）。そのたびにファイル名を見て、index.html なら「一度だけ許可」を押します。
今回の書き換えだけを許可します。この教材ではこれを選びます。
今回の書き換えをさせません。名前や場所が違うときに使います（押したあとの動きは、この教材では確かめていません）。
撮影時、この確認に出たボタンは「拒否」と「一度だけ許可」の2つでした。コマンドの実行や、index.html 以外のファイルについて確認が出たら「拒否」を押します。別の回では、Claudeが作業中に見つけた小さな直し（今回足した部分の中だけ）を行い、返事の中で「計画にない小さな直しが1つあります」と自分から報告しました。
許可すると、Claudeが index.html を書き換えて、結果を知らせます。撮影時は、右側にアプリの中のブラウザの欄が開いてページが表示され、返事の下に「ブラウザで375px幅の表示を確認しますか？」という質問と、「375pxで確認して」「自分で確認する」のボタンが出ました（写真6）。
ページの先頭から最後まで、自分で読む。
- UNIT 05で開いたEdgeのタブが残っていれば、F5キー（または左上の更新ボタン）を押して読み込み直します。閉じていれば、UNIT 05のSTEP 05と同じく、index を右クリック →「プログラムから開く」→「Microsoft Edge」で開きます。
- 最初の画面が UNIT 05 と同じかを見ます（見出し・補足文・ボタン）。
- 下へ動かし、特徴・見本・流れ・最後の案内を読みます（写真7〜9）。
- 最後の「サービス内容を見る」を押して、上の「サービス内容」へ移動するか見ます。ページの先頭に戻って、最初のボタンも押して確かめます。アドレス欄の最後に
#serviceが付きます（UNIT 05の写真8と同じ）。
確かめる点
最初の画面が残っているか。特徴が brief.md に沿っているか。見本と流れに「架空」「想定」が書かれ、実際の制作実績や受付に見えないか。上と下のボタンが「サービス内容」へ移動するか。
スマホの幅
UNIT 05のSTEP 06と同じく、Edgeで F12 → Ctrl ＋ Shift ＋ M → 幅 375 にして、横にずれないか、文字やボタンが切れていないかを見ます。
料金や利用者の声が無いことは、今回の失敗ではありません。実在しない情報を足すより、今ある情報で正確に伝えることを優先します。ORIHATAの確認では、幅320〜1920pxの10通りで横へのはみ出しはなく、今ある部分（最初の画面とサービス内容）の見た目は、変更の前後で同じでした。
直す前に、どこが違ったかを伝える。
例えば「特徴のカードが横にはみ出す」「ボタンを押しても移動しない」など、実際に見た状態と期待する状態を分けて伝えます。
lp_sample/index.html の確認で問題を見つけました。 見た現象：［例：最後のボタンを押しても移動しない］ 期待する結果：［例：サービス内容の見出しまで移動する］ 今はファイルを書き換えず、原因の候補と修正案、変更する場所を短く教えてください。私が承認するまで変更しないでください。同じ症状を2回修正しても改善しない場合は停止して報告してください。
この依頼文は、この教材の確認では送っていません（撮影時は問題が起きなかったため）。直してもらうときも、STEP 04と同じく、許可の確認でファイル名と場所を見てから「一度だけ許可」を選びます。
うまくいかないときの対処。
何も送らずに、サイドバーの「新規作成」で新しいセッションにして、UNIT 03のSTEP 03の方法で lp_learning を選び直します。
まだ変える段階ではないので「拒否」を押し、「まず計画と載せる文を示して、私の確認を待ってください。」と返信します（この教材の確認では、1通目で許可の確認は出ませんでした）。
実績・利用者の声・価格・保証・「時間が減る」のような効果などです。2通目を送らずに、その文を載せないように返信します。
失敗ではありません。brief.md に根拠がある数だけにするよう頼んでいます。3つにしない理由が書かれているかを見ます。
すぐに停止を押します。変更の許可の確認が出ていたら「拒否」を押します。そのあとは、新しいセッションで1通目から始め直すと、条件が整理しやすくなります。
すぐに停止を押します。送った文は会話に残るため、新しいセッションで1通目から始め直します。
「拒否」を押し、変えてよいのは lp_sample の index.html だけであることを、もう一度伝えます。
F5 を押して読み込み直します。開いているのが lp_sample の index.html か、アドレス欄でも確かめます。
何がどう変わったかをメモし、STEP 06の依頼文で原因を調べてもらいます。直してもらうときも、許可の確認を見てから選びます。
同じ操作をくり返さず、いったん止めます。表示された文章と、自分がした操作をメモして、公式のヘルプを確かめます。
公式資料：デスクトップアプリを始める。サービスの仕様や画面は変わることがあります（2026年11月12日に確認）。
作れたことを、目で確認してから次へ。
手を動かしたことに加えて、なぜそうするのかを言えるかを確かめます。言えないものがあれば、そのSTEPを読み直してください。
チェックはこの画面上の自己確認用です。Codeの実行結果を自動で調べているわけではありません。
確かめの問題（答えは押すと開きます）
Q1. Claudeが、特徴を2つだけにする計画を出しました。失敗ですか？
失敗ではありません。brief.md に根拠がある数だけにするよう頼んでいます。3つにしない理由が書かれていて、作り話がなければ、そのまま進めて大丈夫です。
Q2. 返事のあと、入力欄に「この計画で index.html を変更してください」と出ています。そのまま送ってよいですか？
送りません。短い文だと、「変えてよいのは index.html だけ」などの条件が付きません。STEP 04の2通目を貼って送ります。
Q3. 2通目のあと、許可の確認が3回続けて出ました。どうしますか？
毎回ファイル名と場所を見て、lp_sample の index.html なら「一度だけ許可」を押します。ほかのファイルやコマンドの実行なら「拒否」を押します。
次は、完成したLPをスマホの幅で検品します。見た目だけでなく、長い文章やボタンの押しやすさも確認して改善を依頼します。