キャンペーンからEC主体のサイトにチェンジ

Flashを脱いで生まれ変わったユニクロ.COM

2009年03月30日 06時00分更新

文● 小橋川誠己／企画報道編集部

　FlashでもAjaxでもない。シンプルで機能的なWebサイトへ――。ユニクロの公式サイト「UNIQLO.COM」（http://www.uniqlo.com/jp/）が3月26日にリニューアルした。従来のキャンペーン情報中心から、商品紹介とECを中心としたサイトへ転換。商品購入ページへダイレクトに飛べるようになった新しいトップページは、それまでの派手なFlashアニメーションが姿を消し、画像とHTMLのみで表現されたシンプルかつインパクトのあるデザインに一新された。


「UNIQLO.COM」の新しいトップページ。縦方向4000ピクセル以上もある超縦長のページだ。ちなみに左上にあるロゴマークは、佐藤可士和氏がデザインしたことで知られる海外店舗用のデザインに統一された

旬の商品がすぐ見られる・買える「シンプルで超合理的なデザイン」へ

　新しい「UNIQLO.COM」のコンセプトは、「シンプルで超合理的なデザイン」（ユニクロ）。ユニクロの商品そのものにも通じるこのコンセプトは、「最新のトピックが一目で変わり、欲しい商品がすぐに買える」サイトデザインによって、具現化されている。

　以前のUNIQLO.COMは、どちらかといえばキャンペーン情報を中心とした、プロモーションサイトとしての性格が強かった。このため、トップページはマーケティングメッセージをビジュアル化したFlashアニメーションが主役。商品情報をチェックするには、「オンラインストア」のページに移動した後に、「MEN」「WOMEN」といったカテゴリを辿る必要があった。商品の情報を知りたい（あるいは買いたい）ユーザーにとっては、事実上トップページが2つあるような状態だった。


リニューアル前の「UNIQLO.COM」。Flashアニメーションによるキービジュアルがページ面積の半分近くを占めるレイアウトだった		サイトトップとは別になっていたリニューアル前の「オンラインショップ」

　これに対して、リニューアル後のUNIQLO.COMでは、オンラインショップのトップページを廃止して、サイトトップと統合。トップページには“旬”の新商品の写真画像がずらりと縦に並び、画像をクリックすればオンラインショップの詳細ページへすぐに移動できるようになった。


リニューアル後は、トップから商品画像をクリックすると直接商品ページに飛べるようになった

グリッドを使った、折り込みチラシのようなトップページ

　デザインも大きく変わった。ページの半分近くを占めていたFlashアニメーションはなくなり、写真画像とCSS／HTMLのみのシンプルな作りに。流行りのJavaScriptの利用も最低限に抑えた。代わって、大小のレイアウトブロックを意図的にずらして組み合わせることで“動き”を表現し、持ち前のカラフルな商品写真を使うことで楽しい雰囲気を作り出している。まるで、グリッド・システムを使った同社の折り込みチラシのようなデザインだ。


グリッド・システムを使った、ユニクロの折り込みチラシ。大小さまざまなサイズのブロックを巧みに組み合わせてレイアウトされている