スマホファーストで考えるスワイプ型LPの画面設計

「スワイプ型LPを作ったのに、なぜかスマホでの操作性が悪い…」

スワイプ型LPはスマートフォンに最適化された形式ですが、正しい画面設計をしなければその効果を発揮できません。CVR248%向上、読了率65%という成果は、スマホファーストの設計原則に従ってこそ実現できるものです。

この記事では、スワイプ型LPの画面設計における7つの重要ポイントを解説します。タップ領域、フォントサイズ、余白、セーフエリアなど、実践的な数値とともにお伝えします。

スマホファースト設計の基本原則

スワイプ型LPのスマホファースト設計には、3つの基本原則があります。

原則1：親指ゾーンを意識する

スマートフォンの操作は、主に片手の親指で行われます。画面上の「操作しやすい領域」と「操作しにくい領域」を理解することが重要です。

• 操作しやすい領域：画面下部1/3（特に親指が届く範囲）
• やや操作しにくい領域：画面中央部
• 操作しにくい領域：画面上部1/4、対角線の端

CTAボタンや重要なタップ要素は、画面下部に配置するのが鉄則です。

原則2：「見る」より「読む」を減らす

スマートフォンでは、長文を読むことにストレスを感じるユーザーが多いです。スワイプ型LPでは特に、テキストよりビジュアルで伝えることを意識しましょう。

要素	従来型LP	スワイプ型LP
1画面のテキスト量	200〜500文字	50〜100文字
メインの情報伝達	テキスト中心	ビジュアル中心
見出しの役割	内容の要約	キャッチコピー

原則3：1画面1アクション

各スライドで求めるアクションは1つに絞りましょう。「次へスワイプ」「CTAをタップ」など、ユーザーが迷わない設計が離脱率50%減につながります。

画面サイズとセーフエリア設計

スワイプ型LPの画面設計では、様々なスマートフォンに対応するためのセーフエリアを考慮する必要があります。

主要デバイスの画面サイズ

デバイス	画面サイズ	アスペクト比
iPhone 15 Pro	393 x 852	約19.5:9
iPhone SE (3rd)	375 x 667	約16:9
Galaxy S24	360 x 780	約19.5:9
Pixel 8	412 x 915	約20:9

推奨設計サイズ：390 x 844px（iPhone 14/15基準）で作成し、他デバイスでも崩れないよう余白を確保します。

セーフエリアの考え方

ノッチやホームインジケーターを考慮したセーフエリアを設定しましょう。

• 上部セーフエリア：44px以上（ノッチ・ダイナミックアイランド対応）
• 下部セーフエリア：34px以上（ホームインジケーター対応）
• 左右のセーフエリア：16px以上（指の誤タップ防止）

フォントサイズと可読性

スワイプ型LPでは、スマホでの可読性を最優先にフォントサイズを設計します。

推奨フォントサイズ

要素	推奨サイズ	最小サイズ
メインキャッチ	28〜36px	24px
サブキャッチ	20〜24px	18px
本文	16〜18px	14px
注釈・キャプション	12〜14px	11px
CTAボタン	18〜22px	16px

行間と文字間

• 行間（line-height）：1.6〜1.8（本文）、1.3〜1.5（見出し）
• 文字間（letter-spacing）：0.02〜0.05em
• 段落間：行間の1.5〜2倍

タップ領域とボタン設計

スマホでの操作性を左右するタップ領域の設計は、CVR向上に直結します。

タップ領域の最小サイズ

Appleのガイドラインでは、タップ可能な要素の最小サイズは44 x 44pxと推奨されています。

• CTAボタン：最低48px高さ、推奨56px以上
• テキストリンク：タップ領域を44px以上確保
• 閉じるボタン：44 x 44px以上

CTAボタンの設計

要素	推奨値
高さ	52〜60px
幅	画面幅の80〜90%
角丸	8〜16px
下部からの距離	80〜120px（固定CTA）

CTAクリック率277%UPを実現するためには、ボタンの視認性と押しやすさの両立が重要です。

余白（スペーシング）設計

適切な余白は、情報の読みやすさとデザインの品質感を大きく左右します。

8pxグリッドシステム

スワイプ型LPの余白は、8pxを基準単位とするグリッドシステムがおすすめです。

• 8px：最小の余白（要素間の微調整）
• 16px：基本の余白（テキストと画像の間など）
• 24px：セクション内の要素間
• 32px：セクション間の区切り
• 48px〜：大きなセクション区切り

コンテンツエリアの余白

位置	推奨余白
左右のパディング	16〜24px
上部の余白	44px以上（セーフエリア含む）
下部の余白	80px以上（CTA用スペース確保）

画像・動画の最適化

スワイプ型LPの表示速度は、画像・動画の最適化で大きく変わります。

画像の最適化

• フォーマット：WebP推奨（JPEGより30%軽量）
• 解像度：2倍解像度（780 x 1688px）で書き出し
• ファイルサイズ：1枚あたり100KB以下を目標
• 遅延読み込み：最初の3枚以外はlazyload

動画の最適化

• フォーマット：MP4（H.264）
• 長さ：5〜15秒以内
• ファイルサイズ：3MB以下
• 自動再生：ミュートで自動再生、ループ推奨

インジケーター・ナビゲーション設計

スワイプ型LPの進捗表示（インジケーター）は、読了率向上に重要な役割を果たします。

インジケーターの種類

種類	特徴	適したケース
ドット型	省スペース、シンプル	10枚以下のスライド
バー型	進捗がわかりやすい	ストーリー性のあるLP
数字型	残り枚数が明確	情報量が多いLP

インジケーターの配置

• 位置：画面上部または下部（コンテンツと重ならない位置）
• サイズ：ドット6〜8px、バー高さ4px
• 操作性：タップで移動可能にすると利便性向上

実践チェックリスト

スワイプ型LPの画面設計をチェックしましょう。

• セーフエリア（上44px、下34px）を確保している
• CTAボタンは親指ゾーン（画面下部）に配置
• タップ領域は44px以上を確保
• フォントサイズは本文16px以上
• 余白は8pxグリッドで統一
• 画像は1枚100KB以下に圧縮
• インジケーターで進捗がわかる
• 1画面1アクションの原則を守っている

まとめ

スワイプ型LPのスマホファースト設計では、親指ゾーン、セーフエリア、フォントサイズ、タップ領域の4つが特に重要です。これらを正しく設計することで、読了率65%、離脱率50%減、CVR248%UPといった成果につながります。

この記事で紹介した数値を参考に、ユーザーが快適に操作できるスワイプ型LPを設計しましょう。