有名サイトに学ぶトップページの要素構成 – 楽天市場編

楽天市場が先日4年ぶりにトップページをリニューアルしたことが伝えられました。
有名サイトに学ぶトップページの要素構成 - 楽天市場編

目的としては下記ということです。

主要な変更点としては、企画バナー・商品画像・店舗ロゴの視認性を向上したり、ジャンル一覧等のリンク設定をテキストリンクからブロックレベルでのリンクに変更して操作性を向上しました。また楽天グループの中核のサービスとして、「楽天市場」における各グループサービスサイトへの告知枠のデザインを変更してクロスユースを促進します。
楽天株式会社:  「楽天市場」、新トップページを本日から正式公開 | ニュース

なお、すでに効果も見られているようです。

トップページから離脱してしまうユーザーの減少や、ライトユーザーの購入率の向上などが見られているという。
出典:楽天市場、トップページを約4年ぶりにリニューアル | Shopping Tribe

ユーザーのペルソナを考慮し、より中央カラムに視線が行くコントラスト比で構成

ではどのように変わったのか、コントラスト比を見てみたいと思います。
WCAFレベル「Level AAA, Medium Bold and Large Non-Bold Text (4.5:1)」での検証です。
まず現在(2015/8/27)のデザイン
有名サイトに学ぶトップページの要素構成 - 楽天市場編
これに対して、リニューアル以前(2015/5/8)のデザインです。
有名サイトに学ぶトップページの要素構成 - 楽天市場編

並べて見ると、左カラムが少し目立たなくなる一方で、ヘッダーの導線部分や中央のカラムにあるバナー・商品が目に入りやすいようになっています。
特に画像が多くなったことや余白が十分に確保されたことで、ひとつひとつの視認性が高まっています。
有名サイトに学ぶトップページの要素構成 - 楽天市場編

目立ちにくくなった左のメニューですが、マウスオーバーで表示されるサブカテゴリが以前と比べて大きくなっています。
表示される部分も余白を利用し、スッキリと見やすくなっています。
有名サイトに学ぶトップページの要素構成 - 楽天市場編

ユーザーのペルソナを考慮し、目新しいものをしっかりと目立たせ、目的をもったユーザーは勝手知ったるナビゲーションから遷移いただく。
この方針で不必要にナビゲーションを目立たせることを廃止しているのだと思われます。
これにより、冒頭のライトユーザーの購入率の向上などにつながっているのでしょう。

追加された要素

要素としても幾つか追加され、イチオシやジャンル別も含めた人気ランキング、Pick Upなども中央に配置され、スクロールされやすい時代に沿ったトップページの構成になったと考えれます。むしろ今までなぜなかったのかという感じですが。
また、いつの間にか追加されていた「おすすめショップ」なども含めて、店舗側に課金できる体系も増えたと推測されます。

楽天市場サイトのデザイン変遷

2010/05/08

Yahoo!的なインデックススタイル
有名サイトに学ぶトップページの要素構成 - 楽天市場編

2008/05/08

ちょっと幅が狭くなっています。
有名サイトに学ぶトップページの要素構成 - 楽天市場編

2003/05/26

有名サイトに学ぶトップページの要素構成 - 楽天市場編

2001/05/09

有名サイトに学ぶトップページの要素構成 - 楽天市場編

2000/05/10

ガラケーっぽさがあります。
有名サイトに学ぶトップページの要素構成 - 楽天市場編

1997/06/01

有名サイトに学ぶトップページの要素構成 - 楽天市場編
Internet Archive: Wayback Machine最古のデザイン

余談

Internet Archive: Wayback Machineで調べていると下記のようなものが出てきました。
しっかりしていますね。

楽天市場のドメイン外からのアクセスで表示される注意喚起のモーダル
有名サイトに学ぶトップページの要素構成 - 楽天市場編

日本以外のアクセスに対して、英語サイトでの表示を促すモーダル
有名サイトに学ぶトップページの要素構成 - 楽天市場編

growth > 有名サイトに学ぶトップページの要素構成 – 楽天市場編