仮想サーファーの波乗り

仮想化エンジニアの日常

プログラミング・SNS分析・仮想通貨・自動化などに関してよく書きます。

WebサービスのUI・UX事例から学ぶ②「CROSS ME ~すれ違いを恋のきっかけに~」


先週から1週間ほどほぼ全てのマッチングアプリをインストールして触ってみましたが、その中でも断然使いやすかったCROSS ME。今回はCROSS MEのアプリがなんで使いやすいのかを考えてみました。

f:id:virtual-surfer:20180730224210p:plain

マッチングアプリをたくさん触ってみて発見した面白いUI・UXについて、連載形式でまとめていく企画の第2弾! 今回はサイバーエージェントの連結子会社である、株式会社マッチングエージェントの運営しているCROSS MEに関して!


CROSS MEとは?

crossme.jp

渋谷に本社を構える株式会社マッチングエージェントの運営するオンラインマッチングサービスCROSS ME。「すれ違いを恋のきっかけに」というコンセプトを掲げていて、位置情報を利用してすれ違った回数などを確認できるマッチングアプリ。他のマッチングアプリにはないすれ違い機能の設計、プレミアム課金への誘導方法、サイト内の配色の仕方など、快適に使えるようなデザインがされてるなあと思いました。


CROSS MEの特徴的なUI・UX

CROSS MEのUI・UXで面白いなと思ったものを紹介していきます。

配色に統一感がある

f:id:virtual-surfer:20180730225834p:plain

ボタンや文章やアイコンなど、それぞれの配色に一定のルールがあるように感じられて、どのボタンを押せばどのような挙動になるのかが明確にわかるようになっていることが感じられました。サイト内で多分に使われているピンク色を始め、背景色にはアイコンにも使われている淡い青と紫のグラデーション、プレミアム機能は未入力・未選択状態の灰色。


視覚的なマイページ

f:id:virtual-surfer:20180730225945p:plain

CROSS MEではあまりチュートリアルがなかった気がしますが、マイページに次にとる行動がカードボードでわかりやすく明示されています。カードボードの箇所は運営側でプッシュ的にユーザーに届けたい情報を載せる場所として確保しておき、その下のメニュー項目はアイコン付きで、遷移先画面で何ができるのか視覚的に理解しやすくされているなと感じられます。


すれ違い設定・すれ違い画面

f:id:virtual-surfer:20180730230537p:plain

すれ違いたくない場所を設定できるすれ違い設定画面と、すれ違った人と場所と回数を確認することができるすれ違い画面。

すれ違い画面でも設定画面ではわかりやすくアイコンで何ができるのかが説明されていて、時間と場所によって「すれ違わない設定」を設定できることがわかります。これは会社や学校など身内の人にアプリを使っていることがバレないようにする配慮がされていて、ユーザー心理がよく考えられているなと思いました。すれ違い画面では、今いる場所ですれ違い設定がされていない場合にはその旨を表示するようになっているみたいです。身バレしたくないというユーザー心理に応えてる。


ユーザーの取りたい行動が分かりやすいメッセージ画面

f:id:virtual-surfer:20180730231114p:plain

メッセージ一覧画面では、メッセージ一覧タブとマッチング一覧タブが切り替えられるようになっていて、未返信・返信済み・未読のステータスを確認できるようにされています。おそらく、未返信・未読はピンク色(サービス内で行動を促す色として主に使われている)で統一されていて、ユーザーは無意識的にピンクを減らしていこうという行動を取りやすくなっているのかなと思います。

メッセージ詳細画面では、最初のメッセージとして何を返信したらいいのかわからないというユーザーへの助け舟として、メッセージのテンプレが用意されています。この辺の初心者ユーザへの配慮がしっかりなされていると離脱率も低くなるのかなと。


「いいね」を煽るマイデータ機能

f:id:virtual-surfer:20180730231114p:plain

マイデータという機能で、自分がアプリないユーザーの中でどの程度評価されているのかを確認することができます。おそらく母数にはアクティブでないユーザーも多分に含まれていると思うので、すぐに上位数%に入ることができ、ユーザーに満足感を与えてる。いいねをもらった数 + マッチングした数で順位が上がる仕組みになっているので、いいねをより多くしてマッチング数を増やしたい!というユーザーの報酬系を満たすいい設計。他のマッチングアプリでは見たことがない機能だったので、よくサービス設計されているなと。


追加機能の利用にプレミアム課金

f:id:virtual-surfer:20180730232320p:plain

プレミアム課金した場合に利用できる追加機能として、フリーワード検索・女性に遅れるいいねがもらえるなどの機能が用意されていますが、これもよくできているなあと感じました。メッセージができるようになるための月額3000円~4000円程度の購読型の課金と、いいねやフリーワードなどの機能追加という従量課金的なモデルを両方用意することで、最低限利用したいユーザーからもハイエンドに利用したいユーザーからも限界額まで課金を行ってもらうことができ、ARPUを最大化できると。

また、フリーワード検索は多くのユーザーに使われすぎると処理の負荷が大きくなりすぎることを考えると、課金したら使える機能にして利用できるユーザー数を減らして処理負荷を減らすのはシステム面でもメリットがあるなあと。


以上、CROSS MEを使ってみて「よくできているな〜」と感じた特徴たちでした。


まとめ

利用していて操作に迷うことが少なく心地いいUI・UXの設計だけではなく、課金モデルやユーザーがサイト内のWow体験(おそらく、マッチングしてメッセージやりとりができること)までたどり着く時間を短くするための設計、ユーザーに身バレするリスクがないことを伝えていることなど、全体的に入念に設計されたアプリだと思いました。

マッチングアプリのサービス特性上、DAU(1日にどれだけの人がログインしたか)と、マッチング数が主要KPIになっていて、そこに課金率がある程度相関するようなモデルになっていると思うので、「いかにユーザーに毎日ログインしてもらう理由(体験)を用意するか?」を設計することはとても重要だと思います。

今回は詳しく書きませんでしたが、ログインに応じていいね付与、新規ユーザーに対してのいいねは無料でできるなど、ユーザーの登録後いかに早くWow体験を生むか、毎日ログインしてもらうかの設計が試行錯誤されてうまくサービスに反映されているので、自分の携わっているアプリのUI・UXを考える上でも大いに参考になるかと。


【参考にした記事など】

デザイナーは壊す勇気を持て! Retty、サイバー、クックパッド、ヤフーのプロトタイプ活用術 | CAREER HACK

サイバーエージェント流!"コンセプトをかたちにするデザイン"-すれ違いを恋のきっかけにするアプリ「CROSS ME」


では!