対応エリアの地図を置いたら、市区町村名のテキスト一覧は消していいのか

地図を1枚貼ると、その下にぶら下がっている「○○市／△△市／□□町…」の一覧が急に野暮ったく見えてきます。同じことを二度書いている気がして、消したくなる。

先に答えを書きます。消さないほうがいいです。地図と一覧は同じ情報の重複ではなく、情報が載っている場所が違います。 地図の中の地名は図形の上に描かれたラベルで、入りきったものしか出ません。押せる領域はリンクになっていますが、そのリンクには文字が入っていない。地名が必ず文字として残る場所は、地図の側にはないわけです。

対応エリアを色分けして見せること自体の作り方は対応エリアを地図で色分けして見せる方法に書きました。ここはその続きで、地図を置いたあとに手元の一覧をどう扱うか、という編集側の判断だけを扱います。例に使うのはクリッカブル日本地図の市区町村マップですが、SVG図形を点と線の数式で持つ画像形式。拡大しても荒れず、都道府県ごとのようにパーツ単位で色やクリック動作を付けられる。で地図を出す仕組みならだいたい事情は同じです。

地図に出ている地名は、入りきったぶんだけ

市町村名のラベルをオンにすると、それぞれの図形の内側に名前が描かれます。ここで押さえておきたいのは、選んだ市区町村の名前が全部出るとは限らないことです。

配置はこういう順で決まります。まず図形が小さすぎるものは、名前を置く候補から外れる。残った候補を面積の大きい順に並べ、上から配置を試していきます。すでに置いた名前と重なる場合は、文字を7割強・5割強と縮めて再挑戦。それでも収まらなければ、その名前は出しません。重なって潰れた文字を並べるより、落とすほうを選ぶ順序になっています。

結果として、地名が抜けやすいのは市区町村が密集している地域です。都市圏の地図では大きい市の名前が残り、その隙間にある町名が静かに消えます。政令指定都市の区も、既定では「札幌市中央区」ではなく「中央区」と短く出ます（フル名で表示する設定はあります）。ラベルサイズを下げれば載る数は増えますが、今度は小さすぎて読めない。

地図の中の地名が読み取れるかどうかは、縮尺と密度しだい。「地図に書いてあるから一覧は要らない」という前提を、地図の側は保証してくれません。

押せるのは図形で、リンクに文言は入っていない

もうひとつ、テキストリンクの一覧と決定的に違うところ。リンクを設定した市区町村は、その形（SVGのパス）がそのまま <a> で囲まれます。囲まれているのは図形であって、文字ではない。地名のラベルは地図の別のレイヤーに置いてあり、クリックも受け付けません。

何も手当てしていないわけではなくて、図形のほうには地名が読み上げ用の属性として付きます。ただ、リンクだけを拾って読み進めるような使い方をしたとき、そこで何と読まれるかは閲覧環境によって変わります。ここは「こう読まれます」と言い切れる部分ではありません。

対して、文字で書いた一覧のリンクは、文言そのものが行き先の説明になります。「川崎市中原区の対応エリア」と書けば、そう読まれるし、そう見える。地図が位置を担当し、一覧が言葉を担当する。 同じページに両方あっても、役割が重なりません。

地図の下にテキストで並ぶのは、凡例のほう

エリアを定義して凡例をオンにすると、地図の下に色見本と名前のリストが出ます。これはSVGの内側に描き込まれた絵ではなく、HTMLの <ul> です。SVGの中へ描き込む手もありましたが、読み上げでリストとして扱われる確実さを取って、地図の外へ出してあります。CSSで整えられるのも同じ作りのおかげです。

ただし凡例に並ぶのはエリアの名前で、市区町村名ではありません。「即日対応／要相談／対象外」と定義していれば、出るのはその3行だけ。地名は1つも増えないわけです。しかも凡例に出るのは実際に使ったエリアだけなので、定義の数とも一致しません。

エリアと凡例の設計そのものは先ほどの記事に、市区町村の粒度や件数（全国1,898件、政令市は区が単位）は市区町村単位のクリックできる地図にまとめてあります。

一覧は消さずに、地図の後ろへ置き直す

やることは削除ではなく並べ替えです。地図が上、一覧が下。この順番にするだけで、重複している感じはかなり抜けます。先に絵で当たりをつけて、文字で確かめる。読み手の動きに沿った順番だからです。

そのうえで一覧側を少し整えます。

一覧の書きぶりも、地図がある前提なら変わります。地図で色を見た人が次に知りたいのは、その地域の細かい条件のほう。市名の後ろに「（一部地域を除く）」「要相談」といった但し書きを添えられるのは、文字側だけの強みです。

読み上げや検索の側から見ても、文字は残るほうが安全

スクリーンリーダーで読む場合、地図の中は図形が並んでいる領域です。地名の属性は付いているものの、並び順は描画の順であって、地理的な近さの順ではありません。キーボードで操作する人も、リンクのある図形を順に移動していくことになります。

この構成がアクセシビリティの基準にどう当てはまるかは、地図の作り方とページ全体の組み方で変わるので、「この水準を満たします」といった書き方はしません。言えるのは、同じ情報が文字でも並んでいるページのほうが、判断に迷う余地が少ないということです。

検索して来る人の語彙も、文字の側にしかありません。ラベルの <text> はHTMLの中にあるので文字が存在しないわけではないのですが、出ているのは入りきったぶんだけで、区名は短縮されている。ページ内検索で自分の市を探されたときに空振りしない状態にしたいなら、一覧を置いておくのが確実です。

一覧はページの本文、地図は管理画面。この差が漏れになる

併記のコストは1つだけあって、更新が2箇所になることです。ここは正直に書いておきます。地図のほうは管理画面で色とリンクを直して保存すれば、貼ったページのすべてが同時に切り替わる。対して一覧は記事や固定ページの本文なので、手で直すことになります。

だから一覧は、地図と同じページの、地図のすぐ下に1つだけ持つのが安全です。トップページ、サービスページ、フッターと一覧をコピーして回ると、対応エリアが増えたときに直し漏れが出ます。地図の更新と一覧の更新も、別々のタスクとして持たないほうがいい。「エリアが動いたら両方」をひとつの作業として登録してしまうほうが確実です。

文字を残す話のついでに、もう1種類の文字にも触れておきます。地図データの出典表記です。国土交通省「国土数値情報（行政区域データ）」を加工しているため、地図を載せたページには出典の一文が要ります。自動では出ないので、フッターへ自分で置きます（条件の詳しいところは日本地図の商用利用に書きました）。

地図で範囲を見せて、一覧で言葉を残す。この2つを管理画面だけで作れるところは、クリッカブル日本地図の製品ページで確認できます。