マップが使いやすいサイト(UI的に)｜デザイナーsite hunt!

こんにちは！
BitBeansでは、毎週デザイン会を開き、現在進行中の案件報告や、デザインに関する課題・疑問を共有し合うようにしています。そして最後に行うのが「サイト探し」。毎週、それぞれがテーマに合わせて探したサイトを紹介します。デザイナーならではの視点で選ばれたサイトは、ユニークで刺激的で、毎回新しい発見があります。

今週のテーマは、KOさん提案の 「マップが使いやすいサイト（UI的に）」です。現在進行中の案件で、参考になる地図を探していることもあり、各自「これはいいデザイン！参考になる！」と思ったサイトを選び、注目ポイントとともに共有してもらいました。

東京メトロ

SHさんが探したのは、路線図が使いやすい東京メトロのサイト

SH「多くの交通系サイトでは、路線図がPDFや一枚絵で掲載されている事が多いのですが、東京メトロのサイトはとても見やすいと感じました。各路線で絞り込みを行うと、選択中の路線以外はクリックできないようになっているため、誤操作を防ぐ工夫がされています。また、各駅をクリックすると詳細が表示され、その駅からどの駅に行けるのかが一目で分かります。全体としてとても使いやすい設計になっています。

World Population Density Interactive Map

TOさんが探したのは、世界の人口密度を体感できるインタラクティブなサイト

TO「世界の人口密度を、3D表現やカラーグラデーションで可視化したインタラクティブ地図です。マウスコントロールでマップを拡大・縮小でき、都市ごとの人口推移はグラフとして表示されます。地図を眺めているだけで各国の状況が伝わり、日本の人口密度が高いことも一目瞭然。また、1950年から2035年までの人口密度データが表示されるため、未来も予想で一覧できます。過去のデータを見ると人口の増減が見える時期があり、背景要因を検討できるところが興味深いポイントです。ざっくり見るだけでもスタイリッシュで素敵なビジュアルです。」

KO「確かにデータをざっくり見たい時に、円の大きさで把握できるとか、ホバーでデーターがパッと出るのはいいですね」

ぐるなび

YOさんが探したのは、お店検索がスムーズでわかりやすいサイト

YO「左側のメニューで細かい条件までお店の設定ができるのが良いポイントだと思いました。画面下には地図上に表示されているお店の一覧があり、スクロールするとその店舗の位置まで地図が自動で移動してくれるのでとてもわかりやすいです。さらに「一覧」のボタンを押すと、お店の詳細も確認でき、迷うことなく情報にアクセスできるスムーズなUI設計だと思いました。」

KO「マップ型のサイトは、「どの機能をどこに配置するか」というのが難しいポイントだと思うのですが、ぐるなびのサイトはその区分けがとても上手くできていると感じましたね。」

yahoo天気（アプリ）

YAさんが紹介するのは、時間軸で動く雨雲レーダーが楽しいサイト

YA「アプリ版の雨雲レーダーをよく利用しています。時間軸をスライドさせると、雨雲の動きをアニメーションのように確認できるのがとても便利です。雨雲が表示されていないときは少しわかりにくいですが、雨がある地域では雲の動きが時間ごとに滑らかに変化し、「どの時間帯に雨が降るか」や「いつ止むか」が一目でわかります。地点を切り替えると、その場所ごとの降雨予報の時間もすぐに表示されるます。今雨が降っていても、「12時ごろに止みそうだから、そのタイミングで出かけよう」といった生活の判断に直結するのがとても楽しいポイントです。さらに雨雲だけでなく、風や気温の変化など、他の気象データも重ねて表示できるのも面白いですね。」

KO「スマホでその使い勝手はいいですね」

ホームメイト

KOさんが紹介するのは、ユーザー導線が丁寧で情報整理の行き届いたサイト

KO「操作説明が表示されているため、初めて利用するユーザでもわかりやすく、迷うことのないUIだと感じます。左側に固定されたタブ切り替えも、大項目の構造が精査されており、情報設計が丁寧だと思います。おそらく3通りのユーザー像を想定して作られおり、例えば都道府県で地図を検索した時に、主要都市を1kmスケールで自然に表示している動きは、違和感がなくユーザーに優しい設計です。」

KO「地図検索で件数が見やすく、ピンが密集しない工夫や、コンバージョンにつながる検索導線がページ内の適切な位置に自然に配置されているのがいいと思います。」

なっぷ

MAさんが紹介するのは、キャンプ場が検索しやすい検索サイトです

MA「キャンプ場が検索できるサイトです。左側の絞り込み項目が親切で、近隣施設やペット可、近くのスーパー、病院、コンビニ、ホームセンターなども指定できます。キャンプ場を選択すると右側に詳細が表示され、写真が多いためイメージやすく好感が持てます。絞り込み機能でソートした場所は緑に、それ以外の場所はグレーで表示されますが、グレーの場所も詳細が確認できるため比較検討がしやすい点も、良いと思いました。」
KO「モーダルで詳細を出してくれるんですね。ページ遷移せずに見られるのはいいですね。宿泊や日帰りなどの項目自体もすごく練られていると思いました。

Yahoo不動産

KAさんが紹介するのは、地図で物件位置を直感的に把握できるUI

KA「このサイトは地図上で物件の位置を視覚的に確認できるUIがとてもわかりやすいです。通常の賃貸サイトでは「駅徒歩〇分」や住所表記だけでは距離感がつかみにくくイメージが湧きにくいことがあります。しかしこのサイトは、地図上に物件のピンが表示されるため、周辺環境や駅からの距離感が一目で把握できます。地図上のピンと右側の物件一覧が連動しており、気になる物件を選ぶとすぐに詳細情報が表示され、動線もスムーズでユーザー目線で考えられた設計だと感じました。」

KO「結構ここら辺って今空いてんだなとか分かって狙い目なのかなとか家賃相場が見やすかったり、めっちゃいいですね。細かいですが、再読み込みしないでこの場所移動しても、もう1回出せるのもいいなと思いました。しかもスマホで見る方が機能ちゃんと分かれてていいです。」

Tokyo Disney Resort App 

FUさんが紹介するのは、膨大な情報に迷わずアクセスできる設計

FU「東京ディズニーリゾート（TDR）やユニバーサル・スタジオ・ジャパン(USJ)の公式アプリは、地図機能が非常に優れていると感じました。現在地と目的地がひと目でわかるガイドマップ機能に加え、施設やアトラクション情報がマップと連動しているため、直感的に操作できます。膨大な情報量の中でも、自分が探したい情報にスムーズにたどり着けるUI設計が秀逸で、まさに“迷わないためのUX”が詰まった好例です。テーマパークの複雑な動線にも対応できる実用的な地図体験ができます。TDR大好きー❤️全て基本がモバイルファーストで作られている点も嬉しいですね。」

SH「スマホアプリのマップは、絵じゃないですね？３D表示なんですね、すごい！」

マクドナルド（アプリ）

TA「マクドナルドの店舗検索マップは、ピンのデザインが視認性に優れており、どの店舗がどこにあるのかが一目で把握できます。利用シーンに合わせて絞り込みができるほか、お気に入り登録などの機能も直感的で使いやすいく、必要な情報に素早くアクセスできる作りになっています。地図上での操作がスムーズで迷いにくく、目的の店舗にすぐたどり着ける導線設計も秀逸です。全体的に、ユーザーがどのように情報を探すかをよく理解した設計になっていると感じました。」

エティハド航空

DAさんが探したのは、新規就航を地図で直感的に伝える航空会社サイト

DA「エティハド航空というアラブ首長国連邦（UAE)のアブダビに本社を置く国営航空会社のサイトです。新規就航地をマップで視覚的に表示しており、クリックするとそこから直接予約できる仕組みになっています。地図から目的地を選べる導線はわかりやすく、利用者にとってスムーズな体験だと感じました。マップのピンの色はそれぞれ視認性も高く、情報とデザインのバランスが取れています。新規就航をここまで目立たせているのは、路線網の拡大そのものを「成長の証拠」として伝えたい、戦略的なメッセージだと感じました。」

airbnb

SUさんが探したのは、価格が一目でわかるわかりやすい地図UI

SU「旅行者向け、宿泊検索サイトで、地図上に価格を直接表示するピンがすごくわかりやすいです。視覚的にどのエリアにどれくらいの価格帯の宿があるかをすぐ把握できます。地図のピンと物件カードが連動しており、見たい宿を選ぶとすぐに詳細が確認できます。複数の宿をサクサク比較できるのも心地よく、とてもスムーズです。地図のズームによって情報量が調整されてるので画面がごちゃつかず、体験全体がとてもスマート。全体的として「地図で探す」体験が直感的で、旅行プランを立てるのが楽しくなるUIだなと思いました！」

KO「体験とか宿泊体験サービス、宿泊以外も探せますね。体験はいいですねぇ」

---

今回ご紹介した「マップが使いやすいサイト(UI的に)」はいかがでしたか？デザイナーの目から見て、見やすくてスムーズな動きを意識した工夫があるサイトなど、とても参考になるものばかりでしたね。またスマートフォン（SP）向けの構成も参考になりますね。次回も楽しいテーマを取り上げながら、素敵なサイトをご紹介していきたいと思います。