ひたすら突き詰めた先の「これだ！」感--新規アプリの作り方、メルカリアッテの場合

UXデザインでブレずに追求した3つのポイント

井上雅意氏（以下、井上）：ここからは、具体例です。実際にメルカリアッテでどういうことをやっていたのか、というところをお話したいと思います。

メルカリアッテの「UXデザインのこだわり」なんですが、これは松本、田辺が話してきて「またかよ」という感じなんですけれど、基本的には「タイムラインのわかりやすさ」「チャットらしさ」「位置起点」を、とにかく重視してきました。

ここに関しては、まったくブレずにやってきました。UXをどんどん変えても、ここだけは絶対に実現しようと。

ちょっと恥ずかしいんですけれど、これはめちゃめちゃ初期のタイムラインです。こんな感じです。これ見せるのは超恥ずかしいんですけど、1番最初に作ったUIがこれで、ただ情報の整理がされてないとか、どこに目をやったらいいのかわからないというのはあるんですけど、なんか“イケそう感”があったんですね。これを作ってるときに。

というのは、今回、募集できるということがあって。チャット感であったり、つぶやき感というのが、ふきだしにすることでけっこう出てるし。画像のサイズもけっこう適度。1画面中に1つだけじゃなくて、何個か投稿が見えるという状態。さらに位置起点も、ちょっと見えにくいんですけど、1番上にちゃんと表現されてました。

ここから、正直言うと、ほぼ毎日細かい部分を含め、UI、タイムラインをひたすらアップデートしてました。なんとなく変遷をみればわかるんですけど、最初これ（左）で、こう（真ん中）なってこうなりましたと。

情報を整理して、メルカリっぽさを出しました。メルカリっぽさがこれなのかと言われたらあれなんですけれど、こんな感じで投稿が常に右下にいるという状態を作りました。

年末の時点ではこういう（右）、ある程度情報が整理されて、グラフィックものった状態というところまでいきました。

メルカリとのカニバリは思い切って気にしない

それで、この状態までいって、ほぼこれでリリースしようという状態にはなっていたんですけれど、なにかモヤモヤ感があった。悪くないんだけど、なにかモヤモヤ。

例えば、今回はいろんなカテゴリー、サービスとか売りますとか仲間募集みたいなのがあるんですけど、それが1つにあるということが、Twitter的にいうと正解な気はするんだけど、このサービスに関してそれが正解なのか、けっこうわからない。悪くはないんだけど、本当にいけるのか、ということにすごく疑問はありました。

そこで変えたのが、この3つタブの変更です。正直言うと、3つのタブってちょっと前から構想はあったんですけど、ちょっとやりづらい理由が実はあって。若干、カニバるんですね。

例えば、1番左のところ。あえてメルカリっぽくしてるんですけれど、メルカリの売り買いするというところをちょっと食っちゃうので、若干遠慮していました。でも、これに変えた瞬間すごく「これだ！」感があって。これはもう食い合うとかいいや、と思い切って変えてしまいました。

結果こうやって変えたことによって、恐らくなんですけど投稿の上げやすさだったり、投稿の探しやすさだったりが上がって、当初想定していた「こんな募集出たらいいよね」というものがどんどん上がってきた感覚はありました。これがタイムラインの話です。

チャットらしさへのこだわり

2つ目がチャットらしさへのこだわりで、これは松本からも話があったんですけれど、アプリだったらやっぱりチャットでしょと。今時、チャット的インターフェースは当たり前。やっぱりチャット的にやりとりすることで、直感的に使えるよね。じゃあ、やるからには、徹底的にチャットっぽくしていこうと。

それで、ここはけっこう当たり前なんですけれど、今は応募が来た後のやりとりは基本的にチャットでやっています。チャットも、LINEみたいな見た目です。特徴的なところでいうと、運営からの通知。まだ今のところはないと思うんですけれど、今後はこういうかたちで運営からの通知がチャット的に来ます。

こんな感じで、とにかくチャット体験というのを重視しているので、リアルタイム化もしたいし、画像とか動画とか位置情報とかスタンプとかを追加できるようにしたい。さらに言うなら、今話題のbotだって入れたいと思っています。

それだけじゃなく、けっこうこだわったところとしては、募集へのコメントというのも、かなりチャットっぽくしています。これ１番当初のデザインなんですけど、見てわかるように一列に並んでるんですね。

これはなぜかというと、ほかのサービスを見ているとコメントをチャットっぽく見せているところはなくて、けっこう羅列なんですね。ただこれにした途端、ふきだしにしてもぜんぜんチャットっぽくない。

だったら掛け合いのかたちで、自分のコメントは必ず右から出る。それ以外の人は絶対に左から出るみたいなかたちにして。かつ、募集に対するコメントなのに、常にここにコメント欄を出しておく。本来的にはあり得ないんですけれど、応募とかを重視するんですけれど、応募よりもコメントさせる、チャットっぽく使わせるということをやっています。

とにかく悩んだ位置起点の見せ方とバランス

最後にこだわった点としては、位置起点ですね。これが本当に、サービスとしての肝だと。生活地点の位置起点で募集投稿を見れるというところを、とにかくどう意識させるか、どんなふうに意識させるかというのを考えていました。

これで１番悩んだのは、とにかく手渡しできる範囲ということと、絞っても、ちゃんと投稿や募集がいっぱい見える、ということのバランスだと思ってました。

かなり右往左往というか、当初から迷っていた部分です。悩んでいたんですけれど、１番最初は、実はこれでした。どういうことかというと、自分の現在地を起点に、周辺のエリアを出すというのが一番最初でした。

例えばここだったら六本木なので「六本木、麻布、赤坂」みたいにエリアの投稿を出しましょうということを最初はやっていました。

だけど、それをやるとたぶん投稿が少ないよねと。見られる投稿が少ないからやめました。そして次にしたのが、都道府県別に見せるようにした。それで、都道府県で見れるようにしたらけっこうな数が見られるので、これはよいでしょうと。わりと、リリースまでこれでいこうと思っていました。

ただ先ほど田辺から話があったように、「これもちょっと微妙なんじゃないか」と。県境の人はどうするのとか、埼玉の北のほうだから東京の情報を見たいんだけどという人にとっては、ほしい情報が必ずしも出るわけじゃない。いろいろ気になるところがありました。

直感的な範囲指定でわかりやすく

じゃあ、自分の位置起点で、距離で表示してあげようかと。ただし、距離で「あなたの地点から10キロ半径です」「20キロ半径です」とか言われても、正直わからないと思うんですね。ぜんぜんぴんとこない。

じゃあ、どうしようって言って出てきたアイデアがこれで。なんとなく徒歩で行ける距離。なんとなく自転車で行ける距離。そしてたぶんバスが謎だと思うんですけど、なんとなく路線バスで行ける範囲。

これをあえて車にしなかったのは、車にすると「どこにでも行けるじゃん」みたいなところがあって。これくらいの感じがちょうどよいんじゃないというので、設定しています。

これはけっこう秀逸だなと個人的には勝手に思っていて、今後の展開的には、すごい遠いところとか、距離とかが関係なくなってきたときに、飛行機が出たりとか。あるいはグローバルとかいったりして、地域線に合わせてトゥクトゥクみたいなのが出たりとか。そんなことをしてもおもしろいんじゃないかな、と思っています。

こんな感じで、ひたすら「これだ！」と思えるまで、特にこだわる部分については煮詰め続けてました。今ひたすら煮詰めてる部分は3つあって。

1つは、仲間とかイベントタブです。これは、今のかたちが最適だとは思ってなくて、今後コミュニティっぽくしていって、さっきの話にもあったんですけど、手渡しとかいきなりする前に、すでにコミュニケーションがあるので、別に会うのには抵抗ないですよね、ということをやっていったり。

あるいは、投稿のしやすさ。今はカテゴリーごとに投稿の仕方ってだいたい一緒なんですけど、たぶん違うよね、ということがあるので、そのあたりを変えていったり。

あとは、チャットのしやすさ。これは単純に機能面のところもあるんですけれど、今はリアルタイム性ってあまりないと思うんです。もっとリアルタイム性を高めていって、体験の向上をしていきたいなと思っています。

公式キャラクター「ニャッテ」を作ってよかったこと

最後に、ちょっと駆け足になりますが、おまけ的な感じで「デザイナーだからできるチームの盛り上げ」というところをお話させていただきたいなと思います。

キャラを作ってみるってけっこうよかったと思ってます。「ニャッテ」というメルカリアッテの公式キャラクターなんですけれど。これをなんで作ったかって話なんですけど、今回はチャットというのをすごく重視していたので、やっぱりチャットとキャラクター、特に日本だとすごく相性がよいんじゃないかなと。

例えば、LINEさんも、普通にキャラクターがいて、それをスタンプに使うというのもあるし。あとはペコッターみたいなサービスでは、キャラクターが話しかけてくる。そうすると、ぜんぜんイヤな気がしない。すごく親和性が高いよねと。

味気ないアイコンが話しかけてくるより、キャラクターが話しかけてくるほうがいいよね、という理由をすごく説明した上で、僕のなかでは単純に作りたかったってだけなんですけれど、それでキャラクターを作ってみて、作ってみると意外とよかった。

どうよかったかというと、案外いろんなところに使える。社内ツールで今slackを使ってるんですけど、けっこう自分でカスタマイズしてて。1日に何回も見るくらい、めっちゃみんな使ってくれてます。なんとなくLINEスタンプも調子に乗って作りました。

そうするとふだんの社内のコミュニケーションもそうだし、社外とのコミュニケーションでも、アッテを感じるサービスが使えます。そうすることによって、けっこう内部的にサービスに対する愛着が高まってるなという感覚があります。

グッズができると社内が超盛り上がる

あとは最後に、グッズ作るのは超いいよねって話です。正直ベンチャーにあるまじきペースで作っちゃってるんですけど。

（会場笑）

井上：こんなに作っちゃってます。わずか1ヶ月たらずのサービスにもかかわらず、Tシャツ作るわ、トートバッグ作るわ、シール作るわ。「ワッペンも作りたいよね」って言ってワッペンも作っちゃったり。

だけど、これもすごく、内部的に盛り上がって、1回1回できるたびに「おおー！」みたいな感じでけっこう盛り上がる。やる気が出る。一時的かもしれないけど、そういうのいいよねと。

しかもこれは上手くいったら売っちゃえばいいんじゃない、と。slackとかはグッズを売っていて、けっこうイケてる感じだなと思っているんで、そんな感じでやっていきたいなと。

結局、なにが言いたかったかというと、デザイナーによるチームの盛り上げ方って、モノが作れるので楽しいモノをどんどん作って、チームに楽しい雰囲気をもたらすことができるという。それがすごく、わりと許されている環境だと思っていて、とにかくこういうことをやっていくのが、デザイナーとしての盛り上げ方になるんじゃないかなと思っています。

以上、ご静聴ありがとうございました。

（会場拍手）

投稿画像を必須にした理由

司会者：ありがとうございます。なにかご質問ある方いらっしゃいますでしょうか？

質問者1：お話ありがとうございました。先ほどの話のなかで、こだわりとして投稿のしやすさを重視しているというのがあったと思うんですけど、それに対して投稿に画像を必須化した理由を教えていただけたらと。

井上：これは、正直けっこう悩みました。最初はずっと必須ではなかったんですけど、ちょっと似たようなサービスが僕らの前に出てた時期があって、そこは画像必須じゃなかったんですね。

それによって、けっこう雑な投稿が上がっていた。雑な投稿がすごく上っても、それは別に違反ではないから消すこともできないし、でも、そんな雑な投稿がいっぱい上がる世界観って、たぶん作っちゃダメだなと。

だったら、多少投稿率が下がってでも、画像を入れてもらってちゃんとした投稿をしてもらったほうがいいよね、というのがリリース前に決めたことでした。ただ、今は正直揺れ動いてます。とはいえ、それがブロックになるんだったら、もっとできやすいやり方を考えようと考えています。

質問者1：ありがとうございました。

質問者2：お話ありがとうございます。メルカリアッテで投稿した後に、編集はできるんですけど削除はできないというのは、なにか理由があるんですか？

井上：これについては、今はできないと思っていただくのがいいかと思っています。今後、基本的にはできるようになることを想定しています。ただ、とにかく最初の段階で意識したのは、いっぱい投稿を集めて世界を作るということを早めにしたかったとので。

若干、前のめり気味なんですけど、本来は削除機能があった上でやるべきなんでしょうけど、そこは投稿をしっかり集めるということを優先して、現状ではないという状態ですね。なので、今後、そう遠くない未来だと思いますけれど、実装されることをご期待ください。

質問者2：ありがとうございます。

メルカリと対になるデザインを

司会者：ほかに、質問のある方いらっしゃいますでしょうか？

質問者3：お話、ありがとうございました。私自身もスタートアップでデザイナーをしているんですけど、デザイナー、デザイン目線での質問です。

先ほど田辺さんからお話があったんですが、ペルソナを作らないということ。その話はすごく腑に落ちたんですけれど、デザイナーとしてはペルソナがいたほうが、デザインコンセプトとかが決めやすいと思うんです。

そのペルソナを作らないなかで、例えばアッテの青緑色の色使いだったり、UIデザインをどう決めていったのかなというのに興味があります。

井上：はっきりとペルソナは決めてないんですけど、漠然と、この辺だよねというのは、ある程度、共通認識としては実はあって。やはりこのサービスはメルカリアッテという名前なんですけど、メルカリって先に付いているように基本的にはメルカリのユーザーだよねと。

メルカリを1番コアに使ってるユーザー、その人たちがたぶん1番使うでしょうと。なので、その人たちの好むものとか、その人たちが使いやすいものを、基本にしています。

どういう人かというと、若い女の子だったり、主婦だったり。そういった人たちがメインのターゲットなんじゃないかなと。なんとなく、自分なりのイメージは持ってやっていました。

質問者3：色使いとかを、どういったプロセスで決めたというのはありますか？

井上：正直言うと、あまり色使いにすごい理由があるわけじゃないんですけれど。やっぱり対になるということは意識していて。

今回はメルカリというのがあって、横に並ぶ。ロゴなんかもそうなんですけど、横にあってぜんぜん違和感がないもの。だけど違うサービスと、ぱっと見てわかるものという考えで。ある程度、彩度だったりも近い部分を使いつつ、ぱっと見で違う、でも似てるよねというのを、すごく意識して色を選んでます。

質問者3：わかりました、ありがとうございます。

とにかくチームでコミュニケーションをとる

司会者：ほかになにか質問のある方？

司会者4：お話ありがとうございます。私はプロデューサーというポジションにいると思ってるんですけど、チーム全体の納得感を調整するのに、よく定性的なデータと定量的なデータを使うんです。ソウゾウさんの、そういう使い分けみたいなところがあれば教えてください。

あと、プロデューサーさんとデザイナーさんの関係で、けっこう失敗もあったというお話もあったので、もしよろしければ、お話いただける範囲で教えてください。

井上：最初の定性、定量に関しては、正直、定性・定量的なところはあまりやっていません。というのは、あくまであれは説得の材料かなと思っていて、大きな会社だとけっこう重要、いろんな人がいるので必要かと思うんですけど。今回のソウゾウに関しては、小規模なチームでやっているので正直あんまりいらなくて。

そこに関してはとにかくコミュニケーションを日々とりつつ、「なんでそれがよいの」「なんでこれに変えなきゃいけないのか」とか、そういうところを密にコミュニケーションとってというかたちで、基本的に定性・定量というのはほとんどやっていませんでした。

2つ目のプロデューサー、ディレクターとのやりとりなんですけれど、ここに関しては基本コミュニケーションです。机が目の前なので、意図的にディスプレイとか置きません。もう、すぐ話すということをやっていて。

もちろん意見がぶつかることもあるんですけれど、そこは納得はしなくても理解できるんだったらやっちゃう。「こっちのほうがいいんじゃない？」と言われて、「うーん？」って納得はしないんだけど、理解はできる。だったらやっちゃおう、みたいな感じで作ることは、けっこう意識してやっていましたね。

だからそんなに衝突的なことは正直なくて、やって「うーん、違うんじゃない」みたいな。モノを作ったほうが正直わかるので、作ってみちゃうということをやっていました。

質問者4：ありがとうございます。

社内からも「グッズほしい」の声

司会：ほかに質問のある方、いらっしゃいますでしょうか？　

質問者5：グッズを作ったときの、ほかのチームの反応を教えてください。

井上：グッズですか。メルカリの人からは「ほしい」って言われました。なので、あげました。

（会場笑）

井上：子会社なので同じところで働いてるし、ふだんの業務の関わりはそんなにないんですけど、なんなら僕だってメルカリグッズとかもらってたりするので。

質問者5：温度差とかけっこう違うと思うんですけれど、その辺の反応はいかがでしたか？

井上：単純に「すごい作ってるね」って言われます(笑)。

（会場笑）

井上：なので、「あいつらそんなに作りやがって」みたいなことは正直なくて、そのへんはけっこう「みんな大人だな」と思いながらやらせてもらってます。

質問者5：ありがとうございます。

ロゴはどうやって生まれたのか？

司会者：ほかになにか質問のある方はいらっしゃいますか？

質問者6：お話ありがとうございました。さっきもアプリのロゴデザインの話が出たんですけれど、色合いがすごく明るくていいなと思ったんですけれど、色とかも含め、最初僕、帽子だと思わなくて、メガホンかなと思って。

井上：いや、メガホンです。帽子にしちゃいました、すいません(笑)。

（会場笑）

質問者6：どういう流れでできたのかな、というお話が聞ければ。

井上：これはけっこう悩んでいて、実はかなり時間をかけて作りました。最初はぜんぜんこのかたちではなくて、もっとシンプルで、記号的なものだったんですけれど。やっぱり今回メルカリと対になるということを意識して、それに近づけようというのもあったんです。

そこで、メルカリのコンセプトを考え直してみて、あのロゴって、箱からモノが出てくる。そして、モノだけじゃなくていろんなものが出てくる、だから丸なんだと。そういうふうに考えたときに、僕らもなんでも募集できる。じゃあ、丸を使おうと。なにかが出てきてる感を出すには丸を使おうと。

だけど箱にあたるものはなんだろうと考えたときに、今回はあくまで募集なので、募集呼びかけ、「メガホンだ！」みたいな感じで。メガホンというモチーフを選びました。

質問者6：ありがとうございます。

司会者：時間になってしまいましたので、こちらでセッションは終わらせていただければと思います。ありがとうございました。

井上：ありがとうございました。

（会場拍手）