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

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

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

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

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

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

• 文字の大きさが実機と違うことがある
• 画像の読み込みの遅さは実機でしか分からない
• 指でスクロールしたときに、どこで止まるかが違う

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

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

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

検索結果の一覧で見る3項目

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

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

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

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

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

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

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

商品ページ本体で見る5項目

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

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

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

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

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

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

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

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

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

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

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

直す順番

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

1. 一覧での商品名の切れ方（1番）→ 選ばれる前の段階なので影響が大きい
2. メイン画像（2番）→ 同じく一覧の段階
3. 箇条書きの1行目（4番）→ 文章だけで直せる
4. 画像内の文字（5番）→ 作り直しが必要なので少し重い
5. A+の並び順（6番）→ 制作コストがかかるので最後

合格の目安を決めておく

「見にくい気がする」という感覚だけで直すと、人によって判断が割れます。点検の前に、項目ごとの合格の目安を決めておくと迷いません。次の表の目安は、筆者が点検で使っている仮の基準です。商品やカテゴリーに合わせて調整してください。

サブ画像1枚ごとの役割の決め方はサブ画像6枚の組み立て方、A+の並べ方はA+の構成にまとめています。

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

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

点検を10分で回す手順

毎回1時間かけると続きません。主力商品1つあたり10分で終わる形に落とし込みます。

1. スマートフォンで狙う検索語を打つ（2分）。シークレットモードで開き、自社が何番目に出るか、商品名がどこで切れているかを見ます
2. その画面のスクリーンショットを撮る（1分）。競合と並んだ状態が残るので、後から見比べられます
3. 自社ページを開いて、指だけで最後まで送る（3分）。途中で「読むのをやめたくなる場所」があれば、そこが直す箇所です
4. 画像を拡大せずに文字が読めるかを確認（2分）。読めない画像の番号だけメモします
5. 気づいた点を3つまで書き出す（2分）。全部書くと着手できません。上位3つに絞ります

この5手順を、売上上位の商品から順に回します。仮に10商品あっても、100分で一巡します。四半期に一度でも実施していれば、致命的な崩れは防げます。

点検の結果、直す箇所が多すぎて手が回らない場合は、Amazon運用代行に任せられる作業を確認して、点検だけを切り出すという手もあります。

よくある失敗例

点検をしていても、見る場所や順番を間違えると効果が出ません。相談でよく見かける失敗を4つ挙げます。

1. パソコンで作った画像を縮小して確認しただけ

制作ソフトの画面で縮小表示して「読める」と判断し、実機で開いたら文字がつぶれていた、という例です。画面の明るさや文字の太さの見え方は実機でしか分かりません。画像を差し替えたら、公開後にもう一度実機で開いて確認します。

2. 自社の商品ページだけを見て一覧を見ていない

ページ本体は丁寧に作り込んでいるのに、一覧ではメイン画像が小さく、商品名もブランド名と型番だけで切れていた。この状態ではページを見に来る人自体が増えません。点検の順番どおり、一覧を先に見てください。

3. 箇条書きの1行目に注意書きを置いている

「ご購入前にお読みください」のような注意を1行目に置くと、折りたたまれた状態で見えるのは注意書きだけになります。注意事項は大切ですが、置き場所は2行目以降か説明文にして、1行目には買う理由を置きます。

4. 直したあとに数字を見ていない

直した日付を残さず、効果を確かめないまま次の修正に移ってしまう例です。仮に1日のセッション数が50ある商品で、ユニットセッション率が10%から11%に上がれば、月に15個ほど販売が増える計算になります。これくらいの差は、日付と数字を残しておかないと気づけません。

よくある質問

パソコン表示は無視してよいですか。 無視はしないでください。比率は商品やカテゴリーで変わります。判断はビジネスレポートの実数で行い、多いほうを先に直すという順番にしてください。両方を同時に完璧にしようとすると手が止まります。

iPhoneとAndroidで見え方は違いますか。 画面の幅と文字の大きさの設定で、切れる位置や折り返しが変わります。両方を用意できるなら見比べてください。難しい場合は、画面の小さい端末を1台選んで、そこで読めることを基準にすると安全側に倒れます。

アプリとブラウザーのどちらで確認すべきですか。 できれば両方です。表示の仕様が異なることがあり、アプリでは折りたたまれる箇所がブラウザーでは開いていることもあります。時間が取れない場合は、自社の購入者の多くが使っている側を優先してください。

点検はどのくらいの頻度で行えばよいですか。 新しいページを公開したときと、画像・商品名・A+を差し替えたときには毎回行います。それ以外は、売上上位の商品を四半期に一度見直すのが目安です。Amazon側の表示の仕様が変わることもあるため、何も変えていなくても売上やユニットセッション率が急に下がったときは、まず実機で表示を確認してください。

まとめ

• 最終確認は実機で行う。プレビューや画面幅の変更だけで判断しない
• 見る場所は「検索結果の一覧」と「商品ページ本体」の2つ。一覧が先
• 一覧では、商品名がどこで切れるか・小さくても商品が分かるかを見る
• ページ本体では、箇条書きの折りたたみ・画像内の文字の大きさ・A+の縦並びを見る
• 直す順番は、選ばれる前の段階から。日付を記録して後で比べる

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