商品ページを作るとき、つい見慣れたパソコン画面での見た目を基準に確認していませんか。Yahoo!ショッピングでは、多くのユーザーがスマートフォンから買い物をしているため、スマートフォンでの見え方を基準に商品ページを作ることが欠かせません。この記事では、スマートフォン対応の重要性と、確認しておきたいポイントを解説します。
Yahoo!ショッピングはスマートフォン経由の利用が中心
Yahoo!ショッピングに限らず、近年のネットショッピングでは、スマートフォンからの利用が中心になっています。
外出先やちょっとした空き時間にスマートフォンで商品を探し、そのまま購入まで完結させるユーザーが多いため、パソコンでの見え方だけを整えていると、実際の購入者の多くが見ている画面とは異なる印象のページになってしまうことがあります。担当者がパソコンで作業する時間が長いほど、この感覚のズレに気づきにくくなる点にも注意が必要です。まずは自店の商品ページを、実際にスマートフォンで開いて確認する習慣をつけましょう。
スマートフォン表示で確認したい見え方のポイント
スマートフォンで商品ページを確認する際は、文字サイズ、画像の見え方、情報の順番の3点を中心にチェックすることが基本です。
- 文字サイズ: パソコン向けに作った画像や表を縮小しただけでは、スマートフォンの小さな画面では文字が読みにくくなってしまうことがある
- 画像の見え方: 画像内の文字や図解が小さくつぶれて見えないか、拡大しないと内容がわからない状態になっていないか
- 情報の順番: 画像の枚数が多い商品ページでは、スマートフォンで縦にスクロールしたときに、伝えたい情報の順番が意図した流れになっているか
パソコンで問題なく見えていても、スマートフォンでは文字がつぶれている、情報の順番が意図と違っているといったケースは少なくありません。
表示速度と操作性がユーザー体験を左右する
スマートフォンでの利用では、表示速度の速さも、ユーザーがそのまま購入まで進んでくれるかどうかを左右する要素です。
画像を必要以上に大きなサイズのまま使用していると、読み込みに時間がかかり、待ちきれずに離脱されてしまうことがあります。商品ページ内の画像は、見た目の品質を保ちながらも、できるだけ軽いサイズで用意することを意識しましょう。また、スマートフォンでは画面を占有する要素が限られるため、伝えたい情報の優先順位をつけ、本当に必要な情報から順番に配置する構成も重要です。通信環境が不安定な場所で見ているユーザーもいることを踏まえ、表示に時間がかかりすぎない工夫を心がけましょう。
操作性を高めるページ構成の工夫
スマートフォンでは、片手で操作しているユーザーも多いことを意識したページ構成にすると、離脱を防ぎやすくなります。
Yahoo!ショッピングでは、カートボタンの配置やデザインを店舗側で変更することはできません。カートボタンは常にシステム側で固定表示される仕組みになっているため、店舗側で工夫できるのは、そこに至るまでの商品情報の見せ方です。スマホ用フリースペースを活用し、商品説明やサイズ表などの情報を、スクロールしながらでも理解しやすい順序・分量で配置することが重要です。ページの途中で必要な情報を探すのに時間がかかると、ユーザーはそのまま離脱してしまう可能性が高くなります。
スマートフォン表示の改善では、次の点も押さえておきましょう。
- ストアクリエイターProのスマートフォン向け編集機能（スマホ用フリースペースなど）を活用することで、パソコン版とは異なるスマートフォン画面での見え方を調整できること
- スマートフォン向けページでは利用できるHTMLやレイアウト表現に制約があるため、パソコン版で使用しているHTMLやデザインがそのまま反映されない場合があること
- Yahoo!ショッピングのアプリや検索結果の商品一覧では商品画像が購入判断に大きく影響するため、ガイドラインを遵守しながら、一覧画面でも商品の特徴が伝わる視認性の高い画像設計を行うこと
スマートフォン対応でよくある失敗
スマートフォン対応でよくある失敗は、商品ページを作成した担当者自身が、パソコンでしか最終確認をしていないことです。よくある失敗パターンと、その対策を合わせて確認しておきましょう。
| 失敗パターン | 対策 |
|---|---|
| パソコン画面では問題なく見えていても、スマートフォンでは画像がはみ出す、文字が小さすぎるといった不具合に気づかないまま公開してしまう | 商品ページを公開する前に、必ずスマートフォンの実機（またはプレビュー機能）で表示を確認する工程を設ける |
| 画像の容量を意識せず登録し、表示速度が遅いままになっている | 画像1枚あたりのファイルサイズの目安をあらかじめ決めておき、登録前に圧縮・軽量化する |
| パソコン版の内容やHTMLタグをそのままスマホ用ページにも流用し、意図した通りに表示されていない | スマホ用フリースペースで使えるHTMLタグの制限を踏まえ、スマートフォン用ページ編集機能で個別に見え方を整える |
| 1枚目の商品画像が検索結果やアプリの一覧で何の商品かわかりにくい | ガイドラインに沿いながら、一覧表示のサイズでも内容が伝わるよう1枚目の画像を作り込む |
まとめ
Yahoo!ショッピングでは、スマートフォンからの利用が中心となっているため、文字サイズ、画像の見え方、情報の順番、表示速度を意識した商品ページ作りが欠かせません。日頃からスマートフォンでの見え方を基準に考える習慣が、購入率の底上げにつながります。まずは自店の主力商品ページを、実際にスマートフォンで開いて確認してみてください。
スマートフォン対応の見直しやページ改善に迷う場合は、お問い合わせください。商品ページの現状を確認したうえで、具体的な改善策をご提案します。
Yahoo!ショッピング運用の教育ツールとしても活用可能！
ノウハウを社内で共有し、チームの底上げをサポート
あわせて読みたい記事
-
Yahoo!ショッピングの季節販促とは？年間イベントの活かし方
転換率アップの航海術
-
Yahoo!ショッピングアプリで売上アップ！スマホでの見え方を改善する方法
転換率アップの航海術
-
Yahoo!ショッピングの優良配送とは？配送品質で差別化するポイント
転換率アップの航海術
-
Yahoo!ショッピングの告知バナー活用法！購買意欲を高める見せ方
転換率アップの航海術
-
ECのかご落ちはなぜ起こる？主な原因と購入完了につなげる対策
転換率アップの航海術
-
Yahoo!ショッピングの置き配対応！配送オプションを訴求するポイント
転換率アップの航海術
-
Yahoo!ショッピングのソーシャルギフトとは？導入効果と活用ポイント
転換率アップの航海術
-
Yahoo!ショッピングのレビュー要約機能とは？店舗が行うべきレビュー対策
転換率アップの航海術
-
Yahoo!ショッピング「5のつく日」対策！イベント前の確認リスト
転換率アップの航海術
