デザイナー必見！スワイプ型LPのビジュアル設計7つのポイント

「PCで見たときはいい感じだったのに、スマホで見ると文字が小さくて読めない…」

スワイプ型LP制作でこんな経験をしたことはありませんか？スワイプ型LPはスマホ特化の形式だからこそ、モバイルファーストのビジュアル設計が成否を分けます。現在、LPへのアクセスの70%以上がスマートフォンからです。

この記事では、スワイプ型LPで成果を出すためのビジュアル設計7つのポイントを、具体的な数値とともに解説します。デザイナーでなくても実践できる内容です。

スマホ画面の特性を理解する

まず、スマートフォンの画面特性を理解しておきましょう。

画面サイズの現実

一般的なスマートフォンの画面幅は約375〜430px（論理ピクセル）です。PCモニター（1920px前後）と比較すると、4〜5分の1程度の幅しかありません。

この狭い画面に、PCと同じ情報量を詰め込もうとすると、当然読みにくくなります。

閲覧環境の違い

スマホユーザーは、電車の中、カフェ、ベッドの上など、様々な環境でLPを見ています。周囲が明るかったり暗かったり、移動中で画面が揺れていたりします。

こうした環境でも読めるデザインが求められます。

フォントサイズの基準

スマホで読みやすいフォントサイズには、明確な基準があります。

推奨フォントサイズ

テキストの種類	推奨サイズ（実寸）	備考
メインキャッチコピー	32px〜48px	最も目立つ要素。太字推奨
サブキャッチ・見出し	24px〜32px	セクションの区切りに使用
本文テキスト	16px〜20px	16px未満は読みにくい
注釈・補足	12px〜14px	必要最小限に

行間と文字間

フォントサイズだけでなく、行間（line-height）も重要です。

• 行間は文字サイズの1.6〜1.8倍を推奨
• 詰まりすぎると読みにくく、空きすぎると間延びする
• 日本語の場合、文字間（letter-spacing）は0.05em程度が読みやすい

余白（ホワイトスペース）の使い方

スマホデザインでは、余白が非常に重要です。

なぜ余白が必要か

小さな画面だからといって情報を詰め込みすぎると、視線の休まる場所がなく、ユーザーは疲れて離脱してしまいます。余白は「何もない空間」ではなく、情報を整理するためのデザイン要素です。

余白の取り方

• 左右の余白：画面幅の5〜8%（片側16〜24px程度）
• セクション間：40〜60px以上の余白で区切りを明確に
• テキストと画像の間：16〜24px程度
• ボタン周り：上下左右に十分な余白を取り、誤タップを防ぐ

「1画面1メッセージ」の原則

特にスワイプ型LPでは、1画面（1スライド）に伝えるメッセージは1つに絞ることが重要です。複数のメッセージを入れると、どれも印象に残らなくなります。

色使いとコントラスト

コントラスト比の基準

Webアクセシビリティの国際基準（WCAG 2.1）では、テキストと背景のコントラスト比について以下の基準を定めています。

• 通常テキスト：コントラスト比 4.5:1 以上
• 大きなテキスト（24px以上）：コントラスト比 3:1 以上

屋外など明るい環境でスマホを見る場合、コントラストが低いと文字が読めなくなります。白背景に黒文字、または濃い背景に白文字が基本です。

色数を絞る

使用する色は3〜4色に抑えましょう。

• メインカラー：ブランドカラー、全体の印象を決める色
• アクセントカラー：CTAボタンなど、目立たせたい要素に使う色
• ベースカラー：背景色（白・薄いグレーなど）
• テキストカラー：本文の色（黒・濃いグレー）

色が多すぎると視線が分散し、どこを見ればいいかわからなくなります。

画像の最適化

推奨画像サイズ

スワイプ型LPで使用する画像は、2倍解像度（Retina対応）で作成するのが基本です。

用途	推奨サイズ
CTAなしスライド	780 × 1400 px
CTAありスライド	750 × 1040 px

※表示サイズの2倍で作成することで、高解像度ディスプレイでもシャープに表示されます。

ファイルサイズの圧縮

画像が重いとページの読み込みが遅くなり、離脱につながります。

• 1枚あたり200KB以下を目標に圧縮
• JPEG（写真）、PNG（イラスト・ロゴ）を使い分け
• 可能であればWebP形式を採用（ファイルサイズが約30%削減）
• TinyPNG、Squooshなどの圧縮ツールを活用

タップ領域の設計

スマホでは指でタップするため、タップ領域のサイズが重要です。

推奨タップ領域

• 最小タップ領域：44 × 44 px（Apple Human Interface Guidelines）
• 推奨タップ領域：48 × 48 px以上
• CTAボタン：幅は画面の80%以上、高さは56〜64px以上

タップ領域の間隔

複数のボタンやリンクが近接していると、誤タップの原因になります。タップ領域同士は8px以上の間隔を空けましょう。

実践チェックリスト

• 本文テキストは16px以上になっているか
• キャッチコピーは一目で読めるサイズか
• 行間は1.6〜1.8倍取れているか
• 左右に十分な余白があるか
• 1画面に詰め込みすぎていないか
• 文字と背景のコントラストは十分か
• 使用色は3〜4色に抑えているか
• 画像は2倍解像度で作成しているか
• 画像ファイルサイズは200KB以下か
• CTAボタンは44px以上の高さがあるか
• 実機のスマホで最終確認したか

まとめ

スマホで見やすいLP画像デザインは、「大きく」「シンプルに」「読みやすく」が基本です。PCでの見た目を優先するのではなく、スマホユーザーを第一に考えたデザインを心がけましょう。

デザインに自信がない方は、まずこの記事で紹介した数値基準を守ることから始めてください。それだけでも、ユーザーにとって格段に見やすいLPになります。