この記事では、2023年12月にPayPayに追加された「近くのおトク」機能のデザイン完成に向けた道のりと、地図機能のデザイン作成におけるユニークな体験とデザインプロセスをご紹介します。シニアプロダクトデザイナーであるPollyが、デジタルマップや地図作成時のルール、目的に基づいたPayPayのデザイン戦略や原則を交えつつ、詳しく解説していきます。なお今回、 Mapbox Studioをベースに独自のマップレイヤーが作成されました。その過程で習得したスキルや、今後類似したプロジェクトで役立つ様々なアイディアをご紹介します。
Pallavi Verma（Polly）（パラヴィ・ヴェルマ）
プロダクト本部 デザイン部
インドのニューデリー出身のPollyです！2015年に東京大学の交換留学生として初めて来日しました。その後インドに一度帰国しエンターテインメントのチケット販売会社にて就業後、2020年に日本に戻りPayPayに入社しました。O2O Merchantチームで経験を積み、現在はFinanceチームに所属しています。
Agenda
はじめに
昔は海賊たちの航海を手助けしていた地図が、今では行きつけのお店を探すのに役立っているように、現在地図は多様な形で提供され、Snapchat、Instagram、Airbnb、Uber Eats、Woltなどの有名なアプリには欠かせない存在です。地図はインタラクションデザインにおいては不可欠で、地図のおかげで新たなコンテンツが発見しやすくなっています！
PayPayでは、2023年12月にお得なお店をマップで簡単に探せる「近くのおトク」機能を追加しました。私たちは、今後もこの機能におけるユーザー体験の改善を続けていきます。私たちのデザインプロセスを本記事で他のデザイナーの皆さんへ共有することで、より革新的なアイデアを生み出すきっかけになればと思っています。
包括的なアプローチによる「近くのおトク」とマップの刷新
PayPayでは、ユーザーにシームレスな体験を提供するため、常にアプリの機能改善を行っています。そのひとつが、ユーザーに近隣の店舗や開催中のキャンペーン、お得情報を表示する「近くのおトク」機能です。PayPayクーポンやスタンプカードが地図上に表示されることによって、利用者側にとっての利便性が高まりました。私たちが最初に取り組んだことは、マップレイヤーを改善し、情報過多でユーザーが圧倒されないよう、必要な情報だけを表示できるようにすることです。また、おトクなお店を見つける際に最高のUXを提供することをデザインの最大の目的とし、デザインプロセスではユーザーニーズを最優先に考慮しました。
今回は、UI上で地図を表示する際に外部のソフトウェア開発キット（以下、SDK）に頼ることなく、Mapbox Studioを使って独自のマップレイヤーを作成しました。地図製作のプロはメンバー内には一人もおらず、チャレンジすることによって、各過程で新しいスキルを習得することができました。今回のような地図に関連したUXデザインのプロジェクトは頻繁に発生する案件ではないので、私たちの経験を共有できるのは貴重な機会だと思っています。では、私たちが実際に取り組んだ各ステップを紹介していきます。
ステップ1：デジタルマップ構造と地図製作ルールを理解するための調査
レイヤー
デジタルマップには、特定のデータセットを表示する「基本レイヤー」「データレイヤー」「インタラクションレイヤー」などの概念があります。構造理解により、プロセスを効率化し、正確なスタイリングを実現できます。
マップタイル
デジタルマップをチェスのボードに例えると、それぞれのタイル（マス目）には保持できる情報量の限界があり、地図上に表示されるPoint of Interest（以下、POI）の数は、各タイルのデータ上限によって変化します。この制限により、各POIの名称、おトク情報、写真、その他の詳細などの情報の表示量が決まります。
POIの整理
ユーザーが地図を拡大・縮小すると、地図上のタイルがクラスター化し、保存されているコンテンツが整理されます。ただし、この機能には限界があります。例えば、地図上にたくさんのフィルターを設けると、タイルシステムとPOIの整理が困難になることがあります。
地図製作の視覚的ルール
地図製作では、読みやすさ、視覚的コントラスト、構成、階層、バランスなど、様々なデザインの原則が用いられます。優れた地図には、これらの原則がすべて取り入れられています。
凡例
良い凡例の特徴は、アイコンが視認しやすいことと、説明書きが簡潔でわかりやすいことです。反対に、悪いデザインの例としては、凍結している場所を示すためにアイスクリームのアイコンを表示することなどが挙げられます。
ステップ2：Mapbox Studioでの作業
多くの企業では、リソース、データ、テクノロジー、デザインの効率化を図るために、第三者が提供するSDKを使用しています。PayPayではMapbox Studioを利用し、FigmaやSketchでの作業と似た形で、自分たちでカスタマイズを行っています。
ステップ3：目的指向のデザイン戦略
すべての地図は特定の目的で作られています。地図のスタイルをカスタマイズすることで、アプリの目的がユーザーに正しく伝わり、ユーザー中心のデザインを作成できます。
デザインプロセスの一環として、有名なナビゲーションアプリを研究しました。最新の地図のUI/UXデザインのトレンドが分かり、そこからデザインを検討するにあたってのアイデアを得ることができました。
このリサーチで分かったことは、検索や発見を主な目的としている地図は、シンプルなカラースキームであることが多く、同じ色相のトーンでまとめられているということです。
- 例えば、 AirbnbやUberなどの有名なアプリでは、単色のカラーパレットが低コントラストで使われています。基本となるマップが目立ちすぎず、ユーザーがコンテンツを見る妨げになりません。
- AllTrailsに使用されている地形のベースマップは、屋外、自然、水域に関するデータを効果的に強調しており、アウトドア活動で使用するというアプリの目的に合致しています。
- 経路検索アプリには、交通機関をハイライトしたストリートマップが適しています。その代表例がYahoo!地図です。
PayPayのユーザーがアプリを使う目的は、店舗やおトクな情報を見つけるためであり、経路検索のためではありません。そのため、私たちのデザイン原則は、ユーザーがヒーローコンテンツに集中し、自分にとって大事な情報を全て同時に認識できるよう、デザインをシンプルにすることに重点を置いています。
ステップ4：デザイン原則の適用
地図のスタイルを調整する際は、色、タイポグラフィ、シンボル、テクスチャのデザイン原則について慎重に検討しました。
- コントラストは意図した部分を強調するためのものです。周囲の要素に対してどの程度その機能を目立たせるかが決まるため、慎重にカラーパレットを選びました。
- 階層と密度は、私たちのデザインの考え方において大切な要素であり、地図上で情報を構造化し、表示するための指針となるものです。 私たちはユーザーに快適で分かりやすい地図体験を提供できるよう、地図を拡大したときに関連情報が徐々に表示されるようにしました。
- 視認性は、ラベルと地図の要素の距離を決めるものです。私たちはゲシュタルト理論とインフォメーションマッピング法を用いて、ユーザーが分かりやすいように地図を整えました。
ステップ5：店舗情報のデザイン
地図レイヤーのデザイン変更後は、近くで「おトク」を提供している店舗を見つける際のユーザー体験の改善に取り組みました。以前は、「近くのお店」機能でユーザーが「おトク」フィルターをオンにすると、PayPayが使える店舗とPayPayキャンペーンを実施している店舗のみを見つけることができました。しかし、PayPayが成長するにつれ、PayPayアプリにクーポンやスタンプカードのサービスが登場したため、ユーザーにとってお金を節約できる機会がさらに増えました。そのようなお店を近くで見つけられるようにするために、この機能のユーザー体験を見直し、様々なカテゴリーの、近くにあるお店をより特典に重点を置いた形で選んで表示することにしました。
また、より簡単に検索できるように特典のフィルターも用意しました。さらに、地図上で直接クーポンを獲得できるようにしたことで、非常に使いやすくなりました。
次のステップ
私たちは、ユーザーの期待に応えられるようなマップを作るために、試行錯誤を繰り返しました。デザインの過程で、道路や建物のUIを決めて、様々なレイヤー、ズームレベルやPOIの取捨選択がアプリ全体のUXにどのように影響するかを考えました。
新機能をリリースしたところではありますが、さらに改善していくためにユーザーからのフィードバックを常に確認しています。私たちの取り組みによって、PayPayでの「近くのおトク」が見つけやすくなり、PayPayクーポンやスタンプカードなどのおトク情報の認知度が上がりました。今回学んだことは、マップのユーザー体験をデザインするには、ユーザーの行動や嗜好を深く理解する必要があるということです。
最後に
本記事を読んでいただきありがとうございました。私たちのデザインプロセスに関する気づきが、皆さんのデザインの仕事やキャリアに役立つことを願っています。今後もデザインブログ[Design Talks]にご期待ください！
現在募集中のポジション
※募集状況、社員の所属等は取材当時のものです。