楽天市場を利用する約80%のユーザーがスマホからと言われています。そんな「スマホファースト」が大切な楽天市場のスマホページ最適化について当記事で説明していきます。
Contents
トップページと商品ページ
スマホページと言っても、楽天市場においては主に２つのページがあります。それが「トップページ」と「商品ページ」です。
どちらも重要ではあるのですが、より重要なのは商品ページです。それは、楽天市場を運営するにあたって、重要なのは商品を買っていただき、売上を上げることだからです。
その売上は最終的には必ず「商品ページを経由」しないと発生しません。このことからなぜ商品ページが重要かをおわかりいただけるかと思います！
トップページ作成のポイント
PCと違いスマホのトップページでは、ハンバーガーメニュー(折りたたみメニュー)を有効活用することが大切です。スマホは画面が小さく、多くの情報を表示させることができないので、“予算ごと”“カテゴリごと”“よくある質問”など、ユーザーが気になりそうな項目はハンバーガーメニューへ入れておき、ユーザーがページのどこにいてもすぐアクセスできるような場所に設置しましょう。
商品ページ作成のポイント
こちらもPCと違って、スマホの商品ページで大事になってくるのが「サムネイル画像(フリック画像)」です。スマホで商品ページを見る際に横に画像をフリックする人と縦へスクロールする人の割合は半々と言われています。そのため、LP(縦にスクロールする場合の画像)の画像だけでなく、フリック画像にも対応しておくようにしましょう。
また、スマートフォン用商品説明文にはimgタグを20個しか格納することができません。かつ、RMSに格納できる画像サイズは、縦3840px×横3840pxと決まっています。
そのため、LPが縦に長すぎて画像が入りきらないとなった場合は、GOLDに画像を格納して対応するようにしましょう。
GOLDであれば、画像サイズに制限はありません。ただし、画像の容量が大きすぎると、商品ページの表示速度に時間がかかりすぎ、ユーザーの離脱に繋がりかねないので、１画像につき2MBに収まるようにすることを推奨します。
GOLDでスマホトップページを作成する
楽天市場のトップページで自由度の高いページを作成するには、GOLDを使う必要があります。
そもそもGOLDとは？
GOLDとは、楽天が提供している「自由度の高いページを作成するためのサービス」です。楽天市場に出店していればどの店舗でもGOLDを使うことができ、CSSやJavaScriptも利用可能です。
スマホのトップページ作成時に気をつけること2点
①【必要以上の挙動はつけない】
コーディングをしていると、つい洒落た挙動を入れてしまいがちです。しかし、不必要な挙動を入れることでページの表示速度が遅くなり、ユーザーが離脱してしまっては元も子もありません。スライダーなどのページを見やすくするための挙動はどんどん活用すべきですが、常に「ユーザーが本当に求めているものなのか」を意識してページ作成するようにしましょう。
②【回遊性を意識する】
当然ですが、トップページから売上を上げることはできません。そのため「トップページへ流入してくるユーザーをいかに商品ページへ誘導するか」がポイントとなります。”店舗内ランキング”、”一押し商品”、”新商品”などユーザーが商品ページへ遷移するような導線を作成することが必要です。
商品ページ
スマホの商品ページ作成時に気をつけること2点
①【文字の大きさ】
PCの商品ページに使う画像とスマホで使う画像で同じものを使うことも多々あると思います。その際に注意すべき点が「スマホで見ても文字がはっきりわかるか」ということです。PCで見た時はしっかり見えていても、スマホで見ると文字が小さすぎて読みにくいということがよくあります。スマホで画像を設置した際は実際にスマホで確認し、「見えにくくないか」を意識しましょう。
②【楽天特有のルール】
楽天市場では、「サムネイル画像のテキスト占有率が20%以下であること」や「画像内への枠線表現NGルール」など特有のルールがあります。これらを考慮して商品ページを作成しなければなりません。
商品ページのデザインについての詳細は、以下の記事で紹介しておりますので、こちらも参照してください！
RMSで設定すべきもの
【共通バナー設定】
「大バナー画像」と「小バナー画像」がありますが、今回は、よりユーザーの目に留まりやすい大バナー画像について説明します。
大バナー画像を設定する目的は「実施中のイベントや店舗おすすめ商品の画像を掲載することで店舗内回遊を促す」ことです。
大バナー画像には最大10個登録することができ、「掲載期間」を指定することができます。
掲載期間を設定することで、マラソンやスーパーセールなどのイベントや年末年始、ゴールデンウィークなどの長期休暇といった特定期間のみに絞って表示させることが可能です。
大バナー画像は、以下から設定が可能です。
店舗設定＞4 デザイン設定＞スマートフォンデザイン設定 共通バナー設定
【目玉商品設定】
目玉商品は、“ショップ内の注目商品”として表示され、店舗の売れ筋商品や売りたい商品を自由に選択することができます。ここに売れ筋商品を設置することで、最初に流入した商品を気に入ってもらうことができなくても、目玉商品から他の店舗内商品へとユーザーを誘導することができます。一度店舗へ来てくれたユーザーを簡単に他店舗へ流出させないよう、回遊性を高めることは楽天市場において非常に重要です。
目玉商品は、以下から設定可能です。
店舗設定＞4 デザイン設定＞スマートフォンデザイン設定 目玉商品設定
最大8個登録可能で、“商品名”、“販売価格”の表示有無も設定可能です。
販売価格を非表示にすることは、販売価格が高すぎてユーザーが商品をクリックしてもらえない可能性がある場合に有効です。また、その場合はLPやサムネイル画像でユーザーに商品の強みを訴求し、価格が高いだけではないことを理解してもらう必要があります。
【目玉カテゴリ設定】
目玉カテゴリーは目玉商品のカテゴリ版で、“注目カテゴリ”として表示されます。売れ筋商品のカテゴリやユーザーへおすすめしたいカテゴリーを設定可能です。カテゴリということで1商品だけでなく、複数商品をユーザーに閲覧してもらえることが特徴です。
目玉カテゴリは、以下から設定可能です。
店舗設定＞4 デザイン設定＞スマートフォンデザイン設定 目玉カテゴリ設定
最大6個登録可能で、“カテゴリ名”の表示有無を設定可能です。
まとめ
ここまでトップページと商品ページの観点からスマホページの最適化について説明をしてきました。結論としては、いかにユーザーに“店舗内を回遊していただけるか”が大切なポイントです。トップページから商品ページへ、商品ページから購入画面へと、ユーザーが商品を購入したくなるようなページ作成を心がけましょう！
また、トップページの作成、商品ページの画像設置もPCで行うことがほとんどだと思いますが、その際にPCの機能を使ってスマホページを確認するだけでなく、スマホで実際に見るということが非常に大切です。PCから見たスマホページと実際にスマホで見るページでは挙動や見た目が違うということはよくあることなので、面倒くさがらずに確認しましょう。
