LPのスマホ表示、公開前にどこを見る？実機で確かめる順番

たとえば、制作会社から届いたLPのURLをPCで開き、第一印象と文章に目を通して「この内容で進めます」と返信した場面を想像してください。翌日、自分のスマホで同じページを開くと、見出しの改行が不自然になり、問い合わせのボタンは指で押しにくく、表の右端が画面の外にはみ出している。PCの画面では気づかなかった箇所が、一度に目に入ってきます。

スマホの確認は、デザインの好みを話し合う前に、読者が立ち止まってしまう箇所を拾う作業です。読めない文字、押せないボタン、横にはみ出した要素。まずこの三つを見て、次にブラウザの表示幅を変えれば分かることと、実機で触らないと分からないことを分けます。ここでは、公開前に見る順番と、見つけた課題をどの順で直すかの考え方を整理します。

スマホで最初に見る三つのこと

スマホの確認は、デザインの良し悪しを話し合う前に、読者が立ち止まってしまう箇所を拾うところから始めます。最初に見るのは、読めない、押せない、はみ出すの三つです。ページの上から順に、この三つだけを意識して目を通します。

本文と注釈が読めるか

見出しと本文だけでなく、写真の下の注釈、表の下の注意書き、フッターの小さな文字まで目を通します。指で画面を広げなくても読めるか、行が詰まりすぎていないか、薄い色の文字が背景に埋もれていないかを、上から順にたどります。

• 本文は、端末を縦に持ったまま読めるか
• 注釈や補足が、本文より極端に小さくなっていないか
• 薄い色の文字が、背景の色に埋もれていないか

ボタンと電話番号を指で押せるか

次に、読者に動いてもらう入口を見ます。問い合わせのボタン、資料請求、電話番号です。どれも、読者が迷わず触れる形になっているかを確かめます。

ボタンの大きさと間隔

ボタンそのものの大きさと、隣り合う要素との間隔を見ます。二つのボタンが近すぎると、押すつもりのない方に指が触れます。文字の部分だけでなく、ボタンの領域全体に余白があるかを確認します。

押した先が正しく開くか

押せたとしても、開く先が違えば意味がありません。電話番号は、押したときに発信画面が開くか、番号が正しいかを確かめます。フォームや資料請求のボタンは、遷移先のページと戻り方まで、実際に触って確認します。

表や画像が横にはみ出していないか

最後に、ページ全体の幅を見ます。表や写真、埋め込みの地図が画面の右側で切れていないか、横にスクロールしないと全体が見えないかを確かめます。文字が折り返されず、一行だけ極端に長くなっている箇所も同じ種類の崩れです。

三つは、見る順番を決めておくと抜けにくくなります。読めない、押せない、はみ出すの順に画面をたどり、見つけた箇所はその場で直そうとせず、位置を控えておきます。控えた箇所を、次の確認でまとめて扱います。

PCの確認とスマホの確認を分ける

同じ画面を何度も見返していると、どこを直したのか、何を確認済みなのかが分からなくなります。PCで受けた印象とスマホで受けた印象が混ざると、話し合うたびに結論が変わり、確認そのものに疲れてしまいます。この章では、確認の種類を二周に分けます。ブラウザで見るか実機で見るかという確認の場所は、次の章で扱います。一周目は端末ごとの表示だけ、二周目は文章とリンクの意味だけを見ます。見る対象を絞ると、同じ指摘の繰り返しも減ります。

1周目は端末ごとの表示だけを見る

最初の周では、デザインの良し悪しや言葉づかいに触れず、崩れだけを拾います。PCの幅、スマホの縦、スマホの横、タブレットの幅で順に開き、文字の折り返し、ボタンの大きさ、表や画像のはみ出しを見ます。気づいた箇所はその場で直さず、どの端末のどの位置かを控えておきます。直す作業を混ぜると、確認の途中で画面が変わり、見落としが増えるためです。

2周目に文章とリンクの意味を確かめる

表示が整ったら、次は中身です。ボタンの文言と遷移先、電話番号、フォームの項目名、注釈の内容を読みます。表示が崩れていなくても、押した先が別のページや誤った番号なら、読者はそこで止まります。読む順番は、読者が実際に進む順にします。

直す人と確かめる人を決めておく

直す人と確かめる人を先に決めておき、修正依頼は直す人が、再確認は確かめる人が担当します。

修正依頼を一件ずつ分ける

依頼は、一つの連絡に複数の修正を詰め込まないようにします。たとえば「スマホで問い合わせボタンが小さい。トップの写真も差し替えたい」ではなく、画面、箇所、状態を一件ずつ書きます。件名だけでも内容が分かる形にしておくと、直す側が別の箇所と取り違えません。

直した後の再確認

修正が入ったら、指摘したときと同じ端末幅で開き直します。直した箇所だけでなく、その周りの余白や並びも見ます。一件ごとに確認日と結果を残しておくと、公開前に「未確認のまま残っている箇所」が一目で分かります。

実機で見る前に、ブラウザで見つけられること

実機を何台も並べて確認すると、時間がかかるうえ、見るたびに条件が変わって比べにくくなります。まずはブラウザのウィンドウ幅を、スマホに近い狭い幅へ変えて開いてみてください。ここで見つかる崩れは端末を替えても同じように起きることが多く、直す場所を絞る手がかりになります。

表示幅を変えて崩れを見つける

幅は一度に変えず、少しずつ狭めると、どの幅で崩れ始めるかが分かります。次の箇所を上から順に見て、見つけた位置を控えます。

• 見出しや本文が、画面の右外へ出ていないか
• 表の列が詰まり、文字が縦に折れていないか
• 固定した幅の画像や地図が、右側で切れていないか
• ボタンの並びが崩れ、隣と重なっていないか

文字サイズを変えても読めるか確かめる

ブラウザの文字サイズを一段階大きくして、同じページを読み直します。端末側で文字を大きくしている読者もいるため、拡大しても本文が途中で切れず、ボタンの文言が枠からあふれないかを見ます。

画像が多いページで起きやすいこと

写真や図を多く使ったページでは、崩れそのものより、表示が整うまでの見え方が問題になります。ブラウザの通信を遅く設定すると、実機に近い待ち方を再現できます。

読み込みが終わる前の見え方

画像の読み込みが終わるまで、写真の分の高さが確保されず、下の文章が上へ詰まって見えることがあります。読み込みが進むたびに文章が動くと、読者は読んでいた場所を見失います。幅と高さを先に指定しておくと、この動きは起きにくくなります。

先に直しておく順番

見つけた課題は、読者の行動に近い順に直します。問い合わせのボタンやフォームの崩れ、本文が読めない箇所を先にし、余白や写真の選び直しは後に回します。ブラウザで再現できる崩れを先に片付ければ、実機で見る時間を、指で触った感触や機種ごとの違いに使えます。

ここまでの確認を、ブラウザで分かることと、実機でないと分かりにくいことに分けて並べます。

実機で確かめるときに準備するもの

実機で見る段階では、どの端末の、どの回線で、何を見たのかを残しておくことが大切です。同じページでも、機種や電波の状態によって見え方は変わります。条件を分けて試し、見つけた箇所を画面と一緒に記録しておくと、修正を頼むときも、直した後の確認もぶれません。

端末と回線を分けて試す

端末は、画面の小さい機種と、普段使っている機種の二台を用意します。回線は、社内のWi-Fiと、電波の弱い場所に近い状態の二通りで開きます。同じ端末でも回線が変われば待ち時間が変わり、画像の多いページでは本文が動いて見えることがあります。

• 画面の小さい端末と、普段使っている端末の二台で開く
• Wi-Fiと、電波が弱い状態の両方で読み込みを比べる
• 縦向きと横向きの両方で、同じ箇所を見る
• 試した日時と端末名を、記録の一行目に書く

スクリーンショットに印を付けて残す

見つけた箇所は、口頭や文章だけで伝えず、画面を撮って印を付けます。印は直したい場所を囲むだけで十分です。同じ画面に複数の指摘があるときは番号を振り、番号ごとに見え方と直したいことを一行で添えます。

公開後の確認も同じ手順で行う

公開した後も、同じ端末と同じ回線で開き直します。公開前の記録と見比べれば、直した箇所が反映されているか、別の場所が崩れていないかを短い時間で確かめられます。確認した日と結果も記録に足しておくと、次の更新のときにも同じ手順で見られます。

直す順番を決める

ここまでの章で、見つけた箇所は番号を付けて記録しました。この記録を上から順に全部直すのではなく、着手する順番に並べ替えます。基準は、読者が目的の行動まで進めるかどうかです。見た目の好みによる調整は、その判断の外に置いておきます。

読めない・押せない・迷うを先に直す

読めない文字、押しにくいボタン、押した先が違うリンク、横にはみ出した表。これらは読者が先へ進めなくなる箇所なので、最初に直します。とくに問い合わせや電話など、読者が動く入口に関わるものは、余白や写真の調整より先に扱います。修正の範囲が広い場合は、入口に近い順から一件ずつ片付けます。

見た目の好みは最後に回す

余白の量、写真の雰囲気、見出しの位置など、好みで意見が分かれるものは最後に回します。ここを先に話し合うと、直すべき崩れが残ったまま議論だけが長引きます。社内で意見が分かれた箇所は、その場で決めずに公開後の更新候補として記録しておき、次の更新の機会にまとめて扱います。

公開日を動かすかを判断する

順番が決まったら、公開日に間に合うかを見ます。入口に関わる不具合が残るなら、公開日を動かす判断も必要です。反対に、好みの調整だけが残っているなら、公開後に回して日付を守る選択があります。迷ったときは、残っている件数と、直せる人の人数を並べて決めます。