Google Maps vs. Apple Map ①

たこ
Salad
Published in
6 min readJan 8, 2017

ふとMediumを見ていたらこんな記事を発見。

細かなデザインについて比較をしていてヽ( ゚Д゚ )ノ うぉぉぉぉぉー!!となり、自分でもやって見たくなりました。

ということで唐突ですが、今回はGoogle MapsとAppleのMapの比較をして色々見ていきたいと思います。

ちなみに僕はプロのデザイナーではないのでそこんとこだけよろしくお願いします。

まず「交通機関(Apple)」「路線図(Google)」モード(今回はこの組み合わせで全て比較しています)で東京駅付近を比較して見ます。

配色

ベースとなっている色はこれです。

これを分けてみるとこんな感じ。

地面は細かく色分けされていたりするので広範囲を占めるもののみを今回は抜粋しました。こう見てみると水や木の部分の色や道に使われている色が若干違うことに気づくと同時に、地面と道に使われている色の数が違うことがわかります。ユーザーは交通機関の情報を調べるのですから、地面(建物)についての情報は別にいらないですし、逆に道の情報は重要になります。そう考えるとAppleの方が使いやすいと言えるかと思います。

路線

次に路線情報を比較します。銀座付近を表示して見ます。

できるだけ等縮尺等位置にしました。

まず感じることはAppleの方が路線が何か分かりやすいということです。中央の銀座線のように色のついた路線名とマークが表示されます。しかも結構な数表示されていてピンチイン・ピンチアウトなどの動きに応じてその数が減ったり増えたりするので画面上がごちゃつかず丁度見やすい状態になっています。

また、この縮尺ではAppleの方が駅名の表示数が多い上、地下なども表示されています。

また、丸ノ内線を見るとよくわかるのですが、Googleの方が路線の表示が雑に感じます。全体的に洗練された感じを受けるのはAppleですが、Appleのマップには店がかなりたくさん表示されているのでそれによって(特に銀座線が)見辛くなっていると言えます。その点ではGoogleはシンプルで分かりやすい。

ちなみにAppleはApple銀座を表示していないのにGoogleは表示しているというのが謎です。小さいお店はたくさん表示しているのに。おい、Apple!

ではもっと大きくして見ます。

Googleは検索バーなどが出ているとものすごく見づらかったので非表示にしました。

Googleはビルが3D立体表示になっている上、三越あたりは中まで表示されています。路線図モードにしているのにこの表示は必要なんでしょうか?ごちゃごちゃするのでマイナスポイントかと思います。

Appleは全体的に色が黄色っぽくて薄く、見辛いです。店のアイコン、文字、そして銀座線までもが似たような黄色で、地面の色もクリーム色なので最悪ですね。その点Googleは字は黒なので読みやすいです。3Dの影の黒はうっとおしいですが。

この2つを見て、どこに何の電車が通っているのかがすぐにわかるのはAppleの方です。日比谷線と銀座線が通っているのがはっきりと分かります。しかしGoogleの方は線が目立たない上、路線名も書かれていません。右下に「東京メトロ」と書かれていることは書かれていますが、今知りたいのは路線名であってそれが「東京都交通局」なのか「JR」なのか「東京メトロ」なのかが知りたいわけではないのでこれらの情報を省いて路線名のみしっかり記載しているAppleの方が好印象です。

また、出口の名前(A13やB1など)はアイコン付きのAppleの方がしっかり記載されている上見やすく分かりやすいです。Googleは場所によってはこの縮尺だと表示されていないところが多くあります。

そして意外に注目したいのが「和光」の表示の違い。

Googleは他のお店と同じようなショッピングバッグのアイコンですが、Appleは和光の特別なアイコンが表示されています。初めて来る人や外国人の方はもちろん、テレビでは和光のビルを見たことがあるけど実際どこにあるのか知らなかったなんて人にとっても分かりやすいアイコンになっていると思いました。これは和光に限らず東京タワーやフジテレビなんかのアイコンもあります。

では今回はここまでとします。今のところ「交通機関」「路線図」というモードでは路線の分かりやすいAppleの方が良いと思いました。東京に住んでいると電車は自分の足のごとく使うものなので日常使いで地図と確認するにはAppleのMapの方がいいと感じました。

それでは次回もお楽しみに!

--

--