Yahoo!ショッピングを利用するユーザーの多くはスマートフォンから訪れますが、その中でもアプリ経由とブラウザ経由では、商品ページの見え方が異なる場合があります。パソコンでの見え方だけを確認して商品ページを作ると、アプリを使うユーザーには情報がうまく伝わらないことがあります。この記事では、アプリでの見え方の特徴と、店舗が対策できることを解説します。
まずは自店の売上をデバイス別に確認する
アプリでの見え方を改善する前に、自店の売上がパソコン・スマートフォンのブラウザ・アプリのどこから生まれているかを確認しておくことが重要です。
Yahoo!ショッピングのストアクリエイターProでは、売上や訪問数をデバイス別に確認できます。どのデバイスからの売上が大きいかを把握しないまま改善を進めると、実際の売上に影響が小さい部分に時間をかけてしまうことがあります。たとえばパソコンからの購入がほとんどない店舗が、パソコン画面での見た目ばかりを気にして商品ページを作り込んでいても、売上にはつながりにくくなります。
BtoB向けの商材など特殊なケースを除けば、多くの店舗ではアプリ経由の売上がもっとも大きくなる傾向があります。Yahoo!ショッピングはアプリ限定のクーポンやポイントアップ企画も多く、アプリを日常的に使うユーザーが多いためです。この傾向を踏まえると、商品ページの見え方は、パソコンよりも先にアプリでの見え方を優先してメンテナンスすることが実務上のポイントになります。自店のデバイス別売上を確認したうえで、次に紹介するアプリ特有の表示崩れを点検してみましょう。
アプリとブラウザで商品ページの見え方が異なる理由
Yahoo!ショッピングのアプリとブラウザでは、同じ商品ページでも表示の仕組みが異なるため、見え方に差が出ることがあります。
理由は、ブラウザ版が画面幅に合わせて表示を自動調整するのに対し、アプリ版では商品ページ内の一部の装飾やレイアウトがそのまま反映されない場合があるためです。たとえば、商品説明文に埋め込んだ画像やテーブルの幅指定によっては、アプリ側で画面からはみ出して表示されてしまうことがあります。また、ストア全体の共通デザインとして設定したバナーや、店舗トップページの目玉商品といった要素も、アプリの商品ページでは表示されないケースがあります。
「パソコンで確認して問題なかったから大丈夫」と思い込まず、スマートフォンのアプリでも実際の見え方を確認することが重要です。まずは自店の主力商品ページを、アプリで開いて確認してみましょう。
アプリで表示が崩れる・情報が省略される具体例
アプリでの表示崩れは、商品説明文内の画像やテーブルのサイズ指定が原因になっているケースが多く見られます。
具体的には、商品説明文にパソコン画面向けの幅で画像やテーブルを埋め込んでいると、アプリの画面幅に対して大きすぎて、右側が見切れてしまうことがあります。また、店舗トップページに設置している目玉商品やランキングコーナーは、アプリのユーザーが店舗トップページ自体にたどり着きにくい仕様のため、そこに重要な情報を置いていても伝わらない場合があります。ストア全体の共通デザインとして設定したCSSのカスタマイズも、アプリでは反映されないことがあります。
こうした表示の違いに気づかないまま放置していると、アプリ経由のユーザーには重要な情報が届かないまま離脱されてしまう可能性があります。
アプリユーザー向けに対策できること
アプリでの見え方を改善するには、商品説明文に入れる画像やテーブルの幅指定を見直すことが有効です。
具体的には、画像やテーブルのタグに幅の上限を指定し、画面幅を超えないように調整する方法があります。あわせて、店舗トップページでしか案内していない重要な情報(送料の条件、営業日、問い合わせ方法など)は、商品説明文の中にも改めて記載しておくと、アプリユーザーにも確実に伝わります。説明用の画像を作る際も、アプリの画面サイズで見たときに文字が小さくなりすぎないよう、文字サイズに余裕を持たせておくと安心です。
よくある失敗は、パソコン画面での見た目だけを基準に商品説明文を作り、スマートフォンやアプリでの見え方を確認しないまま公開してしまうことです。商品ページを更新したら、パソコン、スマートフォンのブラウザ、アプリの3パターンで見え方を確認する習慣をつけましょう。
アプリ対応でよくある失敗
アプリ対応でよくある失敗は、一度確認して問題がなかった商品ページを、その後の更新で見直さないことです。
商品説明文に新しい画像やバナーを追加した際、パソコンでの見た目だけを確認してそのまま公開してしまうと、アプリでは意図しない崩れ方をしていることに気づかないまま放置されるケースがあります。また、複数の商品ページを一括で作成している場合、1つのテンプレートの不具合がすべての商品ページに広がってしまうこともあります。
対策としては、商品ページのテンプレートを更新した際に、代表的な商品ページを1つ選んでアプリでの表示を必ず確認すること、複数商品に共通する装飾は先に1商品でテストしてから展開することが実践のポイントです。
まとめ
Yahoo!ショッピングでは、アプリとブラウザで商品ページの見え方が異なる場合があります。商品説明文の画像やテーブルの幅指定を見直し、重要な情報は商品説明文の中に確実に記載しておくことで、アプリ経由のユーザーにも情報が伝わりやすくなります。まずは自店の主力商品ページを、実際にアプリで開いて確認してみてください。
アプリでの表示崩れの確認や、商品ページの見直しに迷う場合は、お問い合わせください。商品ページの現状を確認したうえで、具体的な改善策をご提案します。
Yahoo!ショッピング運用の教育ツールとしても活用可能！
ノウハウを社内で共有し、チームの底上げをサポート
あわせて読みたい記事
-
Yahoo!ショッピングの集客方法とは？売上を伸ばす基本施策を解説
アクセス人数アップの航海術
-
セール後も売上を伸ばす！Yahoo!ショッピングで次の主力商品を育てる方法
転換率アップの航海術
-
色・サイズ・入り数をどう見せる？商品バリエーションの伝え方
転換率アップの航海術
-
ランキング情報で商品ページの安心感を高める！購入を後押しする見せ方
転換率アップの航海術
-
Yahoo!ショッピングの商品動画活用法！購入を後押しする見せ方
転換率アップの航海術
-
Yahoo!ショッピングのスマホ対応が重要な理由と改善ポイント
転換率アップの航海術
-
Yahoo!ショッピングの商品検索導線とは？商品を探しやすくする設置方法
転換率アップの航海術
-
Yahoo!ショッピングの置き配対応！配送オプションを訴求するポイント
転換率アップの航海術
-
超PayPay祭の売上対策！開催前・期間中・終了後に行うこと
転換率アップの航海術
