スマホLPのデザインのコツ｜5つの問題と実機チェック20項目
目次
スマホLPのデザインで基準にしたいのは、片手で流し見している人です。スマホファーストとは「スマホでも見られるようにする」ことではなく、その人に合わせて情報の量と順番から決め直すことを指します。SNS広告から来る人の多くはスマートフォンで、しかも片手で、流し見の途中にLPを開きますが、制作の現場ではいまも確認はPCの大きな画面で行い、スマートフォンは公開直前に少し眺めるだけという進め方が少なくありません。
スマホファーストで考えるべき理由をデータで確認したうえで、PCのLPを縮めると起きる問題、親指で操作しやすい配置、文字・ボタン・画像の考え方、制作の手順、実機チェックリストを紹介します。
01LPをスマホファーストで作るべき理由
インターネット利用の中心はスマートフォン
総務省の「令和7年版 情報通信白書」によると、2024年の個人のインターネット利用率は85.6%で、利用する端末はスマートフォンが74.4%と、パソコンの46.8%を大きく上回っています。すべての都道府県で、スマートフォンでの利用率が60%を超えているとも紹介されています。
SNS広告は、そもそもスマートフォンのアプリ上で見られることが多い広告です。広告からLPに来る人は、検索経由の訪問以上に、スマートフォンでの閲覧が中心になると考えておくのが自然です。
Googleもスマートフォン版を基準に見ている
Googleは、ページの内容をスマートフォン向けの表示を基準に評価する「モバイルファーストインデックス」への移行を進め、2023年10月には、その移行が実現したことをGoogle検索セントラルのブログで伝えています。広告用のLPは検索順位を狙わないことも多いですが、「スマートフォンで見たときの姿が基準」という考え方は、検索に限らずWeb全体の前提になっています。
02PCのLPを縮めると起きる5つの問題
PC向けに作ったデザインを、そのままスマートフォンの幅に並べ替えると、次のような問題が起きやすくなります。
| 問題 | 起きること | 原因 |
|---|---|---|
| ファーストビューが空っぽに見える | 写真だけで画面が埋まり、何のページかわからない | 横長の写真を縦に並べたため、コピーが画面の外に押し出される |
| 文字が小さく、細い | 拡大しないと読めない、読む気が失せる | PCの画面で読みやすいサイズのまま縮小された |
| ボタンが押しにくい | 押したつもりが隣のリンクを押してしまう | マウス前提の大きさと間隔のまま |
| 横並びの表や比較が崩れる | 横にスクロールしないと読めない | PCの横幅を前提にした表組み |
| ページが重い | 表示を待たずに戻られる | PC用の大きな画像をそのまま読み込んでいる |
いずれも、PCで確認しているだけでは気づきにくい問題です。とくにファーストビューは、PCでは写真とコピーが横に並んでいても、スマートフォンでは縦に積まれ、コピーが最初の画面に入らないことがよくあります。
03親指で操作しやすい配置を考える
スマートフォンを片手で持ったとき、親指が無理なく届くのは画面の下半分から中央あたりです。画面の上の端や、持ち手と反対側の上の角は、持ち替えないと届きにくくなります。
配置の考え方
| 画面の位置 | 置くもの | 理由 |
|---|---|---|
| 下半分〜中央 | 申し込みボタン、追従ボタン、選択肢 | 親指が届きやすく、押すまでの手間が少ない |
| 中央 | 見出し、主要なコピー、写真 | 視線が自然に集まる |
| 上端 | ロゴ、小さなメニュー | 頻繁に押すものではないため |
画面の下に固定する追従ボタンは、スマートフォンのLPでよく使われる手法です。ただし、追従ボタンが本文の一部や、入力フォームの送信ボタンを隠してしまうことがあるので、実機での確認が欠かせません。
タップしやすい大きさと間隔
Googleが公開しているWeb制作のガイド（web.dev）では、タップする対象の大きさは、およそ48×48 CSSピクセル以上を推奨しています。これは指の腹のおよそ9mmにあたる大きさです。また、隣り合うタップ対象どうしは、縦横ともに8ピクセル程度の間隔を空けることがすすめられています。
アイコンのように見た目を小さくしたい場合でも、周りに余白をつけて、押せる範囲だけを広げることができます。デザインを依頼するときは、見た目の大きさと押せる範囲を分けて考えてもらうと、押しやすさと見た目のバランスがとりやすくなります。
04文字・画像・情報量の考え方
文字は拡大せずに読める大きさと短い段落で整える
スマートフォンでは、1行に入る文字数が少なくなります。行が短いと読みやすい反面、長い文章は縦に長く伸び、読み手の負担が大きくなります。
- 本文は、拡大しなくても無理なく読める大きさにする
- 1段落は短めにし、数行ごとに区切る
- 細すぎる書体は避け、背景との色の差をしっかりとる
- 強調は太字やマーカーで行い、文字の大きさを細かく変えすぎない
画像は「縦に見せる」前提で選ぶ
横長の写真は、スマートフォンの幅に収めると小さくなり、何が写っているかわかりにくくなります。スマートフォンで見せる写真は、縦長や正方形に近い比率で、写っているものを大きく見せる構図を選びます。文字を画像に埋め込む場合は、スマートフォンの幅で文字が読めるかを必ず確認しましょう。
情報量は「1画面に1メッセージ」が目安
スマートフォンの1画面に入る情報は、PCに比べてずっと少なくなります。1画面に言いたいことを詰め込むより、1画面に1つのメッセージを置き、スクロールで次に進んでもらう設計のほうが、流し見の読み手には伝わります。
| 要素 | PC中心の考え方 | スマホファーストの考え方 |
|---|---|---|
| 比較表 | 横に5列並べる | 3列までに絞る、またはカード型で縦に並べる |
| 特徴の紹介 | 3つを横並び | 1つずつ縦に、見出し＋短い説明 |
| お客様の声 | 長文を複数並べる | 一言の要約を大きく、詳細は短く |
| FAQ | 全部を開いて表示 | 質問だけを見せ、タップで答えを開く |
| 入力フォーム | 1画面に全項目 | 項目を絞り、入力しやすい形式を選ぶ |
入力フォームの作り込みは、申し込み率に直結する重要な部分です。スマートフォンでは入力の手間が大きく感じられるため、項目は本当に必要なものに絞り、選択式など入力しやすい形式を選びます。
05スマホから作る制作の手順
スマホファーストを実現するには、制作の順番そのものを変えるのが近道です。
ステップ1. 広告の画面から考える
まず、LPの手前にある広告を、実際にスマートフォンで見ます。広告のどの言葉や画像に反応してタップした人が来るのかを確認し、その約束を最初の1画面で回収できるかを考えます。
ステップ2. スマホの幅で構成を書く
構成案（ワイヤーフレーム）は、スマートフォンの縦長の画面を前提に描きます。1画面ずつ区切って、「この画面で伝えること」を1つずつ書き出すと、情報の詰め込みすぎに気づけます。
ステップ3. スマホのデザインを先に仕上げる
デザインは、スマートフォンの版を先に作り、確定してからPC版に広げます。PC版は、スマートフォン版の情報の順番を保ったまま、横幅を生かしてゆとりを持たせる形にすると、両方の内容がずれません。
ステップ4. 実機で確認する
デザインデータの確認も、制作途中のページの確認も、実際のスマートフォンで行います。PCのブラウザでスマートフォンの表示を再現する機能は便利ですが、指で押したときの感覚や、明るい屋外での見え方、通信が遅いときの表示までは再現できません。
ステップ5. 公開後はスマホの数字を分けて見る
公開後は、アクセス解析やヒートマップで、スマートフォンとPCの数字を分けて確認します。全体の数字だけを見ていると、スマートフォンだけで起きている離脱を見落とします。
なお、スマートフォンでの離脱が多くても、原因がLPにあるとは限りません。広告で期待した内容と最初の画面がずれていることもあれば、LPを読んだ後のフォームやLINEの登録で止まっていることもあります。広告の訴求ごとに数字を分け、LPの離脱、次の段階の反応と順に見ると、直す場所を絞り込めます。
06実機で確かめる20項目のチェックリスト
公開前に、iPhoneとAndroidの両方、できれば画面の小さい機種でも確認します。
最初の1画面
- 何のページか、誰向けかが、スクロールせずにわかるか
- メインコピーが最初の画面に収まっているか
- 広告で約束した内容が、最初の画面で回収されているか
- 表示が終わるまでに、待たされる感覚がないか
文字と画像
- 本文を拡大しなくても読めるか
- 画像に埋め込んだ文字が読めるか
- 写真が小さすぎて、何が写っているかわからない箇所はないか
- 屋外の明るい場所でも、文字と背景の区別がつくか
- 横にスクロールしないと読めない表や要素がないか
ボタンと操作
- 申し込みボタンが、親指の届く位置にあるか
- ボタンが小さすぎたり、他のリンクと近すぎたりしないか
- 追従ボタンが、本文やフォームの送信ボタンを隠していないか
- 電話番号やLINEのボタンが、タップで正しく動くか
- FAQなどの開閉が、思ったとおりに動くか
フォームと計測
- 入力欄をタップしたとき、適切なキーボード（数字、メールなど）が出るか
- 入力中に画面が拡大されて、操作しにくくならないか
- 送信ボタンが、キーボードに隠れて見えなくならないか
- 送信後のページが正しく表示され、計測のタグが動いているか
全体
- ページの最後まで、読み込みが止まらずに表示されるか
- PC版と、スマートフォン版の内容（価格、注釈など）に食い違いがないか
この確認は、公開前の1回では終わりません。訴求を変えるためにコピーや画像を差し替えるたびに、同じ崩れが起きる可能性があります。毎回20項目を見る時間がとりにくい場合は、最初の1画面、ボタン、フォームの送信と計測の3つを差し替え時の必須確認にしておくと、他の業務と兼務でも続けやすくなります。
07よくある質問
Q. PC版は作らなくてもよいですか
広告の流入がほぼスマートフォンからであれば、PC版はスマートフォン版を中央に寄せて表示するなど、簡易な形でも成り立つ場合があります。ただし、BtoBの商材などで、社内のPCで比較検討されることが多い場合は、PCで見たときの読みやすさも確保しておくほうが安心です。流入の内訳を確認してから判断しましょう。
Q. 縦に長いLPは、スマートフォンでは読まれないのでは
長さそのものより、1画面ごとに読み進める理由があるかが重要です。各画面の役割がはっきりしていて、次の画面を見たくなる流れがあれば、長いLPでも最後まで読まれます。途中で離脱が多い場合は、ヒートマップでどの画面で止まっているかを確かめてみてください。
Q. 確認用のスマートフォンは何台あればよいですか
最低限、iPhoneとAndroidを1台ずつ用意するのがおすすめです。画面の大きさの違いを確かめたい場合は、小さめの機種でも確認すると、文字の折り返しやボタンの位置の問題に気づきやすくなります。
08まとめ
- インターネット利用の中心はスマートフォン。SNS広告から来る人はなおさら
- PCのLPを縮めると、ファーストビュー・文字・ボタン・表・重さに問題が出やすい
- 申し込みボタンは親指の届く範囲に置き、押せる範囲を十分に確保する
- 1画面に1メッセージを基本に、情報の量と順番から決め直す
- 構成・デザイン・確認のすべてを、スマートフォンから先に進める
- 公開前は実機で20項目を確かめ、公開後はスマホの数字を分けて見る
Lic.では、SNS広告からの流入を前提に、スマートフォンで片手で見たときの体験を基準として、広告を見た瞬間からLPを読み終えるまでを一続きの流れで設計しています。
広告のクリックはあるのに、申し込みが増えない？
広告運用を前提に、離脱防止の設計までふくめたLPや、配信用の広告クリエイティブを制作します。公開後も、配信データをもとに改善を続けます。
- 離脱防止まで考えたLP制作
- 配信用の広告クリエイティブ制作
- 配信データをもとにした継続的な改善
まだ具体的に決まっていない段階のご相談も歓迎です。
参考
- 総務省「令和7年版 情報通信白書 インターネット」 https://www.soumu.go.jp/johotsusintokei/whitepaper/ja/r07/html/nd21b120.html
- Google検索セントラル ブログ「モバイルファースト インデックスが実現 - ご協力に感謝します」 https://developers.google.com/search/blog/2023/10/mobile-first-is-here?hl=ja
- web.dev「Accessible tap targets」 https://web.dev/articles/accessible-tap-targets
