とあるweb屋の仕事術

10年以上現役のweb製作屋さん。web製作雑務全部やる。

全国展開コンテンツのWebサイトでのエリア選択に日本地図はいらない問題

全国展開コンテンツのWebサイトでのエリア選択に日本地図はいらない問題

Webサイトは四角い...という話は

以前しましたが、今回もそれに近いお話。

 

日本全国の各地域で展開するサービスや

業界などのWebサイト、Webサービス案件は

ごろごろありますよね。

 

そこで必ずある機能が地域・エリアごとの

検索やコンテンツです。

 

たとえば、ぐるなびや食べログ、SUUMOなどの不動産系のサイト、

チケットぴあのようなイベント系のサイトなどなど...

 

これらは地域ありきのコンテンツだったりします。

そうなるとWebサイトはだいたい地域ごとに

コンテンツ展開する構成になります。

 

地域ありきなので、

Webサイト利用者はまず最初に地域を選択します。

その地域に紐付いたコンテンツを見に行くという流れになります。

 

こういったWebサイト、Webサービスの

デザインを設計する際に注意したいのが

日本地図です。

 

Webサイトの企画時や要件定義の段階では、

日本地図をだしてまず地域を検索して〜という

サイトの設計・構成でいくという話になりがちです。

 

ですが、そこでちょと待った。

 

日本地図はデザイン上、非常に扱いにくいのです。

日本のかたち、デッドスペース多すぎ問題。

 

企画・要件定義の際には、

「日本地図バーンて出したい」みたいな話が、

デザイナ抜きの会議で行われたりします。

デザインわからない人たちは、なんだかよくわからないですが、

日本地図が好きなんです。

日本地図だせばパッと見、見栄えがよいので

「なんとなく」の感覚だけで、

日本地図からエリア検索して〜みたいな話になりがち。

 

だけど実際にデザインしたりシステム実装してみて、

「日本地図いらねー」っていつも思うんですよね。

ただデッドスペースが多いだけで、扱いにくいし、

そもそもユーザも必要としていない。

 

ではここで、さきほどあげたサイトの例を見てみましょう。

まずはぐるなび。

ぐるなびの日本地図の例

ぐるなびの日本地図の例

いけるやん!て思うかもしれませんが

「うん...まぁ...」って感じしませんか。

「海外枠」に救われているというかうまい配置ではあります。

ただ地図は別にいらないのでは...と無理矢理感も少し感じます。

ちなみにぐるなびの個室が使えるお店検索のランディングページでは、日本地図はなくシンプルなテキストリンクでの展開になっています。

ぐるなびの個室が使えるお店検索のランディングページ

ぐるなびの個室が使えるお店検索のランディングページ

次は食べログのトップ。

食べログのトップ。日本地図でのエリア選択がない。テキストでシンプル。

食べログのトップ。日本地図でのエリア選択がない。テキストでシンプル。

食べログはテキストリンクで

エリア選択を展開していてスッキリ見やすい、使いやすい。

 

次はSUUMO(スーモ)のトップ。

SUUMO(スーモ)のトップ。日本地図の右上、右下にイラスト配置

SUUMO(スーモ)のトップ。日本地図の右上、右下にイラスト配置

やはり地図上にデッドスペースがあります。

うまくイラストを配置しているのと、

日本地図上に吹き出しでエリアリンクを

表示してバランスをとっていますが、

日本地図のエリアをクリックはできないので、

やはり日本地図はあまり意味をなしていません。

 

チケットぴあはというと、

このサイトではエリアはグロナビに格納されていますね。

コンテンツの特性上、そこまでエリア選択を重視していないからとも言えますが、日本地図はありませんね。

チケットぴあのトップは、エリアはグロナビで展開

チケットぴあのトップは、エリアはグロナビで展開

そしてここまで見てきたのは、

PCサイトの場合です。

スマホサイトの場合だともっと顕著に

日本地図は不要になります。

 

SUUMO(スーモ)スマホサイト

SUUMO(スーモ)スマホサイト

食べログスマホサイト

食べログスマホサイト

ぐるなびスマホサイト

ぐるなびスマホサイト

と、いうことで

サンプル少ないですが、大手サイトを例に紹介しました。

 

日本地図の表示を要件定義で検討しているなら

「日本地図ほんとにいる?」

というところは再考の余地ありということだけ、

頭にいれておくとよいとおもいます。

日本地図でのデザイン/システム実装はそこそこ

実装工数もかかるので、スケジュールや費用も

考慮したいところです。

 

まとめ。

サイトで取り扱うコンテンツの特性やサイトの目的にもよりますが、

  • パッと見いいだけで日本地図を採用するな
  • テキストリンクのほうが利便性も高い
  • 地図でのエリア選択はデザイン/システムでの工数注意
  • 地図、いらないのでは?