UI改善に新機能追加。日々スクラップ＆ビルドを繰り返しているサービス開発現場では、一つのデザインを創り上げるまでに数十を超えるデザイン案を作成することも少なくありません。本連載では“お蔵入りUIデザイン”と題して、現在のデザインに至るまでにお蔵入りとなったデザインにフィーチャーし、「なぜお蔵入りになってしまったのか？」をオクラくんと共に担当デザイナーがご紹介していきます。

オクラくん
ネバにちは！
趣味でつながる恋活サービス『タップル誕生』の開発現場にやってきたよ。どんなお蔵入りデザインが見られるネバかな〜。あー彼女欲しい。
それでは早速デザイナーさんを呼んでみよう！ デザイナーさーん！

茂木 栞（以下、茂木）
オクラくんこんにちは！『タップル誕生（以下、タップル）』デザイナーの茂木です。

オクラくん
初めまして、お蔵入りのデザインを存分に堪能できると聞いてワクワク、いや、ネバネバしながらやってきたオクラくんだよ！

茂木
今回は、4月にリリースした24時間以内にデートのお相手がみつかる「おでかけ機能」のUIデザインで一番こだわった“女性がワクワクする仕組み”についてご紹介したいと思います。

オクラくん
24時間以内に！？
何言ってるネバ！？ そんな簡単にデートできるんだったら苦労しないネバ！！！ 恋愛はそんな甘くないネバ！！！！！！！！

茂木

オクラくん...。
 「おでかけ機能」は、女性が気になる「おでかけプラン」を設定してから24時間以内に男性からデートのお誘いが届く機能なんです。「マッチングしてもメッセージが続かない」「出会うまでのきっかけが中々掴めない」というユーザーを後押し出来るよう、最初のメッセージから「会う」前提でスタートするのが特徴です。

オクラくん
恋愛は甘くないネバ！！！！！！！！！
でも、デートのハードルが下がるなら正直気になるネバ...。
ハッ、いやいや、僕はピュアにUIデザインが見たいんネバ！ お蔵入りデザインを早くみせるネバ！

リリース前のユーザーヒアリングで一足先に仮説を検証

茂木
お蔵入りしたUIは数え切れないです。1ページ4パターン以上、動くプロトタイプも合わせると×数パターンですね。

オクラくん

たくさんあるネバねー。こんなにもお蔵入りするとは、相当厳しい上司でもいたネバ？

茂木
いえ、これはタップルのユーザーから意見をいただいてブラッシュアップしたんですよ。

オクラくん
え！ リリースしてないのにどうやってユーザーの意見を聞いたネバ！？

茂木
実は、ユーザー参加型のサービス改善プロジェクト『Tapple Tea（タップルティー）』という取り組みをしていて、おでかけ機能はリリース前に実際のユーザー20人以上にヒアリングを行ったんです。

オクラくん
噂に聞くユーザーヒアリングネバね！ どんな意見をもらったの？

茂木
例えば、おでかけ機能の顔となる“おでかけプラン”の選択画面。ここでは、ペルソナである「22歳の女性」が気軽に楽しいデートへ出かけられるようデザインしました。

お蔵入りになった最初のモックでは、おでかけを気軽に感じてもらえるように、ポップなイラストでプラン内容を分かりやすく見せていました。

オクラくん
ユーザーはどう思うんだろう！

茂木
このUIを見た女性ユーザーの方から、こんな反応をいただきました。

オクラくん
なんか、みんな時間かかってるように見えるネバ。

茂木
そうなんです、みなさん選ぶのにすごく時間がかかっています。事件です。
すぐに修正するための仮説を立てました。

・イラストはポップさは出せる反面、「実際におでかけする」というリアルな体験と結びつかないのではないか。
・選択肢が多く取捨選択が難しいのではないか。

イメージしやすく選びやすい。魅力的なデートプランの作り方

茂木
よりリアルな体験と結びつくよう、仮説を元に行った改善は以下3点です。

①おでかけプランのサムネイルを写真にしてリアルさを出す。
②サムネイルにつけるラベルも「〜したい♪」と自分の行動をベースにする。
③選択肢が多くても選びやすいよう、一部のプランを「おすすめプラン」として推し出す。

オクラくん
お〜、だいぶ印象が変わったネバ！

茂木
こちらのブラッシュアップしたデザインを見てもらうと、今度はこんな意見をいただきました。

オクラくん
なんか、もう少し...もう一押し...って感じネバ。

茂木
行きたいと思ってもらえたまでは良かったのですが、推し出したおすすめの意図が十分に伝わっていないということが分かりました…。
これでもやっぱり選ぶのに時間がかかっていますね。

オクラくん
時間がかかっているのは選択肢が多いからだと思うネバ。
いっそのことプラン数を減らせばいいと思うネバ。

茂木
オクラくんさすが！ 実はそう思ってプランを4数類だけに減らしてみたりもしました。

その結果、選ぶ速度が上がった代わりに「これ以外はないの？ 何回か使ったら飽きてしまいそう」という意見が多く出てきました。デートに誘う男性側にとっても選択肢が少なくなってしまいます。

オクラくん
確かにみんな一緒で個性ゼロじゃあ、恋愛がうまくいくとは思えないネバ。
やっぱり恋愛は甘くないネバ。

茂木
間違いないですね。
また、“ワクワクしない”原因をペルソナである「22歳の女性」の視点で考えたところ、 雑誌やインスタグラムでトレンドをチェックしている時のような「ワクワク」 が大事なのではないかと気づきました。

オクラくん
多いと選びたくなくなるし、減らすと欲しがるし、レディはわがままネバ。でも僕ならこの粘り気でレディも包み込めるネバ。茂木さん僕とおでかけしてみないネバ？

茂木
上の気づきから、ワクワクするキャッチコピーと写真が並び、選択肢が多くても楽しく選べる。そんな旅行ムック本のような構成にできないかと考えました。

結果、54種類ある通常のおでかけプラン＋トレンドに応じて毎週変わるプランを用意し、それぞれの魅力を伝える可愛いバナーを作ろうじゃないかという話に行き着きました。

オクラくん
力技！！！

予想外だったユーザーの反応。男女間で起こるデートプランの認識違いを解消

茂木
その結果完成したのが、今の「おでかけ機能」のUIです。

当初やりたかったポップさも、バナーなら表現することができました。
「おでかけ機能」をリリースして1ヶ月が経ちましたが、当初の予想以上に女性がプランを投稿してくださっています。今は男性がより誘いやすくなるように、ブラッシュアップしているところです。

オクラくん
ほ〜〜
どんなことしてるの？

茂木
バナーや文言の調整ですね。リリース後に利用数とユーザーの声を拾い、女性は選びやすいけれど男性は誘いにくいプランがあることがわかりました。

例えば、「新作ドリンクが飲みたい」というおでかけプラン。カフェの新作ドリンクを意味してるのですが、男性には伝わらず「新作ドリンクって何？ 栄養ドリンクかなにか？」という反応があったり。

茂木
あと「アニマルをもふもふしたい」というおでかけプラン。女性が見ると「猫カフェに行きたい〜」などのイメージが湧くのですが、男性からするとアニマルが何を指すのか分かり辛かったようです。

オクラくん
アニマルって言われても、モルモットからアメリカバイソンまで幅広くて困惑するネバ...。アニマルの定義によっては僕もかわいいアニマルだという自負があるけど...。

そんな僕は茂木さんと猫カフェに行きたいネバ！ おでかけしよう！

茂木
逆に「美味しいお店を教えて♪」など食事に関するプランは男女双方から人気のプランでしたね。

オクラくん
美味しいお店ならたくさん知ってるネバ！
茂木さん、僕とおでかけするネバ！
ホテルオクーラで食事はどうネバ？
あ、山芋とろろ博物館はどうネバ？
それと、納豆工場はどうネバ？

茂木
オクラくん。選択肢が多く一方的で粘着質だし、ワクワクしません。
サービス作りもそう。恋愛もそう。相手に選択と決断を求めるならそこに「ワクワク」がないと！

ま、私はこれからもネバり強く「ワクワク」を作っていこうと思います！

オクラくん
ネッバァァァアアアアアアアアア！！！！(号泣)
こりゃあ一本取られた☆
 

【企業プロフィール】 株式会社サイバーエージェント
インターネットというフィールドで「Ameba事業」「インターネット広告事業」「スマートフォンゲーム事業」「その他メディア事業」「投資育成事業」の5つの事業を展開。インターネット総合サービス企業として、企業・インターネットユーザーに対し有益なサービスを提供している。

●株式会社サイバーエージェント：https://www.cyberagent.co.jp/
 

『CyberAgent Developers Blog』

https://developers.cyberagent.co.jp/blog/