E-Commerceサイトの開発E-Commerce Site

ショップサイトのリニューアルや新規立ち上げのお仕事も777の守備範囲です。

2005年に担当させていただいたBEYESオンラインストアのリニューアル。それは、カヤック柳澤くん、プロジェクター田中耕一郎くんとともに考えた、僕らなりの「ネットショップデザインのあり方」に対するひとつの答えでした。

オンラインショップにおいて、商品の見え方はその売り上げを左右する最重要要素。そう考えた僕たちは、ショップで商品を表示する基本モジュールの概念開発から始めました。お店で買った商品によくついている商品タグ。その概念を持ち込み、商品名や値段、商品写真、バイヤーコメントなどがひと固まりになった商品情報単位「ユニット」を定義し、そのひと固まりがきちんとデザイン管理されるルールと仕組みをつくりました。その概念を生み出したことによって、更新担当は基本情報入力と商品画像のアップ、置き場所の指定をするだけで、デザイナーの手を借りることなくお店に商品が並べられるようになっただけでなく、商品の入れ替えも並ぶ順の変更も自由にできるようになりました。コンビニの店長が売れ行きにあわせて臨機応変に棚をいじるように、このショップの棚も自由に組み替えることができるようになっています。

ウィンドウショッピングをするように

リアルなお店で商品を買いたくなるとき。それはたとえば、馴染みのお店の前を通ったその瞬間、ショーウィンドウに並んだ新作を見かけたときであったりします。ウィンドウショッピングは顧客の購入欲求を高める重要な機会。であるからこそ、トップページに旬の商品がたくさん並ぶことにこだわりたかった。 BEYESのトップインターフェースの特徴は、60点以上の新作商品が並ぶこと。ショップファンたちは、トップに並んだ魅力的な新商品たちを上下スクロールのシンプルなインターフェースで見回していきます。

商品棚は、検索棚に変わる

トップページには店内商品の検索ツールが用意され、そこで自分が探している商品の絞り込みができるようになっています。カテゴリーで探すもよし、ブランドで探すもよし。何がしかのパラメーターで絞り込みを行うと、商品がズラーっと並んでいた棚が、検索結果の棚に変わります。そう。機能によってページデザインが変わっていくのではなく、同じインターフェースの中で欲しいものに出会える仕組みを実現する。そうしたシンプルな仕組みが、ユーザービリティをぐっとアップさせることになるのです。

階層は限りなく浅く

BEYESの店舗は、クリック数も最小化されるように設計されています。トップで欲しいものを見つけたら、その商品をクリックして詳細ページに。その詳細ページには、より詳しい情報があると同時に、購入のためのサイズ選択や数量指定もできるようになっているので、そのページで入力して購入ボタンを押したら、あとは購入手続きへ。基本2階層の行ったり来たりで、基本体験が完結していくように設計されています。階層が浅いから、探しやすいし、迷うこともないのです。

レコメンドもシンプルに

個々の商品情報を「ユニット」型にしたことで、商品のレコメンドの仕組みもシンプルになりました。ある商品情報を見たら、それに関連する、あるいは、その商品を購入している人がよく買っている商品を表示する。それも、そこに並べる商品ユニットを記号指定すれば、すぐに画面に現れます。

クリエイティブな発信を

オンラインのセレクトショップの先駆け的存在だったBEYESは、クリエイティブな発信をしていくことも重要でした。2005年のオープン以降、トップページの最上位エリアには、旬なデザイナーがつくる旬なブランドの紹介コンテンツがつくられました。それは、旬なブランド情報であると同時にデザインコンシャスな人々には旬なデザインコンテンツでもある。その仕組みによって、たくさんの感度高いネットユーザーを呼び寄せることにもつながりました。

以後のネットセレクトショップのベンチマークに

BEYESで生み出した上記の仕組みとデザインのあり方は、その後の日本のショップデザインに少なからず影響を与えることになりました。多くのショップがユニット型の商品表示デザインを採用しショップインターフェース管理をするようになった。今は普通になったそうした仕組みの先駆けが、このショップのデザインだったのです。

→BEYESオンラインストア