日本地図の精細度は4段ある — 高精細・標準・簡略・なめらかの違いと選び方

地図の精細度という設定は、都道府県マップの編集画面の右側、「出力サイズ」という枠の中に置いてあります。色やリンクを並べるタブ群からは離れた場所なので、地図を1枚仕上げるまで目に入らないこともある。ここで選べるのは4段で、初期値はいちばん細かい高精細です。

先に判断を書いておくと、ほとんどのサイトはこれを触らないままで足ります。ただし触ったほうがいい場面もはっきりしているので、4段が何を変えて何を変えないのかから順に整理します。

変わるのは輪郭の細かさだけで、色もリンクも動かない

精細度が動かすのは、県境や海岸線をどれくらい細かい折れ線で描くか、その一点です。設定した色、貼ったリンク、全国か選択県かの表示モード、ラベルの有無。このあたりは精細度をどこに合わせても影響を受けません。

もうひとつ知っておくと納得が早いのが、4段はその場で計算しているわけではなく、段ごとに別の地図データを持っているという点です。プラグインの中に精細度ごとの地図ファイルが入っていて、選んだ段のデータを読んで描画します。切り替えが一瞬で終わる代わりに、「この県だけもう少し細かく」のような中間の調整はできません。用意された段から選ぶ、という形式です。

4つの選択肢と、初期値がいちばん重い側にある話

編集画面のラジオボタンは、こう並んでいます。

上の3つは、順に輪郭が単純になります。高精細は入り組んだ湾や複雑な海岸線がそれらしく出る段。標準はその中間で、簡略まで落とすと海岸線は大づかみな折れ線になります。

4つ目の「簡略・なめらか」だけは毛色が違って、簡略よりさらに粗い段ではありません。簡略のデータに角を丸める処理をかけたものです。頂点を間引くと折れ線の角が立ち、地図が多角形っぽくカクついて見える。その角を削って丸めたのがなめらかです。

ここで一つ、誤解しやすい点を先に潰しておきます。角を丸める処理は頂点を減らすのではなく、角のところに点を足していく処理です。手元で同梱データを比べると、簡略が約27KB、簡略・なめらかが約91KB。標準の約68KBより大きい。輪郭として持っている情報は簡略のままなのに、データの量では標準を超えています。なめらかは軽くするための段ではなく、簡略の角張りを消すための段だと考えてください。

初期値はいちばん細かい高精細です。何も触らなければ、いちばん重い段で出るということでもある。ただ、粗い状態から始めて「線がカクカクしている」と感じるより、細かいほうから必要に応じて落としていくほうが、判断としては迷いません。

判断軸は、1つの県が画面上でどれくらいの大きさになるか

どの段が要るかは、地図の中で県ひとつがどれくらいの面積を占めるかで決まります。ここだけ見れば迷いません。

全国を1枚に収める使い方だと、県ひとつの表示面積は小さくなります。本文カラムの幅に収めれば、四国や九州の県はかなり小さな図形です。この大きさだと、高精細と標準の差はほとんど画面に残りません。細かい入り組みは、描かれてはいても人の目には届いていない状態になる。全国地図しか置かないサイトなら、標準まで落としても見た目の損はほぼ出ないと考えていいです。

逆に、表示する県を絞って1県や数県を大きく見せると、同じ設定でも粗さがそのまま拡大されます。県の形が主役になるので、簡略の折れ線が雑な地図に見えてしまう。範囲を絞る使い方をしているなら、高精細のまま置いておくのが素直な判断です。

スマホ中心のページも同じ軸で考えられます。画面幅が狭いほど地図は小さく描かれるため、細かさに払ったコストは戻ってきにくい。

細かい段ほど、地図はページのHTMLとして厚くなる

コスト側にも触れておきます。この地図は画像ファイルではなく、SVG図形を点と線の数式で持つ画像形式。拡大しても荒れず、都道府県ごとのようにパーツ単位で色やクリック動作を付けられる。をページのHTMLの中へ直接書き出す作りです。県や市区町村の形は、パスの座標としてそのままページのソースに入っています。

精細度を上げるというのは、そのページに書き込まれる座標の量を増やすということです。画像を1枚足すのとは違って追加の読み込みは起きませんが、ページそのものは厚くなる。

見当を付けるための数字を出しておきます。同梱している全国分の地図データは、高精細が約166KB、標準が約68KB、簡略が約27KB。全国モードで置けば、これに近い量がそのままページのHTMLへ入ります。1段落とすと、おおよそ半分以下という比率です。表示する県を絞る使い方なら入るのは選んだ県の座標だけなので、実際の数字はここからぐっと小さくなります。

読み込みまわりの作り、たとえば画像リクエストが発生しないことや、CSSとJSが地図を置いたページでだけ読まれることは スマホ表示の記事 に書きました。精細度はその上に乗るもうひとつの変数、という関係です。

市区町村マップは3段で、「なめらか」が無い

混ぜると事故るので分けます。市区町村マップの精細度は3段で、選択肢は高精細 (high) / 標準 (mid) / 簡略 (low)。「簡略・なめらか」は都道府県マップ専用の段で、市区町村側のラジオボタンには出てきません。初期値がいちばん細かい高精細である点は共通です。

市区町村マップは選んだ市区町村だけを描いて、その範囲に地図が寄る作りです。つまり市や区ひとつが大きく表示されやすい地図で、前の節の軸でいえば粗さが目に付く側に寄っています。対応エリアを市区町村で見せるなら、まず初期値のまま置いて、重さが気になってから落とす順番をおすすめします。地図そのものの作り方は 市区町村単位のクリックできる地図 にまとめました。

ページごとに変えたいときは、ショートコードの level 属性

同じマップを複数のページに貼っていて、あるページだけ精細度を変えたい。そういうときの逃げ道があります。ショートコードに level 属性を書くと、そのショートコードに限って投稿側の設定を上書きします。

[plg_jcm_map id="12" level="mid"]

id には作ったマップのID、level には精細度の値を入れます。都道府県マップなら high / mid / low / low-smooth、市区町村マップなら high / mid / low です。編集画面のラジオボタンの下にも、level 属性を渡した場合はそちらが優先される旨が書いてあります。

引っかかりやすいのが2点。受け付けない値を書いてもエラーにはならず、黙って無視されます。市区町村マップに level="low-smooth" と書いてしまった場合、警告は出ずに投稿側へ保存した値で描画される。もう1点は、ブロックで置いたときにこの属性が使えないことです。ブロックが保存しているのはマップのIDひとつだけなので、精細度はマップ編集画面の設定がそのまま出ます。ブロックとショートコードの使い分けは ブロックエディタからの設置 が詳しいです。

迷ったら初期値のまま、変えるのは見比べてから

手順にすると短くなります。まず高精細のまま作って公開する。そのうえで「全国地図しか置かない」「本文カラムに小さく収める」のどちらかに当てはまるなら、標準へ1段落として様子を見る。簡略まで下げるのは、地図をかなり小さく配置するときか、1ページに何枚も並べるときくらいで足ります。簡略の角張りが気になったら簡略・なめらかへ移りますが、そこは標準より重い側です。軽さが目的だったなら、なめらかへ行かずに標準へ戻すほうが筋が通ります。

比べるときは、マップを複製して精細度だけ変えた2枚を並べ、自分のサイトの幅で試すのが早いです。文章で違いを読むより、実物を横に置いたほうが決まります。保存し直せばいつでも戻せる設定なので、公開前に悩み込むだけ損。

都道府県も市区町村も、精細度を含めて管理画面のラジオボタンだけで詰め切れます。地図の作りから確かめたい人は クリッカブル日本地図 をどうぞ。