カードUIと会話化するデザイン

LINE, WhatsApp, Facebook Message のようなメッセージアプリの魅力のひとつに「情報の流れが制御できる」ところがあると思います。1対1の会話が中心なので、ノイズが少ないですし、情報を追いかけるのも容易です。Jelly のように、メッセージアプリのような表現がメッセージアプリ以外で見られるようになってきているのも、今の利用者に求めらている情報の形だからなのかもしれません。

今、UI デザインという観点で注目しているのは、この『メッセージ型 UI』で、どのような形状が人と情報とのやりとりに最適なのかをよく考えています。メッセージアプリだからといって、写真やテキストを送り合うチャットだけのために使うわけではありません。オススメのお店、地図、記事、レシピ、レビューなど様々なコンテンツが会話の中で共有されますが、それが最適な形で表示されているのかというと、そうではありません。今、メッセージアプリで共有される情報は以下のいずれかの形状をとっています。

  • 多くの場合は URL。マシンリーダブルだが、人の会話の場には適した形状ではない
  • OGP や、Schema を利用したプレビュー
  • Pins のように、閉じた世界で独自の見せ方を実現
お店を Facebook でシェアした場合の一例ただ、お店の名前をシェアしたいわけではない。

Web上にあるコンテンツであれば、「共有」ボタンを押せば、何かしらの形でメッセージに載りますが、アプリからだとどうでしょうか。Android の Share Intent は、他のアプリへデータを送るための良い仕組みですが、それを受け取るアプリが最適な形状へ『組み替える』必要があります。そして、受け取った情報を見る利用者が、そのデータを自由に扱えるのかというと、そうではない場合があります。

ひとつのシナリオを考えてみましょう。

  1. 友人がどうやら近くまで来ているみたいなので、オススメのカフェで落ち合うことに
  2. お店の名前を書き込むと、店の住所・電話番号・写真がはいった『カード』が表れる
  3. 友人はそこで(アプリから離れることなく)、写真を何枚か見ることができる
  4. 私はカードから直接電話をして席が空いているか確認できる
  5. 友人は地図をみて、行き先を確認する
  6. お店情報を見失いたくないので、カードをホームスクリーンに保存する

2013年頃から『カード』をモチーフにした UI をあちこちで見かけるようになりました。Twitter Card は代表的な例ですし、Facebook の Custom Stories も様々な表現を可能にしています。しかし、いずれの場合もプレビュー以上のことはしておらず、タップしてしまえば、たちまち違う Web サイト(又はアプリ)へ飛ばされてしまいます。それに比べ、単に情報を表示するだけではなく、次のアクションも提示されている Google Now は、突出しています。Google のエコシステムにどっぷり浸かる必要はあるものの、似たような UI は、メッセージアプリへ適応できるでしょうし、上記のシナリオをある程度満たすことができそうです。

様々なカードUI

今はアプリという『閉じた世界』を作ること以外の選択肢が少ないですし、閉じる(囲い込む)ことによって生まれるビジネスも多いので、突然大きな変化が起こるとは考え難いです。また、閉じることによって、独自の表現を組み込むことが容易なのも無視できない点です。しかし利用者は、用途に応じて幾つかのアプリを使い分けるようなことは避けたいですし、アプリやプラットフォームという『垣根』を超えて情報のやりとりがしたいはずです。そのとき、アプリと呼ぶのか、それともウィジェットなのか、クラスターなのか … 名前は何か分かりませんが、情報が行き来するための小さなパッケージが必要になります。

カードUIをメッセージに導入する際の課題

小さなパッケージがどのように行き来する場として、メッセージアプリは最適だと考えています。利用者の体験(この場合、メッセージのやりとり)を邪魔しないように、情報を見せたり、次のアクションを促すにはどうすれば良いのでしょうか。どんどんスクリーンサイズが小さくなり、ノイズを置く隙間がなくなってきている今だからこそ、考えておきたい UI の課題です。

Yasuhisa Hasegawa

Yasuhisa Hasegawa

Web やアプリのデザインを専門しているデザイナー。現在は組織でより良いデザインができるようプロセスや仕組の改善に力を入れています。ブログやポッドキャストなどのコンテンツ配信や講師業もしています。