スマホ向け LP の作り方：見やすさと操作しやすさのコツ

2026 年 11 月 12 日

SNS や検索から LP に訪れる人の多くは、スマホで画面を見ています。PC で作ったデザインをそのまま縮めても、文字が小さくなり、ボタンが押しにくくなり、読み込みが遅くなる、といった問題が出ます。

この記事では、スマホ向け LP の基本、文字の大きさと行間、ボタンの押しやすさ、画像の軽量化、アプリ内ブラウザでの見え方を説明します。具体的な数値は目安であり、実機で確認して調整する前提で読んでください。

スマホ向け LP の基本

スマホから先に設計する

スマホで見られる割合が高い LP では、最初にスマホの画面を基準に設計します。PC はあとから、余白を広げる、幅を制限するなどで調整します。スマホの画面は縦に長くスクロールできる一方、横の幅は狭く、1 画面の情報量が限られます。

基本方針

1 カラム(縦 1 列)で構成する
1 画面に入れる情報を絞る
横スクロールを発生させない
指で操作しやすいボタンと間隔にする
表示が軽くなるよう、画像と外部ファイルを抑える

ビューポートの設定

ページの HTML に、画面の幅に合わせて表示するための設定を入れます。この設定がないと、スマホが PC 向けの幅で表示を縮小し、文字が極端に小さくなります。

<meta name="viewport" content="width=device-width, initial-scale=1">

LP 作成サービスを使う場合は、多くが標準で対応しています。自作する場合や、コードを書き換える場合は、この記述があるか確認してください。

最初の画面を意識する

スマホでは、最初に見える範囲が狭いため、そこで何のページかを伝えます。詳しい作り方は、LP デザインの記事で説明しています。

文字の大きさと行間

本文の大きさ

スマホでは、本文を 16 px 前後にすると、拡大せずに読みやすくなります。小さくすると画面に多く入りますが、読む負担が増え、離脱につながります。

要素	目安
本文	16 px 前後
行間	文字の高さの 1.6 〜 1.8 倍
見出し	本文より明確に大きくする
注意書き	12 〜 13 px 程度は保つ

数字はフォントや画面の密度で見え方が変わるため、あくまで目安です。

行の長さと改行

スマホの幅では、1 行に収まる文字数が少なくなります。長い文を続けると、読みにくくなるため、1 文を短くし、適度に段落を分けます。見出しの途中で不自然に改行されないか、実機で確認してください。

文字の色と背景

背景との明るさの差が小さいと、屋外の明るい場所では読めなくなります。W3C の WCAG では、通常の文字で 4.5:1 以上のコントラスト比が達成基準 AA の目安です。写真の上に文字を載せる場合は、背景を暗くするなどして、読みやすさを確保します。

入力欄の文字サイズ

フォームの入力欄の文字が 16 px 未満だと、iPhone の Safari では入力時に画面が自動で拡大されることがあります。入力欄の文字は 16 px 以上にすると、この拡大を避けられます。

ボタンの押しやすさ

大きさと間隔

指で押すには、ある程度の面積が必要です。Apple のガイドラインでは 44 × 44 pt 以上、Google の Material Design では 48 × 48 dp 程度が目安として示されています。WCAG 2.2 には、操作できる領域を 24 × 24 CSS ピクセル以上にするという基準(達成基準 AA)があります。

ボタンは、横幅を広く取ると押しやすい
隣り合うボタンやリンクの間に、十分な間隔を空ける
文章中のテキストリンクは、行間を広げて、押し間違いを防ぐ

位置

親指で操作するため、画面の下の方が押しやすいと言われています。画面の下に固定するボタンは、押しやすい反面、内容を隠す場合があります。固定する場合は、高さを抑え、本文が隠れないようにしてください。

CTA の数と文言

画面に複数のボタンがあると、押し間違いが起きます。主な CTA を明確にして、押した先が分かる文言にします。CTAの記事で、色や文言のコツを詳しく説明しています。

フォームの工夫

入力項目は必要最小限にする
入力の種類に合うキーボードを表示する(メールなら email、電話なら tel)
エラー表示は、どこが間違っているか分かるようにする

画像の軽量化

スマホは通信環境が不安定な場合があり、画像が重いと、表示に時間がかかって離脱されます。

画像を軽くする方法

方法	内容
サイズの縮小	表示する大きさの 2 倍程度までにする
形式の選択	写真は JPEG や WebP、図やロゴは PNG や SVG が向く
圧縮	見た目が変わらない範囲で、容量を減らす
遅延読み込み	画面の外にある画像を、スクロールしたときに読み込む
幅と高さの指定	表示の途中でレイアウトがずれるのを防ぐ

画像内の文字

スマホ向けに縮小された画像の文字は、読めなくなりやすい点に注意してください。重要な文字は、画像ではなく、テキストとして書きます。

読み込み速度の測り方や、外部ファイルの見直し方は、表示速度の記事で具体的に説明しています。

アプリ内ブラウザでの見え方

LINE、Instagram、X などの SNS アプリでリンクを開くと、アプリ内のブラウザで表示される場合があります。このアプリ内ブラウザは、普段使っているブラウザとは機能や表示が異なります。

起こりやすい違い

画面の上下のバーの形が異なり、表示できる範囲が変わる
一部の機能(ファイルのダウンロードなど)が制限されることがある
ログイン状態やクッキーが、通常のブラウザと共有されない
決済や外部サービスのログインがうまく動かない場合がある

アプリ内ブラウザの仕組みと注意点は、別の記事で詳しく解説しています。

確認の手順

実際に LINE のトークや Instagram の投稿に URL を貼る
アプリ内で開き、表示を確認する
主要な機種(iPhone と Android)で、同じ操作をする
ボタン、フォーム、動画などが動くか確認する

決済や会員登録など、通常のブラウザの方が安定して動作する手続きは、外部ブラウザで開く案内を出す方法があります。Boostlink では、LINE や Instagram などのアプリ内ブラウザから、外部ブラウザで開くように案内する機能を設定できます。

端末ごとの振り分け

スマホと PC で、見せるページを分けたい場合もあります。たとえば、スマホではアプリのストア、PC では解説ページを見せる、といった使い方です。スマホと PC の振り分けの記事で、仕組みと設定の考え方を説明しています。

公開前の実機チェック表

スマホ向けの調整は、画面の見た目だけでなく、実際に操作して確かめます。公開前に次の項目を順に確認してください。

確認項目	見るポイント
最初の画面	見出しと主なボタンが、スクロールせずに見えるか
文字	拡大せずに読めるか、行が詰まっていないか
横ゆれ	指で左右に動かしたとき、画面がずれないか
ボタン	親指で押し間違えずに押せるか
画像	読み込みの途中でレイアウトが飛ばないか
フォーム	入力時に画面が拡大されたり、項目が隠れたりしないか
回線	モバイル回線で、数秒以内に表示されるか
アプリ内	LINE や Instagram の中で開いても崩れないか

回線の確認は、Wi-Fi をオフにして行います。ブラウザの開発者ツールの端末表示でも見た目は確認できますが、指の押しやすさや実際の読み込み速度は実機でないと分かりません。

画面幅ごとの注意点

スマートフォンの画面幅は機種で異なります。小さい機種では 320〜360 px 程度、大きい機種では 430 px 前後の幅があります。次の点を確認すると、幅の違いによる崩れを減らせます。

幅を固定した値（例えば 400 px）で要素を作らず、画面の幅に合わせて伸縮させる。
長い英単語や URL が、枠からはみ出さないようにする。
表は横に広がりやすいので、項目を縦に並べるか、列を減らす。
画面を横向きにしたときにも、読めることを確認する。

特に表と長い URL は、横スクロールの原因になりやすい要素です。表が必要な場合は、列を 2〜3 に絞ると、小さい画面でも読めます。

よくある失敗と直し方

失敗	直し方
PC 向けのデザインを縮小しただけにした	スマホ用の配置を先に作り直す
画像内の文字が小さくて読めない	文字を画像から外し、テキストで書く
ボタンが画面の端に近く押しにくい	左右に余白を取り、幅を広げる
固定バナーが本文を隠している	高さを抑えるか、固定をやめる
アプリ内ブラウザで決済が止まる	外部ブラウザで開く案内を出す
読み込みが遅く離脱される	画像を圧縮し、不要な外部ファイルを減らす

問題が複数見つかった場合は、読み込み速度、読みやすさ、操作のしやすさの順に直すと、効果が出やすくなります。表示が遅いと、内容を見てもらう前に離脱されるためです。

まとめ

スマホ向け LP は、スマホの画面を基準に、1 カラムで設計します。本文は 16 px 前後で、行間を広く取り、背景とのコントラストを確保します。ボタンは指で押せる大きさと間隔にし、画像は縮小と圧縮で軽くしてください。SNS のアプリ内ブラウザでは表示や機能が異なるため、実際の SNS から開いて確認します。

SNS から LP へ誘導するときに、アプリ内ブラウザから外部ブラウザへ開く案内や、スマホと PC の転送先の振り分けをしたい場合は、Boostlink が使えます。スタンダードプランから、どちらの機能も利用できます。

LP の集客に使える SNS アカウントを探している場合は、アカウントの購入や M&A を扱う Boostshop も選択肢です。購入の際は各プラットフォームの利用規約を確認してください。