とあるweb屋の仕事術

とあるweb屋の仕事術

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

日本地図の実装どうしてる?選挙特設サイトに見る日本地図のコーディングパターン

Webサイトでは日本地図の取り扱いは、

けっこうむずかしいですよね。

 

以前下記の記事で

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

日本のかたち、デッドスペース多すぎという話をしました。

www.toaru.jp

 

日本地図は

実装めんどくさくて大変、

レイアウトも結構考えないと

いけないんですよね。

 

おそらく日本地図が

もっともWebサイトで

使われるのは選挙の時期。

各メディアサイトの選挙特設サイトが

参考になると思うので、

 

下記のツイートにも便乗して、

 

日本地図をどのように実装しているのか、

各メディアサイトの選挙特設サイトを例に

ざっくりですが見ていきたいと思います。

 

今後、日本地図を

取り扱う案件に携わるとき、

知識・ノウハウとして抑えておくといいかなと

思います。それではさっそく。

 

日本経済新聞

日経の日本地図です。PCでは日本地図で、

スマホではリスト表示になっています。

見やすくて洗練された日本地図ですね。

各地域 liタグ、position:absolute; で

細かく位置を指定しているようです。

レスポンシブデザインです。

PCでは日本地図のデッドスペースをうまく

活用して情報表示しています。

https://vdata.nikkei.com/election/2019/sanin/kaihyo/#/

日経のPC選挙特設サイトの日本地図

日経のPC選挙特設サイトの日本地図

日経のスマホ選挙特設サイトの日本地図

日経のスマホ選挙特設サイトの日本地図

 

 

朝日新聞デジタル

おなじくliタグで、position:absolute。

スマホサイトでも日本地図を再現。

スマホでも日本地図はなかなかみたこと

なかったのですが、横スクロールを

取り入れて実現しています。

地域選択で全国区の場合、

不動産サイトなどがそうですが、アプリも

Webサイトもだいたい地域はリスト表示が

多いです。

https://www.asahi.com/senkyo/senkyo2019/

朝日新聞デジタルのPC選挙特設サイトの日本地図

朝日新聞デジタルのPC選挙特設サイトの日本地図

朝日新聞デジタルのスマホ選挙特設サイトの日本地図

朝日新聞デジタルのスマホ選挙特設サイトの日本地図

 

 

毎日新聞

毎日新聞はPC、スマホともに

SVGで日本地図を実装しています。

SVGの地域の要素にリンクを指定しています。

クリッカブルマップ、イメージマップと呼ばれる

やつですね。

レスポンシブではないようですが、

スマホは日本地図を横スクロールすることが

できます。

https://mainichi.jp/senkyo/25san/koho/

毎日新聞のPC選挙特設サイトの日本地図

毎日新聞のPC選挙特設サイトの日本地図

毎日新聞のスマホ選挙特設サイトの日本地図

毎日新聞のスマホ選挙特設サイトの日本地図



時事ドットコムニュース

こちらはちょっとめずらしいタイプ。

PCサイトは、floatで列を形成して、

実装されていました。

なるほど、というかんじです。

レスポンシブサイトではなく、

スマホサイトは地域リスト表示型でした。

https://www.jiji.com/jc/2019san

時事ドットコムニュースのPC選挙特設サイトの日本地図

時事ドットコムニュースのPC選挙特設サイトの日本地図

時事ドットコムニュースのスマホ選挙特設サイトの日本地図

時事ドットコムニュースのスマホ選挙特設サイトの日本地図

 

NHK

NHKもPC、スマホともにSVGマップを

使用していました。

NHKはサイト自体はレスポンシブですが、

マップはレスポンシブではなく、スワイプで

操作するように誘導しています。

http://www.tbs.co.jp/senkyo2019/

NHKのPC選挙特設サイトの日本地図

NHKのPC選挙特設サイトの日本地図

NHKのスマホ選挙特設サイトの日本地図

NHKのスマホ選挙特設サイトの日本地図

 

 

産経ニュース

産経ニュースもPCはSVGマップ。

スマホはリスト型となっています。

https://www.sankei.com/politics/election2019.html

産経ニュースのPC選挙特設サイトの日本地図

産経ニュースのPC選挙特設サイトの日本地図

産経ニュースのスマホ選挙特設サイトの日本地図

産経ニュースのスマホ選挙特設サイトの日本地図

 

 

Nスタ×NEWS23 選挙スペシャル|TBSテレビ

こちらは、position:absolute で実装のタイプ。

レスポンシブでスマホもそのまま

position:absoluteでの日本地図となっています。

少し変わった形の日本地図になりますが、

地域の場所は認識できるのでいいですね。

http://www.tbs.co.jp/senkyo2019/

Nスタ×NEWS23のPC選挙特設サイトの日本地図

Nスタ×NEWS23のPC選挙特設サイトの日本地図

Nスタ×NEWS23のスマホ選挙特設サイトの日本地図

Nスタ×NEWS23のスマホ選挙特設サイトの日本地図

 

 

--- ✂ ---

 

 

適当にググって

上位に出てきたメディアサイトを

ピックアップして紹介しました。

 

SVGマップか、position:absolute か

というかんじでしたね。

レイアウトで見やすかったのは、

NHKかな〜と思いました。

 

個人的に好きなのは、日経のPCが

シンプルでいいなと思いました。

 

実装を考えると、SVGよりは、

position:absolute のほうが、

保守性が高そうなので、

自分で選択するなら

position:absolute での実装を

選ぶと思います。