タオバオトップページ_アートボード_1_のコピー

お手本にしたい中国アプリ｜タオバオのトップページに施された工夫

ビントウ

ビントウ(@bing_tou)です。

私は普段ECサイトの開発部にてサービス・機能のディレクションを行っており、日々「使いやすさ」について見た目と操作の観点から検討を繰り返しています。

最近は中国ECからデザインや機能を学ぶことも多く、このnoteではそこで得た学びをまとめたいと思います。

今回は・・中国ECのレジェンド「淘宝网（APP版トップページ）」！

ところでタオバオと言えば日本でよく知られるEC等と比べて「画面が派手、機能が多い」という印象があります。

画像1


そして、その割にごちゃごちゃしていない不思議。

この記事ではタオバオについて、「なんとなく使いやすい」から一歩踏み込んで「何故使いやすいのか」「どこが凄いのか」という部分を現役ディレクター視点でまとめていきます。

＊＊＊

ここがすごい１：ごちゃつきを感じさせない画面 〜情報の統一感〜

早速、情報量が多いのにごちゃついて見えないのは何故かについて。

タオバオAPPのホーム画面のファーストビュー（スクロールせずに表示されている部分、端末：iPhone7）の情報は大きく分けると以下のようになります。

・ヘッダーメニュー：QRスキャン、検索窓、画像検索、地域切り替え、会員証、カテゴリ導線 ※固定表示
・常設バナー：8デザイン ※3秒ごとに切り替え
・関連サービスメニュー：天猫、淘票票、闲鱼などの全18関連サービスへの導線
・期間限定バナー：W11や〇〇節といったイベントバナー ※常設ではない
・淘宝内の特集導線：有好货，天天特价など淘宝商品のセール会場
・フッターメニュー：ホーム導線、微淘、お知らせ、カート、マイページ ※固定表示

改めて挙げてみても分かるように、１画面の情報量はかなり多いです。
日本の代表的なECサイトと比べても一目瞭然ですね。

画像2

＜では、なぜスッキリして見える？＞
これはタオバオが「あなたに関係のあることだけを表示しますよ」という「情報統一感」を貫いているからであると考えます。

実は、タオバオは使う人によって表示される内容が大きく異なります。
ユーザーの行動履歴を正確に取得し、適切なタイミングで関連データとともに表示しているため、「自分に関係のあること」ばかりが表示される仕組みです。

そのため、視覚的にはごちゃつく要素があっても、自分に馴染みのある情報のみが表示されているため頭の中はごちゃつかない（＝頭の中で勝手に情報が整理される）と考えます。

まとめ：視覚的なごちゃつきと頭の中（情報）のごちゃつきは別物

＊＊＊

ここがすごい２：つい押してしまう、「あなただけの検索窓」


「あなたに関係のあることだけを表示しますよ」の真骨頂は、ずばりトップメニューに固定表示されている「検索窓」だと思います。

検索窓にデフォルトで検索ワードが表示されているのですが、これも人によって異なるどころか、違うページを開く度にワードが変化していきます。

今もキャリーバックの商品ページを開くと「キャリーバック　小型」と言う、いかにもキャリーバックを見ている人が同時に検討していそうなワードが表示されました。

（これだけ大量の検索ワードを一体どこに保管して管理されているのか・・）

ちなみに日本のECの大半は「なにをお探しですか？」といった検索誘導系の文言が固定表示されており、キーワードの出し分けはそう簡単に導入できないことが分かります。

画像3

↑日本語の ワンピース/ワンピ/わんぴのように表記揺れが発生しづらそうなのも羨ましい

まとめ：淘宝では状況によって検索キーワードがリアルタイムで変化する

＊＊＊

ここがすごい３：それぞれが得意な守備範囲を守る野球チームのような関連サービスメニュー


関連サービスへの導線は20種類近くあり、ただでさえ多いのですが、これらの関連サービスに訪問しても自分に関係のあるものが表示されるようになっています。

淘宝で「アイシャドウ」を探している場合、ブランド直売「天猫」でもアイシャドウが表示され、フリマの「闲鱼」でもアイシャドウが表示されます。

画像4

探しているモノは同じでも、どういった方法で手に入れるかはその時の状況によって変わったりするものです。

このようなシチュエーションに応えるべく、ブランド直売型、個人のフリマ販売・・それぞれ守備範囲の異なる関連サービスに対してアリババという監督が状況に応じた指令を出し、ユーザーにとってのお買い物体験をより気持ちの良いものにしているのです。

まとめ：タオバオでの閲覧履歴は関連サービスにも活用されている

＊＊＊

ここがすごい４：好きなものだけ流れてくる回転寿司のようなバナー


タオバオのバナーは常時8デザインが3秒ごとに切り替わる仕様です。これもなかなかの多さなのですが、当然のように人によって表示する内容を分けています。

それどころか同一人物であっても条件によってバナーデザインが逐一変化することが特徴です。

画像6

↑キャリーバッグのページを訪問した後のホーム画面バナー

バナーと言えば「邪魔なもの」といったイメージも強いですが、それは自分と関係ない内容であるからであり、自分の好きなもの（私の場合コスメ、ファッション、ステーショナリーなど）ばかりが表示される場合は邪魔どころか次のバナーを見てしまいます。

私はこれを自分の好きなサーモンネタばかり流れてくる回転寿司みたいだな・・と思いました。あまりにもサーモンばかり流れてくるので、次は炙りチーズが来るのでは？カルパッチョ風が来るのでは？とついついレーンを見続けてしまう。

そして、更に感心したことがいかにも使い回せそうなバナーデザインです。
シャリを大量に用意しておき、お客さんの嗜好によって握るネタを即座に変える厨房が脳裏に浮かびました。

画像5

↑画像と文字だけ差し替えた感。


現場目線からすると訪問ユーザーによって出しわけできるほどのデザインがストックされている時点で尊敬の念が止みません。かなりシステマチックに運用をしないとこれだけのバナー量を管理することは難しいと思います。

まとめ：タオバオでは膨大なバナーデザインが生産・運用されている

＊＊＊

まとめ：私たちが学べること

改めて書き出してみて、このレベルに到達するには一体何人がどのくらいの時間を掛けないと行けないか・・と途方もない気持ちになりました。笑

それでも私たちが学べること、実践できることはたくさんあるはず。

最後に私たちが活用できることを以下に記します。

・大衆トレンドだけではなく嗜好に沿う「考え方」を持つ
・ユーザーとの接点をもっと持てそうな箇所を洗い出す
・ユーザーによって表示内容を変化出来そうな場所を洗い出す
・ホーム画面の空間の活かし方を「視認性」だけで判断しない
・データは「横に広げる」

＊＊＊

今回はタオバオのホーム画面について考察してみました。
しかしタオバオはカートやマイページにも工夫が盛りだくさん。

学び、参考にする点は尽きないですが、どんどん深掘りしていきたいと思います。

最後までご覧いただきありがとうございました。

Twitter：@bing_tou

＊＊＊

追記：本noteへいただいた反応

ありがとうございますm(_ _)m！！！

最後まで読んでいただきありがとうございます！！！！いい一日になりますように！