⑤ LPの見出しを、選んだコピーに直す | SkillhubAI(スキルハブエーアイ)

⑤ LPの見出しを、選んだコピーに直す

このレッスンでできること

LP(申込みのページ)の見出しと説明文だけを直してもらい、前と後を見比べます。

受講生

ページのファイルって、
中を見てもよく分からなくて…

先生

中のコードは読まなくて大丈夫。
「どこを・何に直すか」を日本語で書くと、
その所だけを直してくれます。

LP(ランディングページ)=広告やメールのリンクから来た人が、最初に見る申込みのページです。いちばん上の見出しで、読み進めるかが決まります。

見本:見出しが、選んだコピーになった

録画(早送り)頼んでから、LP が直るまで(早送り)
AIが作った実物前(index_前.html)
AIが作った実物後(index.html)

このiMacでの実測(2026年10月19日・Claude Code 2.1.302・Sonnet 5.5)

たのんでから終わるまで:23秒(確認に答えた時間をふくむ)

確認を求められた回数:2回(前の版をコピーして残す・直す)

変わったのは2行だけ(見出しと説明文)。ボタンや料金の所は、そのまま

実際の画面直す前の確認の画面。赤枠:消える2行(−)と、入る2行(+)

説明文は、メモにあること(毎週木曜 20:30〜・Zoom・録画は終わったあと7日間)だけで書かれました。Claude Code も、そう書き添えていました。

ここがポイント

「前の版を残して」と頼むと、気に入らないときにすぐ元にもどせます。ページを直すときの、おまもりです。

あなたの番:LP の見出しを直そう

/clear で新しい会話にしてから貼ります。

お願いカード

決めたこと.txt とペルソナ.txt を読む見出し=決めたコピー説明文=20:30に出られない人への答え前の版を index_前.html に残す

貼る文(全文)

「決めたこと.txt」と「ペルソナ.txt」を読んで、LP/index.html のいちばん上の見出しと、その下の説明文を直してください。見出しは、決めたキャッチコピーにします。説明文は1〜2行で、ペルソナがためらう理由(木曜20:30に出られない)に答える文にしてください。直す前のファイルは LP/index_前.html として残してください。教室のメモに書いていないことは書かないでください。
実際の画面赤枠:貼った文

2回聞かれます。1回目は cp -p index.html index_前.html(前の版のコピーを作るだけ。元は変わらない)。2回目は index.html を直す画面。赤い行と緑の行が2行ずつかを見てから 1番。

実際の画面赤枠:前の版をコピーするコマンドと、はいの選択肢
実際の画面終わると、何をどう直したかの報告が出る
1Finder で LP フォルダを開き、index.html をダブルクリックしてブラウザで見る
2index_前.html も開いて、見出しを見比べる

こうなっていればOK

つまずきやすいところ

こうなったら:ページの見た目がくずれた
こうする:「LP/index_前.html を index.html にもどしてください」と頼みます。前の版があるので、すぐもどせます。
こうなったら:見出しが2行に折れる位置が変
こうする:「見出しの改行は『なる、』のあとに」のように、場所を書いて頼みます。
こうなったら:本物のホームページにも反映される?
こうする:いいえ。直したのはパソコンの中のファイルだけです。公開しているページに入れる方法は、使っているサービスによってちがいます。

※「実際の画面」は、2026年10月19日に吉田のiMac(Mac)のターミナルで、Claude Code(2.1.302)を動かして撮ったものです。モデルは Sonnet 5.5。確認の画面は、最初の設定のまま(毎回たずねる)でした。撮影用の作業フォルダの場所は /private/tmp/… です(あなたの画面では、フォルダを置いた場所が出ます)。どのプランで同じことができるか、Windows でどう見えるかは、この講座では確かめていません。アカウントの情報は消してあります。AI の答えの文は、毎回すこしずつちがいます。

まとめ
  • 「どこを・何に」を日本語で書くと、その所だけが直った
  • 前の版を残しておくと、見比べられて、もどせる
  • 直す画面の赤い行・緑の行で、変わる所を確かめた
できました! ページの一番上が、お客さんの言葉になりました。
最後のレッスンでは、申込みの記録(CSV)を集計して、次に何をするかを決めます。