結論：スマホでは、一つの画面で伝えることを絞る
PCでは複数の情報を同時に見渡せますが、スマホでは縦に一つずつ読み進めます。重要なのは情報量を減らすことではなく、知りたい順に並べることです。
スマホでどこに迷いが生まれているのかを、実機で一つずつ確認します。
1. 最初の表示面で伝えることを一つにする
商品名、画像、価格、評価、ポイントが同時に見える中で、さらに画像内へ複数訴求を詰めると焦点がなくなります。
最初に『何の商品で、なぜ自分が見る価値があるか』までを一つの読解単位で成立させます。
2. 商品画像ごとに役割を分ける
同じベネフィットを文字・矢印・バッジで繰り返すより、用途、違い、使用結果、証拠、サイズなどを画像ごとに分担させます。
画像だけで理解できる内容を、その下の文章でもう一度説明しないことも重要です。
3. 比較基準を長文より先に置く
長い説明を読めば違いが分かる設計は、スマホでは離脱しやすくなります。
何を見比べればよい商品なのかを先に示し、その基準を本文や画像で確定します。
4. 購入条件を奥へ隠さない
送料、発送日、在庫、サイズ、保証、対応機種などは、購入意欲が高まった後に必要になります。
その時点でページ上部へ戻って探させると比較が再開するため、必要位置から確認できる導線にします。
5. カート周辺で最後の不安を増やさない
購入ボタンの直前に、初めて重要条件が出てくる構造は避けます。
カートまで進んだ人が『本当にこれでよいか』を再確認するときに必要な情報を揃えます。
6. 実機幅で縮小可読性を確認する
PC上のプレビューで読めても、実機では画像内文字が読めないことがあります。
文字を小さくして情報を詰めるのではなく、情報量を減らす、画像に任せる、次の表示面へ送る、の順で整理します。
