日本地図をサイトに置くとき、最後まで気になるのが「スマホで崩れないか」だと思います。地図がSVGで作られていれば、スマホ対応のために特別な作業はほとんど要りません。画面幅に合わせて勝手に縮みますし、タップ操作も自動で吸収されます。やることがあるとすれば、最大幅やラベルの大きさを少し整える程度です。
ここでは地図作成プラグイン「クリッカブル日本地図」を例に、なぜスマホで崩れないのか、タップだとどう動くのか、そして気になったときに触る設定を順番に書きます。
画像の地図がスマホで崩れるのは座標で押させているから
そもそも、なぜ「日本地図がスマホで崩れる」という相談が後を絶たないのか。原因はたいてい、画像（PNG/JPG）＋イメージマップで作っているからです。クリック領域を画像上の座標で <area> 指定しているので、画面幅に合わせて画像が縮むと、押せる範囲と見た目の県境がずれていきます。拡大すれば輪郭もボケます。スマホで崩れるというより、画像方式が画面幅の変化に弱い、というのが正確なところです。
SVGは画面幅に追従するので、縮んでもズレない
クリッカブル日本地図が出力するのは画像ではなくインラインSVGです。地図そのものがベクター形式で、県や市区町村の形がパスとして埋め込まれています。これが効いてくるのがスマホ表示で、SVGは座標を画面幅に対して相対的に持っているため、画面が狭くなれば地図全体がそのまま縮みます。県の形と押せる範囲が一緒に縮むので、画像方式のような「クリック位置のズレ」が起きません。拡大しても輪郭はボケません。
つまりレスポンシブ対応は、後から頑張って当てるものではなく、SVGという作りの時点でほぼ片付いている、と考えていいです。
タップ操作は意識しなくても成立する
スマホで引っかかりやすいのは表示より操作の方、特にポップアップ（地方を押すとリンク一覧が出る小窓）です。ここは2つの自動処理が入っています。
ひとつは、ポップアップのトリガーをホバー（マウスを乗せると開く）に設定していても、タッチ端末では自動的にタップで開く挙動に切り替わること。スマホにマウスオーバーは無いので、ここを手作業で出し分ける必要はありません。
もうひとつは、画面幅が狭いとき（おおよそ480px以下）に、ポップアップが画面下から出るボトムシート表示に切り替わること。狭い画面で小窓を中央に出すと指が届きにくかったり画面外にはみ出したりしますが、下から出る形なら親指で操作しやすくなります。閉じる操作も、ESCや外側のタップ、スクロール、画面回転（リサイズ）のどれでも閉じるようにしてあるので、「閉じられなくて固まる」状況は起きにくいです。
整えるとしたら、最大幅とラベルくらい
自動で吸収されるとはいえ、PCで大きく広がりすぎる、という調整は出てきます。そこで触るのが出力の最大幅です。px でも % でも指定でき、0（空欄）にすると制限なしで親要素いっぱいに広がります。本文カラムの幅に合わせて 100% にしておくと、PCでは広がりすぎず、スマホでは画面幅まで縮む、という素直な挙動になります。
もうひとつ、市区町村マップで起きやすいのがラベルの重なりです。スマホだと地図が小さくなるぶん、市町村名が詰まって読みにくくなることがあります。これはラベルサイズを小さくするか、思い切ってラベルをオフにすると解消します。狭い画面では名前を出すより、色分けと凡例で見せた方が読みやすい、という判断もありです。このあたりは実際にスマホで開いて確かめてから決めると失敗しません。
余計なものを読み込まない軽さ
表示速度の面でも、スマホで不利になりにくい作りになっています。地図はその場で生成されるSVGなので、画像ファイルの読み込みが発生しません。フロントのJavaScriptは依存ライブラリなし（jQuery不要）で動きます。
さらにCSSとJSは、マップを置いたページでだけ読み込まれます。ポップアップ用のCSS/JSにいたっては、都道府県マップでポップアップを使う構成のときだけ追加で読み込まれる仕組みです。地図と関係ないページに不要なファイルが乗らないので、回線が細くなりがちなスマホでも軽さを保ちやすい、というわけです。
スマホ対応は、地図をSVGで持っている時点で大半が片付いていて、運営側がやるのは最大幅とラベルの微調整くらい、というのが実際のところです。コードを書かずに管理画面だけで崩れない日本地図を置きたいなら、クリッカブル日本地図 で確認できます。
