楽天市場のトップページが「クリムゾンレッド」からグレー基調に変わったワケ

刷新後の楽天市場のトップページ

河野奈保執行役員は「楽天市場のトップページはインフラ的な要素もあり、こうした多くのユーザーが慣れているものは、大幅に変更するより日々チューニングしていくのが基本。もちろん11年の刷新以降、毎日改善はしているが、とはいえ次のステップに進むためには作り変えが必要だと考えた」と狙いを語る。サイト全体のデザイン性が、トレンドとややずれてきていたからだ。刷新に着手したのは今年2月だが、準備には1年以上かけたという。

刷新にあたっては入念にA/Bテストを実施。「枠線の太さや検索窓の大きさを数ミリ変えるだけでもユーザーの反応はまったく違ってくる」（河野執行役員）。

11年の刷新では、ページ構成を2カラム（段組）から3カラムに変更。中央に商品閲覧履歴など、パーソナライズされたデータを表示するようにしたわけだが、今回はこれを引き継ぎながらデザインを大きく変えた。

大きな変更点として挙げられるのが、テキストリンクから、マウスカーソルを合わせると、細分化されたジャンルがひと固まりになってカーソルの右側に表示される「ブロックリンク」に変えたこと。「テキストリンクは青色の下線が引かれていることもあり、視覚的に分かりやすいし、実際にその方がCTR（クリック）率は良かった」（同）。

カラーやブロックリンクの幅など、細かい部分を変えたトップページのデザインを多数用意。「単純に『テキストリンクかブロックリンクか』というA/Bテストではなく、ブロックリンクにしたときの幅・高さ、リンクにマウスカーソルを合わせて際に反転するときの色、マウスを離したときの動きなど細かい部分を調節し、どれが最適かを入念にチェックした」結果、現在の形式となった。

グレーを基調としたトップページだが、これに関しても細かく色調を変えてテストするなど、ページのバランスを取ることに腐心。色を目立たせればその部分にクリックは集中するが、ページ全体としてはバランスが悪くなってしまうからだ。「クリックの多いコンテンツを上から下に並べる発想だと、楽天市場のビジネスモデルは成り立たない。モールである以上、各店舗に平等に機会を与えないといけないし、顧客に新たな商品との出会いを提供するのがコンセプトになっているから」（河野執行役員）。適度にコンテンツをばらけさせることで、トップページ下部まで閲覧してもらえる設計としている。

近年は商品画像のクオリティーも上がってきていることから、「色数を引き算する」ことで中央のカラムに表示される商品を引き立てている。これまで、楽天市場のカラーといえば赤が基本だったわけだが、以前より目立たない形に。トップページ刷新を実際に担当した、楽天市場事業編成第二部市場トップリニューアルプロジェクトチームリーダーの西岡大揮氏は「既存の赤いトップページに関してはユーザーへのインタビューも行い意識を調査した」と話す。

それによると、ヘビーユーザーの場合、自分が保有するポイントやキャンペーンのバナーしか見ていないという課題が浮き彫りになった。一方、ライトユーザーからは「赤が目立ちすぎる」「分かりづらい」という声があったことから、赤を減らし、コンテンツを目立たせる設計にすることで、検索の利用率などを上げることを目指した。（つづく）