前回のコラムでは、楽天が新スマホトップページを導入した背景や、移行にあたって知っておきたいポイントや注意点についてお話ししました。今回のコラムでは、リピート率や客単価によっても変わってはきますが、どのようなショップでもまず基準となる新スマホトップを紹介したいと思います。
この記事の目次
おすすめのレイアウト
では早速、新スマホトップページを作っていきましょう。おすすめのレイアウトと、汎用的なパーツは下記を揃えておけば、ほとんどのショップが最低限スタートして良い状態になると考えています。是非まだ作成していない場合は、RMSを立ち上げて触りながら読んでいただきたいです。
「パーツ化されたことで、どのパーツを何順で表示すれば良いのか？」といった視点でこのコラムを読んでいる方もいるかもしれません。しかし、ページを作る上で、スマホはPCと違いページの上部のほうから見るため、おのずと最も重要な個所は上部にある「共通エリア」となります。スマホは上であればあるほど重要です。これはどのページでも一緒です。
【最重要】共通エリア
共通エリアで最重要なのは「看板」！
是非この看板作りに時間をかけてもらいたいと思います。ショップ名のテキストを看板にしていないでしょうか？
もしお客さまが、競合商品と比べる中でスマホトップを訪れた場合、このファーストビューで個性や安心感が出せることができれば、選ばれる確率は高くなると考えています。
よって、RMSのトップページ設定でまずクリックすべきは「トップページ管理・編集」のボタンではなく、「看板設定」になります。画像比は3：1、1200×400で作成することが推奨されていますので、そのサイズで作成しましょう。
正方形で作った場合、中央部分だけが表示され、上下に重要なテキストを入れたところで切れてしまうので意味がありません。また、左下には正方形のショップアイコンがこの看板の上に重なって表示されます。つまりこの部分は見えないので注意が必要です。残念なことにならないように計算して作成しましょう。既に看板を設定済みのショップも現行の看板で良いか確認すると良いです。
筆者の推奨としては、下記のようなショップの特徴を入れると良いと考えています。
- 受賞歴 ⇒ 信頼が置けるショップだとわかる
- 出店〇年目アイコン ⇒ 信頼を置けるショップだとわかる
- コンセプト ⇒ ショップのコンセプトがあれば看板に書く
- フリーダイヤル ⇒ 電話受付時間なども書いてあればなお良い
次に「タブ」を設定しよう
「トップページ管理・編集」上部の「アプリ用タブ表示設定」をクリックすると、一部タブの表示/非表示ができます。
ここで注意すべきポイントは、順番は現状変えられないということです。「カテゴリ」「全商品」「クーポン」「ランキング」「レビュー」の順番となります。アプリトップから見ると、「トップ」「カテゴリ」「全商品」「クーポン」「ランキング」までがファーストビューで、「レビュー」はスライドしないと出てこない端末もあるはずです。
クーポンとランキングは、非表示にできるので、クーポンかランキングを出さなければファーストビューでレビューを見せることができます。逆に、どちらも出すことでファーストビューからレビューを消すことが可能です。
レビューで表示する並び順は、商品レビューの新着順となっています。テクニック的なことですが、何らかのトラブルがあり、★１のレビューが新着順で並んでしまったとします。そのときには、クーポンもランキングも表示することで、レビューが画面外に押し出される形となり、結果１商品の失敗でショップ自体のイメージダウンに繋がりにくくできます。
単純に、クーポンがあるからないから、ランキングをトップのパーツで表示するからといった、タブの使い方ではなく、このような使い方も頭の片隅にいれておきましょう。
おすすめとしては、クーポンもランキングも表示しておくデフォルトです。クーポンがない場合は残念なタブになってしまうので、ベタ付けで少しだけお得になるクーポンを用意することも検討してもらいたいです。あと、今後タブの項目が増えることもあるかと思います。標準の並び順が変わっていないかはチェックしておきたいところですね。
パーツ編集可能エリア
やっとパーツの所に来てこれからだ！思われているショップさんも多いかもしれません。繰り返しになりますが、スマホは上部ほど重要ですので、まずは共通エリア、特に看板に時間を使って、パーツはさらっとやってしまっていただきたいところです。
「トップページ管理・編集」から「＋ページを新規作成」ボタンを押すと編集画面が表示されます。少し触れば、パソコン自体に不慣れなスタッフさんでも、問題なく作成や変更はできるだろう素晴らしいエディタになっています。エディタを触る前に、細かいポイントを紹介していきます。
小まめに保存しよう！
ヘッダーに「保存」ボタンがありますが、小まめに保存をしておきましょう。このコラムを書く際、時間が経って何度もエラーとなり直前の編集内容が消えていたことがあります。作ったページは「コピー」することができるので、ある程度作業が終わったら、一度コピーしてバックアップしておくと良いでしょう。
一番利用するのは「大画像パーツ」！
大画像パーツで利用できる画像枚数は最大10枚です。もしかすると足りない可能性もあります。計算して利用しましょう。
利用用途例
- セール用のページへの誘導「〇〇セール開催中！」など
セール時期には上部に大画像を掲載して誘導しましょう。大バナーよりもインパクトがあります。
- もっと見る用の画像
楽天GOLDで新着や再販やランキングといったページが既にある場合、大画像でもっと見るボタンを作り誘導しましょう。
- 商品画像
商品画像がキャビネットに保存されていれば、商品パーツではなく大画像でも商品画像を掲載できます。入口商品など目立たせたい商品は大画像でアピールしましょう。
- クーポン
後日リリース予定のクーポンパーツが出るまでは、大画像パーツでクーポンを並べるような使い方ができます。
レイアウトは基本横スクロールでOK
パーツのレイアウトは「横スクロール」か、２列のタイル張りする「縦配置」かを選べます。大画像以外は横スクロールで良いと考えます。縦に並べるとそれだけ下にスクロールする必要が出てきて、下に行けば行くほど離脱しやすいので、横スクロールで見せられるものは見せましょう。その場合デフォルトの表示商品数などは最大12商品に変えた方が良いと思います。デフォルトの６商品では少なくてもったいないです。
自動で内容を表示するパーツが多く手間がかからない
- 店舗内ランキングパーツ：レイアウトを選ぶだけ
- 商品（店舗内カテゴリ）パーツ：レイアウトとか表示カテゴリなどを選択するだけ
- 目玉商品パーツ：目玉商品設定で設定済み商品が出るだけ
- 大バナー＆小バナーパーツ：共通エリアで設定したバナーが出るだけ
- 商品レビューパーツ：個数を選ぶだけ
上記パーツは、手間がかからないようにできています。ポチポチするだけで終わるはずです。「もっと見る」は出ないので、もっと見せたいページがある場合、大画像をこのパーツ下部に配置して飛ばすようにしましょう。
できること・できないこと
できること
- 絵文字は使える
https://jp.piliapp.com/emoji/list/
このような絵文字はコピペして表示できます。タイトルに帯がつかないので、こういったテクニックをつかっても良いでしょう。
できないこと
- 商品以外はキャビネットの画像しか表示できない
- 姉妹店のバナー画像も表示できない
- HTMLは利用できない
- 商品パーツは売切れを自動で削除してくれない
楽天GOLDでバナー画像を作成して掲載しているショップは、キャビネットへの引っ越し作業が必要となります。姉妹店のキャビネット画像も利用できません。こちらもそれぞれのショップでキャビネットに保存が必要です。
中～大規模なショップはこの作業が面倒だと思います。それなりに時間がかかってしまうでしょう。商品パーツは、掲載商品が売り切れた場合には、商品画像下部にグレー帯が入り「売り切れ」と表示されますが非表示にはなりません。
結論、新スマホトップのパーツは何を表示すべきか？
イベント開催時
上部
- 大バナーパーツ、大画像パーツ（縦配置1枚）、必要に応じて小画像パーツ
大バナーで、楽天のイベントバナー、クーポン、ショップ独自の特集ページなどを。大バナーにも掲載している特集ページの中で、もっとも推したいページを大画像でリンクすると目立って良いでしょう。
イベントや特集ページが沢山あるショップは、大画像パーツの下に小画像パーツで設置しても良いと思います。楽天市場トップページのように、大画像パーツを横スライドして、更に小画像パーツでスライドする作りはお客さまも慣れています。
自然災害・長期休暇など、お知らせパーツを利用したくなりますが、共通エリア部分に、「ショップからの重要なお知らせ」を表示できます。「基本情報設定 ＞ ショップからの重要なお知らせ」から利用して、上部のスペースを有効に活用しましょう。このショップからの重要なお知らせのほうが、背景色が変わり見てもらいやすいです。
通常時
上部
- 大バナーパーツ、大画像パーツ（横スクロールor縦配置）
イベント開催時で掲載できるものがあれば載せておきましょう。クーポンベタ付けだけしかないといった場合は、大画像パーツでクーポンを縦配置で並べていると見やすいです。
中部
- 大画像パーツ（横スクロール）
入口商品やメイン商材は大画像パーツでその商品を推しましょう、商品パーツよりも目立ちます。面倒な場合は「目玉商品（共通テンプレート）」を設置しておきましょう。もちろんタイトルが出ないので、タイトルパーツを上部につけておくと良いです。
- 商品（店舗内カテゴリ）パーツ
外注で新着や再販を作って自動更新しているショップはこの「商品（店舗内カテゴリ）」をうまく使えば代用できます。
ショップ内に「新商品」だけを登録するカテゴリを作って商品登録の際、このカテゴリを追加する運用にしましょう。そのカテゴリをこの「商品（店舗内カテゴリ）パーツ」で表示します。
この「商品（店舗内カテゴリ）パーツ」では、並び順を指定できるので、もちろん「新着順」にしておきましょう。しかも、商品パーツではできなかった、「在庫ありのみ」を表示できるので、手がかからず便利な新着が完成です。
アパレル系ショップでは必須の、新着や再販は、今後カテゴリに登録することで運用していきます。もちろん、タイトルパーツを付けて「もっと見る」を大画像パーツで作り、リンク先は作成したカテゴリページにしましょう。
- 店舗内ランキングパーツ
ランキングも掲載しておきたいです。商品を探しているだけのお客さまは参考にすることでしょう。タイトルパーツ、楽天GOLDでランキングを作っているショップは、もっと見る用の大画像パーツを付けると良いです。
下部
- 商品（店舗内カテゴリ）パーツ、小バナーパーツor小画像パーツ、商品レビューパーツ、リンクパーツ
この４つは下部につけておきましょう。商品（店舗内カテゴリ）パーツで、一番メインとなるカテゴリを掲載しておいて、その下に小バナーもしくは小画像パーツでカテゴリリストやブランドリストを表示するとスマートです。ショップのガイドや問い合わせ等は最下部にリンクパーツを利用しましょう。
このイベント開催時用の新トップと通常時用の新トップをそれぞれ作っておいて、通常トップと期間限定で設定して入れ替える仕組みにしておくと良いと思います。期間限定のイベントが続く場合、通常トップ１つと期間限定２つを運用していくのです。
これで完成となりますが、今後もパーツが増えるので、増えたパーツが上記よりも優先度が高いと考えた場合、入れ替えたり追加したりしても良いでしょう。
おわりに
ここまで新スマホトップページを解説しておいて、残念なお知らせがあります。スマホトップページはほとんど見られていないんです（笑）
実際にアクセスを調べてみていただきたいのですが、アクセスの90％以上が商品ページではないでしょうか？ 知り合いのショップでは、スマホからのアクセスが97％でした。
楽天市場でも今回の新スマホトップリリースにあわせて、トップへの導線を見直し、露出は増やしてはいますが、現状、お客さまが楽天市場のアプリやブラウザのトップページから、商品を検索して、商品が並ぶ検索結果画面からはワンクリック（タップ）でショップのトップには行けません。
ショップを運営している方は、やる事が多く、この新スマホトップへの移行にも時間が割けない状況かと思います。そのために上記コラムで、短時間でパッと作りたいという考えで、このページを訪れた方も多いのではないでしょうか？
当社では、もっとも力を入れるべき、スマホ商品ページで転換や回遊を高めるサービスを提供していますので、このコラムで、短時間でスマホトップへ移行が完了した方は、是非当社サービスも検討していただきたいです。
▼完全放置で売上アップ！楽天スマホ対策のためのWebサービス「EC-UP」
https://ec-up.jp/
合わせて読みたい
