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

マッチングアプリ「CROSS ME」のデザインを担当している関と申します。
CROSS MEとは、「すれ違い」という、同じとき、同じ場所にいた偶然を恋のきっかけにするアプリです。「どんな人と、いつ、どのあたりで、何回すれ違ったのか」をお知らせする機能を搭載しているのが特徴です。アプリ内における自分のタイムライン上にすれ違った人が表示され、「いいね」と「ありがとう」のコミュニケーションでマッチング成立となり、二人だけのメッセージのやり取りが開始出来る仕組みになっています。

サービスコンセプト

いつもの道で、ふと立ち寄ったお店で、私たちはたくさんの人とすれ違っています。
その偶然を出会いのかたちに替えることで、従来のマッチングサービスとは違った体験を提供できると考えました。
例えば、同じ場所にいたという共通点で話題が膨らんだり、お店やイベントなど趣味の合うお相手と出会うきっかけになるかもしれません。
そんな想いが「すれ違いを恋のきっかけに」というコンセプトに繋がっています。

コンセプトを形成する要素

「すれ違いを恋のきっかけに」というコンセプトの実現にあたり、以下3つのポイントを軸と捉えました。

1. 「すれ違いの楽しさ」：ドキドキ感

すれ違いの体験を楽しんでもらうべく、場所と時間にフォーカスしています。起動した場所のイメージとすれ違った人を表示するタイムラインとを組み合わせることで、すれ違い体験を意識させることができます。さらに「いつ、どのあたりで、何回すれ違ったのか」をお知らせすることで、「同じとき同じ場所にいた」という「ドキドキする」ユーザー体験を提供します。

2. 「カジュアルな出会い」：おしゃれさ・手軽さ

ターゲットである若い世代に積極的に使ってもらいたく「おしゃれさ・手軽さ」を目指しました。マッチングサービスへのネガティブな印象や出会いに対する前のめりなイメージを払拭するため、トレンドに寄せたすっきりとしたUIで洗練された印象を与えます。手軽さの面では、ホーム画面をユーザーの顔写真メインで構成するのではなく、タイムライン表示を採用したことで場所を問わず開きやすい、気になってつい開きたくなるような感覚を実現できると思いました。

3. 「安心感」：わかりやすさ・継続

複雑なUIやアニメーションは避け、ユーザーが望む見え方や「わかりやすさ」を優先して考えました。例えば、チュートリアルの表示によってユーザーの操作を遮ることは極力避け、説明しなくとも直感で理解できるUIを目指しました。また、安心感を与えようとして情報を載せすぎてしまうと雑多な印象を与え、見たい情報が埋もれてしまいます。最低限見せるべき情報と補完として表示させるものとを切り分けることで整理された安心感へと繋がります。

ビジュアルへの落とし込み

抵抗なく使えるカジュアルさと、マッチングアプリとしての恋愛感や親しみやすさといった印象を大事にしました。アプリのトーンは青みのグレースケールをベースとし、シンプルな装飾とゆとりを保ちました。これによって清潔感・透明感を与えるクリーンな印象を形成します。これに加えてアクセントのピンクや角丸処理、装飾等でマッチングアプリの楽しさや恋愛感のイメージを重ねています。

UIにおいてはサービスの安心感に繋がる「わかりやすさ」を実現するため、プロトタイプでの検証を繰り返し操作感や体感値を確認してきました。プロトタイプを用いることでユーザーの感覚に近い状態で考えられることと、実装後の違和感や認識のズレがなるべく生じないよう具体的なイメージを共有できるのが大きなメリットです。
実装するよりも短時間でリアルな動きを再現できるため、インタラクションの細かい部分まで調整することもありました。特にスクロールによって伸縮させる要素やカードスワイプを取り入れた画面など、静止画ではイメージしにくい検証に効果的でした。

リリース後の取り組み

運用においても、「すれ違いの楽しさ」「カジュアルな出会い」「安心感」というポイントを常に意識しています。
機能の追加を検討するうえで、サービスのポジションやコンセプトに沿った機能・デザインがなされているか、チーム全体で確認します。
また、一貫したデザインルールを定義することで実装の効率化と使いやすさに繋がります。

最近リリースしたものの例で「今日ひま」機能、「近くかも」機能というものがあります。
コミュニケーションのきっかけ作りに活用でき、今まで以上に「すれ違い」のドキドキ感や楽しさを引き出すために開発した機能です。
これらにおいてもすれ違い設定のオフ機能と連動して表示させないなど、楽しさやライト感だけでなく、同時に安心して使えることを抑えています。

「今日ひま」機能

すれ違い一覧にある「今日ひま」ボタンを押すことで、異性のすれ違い一覧とメッセージ一覧に表示されます。
追加機能に対しユーザーを強制的に誘導するのではなく、気になってタップしてみたくなる位置づけを目指しました。
また、すれ違った異性に手を振るような気軽な感覚で使ってほしく、モチーフを設定しました。
タップ後は取り消しボタンに変化するため、すぐにキャンセルすることが可能です。

「近くかも」機能

メッセージ一覧の上部にて、マッチングしたお相手のうち近くにいるかもしれないお相手が表示されます。
リアルタイム性や偶然性を感じてもらえるよう、メッセージ一覧とは切り分けたUIにしています。サムネイルを横に並べることで、表示の更新にもユーザーが気付きやすくなります。

さいごに

最近ではマッチングサービスの認知度や利用者も増えてきていますが、未だネガティブなイメージも少なくありません。
純粋に出会いを楽しむツールとして、ユーザーが安心して気軽に使えるサービスを目指しています。
また、サービスイメージをどう印象付けるかがデザイナーとしての役割だと考えています。そのため、ぶれないコンセプトと立ち返るポイントを定めることが重要になります。
今後も素敵な出会いをお届けできるよう、プロダクトの品質とサービス改善に取り組んでまいります。