スワイプLPのファーストビュー例
業種別テンプレート集 30パターン

縦型のスマホLP（スワイプLP）は、1画面で伝わる情報量が通常のLPと大きく違います。このページでは、その1画面目にあたるファーストビューの作例を、業種別に30パターン並べました。

LPの構成を検討するときの叩き台や、クライアントへ方向性を見せるときの参考資料としてご覧ください。色合いとテーマで絞り込めます。画像はすべて900×1600px（9:16）です。

公開日：2026年9月30日

スワイプLPのファーストビューの前提

作例はいずれも下記の条件で作っています。縦スワイプで画面が切り替わる形式のため、通常のLPのように「続きを読ませる」設計ではなく、1画面で完結させる考え方になります。

画面サイズ	900 × 1600px（9:16）。スマートフォン全画面を前提とした縦長比率です。
操作	上下のスワイプで画面が切り替わります。ページ内スクロールは発生しません。
1画面の役割	ファーストビューは「誰向けか」「何が得られるか」「次の行動」の3点に絞ります。
CTAの位置	画面下部に固定。スマLの仕様では下部のみに設置でき、1画面あたり1〜3個まで置けます。
スワイプ誘導	「スワイプして続きを見る」などの文言は不要です。上下左右の矢印が自動で表示されます。
安全域	上下100px程度はブラウザのUIやノッチに隠れる前提で、重要な要素を置きません。

30件を表示中

条件に合う作例がありません。絞り込みを解除してください。

30パターンを作る過程で、縦型スマホLP特有の引っかかりどころがいくつか出てきました。制作時の確認用にまとめます。

文字は通常のLPより2〜3割大きく

900px幅の原寸で見ると読めても、実機では横幅が半分以下に縮みます。見出しは60px以上、本文は28px以上を目安にすると実機で破綻しません。
写真と文字を重ねすぎない

人物写真の上に白抜き文字を置くと、明るい部分で文字が消えます。半透明のパネルを敷くか、写真と文字のエリアを上下で分ける方が安全です。
下部200pxはCTAのために空ける

CTAは下部固定のため、その領域に写真や説明文が入り込むと重なります。ボタンは高さ100px前後、横幅は画面の7割以上あるとタップしやすくなります。
要素は3ブロックまで

キャッチ・補足・CTAの3つで1画面が埋まります。実績や料金表まで載せると文字が小さくなり、結局どれも読まれません。2画面目以降に分けます。
金額や期限は具体的に書く

「お得」「今だけ」よりも「初月0円」「12月26日まで」の方が画面上の情報量は同じでも伝わります。数字は大きく、単位は小さく組みます。
波ダッシュなどの記号に注意

「〜」は書体によっては文字化けします。「から」に置き換えるか、表示を実機で確認してください。全角括弧や丸数字も同様です。

ツールの比較や、スワイプ形式そのものの研究についてまとめたページです。

スワイプLP: 上下または左右のスワイプで1画面ずつ切り替わる、スマートフォン専用のランディングページ形式です。縦スクロール型のLPと区別してこう呼びます。
ファーストビュー: 訪問者が最初に目にする1画面目のことです。スワイプLPでは画面いっぱいが1枚の絵になるため、通常のLPよりも面としての設計が必要になります。
訴求の型: ファーストビューで何を主役にするかの型です。本ページでは「料金比較」「Before / After」「期間限定オファー」「診断・質問」「ビジュアル訴求」「課題解決」「実績訴求」「ストーリー」などに分類しています。