LP・Webページを作る
この章では、1枚もののWebページ「LP（ランディングページ）」を作ります。募集の案内やお店の紹介など、日常でいちばん出番が多いページです。定番の「型」を覚えれば、指示はとても簡単になります。
- LP（ランディングページ）がどんなものか、人に説明できる
- LP の定番構成（見出し・特徴3つ・料金・申し込みボタン）を覚える
- 構成を番号付きリストにして、Claude Design に一度で伝えられる
- できたページを「1ファイルのWebページ」として書き出し、自分のパソコンで開ける
LP（ランディングページ）とは何か
LP はランディングページの略で、1枚ものの縦長のWebページのことです。むずかしく考える必要はありません。紙の「案内チラシ」を、そのままWebにしたものだと思ってください。
ふつうのWebサイトは「トップページ」「会社案内」「お問い合わせ」など、たくさんのページでできています。それに対して LP は、たった1ページに言いたいことを全部のせます。読む人は上から下へスクロールするだけで、内容がすべて分かります。
LP が向いているのは、たとえばこんな場面です。
- サークルやイベントの参加者を募集したいとき
- お店や教室の紹介ページを1枚だけ作りたいとき
- 新しいサービスや商品を、まず1ページで説明したいとき
ランディングは英語で「着地」のことです。広告や検索から来た人が最初に「着地する」ページなので、この名前が付きました。名前の由来は覚えなくても大丈夫です。「案内チラシのWeb版」とだけ覚えてください。
定番の構成を覚える — LP には「型」がある
世の中の LP は、じつはほとんど同じ「型」でできています。上から順に、次の4つのブロックを並べるだけです。
| 順番 | ブロック | 中身 |
|---|---|---|
| ① | 最初の大きな見出しと写真 | いちばん伝えたい一言と、目を引く写真。「ヒーローセクション」とも呼ばれます |
| ② | 特徴・良いところ3つ | 「なぜおすすめか」を3つに絞って紹介します |
| ③ | 料金や日時 | 参加費・開催日・場所など、具体的な情報を表や箇条書きで |
| ④ | 申し込み・連絡ボタン | 「申し込む」「連絡する」と書いた大きなボタン。CTA（行動を促すボタン）と呼ばれます |
ページの形をイメージすると、こうなります。
図：LP の定番の型。ほとんどの募集ページ・案内ページはこの並びでできています。
なぜこの順番かというと、読む人の気持ちの流れに合っているからです。まず①で「お、面白そう」と思ってもらい、②で「良さそうだな」と納得してもらいます。③で「具体的にいくら？いつ？」の疑問に答え、最後の④で「じゃあ申し込もう」と行動につなげます。
CTA は「Call To Action」の略で、日本語にすると「行動を促す呼びかけ」です。要するに「申し込む」「予約する」などの大きなボタンのことです。LP の話ではよく出てくる言葉なので、「CTA ＝ 申し込みボタン」と覚えておくと便利です。
構成をリスト化して頼む — 伝わる指示のいちばん簡単な形
型が分かったら、頼み方も決まります。第4章（伝わる指示の書き方）で学んだとおり、構成を番号付きのリストにして渡すのがいちばん確実です。
たとえば、こんな形です。
1枚もののWebページ（ランディングページ）を作ってください。 構成は上から順に、次のとおりです。 ① 目を引く大きな見出しと写真 ② 特徴・良いところを3つ ③ 料金と日時の案内 ④ 申し込みボタン
この形の良いところは、Claude が迷わないことです。「いい感じの募集ページを作って」とだけ頼むと、Claude は構成を推測するしかありません。番号付きリストなら、ページの設計図をそのまま渡していることになります。
逆に、次のような頼み方は伝わりにくいので避けましょう。
- 「いい感じの」「素敵な」→ 人によって意味が違います。「親しみやすく」「余白多めで」「業務用らしく堅めに」など、具体的な形容に言いかえます
- 色の指定なし → できれば「藍色系で」のように色の系統まで伝えます
また、指示があいまいなときは、Claude のほうから「配色の希望はありますか？」のような逆質問が来ることがあります。面倒がらずに答えると、仕上がりの精度が上がります。
例題：写真散歩サークルの参加者募集ページ
それでは、この章の主役の例題です。「週末の写真散歩サークル」のメンバーを募集する LP を、最初から最後まで作ってみましょう。
週末にカメラを持って近所を散歩するサークルの、参加者募集ページを作ります。定番の4ブロック構成をそのまま使います。下のプロンプトは、そのままコピーして使える完成形です。
- 新しいプロジェクトを作る
ホーム画面で「Create（新規作成）」を押し、デザインの種類を選んで名前を付けます。名前は「写真散歩サークル募集LP」などにしましょう。 - 左のチャットに、下のプロンプトを貼り付ける
コピーボタンでコピーして、そのまま貼り付けて送信します。 - 逆質問が来たら答える
「写真の雰囲気はどうしますか？」のような質問が来たら、希望を答えます。おまかせでよければ「おまかせします」でも構いません。
週末の写真散歩サークル「あさんぽ写真部」の参加者募集ページを作ってください。 1枚もののWebページ（ランディングページ）で、スマホでも読みやすくしてください。 ■ 読む人：カメラを始めたばかりの大人（初心者歓迎の雰囲気で） ■ 雰囲気：親しみやすく、明るく。余白は多めに ■ 色：やわらかい緑系を基調に 構成は上から順に、次のとおりです。 ① 大きな見出しと写真 見出し「カメラ片手に、週末さんぽ。」 サブの一言「初心者歓迎。撮って、歩いて、おしゃべりする会です」 朝の公園を散歩しているような、明るい写真のイメージ ② このサークルの良いところ3つ ・初心者ばかりなので気楽（スマホのカメラでもOK） ・毎回ちがう散歩コース（公園、商店街、川沿いなど） ・撮った写真をお茶しながら見せ合う時間つき ③ 開催日と参加費 ・毎月 第2・第4土曜日の朝 9時〜11時 ・参加費：1回 500円（お茶代込み） ・集合場所：毎回変わります（申し込み後にご案内） ④ 申し込みボタン 「参加を申し込む」という大きなボタン その下に小さく「見学だけでも大歓迎です」と添える
生成されたら、右のキャンバスを見てください。①〜④が指示どおりの順番で並んでいるか、見出しの文言がそのまま使われているかを確認します。気になるところがあれば、第3章（修正の4つの方法）のやり方で直していきましょう。文言の直しは、テキストをクリックしてその場で書き換えるのが最速です。
できたページは「動く試作品」— 通しで確かめる
ここが LP 作りの楽しいところです。Claude Design が作るのは、ただの絵や下書きではありません。実際に動く試作品です。
右のキャンバスに表示されたページを、本物のWebページと同じように、①の見出しから④の申し込みボタンまで通して確かめられます。紙のチラシの下書きを眺めるのではなく、「完成後に読む人が見るのと同じ体験」に近い形で、その場で試せるわけです。
図：できあがった LP はキャンバスでそのまま通し読みして確かめられます。直したい点は左のチャットで伝えます。
確認するときは、読む人になりきって、上から下まで一度通して読むのがコツです。次の3点をチェックしましょう。
- ①の見出しだけで「何の募集か」が伝わるか
- ③を読めば「いつ・いくら」の疑問がすべて解けるか
- ④のボタンは、迷わず見つかる大きさ・目立ち方か
仕上げ：1ファイルのWebページとして書き出す
ページが完成したら、書き出して手元に保存しましょう。LP の場合におすすめなのは「Standalone HTML（スタンドアロン HTML）」という形式です。
- 右上の「Export（書き出し）」を押す
キャンバスの右上にあるボタンです。 - 形式の一覧から「Standalone HTML」を選ぶ
「1ファイルにまとまったWebページ」という意味です。見た目の飾り（CSS）も全部この1ファイルに入っています。 - 保存されたファイルをダブルクリックする
お使いのブラウザ（Edge や Chrome）で開き、本物のWebページとして表示されます。インターネットに公開しなくても、自分のパソコンで確認できます。
Export のメニューには「ZIP」という形式もあります。似ているようで用途が違うので、表で整理しておきます。
| 形式 | 中身 | 向いている場面 |
|---|---|---|
| Standalone HTML | 1ファイルにすべて入ったWebページ | ダブルクリックですぐ確認したい。メールで1ファイルだけ送りたい。Webに掲載・埋め込みしたい |
| ZIP | HTML・CSS・画像など部品一式の詰め合わせ | Webに詳しい人に部品ごと渡して、続きの作業をしてもらいたい |
迷ったら Standalone HTML で大丈夫です。「1ファイル＝そのまま見られる完成品」「ZIP＝部品の詰め合わせ」と覚えてください。書き出しと共有の全体像は、第8章（書き出しと共有）でくわしく扱います。
書き出した HTML ファイルは、ダブルクリックで開いて、上から下まで通しで読み直してください。日時・料金・連絡先などの事実の間違いは、デザインがきれいでも台なしになります。特に③のブロックは指差し確認をおすすめします。
練習問題
例題のプロンプトを下敷きにして、あなた自身の趣味や活動（囲碁の会、読書会、ウォーキング仲間など、何でも構いません）の参加者募集 LP を作ってください。①〜④の4ブロック構成は変えずに、中身だけを差し替えるのがポイントです。
ヒントを見る
例題のプロンプトをコピーして、「あさんぽ写真部」の部分を自分の活動に書き換えるところから始めましょう。②の「良いところ3つ」がいちばん悩むところです。友だちを誘うとき口で言う内容を、そのまま3つ書けば十分です。
模範解答を見る
読書会の例です。構成の型は例題とまったく同じで、中身だけ差し替えています。
月1回の読書会「よりみち読書会」の参加者募集ページを作ってください。 1枚もののWebページ（ランディングページ）で、スマホでも読みやすくしてください。 ■ 読む人：本は好きだが、読書会は初めての大人 ■ 雰囲気：落ち着いていて、あたたかい。余白は多めに ■ 色：深い藍色系を基調に 構成は上から順に、次のとおりです。 ① 大きな見出しと写真 見出し「読みかけの本、持っておいで。」 サブの一言「感想は一言でも大丈夫。聞いているだけの参加もOKです」 カフェで本を読んでいるような、落ち着いた写真のイメージ ② この会の良いところ3つ ・課題本なし。いま読んでいる本をそのまま持ってくるだけ ・1人ずつ話す時間は5分まで。長話にならない安心設計 ・帰りに「次に読みたい本」が必ず1冊見つかる ③ 開催日と参加費 ・毎月 第3日曜日の午後 2時〜4時 ・参加費：1,000円（飲み物代込み） ・場所：駅前のカフェ（申し込み後にご案内） ④ 申し込みボタン 「読書会に申し込む」という大きなボタン その下に小さく「初参加の方を優先しています」と添える
例題で作った写真散歩サークルの LP を使って、④の申し込みボタン（CTA）だけ文言と色を変えた2案を作ってください。そして、上から通しで読んだとき「どちらのほうが押したくなるか」を自分の目で比べてください。ボタン1つで、ページ全体の印象が変わることを体感するのが狙いです。
ヒントを見る
1案目を確認してから、チャットで「ボタンの文言と色を変えた別案にしてください」と頼むと、2案目が作れます。文言は「参加を申し込む」（まじめ）と「まずは見学してみる」（気楽）のように、読む人の気持ちのハードルが違うものにすると、比べがいがあります。
模範解答を見る
1案目ができている状態で、チャットに次のように頼みます。
申し込みボタンだけ変えた別案を作ってください。 ・文言を「参加を申し込む」から「まずは見学してみる」に変える ・ボタンの色を、緑系からオレンジ系に変える ・ボタン以外の部分は変えない
比べるときの観点は「どちらが押すのが怖くないか」です。初心者向けのサークルなら、「見学してみる」のような気楽な文言のほうが押しやすいことが多いです。正解は1つではないので、自分ならどちらを押すかで選んで構いません。ボタンの色だけを少し直したいときは、ボタンをクリックして「Adjust（調整）」のスライダーを使う方法もあります。
次の項目に自信をもって「はい」と言えたら、この章は合格です。