楽天ショップのデザインやトレンドをおさらい。
楽天ショップのデザイン・機能やコンテンツのトレンドを、一般的なものも含めてカテゴリに分けてご紹介します。
さて今年も毎年恒例、楽天ショップ・オブ・ザ・イヤー2015の発表が行われました。
グランプリ以下トップ3の顔ぶれは変わらず、7年連続での受賞となる爽快ドラッグがグランプリを獲得、総合2位はJoshin web 家電とPCの大型専門店、総合3位はエディオン 楽天市場店という、去年と同じ結果となりました。
ショップ・オブ・ザ・イヤーとは？1998年からスタートしたShop of the Year。
約4万店を誇る楽天市場の中から2015年度のお客様による得票数、本年度の売上、注文件数、売上の伸張率、お客様対応などから、総合賞、ジャンル賞、サービス賞、特別賞を決定する、楽天市場で最も栄えある賞です。【楽天市場】発表！2015年のベストショップ ショップ・オブ・ザ・イヤー2015
【楽天市場】発表！2015年のベストショップ ショップ・オブ・ザ・イヤー2015
改めて4万店ってスゴイ数ですよね（ちなみにYahoo!ショッピングだとなんと34万店！）。
当たり前なんですが、その店舗数分のショップデザインが存在することになります。そうなってくるとやはりトレンドっぽいものも生まれてきたり。そこで今回は最近の楽天ショップでよく見かける表現方法や、店舗デザインのトレンドをまとめてご紹介したいと思います。なかでも特に参考にしたいサイトとして、発表になったSOY受賞店舗を中心にご紹介していきます。
もちろんトレンドのデザインや機能を取り入れればすぐに売り上げが向上する、売れる、というものではありませんし、扱う商材や店舗規模によっても最適なデザインは異なります。けれど新しい表現を取り入れること自体は決して悪いことではないはず。気になったものはあなたの店舗でも一度取り入れてみてはいかがでしょう。より魅力的な楽天ショップになるかもしれませんよ！
楽天ショップでのパーツ・要素のデザイン。
多くの店舗で見られるメジャーなデザイン・機能を含め、制作時の参考まとめも兼ねてご紹介します。
マウスオーバーで展開するメニュー
子供ドレスのキャサリンコテージ-子供用フォーマルドレス・子供服の格安通販
宮崎自然の都グルメ情報｜完熟マンゴー・雑穀米・健康食品・美容食品【楽天市場】
以前からある文字だけの淡白なドロップダウンメニューではなく、最近ではサブリスト・画像も含んでデザインされた面積の広いメニューが多くなっています。
写真やイラストを使ったシンプルなナビ
JAS有機栽培米・無農薬栽培米のことなら 京の米職人【楽天市場店】
楽天市場La ChouChou（ラシュシュ） | 女性向け♪安くて可愛いiPhoneケースがいっぱい！
ヘッダーのメインメニューの数を絞り、写真を使いシンプルなデザインしたサイトもよく見かけます。ショップテーマや導線が伝わりやすくなりますね。
画面端に固定されたバナー
楽天市場 ZIP CLOTHING STOREメンズカジュアルショップ
【楽天市場】フェスティバルプラザ：イベント用品・駄菓子・雑貨・おもちゃ・文具・お祭り・クリスマス・通販
サイドだけでなくヘッダーにも配置してお祭り感を演出したり、ひとつのまとまりに複数リンクを設置したりと店舗ごとに様々なデザインが生まれています。漫画風のユニークな表現も。
タブメニューによるコンテンツ切り替え
最新トレンドメンズファッション通販★JIGGYS SHOP★
ルイールコン美ニエンスショップ -ちょっと素敵なビューティライフSHOP-
ポーターのビジネスバッグや財布なら吉田かばんの通販 GALLERIA
ページの一部要素単位での切り替えや、コンテンツごと切り替える方法まで、今でも多くの店舗で利用されています。スライドショーと組み合わせ、より多くの露出を再現している店舗もあります。
アコーディオン形式のサイドナビ
【楽天市場】ラッピング倶楽部 3240円以上で送料無料！ラッピング・クラフト・文具etc：ラッピング倶楽部[トップページ]
【楽天市場】腕時計、ワインディングマシンや雑貨等のアイテムをあなたへお届けします。：時計・雑貨FLOAT[トップページ]
多くのブランドを扱う店舗では重宝される折りたためるサイドメニュー。今でも現役で利用されます。マウスオーバーで展開するものとクリックで展開するものに分かれます。
スライドショー・カルーセル要素
【楽天市場】ほんとうの空のある福島から美味しいお米をまごころこめてお届けします：お米の福幸島[トップページ]
【楽天市場】アクセサリーJewel Vox | トレンドアイテムがお手頃プライスで手に入る！
トップページのメインビジュアルだけでなく、縦スクロールやカルーセルも利用して、1ページ中に複数スライドを設置、より多くの商品を露出させるため利用されています。楽天ポイントバナーにもよく使われます。
受注状況・ランキングなど賑わい要素
【楽天市場】おいもや：楽天プレゼントランキング1位 母の日花とスイーツ
受注状況の表示やレビュー・ランキング表示などの賑わい要素も、変わらず多くの店舗で採用されています。無料の外部ツールも増え、より一般的になった印象です。表現には各店舗の工夫が見られます。
楽天ショップでのレイアウトやコンテンツ。
ここ数年でのレイアウトの変化や、今も変わらぬ表現を含めてのご紹介です。
サイト幅の大きなトップページ
サンテラボ【楽天市場】 オーガニックコスメ、骨盤ガードルなどのインナーウェア、生活雑貨の通販 | 無添加自然派のコスメやエコな生活雑貨、インナーなどの各種取扱い
主流のワイドモニタのシェアが増え続けることで、全幅が1100pxを超える店舗もしばしば見かけるようになりました。これだけあれば3カラムを利用してもゆとりある表現ができますね。
カード・グリッド型のレイアウト
レスポンシブデザインと相性がよく、一般のWEBサイトではよく利用されるカード・グリッド型のレイアウトですが、ショップデザインでも一部ページで利用されています。
独自コンテンツ・特集ページ
男心をくすぐる「クロノグラフ」について知る！ | 腕時計コラム | 腕時計本舗
男心をくすぐる「クロノグラフ」について知る！ | 腕時計コラム | 腕時計本舗
映画公開記念！「スター・ウォーズ」特集 – Hamee（ハミィ）楽天店
多くの店舗が独自コンテンツや、通常のショップデザインとは異なる雰囲気の特集ページを作成しています。スマホに対応させている店舗も。
楽天goldで構築したカテゴリページ
【楽天市場】誕生日 フラワーギフト 生花アレンジ プリザーブド | 花のプレゼントならBunBun!Bee
/c以下のカテゴリURLではなく、楽天gold内に自前のカテゴリを構築して利用している店舗もあります。gold内に構築することで表現の幅が格段に広がります。
巨大なバナー・商品イメージ
食品を扱う店舗などでは、より大きく鮮明なビジュアルを使ってイメージ訴求を行っています。縦に長い、いわゆる楽天メソッドも健在です。
全画面を覆う没入感ある商品ページ
【楽天市場】ヨーロッパスタイルをベースに、様々なコーディネートを提供するMen’s SHOP：U-STREAM
必要最小限のナビゲーションを残し商品イメージでページを埋め尽くすこの手法は、没入感を与えユーザーをページに集中させます。
楽天ショップでの気になる表現やテクニック。
個人的に気になったデザイン・表現やコンテンツ、複数店舗でよく見かけるものをご紹介します。
デフォルト表示部分へのスタイル適用
モダンブルー楽天市場店 – 最大80%OFF＆3,500円以上送料無料のインポートセレクトショップ。グッチ他有名ブランド新作多数
【楽天市場】腕時計、ワインディングマシンや雑貨等のアイテムをあなたへお届けします。：時計・雑貨FLOAT
楽天モール内のデフォルト表示部分に独自のスタイルを適用させ、他店との差別化を図ります。文字の大きさの調整やリンクカラー変更、画像置換など方法は店舗により様々です。
印象的なタイポグラフィー主体のイメージ
【楽天市場】coca 大人のためのファストファッションストア
【楽天市場店】神戸レタス 安くて可愛いレディースファッションアイテム通販サイト
女性向けファッションショップでは、個性的なフォントを使った文字組が主役のイメージがよく使われます。
インスタグラムを利用したコンテンツ
【楽天市場】イーザッカマニアストアーズ：神戸最新のオシャレ発信基地！ウエア・アクセサリー・Tシャツ・雑貨通販（通信販売）
運用しやすいショップジャンルでは、インスタグラムやWEARを利用したコンテンツを用意している店舗もあります。
GIFアニメを使った動画風の表現
【楽天市場】soulberry(ソウルベリー)｜SHOP OF THE YEAR 2015
昔ながらのGIFアニメでパラパラ写真を作成・雰囲気ある動画風に利用している店舗も時おり見かけます。価格やキャッチコピーを点滅させるのと仕組みは同じですね。
ちょっとしたアニメーション
【楽天市場】アットコンタクト：処方せん不要のコンタクト通販サイト
メインメニューなどマウスオーバー時にちょっとしたアニメーションを利用する店舗も多くあります。それだけでどこかリッチに感じますね。
顔が見える安心感ある店舗紹介
会社概要｜ブランド古着中古通販サイト ブランドゥール[Branduru]
実際のショップスタッフが登場することで親密さが増し、安心感が醸成されます。多くの店舗で参考にしたいコンテンツです。
楽天グローバルマーケット向けページ
nanaple | Rakuten Global Market: Shopping Japanese products from Japan.
nanaple | Rakuten Global Market: Shopping Japanese products from Japan.
楽天グローバルマーケットに力を入れている店舗では、独自のナビゲーションやローカライズされた案内ページを作成して公開しています。今後もこういった店舗は増えていきそうです。
まとめ
あなたの気になるものはありましたか？今では当たり前のものから目新しい表現まで、なるべくショップジャンルにとらわれず集めたつもりですが、少し偏ってしまったかも。どのデザイン・表現方法も、自店に馴染む形でうまく取り入れている素敵な店舗が多く、非常に参考になりますね！また今回はPCサイト中心になってしまいましたが、スマホページではどのようになっているのかも気になるところです。
流行っているから、他店もやっているから、それだけで取り入れるのは良くないですが、自店の考えやコンセプトに合うものが見つかったなら、すぐに採用してしまいましょう！それではまた！
制作コスト削減！楽天で使える無料テンプレートやイラスト・写真素材12選。
ショップ運営でお悩みの方へ。
ネット通販やウェブ制作、ECサポート事業を行っている（株）ビリオンプラン・ジャパンが運営しています。楽天やYahoo!ショッピングなど各モールへの出店サポートや、商品撮影からページ制作までの運用提案、海外ローカライズ作業も行っています。
ショップ運営のお悩み、ご相談ください。
ビリオンプラン・ジャパンは日本を拠点に、香港などの海外グループ会社も生かし各種サービスをご提供しています。まずはお気軽にご相談くださいませ。
または、お電話でも承ります。
※ただいま新規ウェブ制作の受付は停止しております
10:00 - 19:00（土日祝休み）
06-6271-7761
ABOUT ME
- デザイナー／編集Twitter:@BILLIONPLAN_JP
- 大阪在住WEBデザイナー。制作会社、EC業界でデザイナーをやった後に、ゲームアプリの世界へ。そんなにゲーム好きじゃないことに気づいてウェブに出戻り。その後ビリオンプラン立ち上げに参加。ご相談はこちらにお願いします。フェネック飼いたい。 →記事一覧
Recent Posts
2016.10.26EC楽天RMSのカスタマイズで使えるclass名の一覧。
2016.09.30WEBWordPressプラグイン利用で、オリジナルシェアボタンを簡単設置。
2016.08.10EC注目のキッズファッション！楽天の参考デザインまとめ、子供服サイト10選。
2016.07.15DESIGNロゴだけでも変更しとこ！WordPressのログイン画面を簡単カスタマイズ。
デフォルト表示をデザイン！Yahoo!ストアのヘッダーをCSSでスッキリさせる方法。
独自カートで差別化！Yahoo!ストアのカート周りをCSSでデザインする方法。
新着記事を配信しています
FacebookやGoogle+で新着記事を配信しています。よろしければ「いいね！」や「フォロー」をお願いします。
