SVG... - Qiita

SVGで簡単実装！スマホ対応のインタラクティブ日本地図｜選択マップで地域UIを強化 #Webデザイン - Qiita 2 いいねしたユーザー一覧へ移動 0 X（Twitter）でシェアする Facebookでシェアする はてなブックマークに追加する more_horiz 記事を削除する close 一度削除した記事は復旧できません。 この記事の編集中の下書きも削除されます。 削除してよろしいですか？ キャンセル 削除する delete @ waka_m ( 若林 瑞樹 ) SVGで簡単実装！スマホ対応のインタラクティブ日本地図｜選択マップで地域UIを強化 UI SVG 地図 Webデザイン レスポンシブデザイン 2 最終更新日 2025年05月24日 投稿日 2025年05月24日 はじめに 日本の地域情報をわかりやすく伝えたいとき、地図はとても有効なツールです。特に観光サイトや選挙マップなど、ユーザーが直感的にエリアを選べるインタラクティブな地図は、情報の見やすさや操作性を大きく向上させます。 そこで今回は、 SVG（Scalable Vector Graphics）を使ったスマホ対応のインタラクティブ日本地図の作り方 をご紹介します。コード例や実際の動作イメージも交えながら、初心者でもわかりやすく解説していきますので、ぜひ参考にしてください。 💡 こんな人向け 個人開発や地域情報サイト、観光サイトに地図を導入したい方 選挙マップやエリア選択機能を手軽に作りたい方 SVGでスマホでも壊れないレスポンシブ地図を実装したい方 JavaScriptやWebデザインに興味がある方 目次 1. (見本) 作成したマップ+実際のWEBサイトでの挙動 2.SVGとは 3.スマホ対応が簡単な理由 4.実装の基本ステップ 5.おわりに 1. 実際のWEBサイトでの挙動 ↓個人開発のWEBページでの日本地図になります。このように8色で地方分けをしています。 ↓中国地方をhoverした際の挙動です。 ↓東北地方をhoverした際の挙動です。 実際にWEBサイトでの挙動を見たいという方は私の 観光WEBサイト から確認してみてください。ではこれ以降は技術的な内容+ソースコードについて説明していきたいと思います。 2. SVGとは？ SVG（Scalable Vector Graphics）は、XMLベースのベクター画像フォーマットで、Webブラウザ上で直接表示・操作ができる画像形式です。JPEGやPNGといった「ドットの集まり」でできたラスター画像と違い、SVGは点や線、図形などを数式で表現しているため、どんなに拡大しても画質が劣化しません。 ✅ SVGの主な特徴 拡大・縮小しても劣化しない（スケーラブル） HTMLやCSS、JavaScriptと連携できる（動かせる） テキストとして記述できるため、軽量・編集しやすい ブラウザで直接表示・操作できる 📌 こんな場面で使われています 地図やアイコン、グラフのような図形ベースの画像 ロゴやボタンなど、デバイスに依存せず高解像度表示したいUIパーツ アニメーション付きのインタラクティブUI SVGは、「見た目」だけでなく「意味」を持つ画像としてWebに組み込めるため、今回のような「都道府県を選べるインタラクティブ地図」にぴったりの技術です。 3. スマホ対応が簡単な理由 SVGはベクター形式かつHTMLの一部として扱える画像なので、スマホやタブレットなどさまざまな画面サイズに自然にフィットします。具体的には以下の理由で、スマホ対応がとても簡単です。 ✅ 1. 拡大縮小に強い（画質が劣化しない） SVGは数式で図形を表現しているため、画面サイズが変わっても、画像がボケることがありません。つまり、スマホでもPCでも高解像度で美しく表示されます。 ↓拡大していてもめっちゃ綺麗(これは特に優秀だと思っております) ✅ 2. CSSでサイズ調整できる SVGはHTML内に埋め込めるので、画像の大きさをwidth: 100%;などのCSSで制御できます。これにより、**レスポンシブ対応（画面幅に合わせた自動調整）**が容易になります。 例↓ qiita.css svg { width : 100% ; height : auto ; } ✅ 3. タップやクリックにも対応 SVGの各エリア（例：都道府県）に対してIDやクラスを付けられるため、JavaScriptでタップやクリックイベントを簡単に設定できます。つまり、モバイル向けのインタラクティブな地図も簡単に実装できるのです。 📌 実際の効果 スマホでも指で県をタップでき、ズームしても境界がぼやけない。これこそが、SVGが観光地図や選挙マップに適している最大の理由です。 4. 実装の基本ステップ 1. 日本地図を一からSVGで作るのは少々大変ですので、今回は Geoloniaさん が公開している以下のオープンソース素材を活用します。 👉 geolonia/japanese-prefectures (GitHub) map-full.svg をクリックして、ソースコードをコピーしましょう(Geoloniaさん素晴らしい素材をありがとうございます！) 2. 好きなディレクトリ(例 assets/svg)等に貼りましょう 長いコードだと思います(map-full.svg) <?xml version="1.0" encoding="utf-8"?> <svg class="geolonia-svg-map" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg"> <title>Japanese Prefectures</title> <desc>Created by Geolonia (https://geolonia.com/).</desc> <g class="svg-map" transform="matrix(1.028807, 0, 0, 1.028807, -47.544239, -28.806583)"> <g class="prefectures" transform="matrix(1, 0, 0, 1, 6, 18)"> <g class="okinawa kyusyu-okinawa prefecture" data-code="47" stroke-linejoin="round" fill="#EEEEEE" fill-rule="nonzero" stroke="#000000" stroke-width="1.0" transform="translate(52.000000, 193.000000)"> <title>沖縄 / Okinawa</title> <polygon points="4 109 6 110 4 111 0 110"/> <polygon points="48 121 55 123 51 129 39 124 42 122 44 125 46 118"/> <polygon points="132 113 130 110 132 110 130 108 133 105 132 100 135 108 142 114"/> <polygon points="225 23 224 28 219 23 223 21"/> <polygon points="73 117 77 112 79 113 73 120 72 126 66 127 64 125 67 122 63 119 71 120"/> <polygon points="287 20 291 17 286 15 285 8 292 10 292 14 299 13 298 11 307 0 309 5 309 9 305 15 300 15 299 19 293 19 294 21 288 25 281 25 286 34 281 31 276 39 280 41 270 46 270 38 277 32 275 24 280 25"/> <polygon points="127 106 126 103 128 104"/> <polygon points="279 8 279 6 283 8"/> <polygon points="293 11 294 13 292 12"/> </g> <g class="kagoshima kyusyu kyusyu-okinawa prefecture" data-code="46" stroke-linejoin="round" fill="#EEEEEE" fill-rule="nonzero" stroke="#000000" stroke-width="1.0" transform="translate(96.000000, 17.000000)"> <title>鹿児島 / Kagoshima</title> <polygon points="23 949 26 951 23 952"/> <polygon points="33 960 32 954 39 950 48 956 47 961 41 965 35 964"/> <polygon points="64 953 64 958 59 959 58 952 62 949 63 939 70 929 71 938"/> <polygon points="38 844 43 848 52 844 57 850 56 852 61 859 66 864 65 869 70 871 73 880 80 881 80 888 78 891 75 890 70 896 75 899 73 903 76 902 69 905 66 910 50 918 50 913 55 910 59 898 53 889 54 884 48 881 53 879 54 883 57 884 61 878 54 872 50 874 44 887 46 898 51 901 49 906 43 907 40 901 27 901 28 897 25 896 27 894 22 890 31 890 35 880 32 871 27 867 30 860 28 848 31 846 35 848"/> <polygon points="31 837 34 836 33 838"/> <polygon points="27 848 24 842 29 840 30 844"/> <polygon points="4 868 6 865 7 867 2 875 0 874"/> <polygon points="12 864 9 861 14 861"/> <polygon points="284 149 280 150 279 146 289 144"/> <polygon points="301 126 301 118 306 118 305 122 309 126 308 129 303 132 300 128"/> <polygon points="363 98 360 99 359 97 365 93"/> <polygon points="344 90 331 98 335 101 330 104 327 103 329 107 323 102 325 99 316 97 324 97 325 95 321 94 335 88 337 90 339 86 344 85 342 89 344 87 345 89 347 82 349 88"/> <polygon points="324 108 322 106 320 108 318 101 323 102 322 105 328 107 325 109 326 107"/> <polygon points="355 12 352 16 352 13"/> <polygon points="361 1 363 0 365 4"/> </g> <g class="miyazaki kyusyu kyusyu-okinawa prefecture" data-code="45" stroke-linejoin="round" fill="#EEEEEE" fill-rule="nonzero" stroke="#000000" stroke-width="1.0" transform="translate(152.000000, 824.000000)"> <title>宮崎 / Miyazaki</title> <polygon points="36 0 38 1 43 0 48 5 56 5 59 1 63 2 63 7 65 7 54 17 53 21 56 22 52 23 51 25 53 26 47 34 41 51 39 74 34 79 32 91 27 89 22 84 24 81 24 74 17 73 14 64 9 62 10 57 5 52 0 45 1 43 22 41 19 35 23 30 18 23 18 16 23 14 32 0"/> </g> <g class="oita kyusyu kyusyu-okinawa prefecture" data-code="44" stroke-linejoin="round" fill="#EEEEEE" fill-rule="nonzero" stroke="#000000" stroke-width="1.0" transform="translate(163.000000, 771.000000)"> <title>大分 / Oita</title> <polygon points="0 34 3 29 0 26 2 24 1 19 5 13 12 9 19 10 20 3 33 7 38 0 47 4 49 10 46 18 43 17 43 20 35 22 36 26 40 28 56 27 50 36 56 36 53 38 56 40 61 38 62 41 57 41 55 45 65 49 59 49 61 51 57 54 60 55 54 56 54 60 52 60 52 55 48 54 45 58 37 58 32 53 27 54 25 53 21 49 22 43 15 30 9 30 10 36 8 39"/> </g> <g class="kumamoto kyusyu kyusyu-okinawa prefecture" data-code="43" stroke-linejoin="round" fill="#EEEEEE" fill-rule="nonzero" stroke="#000000" stroke-width="1.0" transform="translate(115.000000, 800.000000)"> <title>熊本 / kumamoto</title> <path d="M8,37 L13,38 L13,48 L5,57 L1,58 L1,52 L5,51 L0,50 L4,40 L3,37 L8,37 Z M20,47 L14,47 L12,43 L19,39 L26,39 L23,47 L20,47 Z M24,34 L26,34 L26,38 L23,38 L24,34 Z M38,67 L33,61 L24,65 L19,61 L32,46 L30,40 L32,41 L31,39 L37,34 L26,34 L34,28 L35,23 L27,15 L26,10 L31,10 L30,7 L35,3 L39,4 L40,0 L48,5 L56,10 L58,7 L57,1 L63,1 L70,14 L69,20 L73,24 L69,24 L60,38 L55,40 L55,47 L60,54 L56,59 L59,65 L38,67 Z"/> </g> <g class="nagasaki kyusyu kyusyu-okinawa prefecture" data-code="42" stroke-linejoin="round" fill="#EEEEEE" fill-rule="nonzero" stroke="#000000" stroke-width="1.0" transform="translate(44.000000, 700.000000)"> <title>長崎 / Nagasaki</title> <path d="M53,1 L55,0 L57,2 L54,5 L55,9 L49,15 L48,19 L51,18 L49,22 L51,21 L48,25 L48,20 L46,22 L46,19 L45,22 L42,20 L44,20 L45,15 L47,15 L45,14 L49,10 L46,8 L48,3 L52,3 L53,1 Z M46,29 L43,35 L37,36 L40,22 L41,24 L45,25 L44,22 L45,26 L48,25 L46,29 Z M67,59 L68,61 L64,63 L60,59 L62,59 L61,56 L64,53 L67,55 L66,57 L68,58 L67,59 Z M28,110 L25,115 L26,110 L23,107 L26,106 L26,102 L28,102 L30,94 L28,105 L33,106 L30,108 L28,106 L28,110 Z M24,112 L21,111 L21,109 L23,111 L22,108 L24,112 Z M19,113 L20,110 L19,116 L16,111 L19,113 Z M6,118 L9,117 L10,119 L12,115 L16,125 L9,124 L9,129 L0,126 L1,124 L3,126 L4,125 L2,125 L5,122 L4,116 L6,118 Z M65,80 L62,81 L64,78 L65,80 Z M67,82 L70,84 L67,86 L67,82 Z M29,88 L31,85 L33,87 L29,88 Z M54,76 L51,77 L55,74 L54,76 Z M66,86 L64,89 L66,96 L73,98 L72,102 L78,109 L86,112 L79,117 L92,118 L94,123 L92,130 L82,134 L80,128 L85,124 L84,122 L79,121 L71,123 L68,129 L60,134 L64,129 L63,126 L65,127 L67,123 L64,125 L63,118 L59,117 L56,111 L59,100 L63,104 L62,108 L63,106 L66,108 L64,115 L75,118 L71,112 L72,107 L69,103 L66,105 L65,99 L62,99 L62,97 L58,100 L60,98 L57,96 L57,93 L57,95 L53,93 L57,87 L54,86 L55,83 L60,82 L60,85 L65,84 L66,86 Z M49,88 L48,92 L42,94 L47,91 L45,89 L48,84 L52,84 L54,81 L55,84 L49,88 Z M15,115 L15,113 L18,116 L15,118 L15,115 Z M64,101 L63,104 L62,101 L64,98 L64,101 Z"/> </g> <g class="saga kyusyu kyusyu-okinawa prefecture" data-code="41" stroke-linejoin="round" fill="#EEEEEE" fill-rule="nonzero" stroke="#000000" stroke-width="1.0" transform="translate(108.000000, 773.000000)"> <title>佐賀 / Saga</title> <polygon points="15 6 28 6 34 12 41 10 40 16 32 21 30 28 25 23 19 29 22 39 14 36 8 29 9 25 2 23 0 16 2 13 5 17 4 13 6 9 2 6 3 4 6 6 6 0 7 2 11 2 12 7"/> </g> <g class="fukuoka kyusyu kyusyu-okinawa prefecture" data-code="40" stroke-linejoin="round" fill="#EEEEEE" fill-rule="nonzero" stroke="#000000" stroke-width="1.0" transform="translate(123.000000, 752.000000)"> <title>福岡 / Fukuoka</title> <polygon points="40 53 32 48 31 52 27 51 22 55 23 58 18 58 18 52 15 49 17 42 25 37 26 31 19 33 13 27 0 27 7 23 3 20 10 15 13 21 20 20 21 15 17 17 14 14 19 15 23 12 25 5 35 3 36 0 42 1 38 5 41 5 43 2 46 4 53 0 49 8 52 10 50 11 55 22 60 22 59 29 52 28 45 32 41 38 42 43 40 45 43 48"/> </g> <g class="kochi shikoku prefecture" data-code="39" stroke-linejoin="round" fill="#EEEEEE" fill-rule="nonzero" stroke="#000000" stroke-width="1.0" transform="translate(251.000000, 765.000000)"> <title>高知 / Kochi</title> <path d="M61,0 L74,6 L80,4 L81,12 L88,13 L86,17 L88,21 L94,22 L87,41 L75,25 L65,21 L55,23 L55,21 L56,24 L44,28 L50,28 L44,29 L42,32 L41,29 L38,33 L39,38 L37,44 L34,44 L30,52 L25,53 L25,61 L22,64 L25,70 L21,66 L14,68 L9,65 L5,67 L6,61 L10,60 L9,57 L6,57 L8,54 L5,41 L9,44 L15,36 L20,33 L16,24 L27,23 L30,13 L37,4 L61,0 Z M1,69 L0,70 L0,67 L1,69 Z"/> </g> <g class="ehime sikoku prefecture" data-code="38" stroke-linejoin="round" fill="#EEEEEE" fill-rule="nonzero" stroke="#000000" stroke-width="1.0" transform="translate(225.000000, 737.000000)"> <title>愛媛 / Ehime</title> <path d