日本No.1のインターネットオークション・フリマアプリが考える、アプリをデザインする上で大切な3つのこと

 

本記事は、2017年6月27日に開催した「【Prott×Repro】ECアプリの改善プロセス」での発表内容を元にしたイベントレポートです。ECアプリのUX改善やマーケティングをテーマに、日本最大級のインターネットオークション・フリマサービス「ヤフオク!」と、月間150万人に利用されるギフトサービス「Anny」のご担当者様に自社アプリのノウハウをお話していただきました。

 

登壇者紹介

 

 

ヤフー株式会社 中島慎太郎(なかじま・しんたろう)氏

2016年ヤフー株式会社に新卒入社。UIデザイナーとしてヤフオク!アプリの開発に携わる。

 

自己紹介と事業の紹介

Yahoo! JAPANの中島慎太郎と申します。昨年入社した新卒2年目です。 こういった場で話すのは初めてなので若干緊張していますがお手柔らかにお願いします。今日はヤフオク!のデザインチームがデザインをするプロセスで大事にしていることについてお話できればと思います。僕自身は去年の5月からヤフオク!のUIデザイナーとして働いていて、今年の4月からプロダクトオーナーも兼任する形で働いてます。

 

ヤフオク!について改めて簡単にご説明させていただくと、月の利用者数が1,654千万人、常時出品商品が5000万個と日本最大級のC2Cのオークションサービスです。

 

 

デザイナーが主体となってサービス改善に携わる

本日お話しするテーマは「ヤフオク!というECサービスにおいて我々デザインチームが大切にしていること」です。自分が所属しているのはアプリ開発部という所で、AndroidとiOSアプリの開発をする部署になります。チームは全部で25人位いるんですが、100%企画屋という人がいなくて、デザイナーも数字の集計や機能改修の意思決定なども行っています。

 

開発は 「LEAN XP」というLean開発とペアプログラミングを組み合わせた方式でやっていています。こちらは本日のテーマとは違うので詳しくお話しませんが、興味があれば懇親会等で声をかけてください。

(※ Yahoo! JAPANのLean XPの具体的取組についてはこちらの記事を参照 https://codezine.jp/article/detail/10079)

 

ヤフオク!のデザイナーが心がけている3つのこと

本題です。僕らが心がけていることは大きく3つありまして、「チームで納得感を持って進める」「定量・定性両方の根拠を元に施策を決める」「リアルなデータを大事にする」です。

 

①チームで納得感を持って進める

チームで納得感を持って進めるという所ですが、まずチームの全員に機能開発や施策の決定に主体的に関わってもらっています。エンジニアもユーザーインタビューに参加してもらいますし、定量調査も手伝ってもらっています。

 

調査から上がってきた施策の優先順位付けは悩んでる方が多いかと思いますが、ヤフオク!アプリチームではスタックランキングという縦軸を「重要度」、横軸を「工数」として各施策をマッピングするフレームワークを使っています。 企画サイドには縦の「重要度」の並べ方に関しては責任もってもらって、エンジニアサイドには横の「工数」をきちんと見積ってもらいます。こうすると各施策の優先順位が同じ評価軸の中で比較できるので、皆で共通認識をもって「この機能改修から手を付けよう」と納得感持って進めることが可能です。

 

何をもって「重要」とするかはアプリのフェーズによっても変わってくるかとは思いますが、アプリ開発チームではリテンションを向上させることをミッションにしているのでユーザーが継続利用してくれるような施策は重要度を上げています。

 

 

②定性・定量両方の根拠を元に施策を決める

次に定性・定量の話です。ヤフオク!アプリチームでは1か月に1回位のペースで詳細なユーザーインタビューをしています。定量調査はHiveQL1) Hadoop上のデータを操作するSQLライクな言語を使って必要なデータを取ってきています。

 

例えば、デザインしているときに商品を見せるのはリスト型のUIとグリッド型のUIのどちらがいいかなと迷った時に、直感で決めるのではなくデータを見た方が早い時はHiveQLを叩いて判断に必要な数値をとってくることもあります。このユーザーインタビューから得た定性データとHiveQLで管理している定量データの両方を見て施策を決めています。

 

 

③リアルなデータを大事にする

3つ目の「リアルなデータでデザインをする」ことについての重要性はプロトタイピングツール「Prott」と「Framer」の2つの使い分けの話も交えながらご説明できたらと思います。

 

ヤフオク!はCtoCアプリで、オークションに出品する人と入札する人、2つのユーザーのストーリーがあります。こちらのスクリーンショットをご覧になっていただくとわかるかと思うんですが、チェックした商品とその商品の関連商品がアプリの大部分を占めていて、ここにどんな商品が並ぶかはユーザーに依拠しているので我々がコントロールできない部分になります。

 

 

リアルなデータではなくテストデータなどを使うと、僕ら作り手と利用するユーザーの間で画面に対するイメージの齟齬が生じてしまう場合があります。例えば「検索機能」のUIをデザインするにしても、テストデータだときれいなiPhoneの商品画像がずらーっと検索結果に出てくるようなイメージで実装を進めるとおもうんですが、実際のヤフオク!アプリで検索をしてみると、「iPhone」と検索しても検索結果にiPhoneケースやsimカードが混ざっていたりします。

 

 

そうするとユーザー視点に立ってデザインしてるつもりができていなかったりすることがあって。なのでそういうことが無いように、実際のデータを使うことを心掛けています。

 

ここで活用しているのがProttです。Yahoo! JAPANは検索結果のAPIを公開していたりするので、検索結果のAPIデータをsketchのデザインモックに流し込んで、そのモックをProttで動かしてテストしています。

 

 

リアルなデータを一緒にデザインしてあげることで、チームに説明する時とか、ユーザインタビューをする時により深いインサイトを得ることが出来るんですね。「あっ、こんなところで躓いているんだ」っていうリアルな反応が得られたりするんです。

 

大規模改修のユーザーテストに利用できる「Framer」

もう一つのプロトタイピングツールである「Framer」の話もしたいと思います。Framerをご存知の方そんなにいらっしゃらないかもしれませんが、JavaScriptベースのプロトタイプツールで、実際のアプリにかなり近いリッチでインタラクティブな表現が可能です。

 

APIと連携してデータの送受信もできます。利用する難易度が高めでモックを作るのにも工数がかかったりするので、Framerはアプリの大規模改修する前のユーザーインタビューなど、ここぞという局面で使うようにしています。

 

実際の画面はこんな感じなんですが、左側がJavaScriptのコードで、右側がそのプレビューになっていて、コードをいじりながら画面の動きを確認することができます。

 

 

文字を打ち込んだりすることもできますし、これで検索をかけたりすることもできます。本物のデータを使ったモックなので、ユーザーインタビューではアプリのかなり詳細な使い勝手まで聞き出すことができて便利です。

 

目的に応じたツールの使い分けが重要

 

 

ProttとFramerはそれぞれ長所と短所があり、両者は数あるプロトタイピングツールの中でも対極にあるかなと思っています。Framerは使うのが難しい分複雑な表現まで出来るのが良いところですし、ProttはUIや操作がシンプルなのでツール習熟コストが低く、チーム内で素早く共有できるのが良いところです。それぞれ対極にあるツールをうまく使い分けるのが重要かなと。

 

 

以上で発表は終わりです。ご清聴ありがとうございました。(了)

 

 

【無料資料ダウンロード】ヤフオク! (ヤフー株式会社)登壇資料

中島さんが登壇で使用した資料を無料DLできます。資料が欲しいかたはこちらのリンク よりダウンロードください。資料の無断転載は禁止いたします。

 

注釈   [ + ]

1. Hadoop上のデータを操作するSQLライクな言語