29分でできる！あのサイトの“技”を盗め ― 第15回

懐かしの“マーキー”をjQueryでちょいオシャレに！

2009年02月23日 08時00分更新

文● 古籏一浩、ASCII.jp

　「インターネットで服は売れない」
　そんな過去の常識を大きく覆したといわれるのが、スタートトゥディが運営するECサイト「ZOZOTOWN」です。若者に絶大な人気のセレクトショップやアパレルブランドがこぞって出店するZOZOTOWNは、オープン当初から、サイトデザインの面でも注目を集めました。

　注目されたのは、ZOZO“TOWN”の名のとおり、セレクトショップが軒を並べる“町”をイメージしたデザイン――トップページのアニメーションや店舗ページのCGなど――ですが、もちろん優れた面はそうした見た目の部分だけではありません。ナビゲーションの面でも、モールとしての統一感を図りながら、使い勝手を高める工夫がされています。今回はこのZOZOTOWNのUIをお手本とさせてもらいましょう。

今回のお手本サイト：『ZOZOTOWN』

2004年のオープン以来、急成長を遂げているアパレルECサイト。スタートトゥデイが運営。「UNITED ARROWS」「BEAMS」など、リアル店舗でも若者に人気のあるセレクトショップを中心に、90店舗以上が出店。現在では会員数約が110万人、月間約4億ページビュー規模に成長。会員向けのブログやSNSも始め、時間消費型サイトへ転換している。

http://zozo.jp/

いつでもどこでも最新情報をチェックできるニュースヘッドライン

　たくさんのショップが出店するZOZOTOWNでは、新作商品の入荷、時間限定のセール、発売予定商品の先行予約など、訪れるたびにチェックしておきたい“旬”なイベントが毎日たくさんあります。そうした最新の情報を伝えるのが、ページの上部に表示されている「ニュースヘッドライン」です。


ZOZOTOWNのニュースヘッドライン。右から左へ最新情報が流れてきます

　まるで電光掲示板のように、右から左へ、常に最新情報の見出しがスクロールしてきます。一昔前に流行った“マーキー”といえば覚えている方も少なくないかもしれません。最近ではあまり見かけなくなりましたが、コンパクトなスペースにたくさんの情報を表示し、かつ、動きによってユーザーの注目を集めるには、有効な方法のひとつでしょう。

　さらに、このニュースヘッドラインをクリックすると、大きなパネルのサブウィドウがオーバーレイで展開し、最新情報を一覧で確認できます。「気になる情報を見かけたのに、すぐ次に切り替わってしまった」なんて場合も、こうして一覧からチェックできるので心配ありませんし、わざわざ別のページに移動する手間もなく便利です。