スマートフォン表示の点検。パソコンだけ見て判断しない

商品ページを作るとき、パソコンの大きな画面で確認して「よく出来た」と判断していないでしょうか。

問題は、買っている人の多くがスマートフォンで見ていることです。表示される情報の量も、並ぶ順番も、パソコンとは違います。パソコンでは全部見えていた箇条書きが、スマートフォンでは折りたたまれて1行しか出ていない。そういうことが普通に起きます。

ここでは、実機で何をどう見るかを順にまとめます。

まず実機で開く。シミュレーターで済ませない

出品用アプリのプレビューや、ブラウザーの画面幅を狭める機能でも、ある程度は確認できます。ただし、最終確認は実機にしてください。理由は3つあります。

自分の端末だけでなく、画面の小さい端末でも一度見ることをおすすめします。手元にないなら、社内や家族の端末を借りて数分見せてもらうだけでも十分です。

確認する場所は次の2つです。

見る場所	なぜ見るか
検索結果の一覧	選ばれる前の段階。画像と商品名の頭だけで判断される
商品ページ本体	選ばれた後。どこまで読まれるかを確認する

一覧を見ずにページだけ確認する人が多いのですが、そもそも一覧で選ばれなければページは開かれません。順番としては一覧が先です。

1. 商品名がどこで切れているか

スマートフォンの一覧では、商品名は数十文字で切られます。切られる位置は端末や表示場所で変わるので、何文字とは言えません。実機で自分の商品を検索して、どこで「…」になっているかを目で見てください。

切れた時点までに、何の商品か伝わっているか。ブランド名と型番だけで終わっているなら、その先は読まれません。

2. メイン画像が小さくても分かるか

一覧のサムネイルは小さいです。商品が枠いっぱいに写っていないと、何なのか判別できません。目を細めて見て、形が分かるかを確認します。

3. 競合と並んだときに沈んでいないか

自分の商品だけ見ても分かりません。検索結果の画面をそのまま眺めて、自社の枠に目が止まるかを見ます。周りが白背景で明るいのに自社だけ暗い、あるいは全部同じに見える、といったことがここで分かります。

4. 箇条書きが折りたたまれていないか

スマートフォンでは、箇条書きが途中で折りたたまれ、「続きを読む」を押さないと全部出ないことがあります。押す人は多くありません。1行目に一番言いたいことを置く理由がここにあります。

5. 画像の中の文字が読めるか

サブ画像に文字を入れている場合、スマートフォンで開いて読めるかを確認します。パソコンで作ると文字を小さく入れがちです。画像を拡大せずに読める大きさが基準です。読めないなら、文字数を減らして大きくします。

6. A+（商品紹介コンテンツ）が縦に崩れていないか

A+は、パソコンでは横並びだったものがスマートフォンでは縦に積まれます。左に画像・右に文章というレイアウトが、画像・文章・画像・文章と縦に並び直します。意図した順番で読めるかを確認してください。

比較表を入れている場合は特に注意が必要です。列が多い表はスマートフォンで読みにくくなります。

7. 価格と配送予定日が最初の画面に入っているか

スクロールせずに見える範囲に、価格・在庫状況・配送予定が入っているか。ここが見えないと、購入の判断が先送りされます。

8. どこまでスクロールされるかを想像する

自分で上から下まで指でなぞってみて、どのくらい長いかを体感してください。A+が長すぎて最後まで届かないなら、大事な情報を前に移します。

点検で出てきた項目は、次の順で直します。

一度に全部直すと、どれが効いたのか分からなくなります。直した日付を記録して、2週間ほど後にセッション数とユニットセッション率を比べてください。

なお、パソコン表示とスマートフォン表示のどちらを優先するかで迷ったら、ビジネスレポートで自社の実際の比率を確認してから決めてください。カテゴリーによって傾向は変わるので、一般論ではなく自社の数字で判断してください。

新しいページを公開する前にも、この点検を一度通しておくと手戻りが減ります。判断に迷う箇所があれば、無料の診断で現状を整理するところから始めてみてください。