ホーム
素材
SVGを取り入れた、リキッドデザイン対応＋クリッカブルの日本地図（フリー素材）

2025.05.22

SVGを取り入れた、リキッドデザイン対応＋クリッカブルの日本地図（フリー素材）

都道府県別にクリックできる（リンクが張ってある）、日本地図です。この分野は、画像とクリッカブルマップで作っている事が多いのですが、レスポンシブではクリッカブルマップは使用し辛く、スマホサイズまで縮小すると、狭い県を押しづらいという一面がありました。そのため、HTML/CSSのみで作ったレスポンシブ対応の日本地図を作成・公開しました。たいへんご好評をいただき、おかげさまでサーバ代・ドメイン代の維持に充分なおひねりを頂いたりしました。

リキッドデザイン対応・直感的な位置指定が可能なリアルな列島デザインへの要望

SVGの表記を取り入れた日本地図 — 今回公開したSVGを取り入れた地図デザインです

その後、スマホの使用環境も少し変わり、見えているグラフィックが小さい場合、スマホ画面をピンチイン・ピンチアウトとして見る動作が高齢者も普通になったこと、また、iPad mini 等の中型の画面サイズで地域別に分離するのが地味に分かりにくいとのお声もいただきました。

最大の表示サイズのまま、小さくなれば良いのに

レスポンシブ対応版の地図デザイン（旧版）

という意見を近親者からも頂き、そうは言っても面積が狭い県はタップしにくいだろう……と思っていましたが、スマホでもファブレットでもピンチインすれば済む事です。そこで、レスポンシブで「切り替わる」のではなく、リキッドデザインで「常に拡大縮小する」ものを作りました。

マウスオーバーした県は、色と大きさが変化し、クリック対象の県を明示します

PCやiPadでマウスをお使い場合、カーソルでマウスオーバーした県は、色と大きさが変化します（下図）。

スマホでは、拡大表示を促す矢印が表示されます。

≫ デモ画面はこちらからお試し下さい

設置（使用）方法

圧縮ファイルを伸張すると、以下の三つのファイルが出てきます。

japan_47pref_map.svg　……地図本体のデータです。.svg ファイルですが、これを img タグでリンクしないで下さい。
map47_style.css　……地図の色などを定義するCSSファイルです。
map47.js　……マウスオーバーした部分を拡大・色を切り替えるためのJavaScriptです。

１：japan_47pref_map.svg の内容を、HTMLのように全文（「ここから」「ここまで」とコメントされてます）を、HTMLファイルに入力ししてください。

２：map47_style.cssをヘッダ内でリンクするか、内容を <style>〜</style>で組み込んで下さい。（下記はリンクの例です）

<link href="map47_style.css" rel="stylesheet" type="text/css">

３：map47.js の内容を、HTMLファイルのヘッダ・もしくはフッターなどに挿入して下さい（下記はヘッダに挿入した例です。）

<head>
<meta charset="UTF-8">
<title>リキッドデザイン用SVG日本地図</title>
<link href="map47_style.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes">
<script>
document.addEventListener("DOMContentLoaded", function() {
  const svgElement = document.querySelector("svg#map-layer");
  const originalOrder = Array.from(svgElement.children); // Store the original order of the children

  svgElement.querySelectorAll("a").forEach(function(anchor) {
    anchor.addEventListener("mouseenter", function() {
      const group = this.querySelector("g");

      // Calculate the bounding box of the group
      const bbox = group.getBBox();

      // Calculate the center of the bounding box
      const centerX = bbox.x + bbox.width / 2;
      const centerY = bbox.y + bbox.height / 2;

      // Set the transform-origin to the center of the group
      group.style.transformOrigin = `${centerX}px ${centerY}px`;

      // Move the hovered group to the end of its parent's child list to bring it to the front
      svgElement.appendChild(this);
    });

    anchor.addEventListener("mouseleave", function() {
      // Find the original index of this element
      const originalIndex = originalOrder.indexOf(this);

      // Remove the element from its current position
      svgElement.removeChild(this);

      // Insert the element back to its original position
      if (originalIndex >= 0 && originalIndex < svgElement.children.length) {
        svgElement.insertBefore(this, svgElement.children[originalIndex]);
      } else {
        svgElement.appendChild(this);
      }
    });
  });
});
</script>
</head>

WordPressの固定ページ等にくみこみたい場合は、カスタムHTMLに強引に全部入れても動作します。

商用利用可能・無料でお使いいただけます。

SVGのコード内では、各都道府県にリンクを張れるよう、a タグがセットされています。ご自由に改変してお使い下さい。

ダウンロードは以下のボタンで可能です。各ファイルは ESET で検査済みです。安心してご利用下さい。

特にWordPressでの設置方法がわからないのでアドバイスが欲しい（メール程度で済むアドバイスは無料です）、もしくは代行して欲しい（有償）場合は、お問合せフォームよりメッセージをお送り下さい。

“SVGを利用した-リキッドデザイン＋クリック対応の日本地図” をダウンロード japan47pref_map.zip – 47 回のダウンロード – 24.00 KB

Visited 115 times, 2 visit(s) today

赤坂「Shuna」のベリーパフェ前のページ

天神地下街「春水堂」の台湾パフェ次のページ

この記事へのコメントはありません。

この記事へのトラックバックはありません。

トラックバック URL

カテゴリー

Twitter