楽天市場のWEBサイトデザイン変遷に学ぶ - コントラスト比

楽天市場が先日4年ぶりにトップページをリニューアルしたことが伝えられました。
http://www.skuare.net/article/wp-content/uploads/2015/08/rakuten20150827...

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

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

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

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

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

ではどのように変わったのか、コントラスト比を見てみたいと思います。
WCAFレベル「Level AAA, Medium Bold and Large Non-Bold Text (4.5:1)」での検証です。
まず現在（2015/8/27）のデザイン
http://www.skuare.net/article/wp-content/uploads/2015/08/rakuten1.png これに対して、リニューアル以前（2015/5/8）のデザインです。
http://www.skuare.net/article/wp-content/uploads/2015/08/rakuten2.png

並べて見ると、左カラムが少し目立たなくなる一方で、ヘッダーの導線部分や中央のカラムにあるバナー・商品が目に入りやすいようになっています。
特に画像が多くなったことや余白が十分に確保されたことで、ひとつひとつの視認性が高まっています。
http://www.skuare.net/article/wp-content/uploads/2015/08/rakuten3.png

ナビゲーションの改善

目立ちにくくなった左のメニューですが、マウスオーバーで表示されるサブカテゴリが以前と比べて大きくなっています。
表示される部分も余白を利用し、スッキリと見やすくなっています。
http://www.skuare.net/article/wp-content/uploads/2015/08/rakuten4.png

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

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

2010～1997の楽天市場サイトのデザイン変遷は下記で。 http://www.skuare.net/article/2015/08/27/how-growth-rakuten/