SKIP TO CONTENT

コンバージョン重視のランディングページを作る

beginner~15 0/5 ステップ

高コンバージョンのランディングページを作る

コンバージョンにつながるランディングページは、力強いメッセージ、明確なベネフィット、社会的証明(ソーシャルプルーフ)、そして強力なCTA(コール・トゥ・アクション)を組み合わせて、訪問者に行動——登録、ダウンロード、購入——を促します。

このレッスンでは、見出し、バリュープロポジション、3枚のベネフィットカード、顧客の推薦の声、CTAセクションを備えた本格的なマーケティングランディングページを作ります。終わる頃には、実際にコンバージョンを生み出せるプロ品質のページが手に入ります。

手順

1

背景グラデーション付きのコンテナ(sectionタグ)の中に、h1の見出しとサブ見出しを備えたヒーローセクションを作りましょう

ヒント: 使い方: `<section class="py-20 px-4 bg-gradient-to-r from-indigo-600 to-blue-600 text-white text-center"><h1 class="text-5xl font-bold mb-4">見出し</h1><p class="text-xl">サブ見出し</p></section>`

2

グリッドレイアウトで3枚のベネフィットカードを追加しましょう。各カードには絵文字、ベネフィットのタイトル、説明文を入れます

3

blockquoteと顧客の名前・肩書きを備えた推薦の声(テスティモニアル)セクションを追加しましょう

4

ページ下部に、h2の見出し・説明文・大きなボタンを備えたCTAセクションを追加しましょう

5

グリッドや文字サイズに md: ブレークポイントを使って、レイアウトをレスポンシブにしましょう

あなたのコード

html
12
1
2
3
4
5
6
7
8
9
10
11
12

ライブプレビュー

ライブプレビュー