マッチングアプリ「CROSS ME」のUIデザインを担当している関 愛奈と申します。
今回はサービスコンセプトに基づいたデザインの方向性とリリースに至るまでのUI制作のフローについてお話させていただきます。

CROSS MEとは

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

方向性の模索

近年マッチングサービスの市場が拡大し、認知度・利用者共に増加しつつありますが、未だネガティブなイメージも少なくありません。私自信もプロジェクトに携わる前は多少のマイナスイメージがありましたし、逆に「安心・安全＝婚活色が強い」という極端な印象もありました。
その感覚もあり、若い人達がもっと気軽に楽しめるアプリを作りたいと思いました。他にはない「すれ違い」機能を活かせることで、従来の「自ら相手を探す」というスタイルとは異なる点も手軽さに繋がるメリットでした。しかし、こういった機能を充実させてもサービスのイメージが向上することはなく、逆に手軽さ故に使うことを躊躇させてしまう可能性もあります。この絶妙なバランス感をしっかり捉えることがデザイナーとしての役割だと考えさせられました。そのため、抑えるべきポイントを定めデザインの方向性を固めていきました。

コンセプトを実現するポイント

「すれ違いを恋のきっかけにする」というコンセプトの実現にあたり、以下3つのポイントを軸としました。
  1.  「すれ違いの楽しさ」：ドキドキ感
    すれ違いの体験を楽しんでもらうべく、場所と時間にフォーカスしています。起動した場所のイメージとすれ違った人を表示するタイムラインとを組み合わせることで、すれ違い体験を意識させることができます。さらに「いつ、どのあたりで、何回すれ違ったのか」をお知らせすることで、「同じとき同じ場所にいた」という「ドキドキする」ユーザー体験を提供します。
     
  2. 「カジュアルな出会い」：おしゃれさ・手軽さ
    ターゲットである20代前半の男女に積極的に使ってもらいたく「おしゃれさ・手軽さ」を目指しました。マッチングサービスへのネガティブな印象や出会いに対する前のめりなイメージを払拭するため、トレンドに寄せたすっきりとしたUIで洗練された印象を与えます。手軽さの面では、ホーム画面をユーザーの顔写真メインで構成するのではなく、タイムライン表示を採用したことで場所を問わず開きやすい、気になってつい開きたくなるような感覚を実現できると思いました。
     
  3.  「安心感」：わかりやすさ・継続
    複雑なUIやアニメーションは避け、ユーザーが望む見え方や「わかりやすさ」を優先して考えました。例えば、チュートリアルの表示によってユーザーの操作を遮ることは極力避け、説明しなくとも直感で理解できるUIを目指しました。また、安心感を与えようとして情報を載せすぎてしまうと雑多な印象を与え、見たい情報が埋もれてしまいます。最低限見せるべき情報と補完として表示させるものとを切り分けることで整理された安心感へと繋がります。

トーン&マナー

ユーザーの写真がコンテンツの主役となるため、それらを邪魔しないシンプルな装飾とゆとりを確保します。
青みのグレースケールをベースとし、清潔感・透明感といった印象を与えます。
マッチングアプリとしての恋愛感や親しみやすさといった印象まで削ぎ落とさないよう、アクセントのピンクや角丸処理、丸みのあるアイコンやフォントなどでグレースケールとのバランスを図っています。

VIデザイン

サービスの主軸である「すれ違い」をMに掛けあわせたモチーフです。このモチーフは対称の軌道が中心に向かって交差するまでの様子を表し、それはまた線が交わるだけでなく、相互を結びつける意味を込めています。アプリのなかでは「すれ違い」を表現するものとして、モチーフ単体をシンボル化しています。
アプリアイコンにはUIカラーを起用せず、アイコンとしてのコントラストやサービスイメージを訴求するものとして以下青と紫のグラデーションを取り入れてます。男女の交差・すれ違いをグラデーションで表現し、アクセントのピンクまで振り切らず清潔感・透明感を感じさせる領域を抽出しています。

UI制作のフロー

UI制作に今や欠かせないモックアップですが、CROSSMEでは社内で幾つも導入例のあるPixateを取り入れました。
AWAやAbemaTVなど、質の高いUIを実現するサービスでの事例があるなか、試さない理由はなかったです。
実際に触ってみるとリアルな再現性と細かいインタラクションの制御まで可能なことに関心しました。Pixateの導入により早い段階からリアルな画面をチームに共有できたことでブラッシュアップも効率的に進められたと思います。

また、CROSS MEではリリースに向けてコンセプトムービーを公開しました。映像のなかで実際にアプリを使うシーンがありますが、撮影期間はまだ開発途中だったため、モックアップで代用しています。画面が自然に映り込むようPixateでリアルに作りこみ、ストーリーを通じてアプリのイメージを伝えられたと思います。

モックアップ主導

細かな仕様は別途仕様書で補完しつつ、要素の構成や遷移のイメージなどはモックアップをベースに開発を進めました。
実装後の違和感や認識のズレがなるべく生じないようUIのパターン検証もPixateを通じて行い、フィードバックを得てブラッシュアップするといった流れです。

実装するよりも短時間でリアルな動きを再現できるため、検証段階でもインタラクションの細かい部分まで調整し判断することもありました。
例えば、ホームのすれ違い画面やプロフィール詳細のスクロールなど、画像や要素のたたみ方は実際に動きやエフェクトを修正しながらデザインの調整を重ねました。動きを確認しながらでなければ気付かなかったサイズ感や画像処理などを実装前に抑えることができます。
ストアのスクリーンショットなどもインストールに繋がる重要な部分なので、実機で見た時の印象をリアルな環境で確認しています。
また、1日1回表示されるピックアップユーザーにフリック式のカードを採用するか悩みましたが、Pixateで実装前に操作性を確認したことで判断できたと思います。本体のUIとは別物と捉えられ違和感がないか、フリック操作というのがすぐに理解してもらえるかなどの懸念意見が交わされましたが、Pixateで再現してみると想定していたよりも自然に受け入れられ、フリックしたくなる感触を得られることができました。
1枚画としてUIを検討しても実際の感覚が掴めず実現に至らなかったり、自分だけがイメージできていても共有が上手くできずに終わるの勿体無いことなので、まずは最初から触って確認してもらうことが重要だと思っています。
しかし、モックアップはアプリを実装するうえでのベースと指標であるので、作り込むことを意識しすぎずコミュニケーションのなかで解決できたりエンジニアに依頼できる部分は任せています。

さいごに

皆さまに良い出会いをお届けできるよう、CROSS MEの品質とサービス改善に向けて取り組んでまいりますので、今後とも応援よろしくお願いいたします。Andoid版の提供開始は10月初旬を予定しております！

App Storeからダウンロード
Website