先生と生徒の会話形式で理解しよう

生徒

「ランディングページってよく聞きますが、どんなものなんですか？」

先生

「ランディングページ、略してLPは、何かの商品やサービスを紹介するための1枚の縦長ページです。」

生徒

「Bootstrapを使えば、そういうページも作れるんですか？」

先生

「もちろんです！今回はヒーローセクション・CTAボタン・フッターという3つの基本的な構成で、初心者向けのLPを作ってみましょう。」

1. ランディングページ（LP）とは？

ランディングページ（Landing Page）とは、広告や検索結果から訪問者が最初にアクセスする特別なページです。見た人の興味を引きつけて、何か行動（購入・登録など）をしてもらうことが目的です。

LPは1ページで完結していて、ページをスクロールしながら情報を伝えていくレイアウトが多いのが特徴です。

2. ヒーローセクションで最初の印象をつかもう

「ヒーローセクション」とは、ページの一番上にある大きな画像やタイトルのことです。ここで伝えたいメッセージやサービスの名前を目立たせます。


<section class="bg-light text-center py-5">
    <div class="container">
        <h1 class="display-4 fw-bold">あなたのサービスを一言で伝える！</h1>
        <p class="lead">魅力的な紹介文をここに書きましょう。</p>
    </div>
</section>

ブラウザ表示

3. CTAボタンで行動を促す

CTAとは「Call To Action（コール・トゥ・アクション）」の略で、「ボタン」や「リンク」で何かの行動をしてもらう部分です。「無料で登録」「資料を請求」などの文言がよく使われます。

ボタンは大きく目立つようにして、使いやすさを重視しましょう。


<section class="text-center py-4">
    <button class="btn btn-primary btn-lg">
        今すぐ申し込む
    </button>
</section>

ブラウザ表示

4. フッターで信頼感を高めよう

ページの一番下にある「フッター」には、会社名・連絡先・コピーライト・プライバシーポリシーへのリンクなどを表示します。

訪問者が「この会社は大丈夫かな？」と不安にならないように、情報を明確にしておきましょう。


<footer class="bg-dark text-white text-center py-3">
    <p>&copy; 2025 あなたの会社名. All Rights Reserved.</p>
</footer>

ブラウザ表示

5. LPスターター全体の構成を組み立てよう

今まで紹介したヒーローセクション・CTAボタン・フッターを1ページにまとめると、シンプルなランディングページの完成です。

ページ全体を組み立てると、以下のような構成になります。


<section class="bg-light text-center py-5">
    <div class="container">
        <h1 class="display-4 fw-bold">サービス名やキャッチコピー</h1>
        <p class="lead">お客様の心をつかむ紹介文</p>
    </div>
</section>

<section class="text-center py-4">
    <button class="btn btn-success btn-lg">
        詳しく見る
    </button>
</section>

<footer class="bg-dark text-white text-center py-3">
    <p>&copy; 2025 LP株式会社. 無断転載禁止。</p>
</footer>

ブラウザ表示