無料で相談する

Column 2024.01.16

地図型の画面で混雑状況がわかる「VACAN Maps」のデザインの裏側を公開!

VACAN Mapsは、地図型の画面で施設・店舗の混雑状況や空き状況を可視化できるサイトです。施設・店舗の混雑情報をインターネット上で処理し、スマホやPCから確認できるので、利用されたことがある方もいるかもしれません。

VACANMapsのデザインの変遷 -デザイナーにインタビュー-

ここからは、バカン設立当初からデザインを担当している篠原さんに、インターンの飯田が、VACANMapsのデザイン中でも混雑表示に欠かせないピンのデザインに着目して、インタビューを行いました!

■プロフィール:篠原清志さん
空間デザイン及びプロダクトデザインのプロフェッショナルとして国内コンペでグランプリ受賞後、イタリア・東京で展開するTakayuki Itoh Design Officeにて伊藤氏に師事。SonyPCLにてデザイナーとしてSonyを始めとした企業ブランディングに従事。カナダでフリーランスのデザイナーとして渡り歩き、ファッションショーのモデルとしても活躍。帰国後は大手IT企業でDesign Thinkingを活用し、プロデューサー、マネージャー及びディレクターとして、サービスをリード。

飯田 それでは、インタビューを始めさせていただきます!まず、VACANMapsのデザインを設計する上で、一番最初に考えたことは何だったのでしょうか?


篠原 Map上で施設の空き情報をひと目で理解してもらうため、「世界共通の色という概念で表現すること」「テキストを揃えること」について考えました。
始めに、「世界共通の色という概念で表現すること」は、バカンのサービスが観光地などにも導入され、外国人の方も閲覧することが多いため、「記号」を扱うより世界の共通認識として理解しやすい「色」で表現することにしました。
次に、「テキストを揃えること」は、同じMap上に「空いている」「空きあり」「空席」など、空きを示す意味が施設によって異なると、ユーザーにとってわかりにくく情報を正確に確認することが難しくなってしまいます。そのため、日本語・英語のどちらにおいても、テキストを統一することにしました。


 ↓Ver.1のデザインはこちら

飯田 こうしてデザインができあがったのですね!世界中全ての人が、すぐ見てわかるデザインを意識されて作られたことがわかりました。次に、Ver.1からVer.2への改良が行われていますが、どういった背景があったのでしょうか?

↓Ver.2のデザインはこちら

篠原 Ver.1のデザインで実装する中で、2つの課題が見えてきたためです。
1つ目は、多言語対応に対する負荷です。言葉自体も施設によってバラバラで、言語も様々であるので、混雑表示施設が増えるたび、実装にコストが掛かりすぎて現状運用が難しい状況にありました。
2つ目は、ピンがMap上で重なりすぎて背景の地図が見えないという点です。ピンに表示するものが文字の場合、ピンの表示領域が大きくなり、背景地図と重なりが大きくなって、ピンの密度が高い場所だと見えなくなってしまう問題がありました。
そのため、人の形をしたアイコンを使い、その人の数にしたがって「混雑」や「空きあり」の表示を誰でも一目でわかるように変更しました。
 
飯田 Ver.2を実装する上で問題となっている点を洗い出し、お客様にとっての使いやすさを追求して出来上がったのですね。これらの段階を経て、現在はVer.3のデザインが使われていますが、この変更はなぜ行われたのでしょうか?

↓Ver.3のデザイン(現在使用されているデザイン)はこちら

篠原 人のアイコンがトイレのアイコンと似ているため、ユーザーに誤解されるケースが起こってしまったからです。特に「空きあり」の一人表示されているピンのデザインは、そのような報告が度々ありました。そのため、人の形をトイレのアイコンらしいものから抽象化し、さらにブランクを表す薄い人形を入れることで、空き情報を表現するように変更しました。

飯田 お客様の声を一つ一つすくい上げることで、現在使われているデザインへと進化していったのですね。



このように、VACANMapsのデザインは幾度の改良を経て、現在のデザインに生まれ変わりました。その中で、常にお客様の立場に立って、「見やすさ」「わかりやすさ」を考え続けることが、バカンデザインの魅力の一つなのだと思います。


さらに、このVACAN Mapsのアイコンは、デザイン特許とも呼ばれる意匠権を取得しており、グッドデザイン賞やiF DESIGN AWARD 2023などでも賞を受賞しています!

グッドデザイン賞
https://prtimes.jp/main/html/rd/p/000000215.000018933.html

iF DESIGN AWARD 2023
https://prtimes.jp/main/html/rd/p/000000296.000018933.html

終わりに

今回、デザイン担当の篠原さんへのインタビューを通して、VACANMapsのデザインの裏側をご紹介しましたが、いかがでしたか?
バカンのビジョンである「世の中から待つをなくす」ため、より多くの人々にVACANMapsを利用していただけるようなデザイン作りがされていることを、知っていただけたら嬉しいです。