コンバージョン重視のランディングページを作る
高コンバージョンのランディングページを作る
コンバージョンにつながるランディングページは、力強いメッセージ、明確なベネフィット、社会的証明(ソーシャルプルーフ)、そして強力なCTA(コール・トゥ・アクション)を組み合わせて、訪問者に行動——登録、ダウンロード、購入——を促します。
このレッスンでは、見出し、バリュープロポジション、3枚のベネフィットカード、顧客の推薦の声、CTAセクションを備えた本格的なマーケティングランディングページを作ります。終わる頃には、実際にコンバージョンを生み出せるプロ品質のページが手に入ります。
手順
背景グラデーション付きのコンテナ(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>`
グリッドレイアウトで3枚のベネフィットカードを追加しましょう。各カードには絵文字、ベネフィットのタイトル、説明文を入れます
blockquoteと顧客の名前・肩書きを備えた推薦の声(テスティモニアル)セクションを追加しましょう
ページ下部に、h2の見出し・説明文・大きなボタンを備えたCTAセクションを追加しましょう
グリッドや文字サイズに md: ブレークポイントを使って、レイアウトをレスポンシブにしましょう
あなたのコード
このステップで作りたいものを伝えてください。コードを書きます。あとは「適用」をクリックすればエディタに反映されます。 このステップ:背景グラデーション付きのコンテナ(sectionタグ)の中に、h1の見出しとサブ見出しを備えたヒーローセクションを作りましょう