スマートフォンからのアクセスが主流となった今、LP（ランディングページ）のファーストビュー設計は成果を左右する最重要ポイントです。特に縦長で一画面に収まりにくいスマホ環境では、情報の見せ方次第で離脱率やコンバージョン率が大きく変わると言っても過言ではありません。

ここでは代表的な6つのレイアウトパターンやそれぞれの特徴と活用シーンをご紹介します。

1. 【文字→素材】上下型①

最も基本的な構成で、キャッチコピーを冒頭に配置し、その下に商品やサービスのビジュアルを置く形式。

• メリット：言葉で興味を引いた後にイメージで納得させやすい
• 活用シーン：訴求ポイントが明確で、ターゲットに直球で刺さるワードがある場合

2. 【素材→文字】上下型②

冒頭に写真やイメージを大きく配置し、その下にキャッチコピーを添える形。

• メリット：ビジュアル先行で直感的に「世界観」を伝えられる
• 活用シーン：美容・ジム・旅行・ブランディング重視の商材

3. 【文字→素材】左右型①

テキストとビジュアルを左右に並べるパターン。PCサイトを縮小したような印象になりやすいため、スマホ画面幅に合わせたデザイン最適化が必須。

• メリット：商品写真の存在感を強調できる
• 活用シーン：ビジュアルで一目惚れを狙う化粧品・食品系など見せたい場合

4. 【素材→文字】左右型②

左にビジュアル、右にテキストを並べる形式。情報量のバランスが取りやすく、比較的「雑誌広告」のような雰囲気。

• メリット：商品写真の存在感を強調できる
• 活用シーン：ビジュアルで一目惚れを狙う化粧品・食品系など見せたい場合

5. 【文字→素材→文字】挟み込み型①

ビジュアルを文字で上下から挟み込む形。伝えたいことが複数ある場合に有効。

• メリット：商品写真と説明文を同時に視認できる
• 活用シーン：機能やメリットを整理して伝えたいプロダクト系

6. 【素材→文字→素材】挟み込み型②

上下にビジュアルを配置し、真ん中に文字を置く形。見た目のリズムが出るため、画面全体を使って印象を強調できる。

• メリット：世界観の強調や没入感の演出に向いている
• 活用シーン：美容・健康・体験系など、感情的ベネフィットを重視するサービス

まとめ

ファーストビューは、「一瞬で惹きつける」「直感的に伝える」ことが最優先です。

• 言葉で刺すか
• ビジュアルで魅せるか
• その両方を組み合わせるか

ターゲットや商材の特性によって最適解は変わります。重要なのは、ユーザーが最初の3秒で「自分に関係がある」と思えるかどうか。今回の6パターンを理解し、プロジェクトごとに最適なレイアウトを選び抜くことが成果につながります。