ZOZOのデザインについて
•Download as PPTX, PDF•
1 like•1,062 views
ZOZOTOWNの黎明期からこれまでのデザインの変遷をデザイナーが解説しました。 トーク内容はノートをご覧ください。
Recommended
More Related Content
What's hot
What's hot (20)
ZOZOのデザインについて
- 2. 今日のお話 1. ZOZOTOWNがどんな想いや過程を経てデザインされてきたのか 2. ZOZOTOWNのデザイナーの使命 3. ZOZOTOWNのデザイン手法
- 15. No destruction, no creation.
- 20. スマホファーストの時代
- 25. 2. ZOZOのデザイナーの使命
- 26. ZOZOを好きになってもらう
- 27. お客さんに喜んでもらう事
- 33. ただ「使える」ってだけでは弱い
- 35. ありがとうございました
Editor's Notes
- 今日は「ZOZOTOWNのデザインについて」 ということでお話させていただきます。
- お伝えしたい内容です。 1. ZOZOTOWNがどういう考えで作られてきたかという話、 2. ZOZOTOWNのデザイナーの使命（デザイナーの考える最終目的） 3. ZOZOTOWNのデザイナーのデザイン手法。と、 大きく3つの構成でお話しようと思います。 伝えたい事は沢山あるのですが、時間が限られていますので、 急ぎ足になったらごめんなさい。 ちなみに、3、これは参加型のワークショップ形式で楽しく進められればと思います。
- これはアンケートの回答にも非常に多い質問内容でしたので、 みなさん割と興味ある内容なのかなと思います。 今日は過去のゾゾのデザインの変遷を辿っていきながら、 その時々のデザインの意味と役割なんかをお伝えできればと思います。
- まずZOZOTOWNのこれまでのデザインの流れは大きく分けて3つあります ・ネット上に街を ・街から人へ ・スマートフォン中心へ
- 2004年の12月にZOZOTOWNが誕生するのですが、 その時のTOPページのデザインです。 だいぶ昔の絵ですが、タウンのビジュアルがすごく写実的で、 リアルにこういうショッピングモールがある様な印象ですね。 ちなみにトップにはショップへのリンクがほとんどで、 商品写真が一つもありません。 裏原の勢いがまだあった時代ですので、 ブランドに惹かれてランディングしてくるユーザーがほとどだったと思います。 右上には来場者数をリアルタイムで表示したりして「にぎわい」を演出しています。 ショップ数も表示されていますね。
- 2006年時点のデザインです。 だいぶ様変わりしました。 街のビジュアルは当然残ってますが、 デザインが違いますね。 グラフィック要素が強くなったというか。 これ以降、街のビジュアル（通称マチビジュと呼ばれてました）は、サイトトップに表示される単なるビジュアルの枠を越えて、 ZOZOTOWNのアイデンティティとして確立されて、広告などでも多様されて広く認知されていきます。 2004年のビジュアルは、本当にどこかにありそうじゃないですか。アウトレットモールの広告みたいだし。 でもそれじゃダメで、「ネット上にある街」というニュアンスが必要でした。 この時のデザインの背景として、 当時、世間一般では洋服のネットショッピングに対するアレルギーも今より強くありましたが、 なによりブランドが「ネットで服を売る」という行為に対してまだまだ懐疑的でありました。 もちろんそうではないブランドも多くありましたが、 特にハイブランドやこだわりの強いブランドはその傾向が強かったです。 その大きな理由としては、 売り場の世界観をコントロールできなかったり、その他大勢のブランドと横並びにされるなど、 僕自身もハイブランドの打ち合わせに同行する事も何度かありましたが、 そういった意見が非常に多かったのを覚えています。 基本的に量販店やモールでの販売はブランドイメージに著しく影響を及ぼすという考えで、 ZOZOには出店しないという有名ブランドもまだまだたくさんありました。
- そこを戦略的に解決していった要素の一つがデザインです。 ブランドの事を徹底的に理解したデザインを目指して、 CGやFlashを駆使し、世界観を丁寧に汲んだショップページをブランド毎にデザインし、 特別感を演出しました。 これならZOZOで売ってもいいとブランドに思わせることで、一つずつブランドを獲得していきました。 これらの表現は、容量的にとても重くて、例えば ZOZOTOPのスクロールする街のイメージは、数メガのswfファイルが昼と夜で2回切り替わりました。 一応ショップへのリンクになっていますが当然誰も使わない。 ユーザビリティとしてはよいものではありませんでしたが、 ZOZOTOWNをこんなにワクワクするものなのだと認知させるには十分な役割を果たしました。
- ZOZOのトップページをメディアとして利用してもらい、 クライアントにユニークなWEB広告を提案する。という試みを行ったのもこの時期です。 単純に媒体費では大した金額にはなりませんので、これもZOZOのイメージを上げる戦略でした。 こんな感じで少しずつ進化していったZOZOTOWNのデザインですが、 2010年の節目に、大きくデザインが変わります。 これまでの街というアイデンティティに頼りまくってましたが、 「街から人へ」というテーマのもと それを捨ててしまうんですね。
- 当時はソーシャルコマースっていうバズワードもあったり、 みんながSNSで情報を共有しだした時代だったので、 これからは口コミで買っていくだろうと。 もうgoogleで検索する時代は終わると。 だったらその人の感じ 人がたくさんいて活発にそれぞれが発信してる雰囲気をトップページにおいたわけですね。 なぜ街というアイコン。かなり認知されていましたし、かっこいい！という声もたくさんもらってましたし、 その他多くのECとも差別化できて強烈なブランドイメージになってました。 なぜそれを捨ててまでリニューアルしたのか。 もうちょい深く解説していきましょう。
- おいおいまじかよダジーと。 絶賛してただろ。さっきまでと。 だがちょっと待ってください。
- bape観覧車乗れないし、 こんなお店なんですよ。って動画で言われてもさー 中入れないからね。 リアルに無いからね。 飾りだったわけです。 来場者数とかも表示したりして、 人がいるバーチャルな街を演出したりもしましたが、 到底リアルを超える事はできなかったわけですね。 みなさんスキューモフィズムって知ってますか？
- スキューモフィズムでデザインするメリットは、 デザインが直感的に機能を理解させる手助けをすることです。 おおこれコンパスやんけ。方角みたろ。と。 で、ボタンだったら、、これは押せますよ〜 マグカップだったら、この取っ手を持てるよ〜というデザインになってるわけです。 こういった対象が訴えかけてくることを、アフォーダンスといいます。 というわけで、先ほどの話、思い出してください。 ZOZOの黎明期、ネットで服を売るって事が、消費者もブランドも、よくイメージできてなかった。 ネットで服を買うという行為を。想像できていなかった。 だから、ゾゾって言われても、、 一体何者なのかわからないわけです。 だからこそ、
- この時は必要だったんです。 ネット上にあるZOZOTOWNが、洋服の売り場だってことを伝えるのに、ファッションブランドが並んでる街以上のものはなかった。
- でもでも、時代は変わります。 今ではECを当たり前の様に体験して、普通に買っていきます。 別に街である必要ないんです。
- なので、 デザインの上で、一度街というコミュニケーションを挟む必要がなくなったので、 よりシンプルな買いに直結できる表現をすることができる様になりました。 ってことは、非常に使い勝手が増します。 重くて忌々しいフラッシュもないですし、ショップトップにあったコンセプトムービーとかもなくなりました。 ユーザーはゾゾにきたらすぐに商品を探していいものがあれば買っていけばばいいだけ。 すごくシンプルになっていきました。 で、この体験こそが、ネットで服を買うメリットだったわけです。
- ちなみにですね、 このリニューアルの2010年、 マイクロソフトも同時にスキューモフィズムをやめてるんですね、 MetroといわれるUIデザインを発表して、デザインの世界に驚きを与えました。 それまでデザイナーはUIをスキューモフィズムで再現するのが、ベストな選択だとおもってたわけですから、 え？こんなんでええんか？と。これボタンってわかるんかいな？と。 だって、デザインの本なんかに「ボタンはボタンらしく押しやすいとボタンそのものが訴えかけていなければならない」 って書いてある様な時代でしたから。 このメトロをきっかけに、スキューモフィズムを再考する動きが現れて、 反発する様に、過度なメタファーを与えない表現＝フラットデザイン へと向かっていきます。
- そういうわけで 街を捨てて、ソーシャルに大きく振り切った ZOZOTOWNでしたが、
- という事に気づきます。 ヤラレター！聞いてないよーって感じです。 当時はゆうほど盛り上がらなかったんですね。 というか、確かにSNS上に口コミは増えたし、 口コミをみて購入するユーザーも増えたと思うけど、 各SNSからの流入が多少増えた程度で、大きなインパクトとはなりませんでした。 こうして、ZOZOのフロントからふきだしは消えていくことになります。
- そして2014年、スマホがリニューアルされます。 スマホに合わせてPCもリニューアルされます。
- 順調にユーザー数も増えていたスマホですが、 デザインにはいまだにスキューモフィズムを取り入れた古いものでした。 さきほどマイクロソフトのメトロのお話をしましたが、 その流れは堰を切ったようにどんどん強くなってきていて、 「あっというま」にスキューモな表現は古くなっていったのです。 ってことで、2014年にスマホとPCをリニューアルしました。 世に言うフラットデザイン時代の到来です。 その辺をちょっとだけ説明しますと、
- スマホの爆発的な普及で、 スクリーンは見るものから、タッチできるものという認識に変わりました。 先ほどちらっと言ったアフォーダンス（ボタンがボタンだよーと訴えかける） グラフィック上のアフォーダンスがなくても、画面=タッチできるものと誰もが認識しています。 そうなると、物理的なボタンのデザインっていうのは、無駄な装飾でしかない。 そうやって、ZOZOのデザインもスマホに合わせて（PCも）デザインが変更されることになります。
- この様に。
- こうしてZOZOTOWNは、こういった変遷をたどって時代時代に合わせてデザインが進化していったことになります。 ということで、どういった思いや過程を経てデザインされてきたのか、というお話でした。
- 2. ZOZOのデザイナーの使命のお話をします。 ZOZOのデザイナーの使命とは、、、、
- ズバリ、ゾゾを好きになってもらう。これにつきます。 画面はもちろん、届いた箱・洋服、アフターフォロー、考えられるタッチポイント全てを通して 我々のサービスの質を感じてもらって、 お客さんに信頼され、好きになってもらい、何度でも使い続けてもらう。 そうなるようにするのがZOZOのデザイナーの使命です。 これはとても大事な事で、好かれる・愛されるという事は何よりも代えがたい武器だと思います。 そしてZOZOTOWNは今の所、競合他者のECサイトに比べてユーザーに愛されているサイトであると僕は思っています。 で、ゾゾを好きになってもらうには、、、
- 当たり前だけど、これが一番ですね。 でもこのたった一行のシンプルな事がなかなか難しいのかもしれないですね。 これが出来ない企業って実はたくさんあると思いますし。 では、ユーザーに喜んでもらえそうな事って何でしょうか？ ZOZOTOWNをデザインする上でちょっと例を挙げてみたいと思います。
- まずはUIを例にあげます。 使い勝手を良くするってのは、 ひとつユーザーを喜ばせる事だと思います。 これはグッズのボタンを改修したときの絵です。
- 以上！2工程で終わりです。 UI自体はチリつも系というか、 こういう細やかな積み重ねで、 使いやすいZOZOTOWNという印象が形成できれば、 僕らとしては大成功なわけです。
- これらも、細かいUIの改修なのですが、時間がないので興味ある方は個別に聞いてください。（当日説明は省きました）
- そして、こちらは、ZOZOの箱のデザインを変えて、 スターウォーズのストームトルーパーのマスクが作れるというボックスで送った企画になります。 さっきのがUIデザインの話だとするとこれはUXデザインの話です。 ユーザーにユニークな体験をしてもらいたいという想いで作りました。
- こちらも直接購買には関係ありませんが、 こういうのとか、福引きとかもそうだけど、 ゾゾタウンのデザインを語る上で外せない大事な要素となっています。 中にはこれって必要なの？って思う人もいるかもしれないけど、 必要です。といいたいです。 なぜでしょうか？
- 普通に使えてるのはあたりまえ。です。 その上でユーザーに好かれる個性がデザインされているのがマスト。 要は付加価値です。それがデザインされていないと、良いデザインとはいえない。 例えばコンビニ。扱ってる商品なんて大して代わり映えしないけど、 ちょっとした違いが決定的な差を生んでます。 ZOZOも他のECサイトと同じ事をしていたら、コモディティ化は避けらません。 定期的に話題を作ったり、戦略的にリニューアルしたり、 他がやらない様なことをするってのも必要かと思います。 そういう事をデザインするのもデザイン部の役割だと考えています。
- 注）こちらは当日会場でワークショップを開催しました。
- 以上です。ありがとうございました。