楽天市場のデザインテクニックの航海術

楽天市場でよく見るデザイン集

楽天市場ではユーザーがその店舗で商品を購入したいと思えるような店舗づくりが必須になります。
とくにデザインにこだわる場合は、楽天GOLDを使った幅広いデザインで商品を魅せることが可能になります。
今回は楽天市場でよく見かけるデザインをご紹介します。

基本的なデザイン構造

標準的なレイアウトは、1カラム、2カラム、3カラムのいずれかになります。
楽天市場の傾向だと、左右のどちらかに商品コンテンツ、もう片方に検索窓やカテゴリーなどを置いて2カラムにしている店舗が多いです。
ブランド訴求の観点などから1カラムのレイアウトを使用して、コンテンツを目立たせる店舗も多いです。

パーツで見る楽天市場のデザイン

ここからはサイト全体を構成するデザインパーツについて見ていきます。

カルーセルバナー

楽天市場の王道デザインのひとつ。複数枚のバナーをくるくる回転させることで、キャンペーンや店舗の「売り」を訴求することができます。
画像は横に移動していくため、省スペースで複数の内容を訴求することができます。
一方でいま見えている画像以外は内容が隠れてしまい、画像が移動しないと次の画像が見ることができないなど、利便性に欠けてしまう部分もあります。
ですので、見せる順番や回転速度なども、適宜調整していく必要があるでしょう。

インフォメーション

新商品発売のお知らせや、夏季・冬季休暇、災害による配送遅延などの情報を記載します。
店舗をリピートしているユーザーにとっては、商品の最新情報をキャッチできるのはありがたいことです。
また商品を急いで手に入れたい、決まった日付でギフトを送りたいユーザーにとってはこのインフォメーションの情報はとても大切なものになります。

更新情報があることで、サイトがメンテナンスされていることを伝えることができますが、例えば数年前の更新情報がトップに出ている…といった店舗は信頼度を下げる要因を作ってしまうので定期的に見直しましょう。

特集バナー、特集エリア

お得なセール情報やいま一番売れている(売りたい)商品を、一覧で見せる店舗もあります。
先述したカルーセルバナーでは、いま見えている画像以外は内容が隠れてしまうデメリットがありますが、特集エリアを設けることで一目で確認することができます。
ただしサイズ感には注意が必要です。特にスマホで見たときに、ただバナーがずらりと長く並んでいるだけに見えないよう、クリエイティブなどに工夫が必要です。

カテゴリー

お店の主力商品や類似品を探したい・比較したいときにあると便利です。
カテゴリー名だけではイメージがつかない場合は、アイコンや画像を置くことでより伝わりやすくなります。

ランキング

お店の売れ筋を乗せることができます。
ランキング入りしている商品には、「バンドワゴン効果」という「こんなに人気があるのなら、きっと良い商品なんだろう」という心理的効果を働かせることも可能です。

金額別メニュー

いま見ている商品よりももっと手頃な商品はないか、またはグレードの高い商品はほかにないかなど、ユーザーが価格帯で探したいときに使用します。

ポップアップバナー

画面を開いた瞬間に、ページ内の要素の最前面に表示されます。
より目に飛び込んでくるので、お店の売りやキャンペーンを目につかせたいときに使用します。
ただし強い訴求力を持ってはいますが、サイトを訪問するたび毎回出てしまって邪魔ですし、ほかの要素を隠してしまうという最大のデメリットを含んでいます。
セール時限定で使用するなど、使いどころに注意が必要です。

【PC推奨】縦型バナー

ページの端に設置して常に表示させることで目につかせることができます。
楽天お買い物マラソンや楽天スーパーSALEなど、お得なセールのときに賑やかしとして使用する店舗が多いです。
目立つバナーではありますが、ページを見る目を散らす要因にもなるため、こちらも使いどころに注意しましょう。

【PC推奨】グローバルナビゲーション

商品のカテゴリーなどを記載します。
ユーザーが迷わず店舗でお買い物をするために整理された情報を記載しましょう。

マウスポインタを文字の上に置くとメニューが表示される「メガメニュー」は、商品点数が多い店舗では有効です。

【スマホ推奨】ハンバーガーメニュー

スマホではPCほど画面が大きくないため、一画面で見せられる情報は限られています。
よりコンパクトに表示させるのが、ハンバーガーメニューです。
三本線のマークを押すことで、隠れているメニューを表示させることができます。
近年ではハンバーガーメニューを取り入れているサイトが多く見られますが、ユーザーの中には「このボタンがどんな意味なのか分からない」「押すのが面倒」という方もいます。
アクセスするユーザー層にあわせて取り入れるかどうか検討しましょう。

 

商品ページ用デザインテンプレート

商品ページのレイアウトは楽天市場が複数のテンプレートを用意しています。
商品情報に合ったテンプレートを選択するようにしましょう。
ちなみに楽天市場では、テンプレートAを使用している店舗が多く見られます。

通常商品、予約商品向けテンプレートパターン

定期購入・頒布会商品向けテンプレートパターン