こんにちは、Local Product Design Teamです。2021年9月にLINE PLACEがリニューアルオープンしました。今日はそのデザインについてこだわった点や大変だった点も踏まえながらご紹介します。

LINE PLACEとは

LINE PLACEは、グルメレビューアプリ「LINE CONOMI」 と「LINE」アプリ上でお店探しができるサービス「LINE PLACE」 が統合されたサービスです。「LINE」アプリ上でお店探しができるだけでなく、お店の情報を「LINE」のトークルームから簡単に友だちにシェアしたり、自分が訪問したお店や注文したメニューなどを記録したりすることができます。また、「LINEで予約」に対応している店舗であればアプリを切り替えることなく、「LINE」上からそのまま予約まで完了することも可能です。
「LINE CONOMI」は、2019年5月より提供を開始した、飲食店のレシートや料理の写真などを撮影するだけで必要な情報が自動入力されて簡単に口コミ登録ができ、口コミ登録をすればするほど自分の好みを分析してレコメンドをしてくれるグルメ・おでかけサービスです。一方「LINE PLACE」は、「LINE」アプリ上で様々な検索方法を使って自分の気分や好みに合ったお店を簡単に探すことができるメディアとして、2021年4月より提供を開始しておりました。 

この度、よりユーザーにとって使いやすいサービスを目指し、「LINE CONOMI」と「LINE PLACE」を統合し、“私の行きたいが見つかる“新たなサービス「LINE PLACE」としてリニューアルオープンしました。

デザインリニューアルで苦労したこと

冒頭で「LINE PLACE」と「LINE CONOMI」のサービス内容に触れましたが、リデザインにあたっては 
・突き詰めた「LINEらしさ」
 ・ユーザーファースト
・大人数での協業
に苦労しました。
  
*本内容は主にネイティブアプリの機能を想定しており、LIFFやWeb上では挙動が異なる場合があります。
*LINE Front-end Framework（LIFF）は、LINEが提供するウェブアプリのプラットフォーム。このプラットフォームで動作するウェブアプリを、LIFFアプリと呼びます。
Webサイト： https://place.line.me/
iOSアプリ： https://apps.apple.com/jp/app/line-conomi/id1444842042
Androidアプリ： https://play.google.com/store/apps/details?id=me.conomicorp.conomi&hl=ja&gl=US

・突き詰めた「LINEらしさ」

そもそも、異なるデザインで構成されていた2つのサービスを1つにデザインすること自体も容易ではありませんし、どうすればたくさんの機能を1つのトーン＆マナーで合わせることができるかは大きな課題でした。
複数の異なるサービスが統合され、機能の重要性もフラットであったことからホーム画面にある「フィード」「発見」「検索」「予約」タブの内容とUIに同じ重みを持たせなければならなかったのです。また、これらのタブを無理なく閲覧できるようにスワイプで移動できるようにしました。
LINEらしいシンプルなUIデザインを担保しつつ、タブで並ぶ4つの機能の個性を生かすことには苦労しました。

さらに「LINE PLACE」はLINEアプリ内のLIFF、ネイティブアプリ、Webブラウザから利用できます。それぞれにデザイン上の制約がある中、可能な限りデザインに統一性を持たせ使用感が異なることがないようにしなければなりません。この点も非常に苦労した部分です。

・ユーザーファースト 

ユーザーファーストは、LINEのUIデザインがもっとも大切にする要素であり、「LINE PLACE」でも大いに留意しました。
その1つの事例としてあげられるのが、「ホーム画面」です。ユーザーが最初に目にする画面にどの機能を露出するのかは非常に難しい問題でした。複数の機能がそれぞれ別の事業部によって管理されていたために、自らが担当する機能をホームに設定したいと考えるはずだからです。
しかし、それはユーザーファーストではないと私たちは考えました。ユーザーが最初に見たい画面はどのような画面なのかを検討した結果、ユーザー間で交流する機能を表示すべきだとなったのです。
なお、リリース後もホーム画面は改良に取り組んでいます。

・大人数での協業
リニューアルデザインには計8名のデザイナーが携わりました。幸い、LINEにはLDS（LINE Design System）というデザインガイドラインが整備されています。
これに則ってデザインすれば複数人でデザイン作業を行なってもしっかりとトーン＆マナーは守られますが、例えば、プロダクトごとに委ねられている「ボタンのサイズ」などはデザイナーによって異なる場合があります。こういった細かい部分がプロダクト内で統一されていないと、それがユーザーにとってはノイズとなり日々使いたいと思えるものにはなりません。そのため、今回のリニューアルデザインを行うにあたってデザイナーのみならずエンジニアとも相談を繰り返して基準を設けました。手間のかかる作業ではありますが、こういったことがシンプルさに繋がると思います。

「LINEらしさ」とともにこだわったこと

もちろん全てのエリアにこだわりがありますが、あえて1つ選ぶのであればマイページの分析画面です。ここはデザインの可能性が非常に膨らむ画面だと思っています。レシートを登録していくと利用シーンが数値化されていくのですが、その数値の見せ方はグラフィカルになるように意識しました。機能の表現としてはグラフにしなくても、数値を表として見せることもできたでしょうし、グラフにするにしても単純なルックスでもよかったかもしれません。
しかし、ここはデザイナーとしての芸術性が出せる部分だと思いましたので、エンジニアさんにも協力いただいて実現することができました。
使い込んでいただけると綺麗なグラフが現れてくるのでぜひ、たくさん使っていただきたいですね。

最後に

今回はサービスの統合に伴うデザインリニューアルの裏側について書かせていただきました。「LINE PLACE」のデザインは、これからもよりユーザビリティを高めていけるようにアップデートを重ねていきたいと思っています。
ぜひ一度、画面に触れてみてください。そして皆さんのPLACEの分析画面を育ててくださると嬉しいです。

最後までお読みいただきありがとうございました。