地図・エリア表示

Japan Clickable Map

「対応エリアはどこ?」に、一目で答える地図を。
都道府県・市区町村を選んで色を塗り、リンクを貼るだけ。
画像編集ソフトもコードも不要、管理画面だけで完結します。

Japan Clickable Mapは、クリックできる日本地図を、コードを書かずWordPressの管理画面だけで作れるプラグインです。
全国・地方の案内には都道府県マップ、自社の対応エリアを見せるなら市町村マップ
全国を作り込む必要はありません。必要な範囲だけを選び、色を塗ってリンクを貼れば、軽くて鮮明な地図1枚に導線がまとまります。

「うちの地域は対応してる?」に一目で答える

対応エリアや拠点を文字のリストで並べても、訪問者は自分の地域がどこに当てはまるのかをすぐには判断できません。クリックできる地図は、「自分の場所」を起点に探せる導線です。県や市区町村を押せばそのまま該当ページへ——迷わせずに目的の情報へ届けます。

よくある状態
  • 画像で作った日本地図は、エリア変更のたびに画像編集ソフトや外注が必要
  • 都道府県のテキストリンクを並べただけでは、位置関係も対応状況も伝わらない
  • 地図API・外部サービスはAPIキーや規約の管理が面倒で、見た目もサイトに合わない
  • 拡大画像はスマホで見づらく、クリック領域も作り込めない
このプラグイン導入後
  • 色もリンクも管理画面で変更、保存すれば即サイトに反映
  • 地図そのものがリンクに。クリックできる場所だけカーソルが変わり、迷わせない
  • 外部サービス・APIキー不要。自社WordPress内で完結
  • レスポンシブなSVGでスマホでも鮮明。情報の小窓(ポップアップ)はスマホだと画面下から出る形に自動で切替

目的に合わせて選べる、2種類の地図

このプラグインには、役割の違う2つの地図ビルダーがあります。粒度が違うだけの同じ地図ではありません。サイトの目的に必要な範囲だけを選んで作るので、全国や全市区町村を網羅する必要はありません。

都道府県マップ|全国・地方の広い導線

どんな地図全国47都道府県、または必要な県だけを表示。県別・地方別にクリック領域をまとめ、広域の回遊をつくります。

主な使い方全国表示と一部の県だけの表示を切り替え。県別・地方別(8地方区分・独自エリア)でまとめ、地方単位はクリックで小窓(ポップアップ)を開き、複数の行き先も提示できます。

向いている例全国チェーンの店舗検索、県別の記事一覧、導入実績マップ。

市町村マップ|対応エリアをピンポイント

どんな地図関わる市区町村だけをピックアップして見せる地図。全国すべての市区町村を並べるものではなく、自社が対応する市・区を選ぶだけで完成します。

主な使い方選んだ市区町村だけを描画してその範囲へ自動ズーム。「対応/要相談」などエリアごとに色分け+凡例を表示でき、政令指定都市は区単位で選べます。

向いている例地域密着のローカルビジネス(配達・清掃・施工・訪問)の対応エリア表示。

公開までは最短4ステップ

専門知識は不要です。WordPressの投稿を作る感覚で、地図を組み立てて設置できます。ここでは都道府県マップ市町村マップそれぞれの手順を確認できます。
(インストール → 有効化 → 「クリッカブル地図 > ライセンス」でキー入力、までは管理画面から数分です)

都道府県マップの手順

  1. 1

    都道府県マップを新規作成する

    都道府県マップ」を新規追加します。全国47都道府県の表示選択した県だけの表示を選べ、全国表示では県別/地方別(8地方区分・独自エリア)の区切り方も指定できます。編集画面は表示モード → 配色 → 県の選択とタブを順に進めるだけ。WordPressの投稿を書く感覚で操作できます。

    • 都道府県マップ編集画面 ①モードタブ — 全国表示/選択県のみ・区切り方を選ぶ
      都道府県マップ編集画面 ①モードタブ — 全国表示/選択県のみ・区切り方を選ぶ
    • 都道府県マップ編集画面 ②配色タブ — 規定色とプリセット色パレット
      都道府県マップ編集画面 ②配色タブ — 規定色とプリセット色パレット
    • 都道府県マップ編集画面 ③選択・上書きタブ — 県ごとの色・リンク設定
      都道府県マップ編集画面 ③選択・上書きタブ — 県ごとの色・リンク設定
  2. 2

    表示する県を選ぶ

    全国表示ならそのまま47都道府県を描画。一部だけ見せたいときは表示したい県をチェックするだけで、選んだ範囲に合わせて地図が自動ズームします。全国表示から特定の県を除外することもできます。

  3. 3

    色とリンクを設定する

    地図全体の規定色を決め、必要な県だけ色とリンクURLを個別に上書き。よく使う色はプリセット色(最大24色)からパレットで選ぶだけ。地方別表示なら、地方クリックでポップアップに複数リンクも出せます。設定はプレビューに即時反映されます。

    編集中のライブプレビュー — 設定変更が地図に即時反映
    編集中のライブプレビュー — 設定変更が地図に即時反映
  4. 4

    ページに設置する

    固定ページや投稿に、ショートコードを1行貼り付けるか、ブロック「クリッカブル地図」を追加するだけ。

    [jcm_map id="マップID"]

市町村マップの手順

  1. 1

    市町村マップを新規作成する

    市町村マップ」を新規追加します。編集画面は配色 → 表示オプション → エリア → 市町村の選択とタブを順に進めるだけ。市区町村名ラベルや境界線の太さもここで調整できます。

  2. 2

    対応エリアの市区町村を選ぶ

    対応エリアの市区町村だけを県タブから選びます。検索ボックスと選択件数の表示つきなので、必要な市区町村を素早く探せます。全市区町村を登録する必要はなく、県をまたいだ組み合わせも自由。政令指定都市は区単位で選べます。

    市町村マップの選択UI(県タブ+検索+選択サマリー)
    市町村マップの選択UI(県タブ+検索+選択サマリー)
  3. 3

    エリア・色・リンクを設定する

    即日対応」「要相談」などのエリアを定義して色とリンクを決め、各市区町村に割り当てます。エリアの色と名前は地図下の凡例に自動表示。市区町村ごとの個別上書きや、設定のプレビュー即時反映にも対応します。

  4. 4

    ページに設置する

    都道府県マップとまったく同じ。ショートコードを1行貼るか、ブロック「クリッカブル地図」を追加するだけです。

    [jcm_map id="マップID"]

    ショートコードは両マップ共通。どちらの地図かはプラグインが自動判定するため、貼り分けを意識する必要はありません。

1つのショートコードで、県も市区町村も

マップはWordPressの投稿のように1件ずつ管理します。色とリンクの設定はマップ側で完結し、ページ側には [jcm_map id="…"] を置くだけ。表示する地図の種類(都道府県/市区町村)はプラグインが自動で判定し、軽量なインラインSVGとして出力します。

こんな地図が作れます

用途に合わせた作例です。いずれも画像編集ソフトを使わず、管理画面の設定だけで作成できます。

  • 都道府県マップ|全国47都道府県を県別に色分け
    都道府県マップ|全国47都道府県を県別に色分け
  • エリア(地方)|8地方区分でまとめる
    エリア(地方)|8地方区分でまとめる
  • エリア(カスタム)|独自エリアでまとめる
    エリア(カスタム)|独自エリアでまとめる
  • 市町村マップ|選んだ市区町村だけを表示
    市町村マップ|選んだ市区町村だけを表示
  • 市町村マップ|エリア凡例つきの対応エリア
    市町村マップ|エリア凡例つきの対応エリア

やりたい見せ方を、設定だけで実現

同じ地図でも、設定の仕方しだいで見せ方は自在です。現場でよくある「こうしたい」を、この地図でどう形にするかを紹介します。

都道府県ごとのページへ誘導する

「○○県の店舗一覧」「県別の特集記事」へ、地図から自然に誘導できます。
47都道府県それぞれに色とリンクを設定でき、リンクを張らない県は自動でクリック無効に。全部を設定する必要はなく、ベースの色を決めて変えたい県だけ手を入れれば完成します。

地方単位でまとめる

県別ではリンク先が多すぎるときは、「関東」「九州」のように地方でまとめて見せられます。8地方区分に加え、「東海(愛知/岐阜/三重)」のような独自エリアも自由に定義可能。
クリックで直接リンクするほか、説明やリンク一覧を載せたポップアップも開けます。

対応エリアだけをピンポイントで見せる

配達・施工・訪問サービスなら、対応エリアの市区町村だけをピックアップ。
全国の市区町村から必要な市・区を選ぶだけで、その範囲にズームした地図になります。政令指定都市は区単位、県をまたいだ組み合わせも自由です。

似た地図の量産も、運用もラクに

キャンペーンやサービスごとに似た地図が必要になっても、マップを複製して差分だけ直せば大丈夫。よく使う色はプリセットに登録してサイト全体の配色を揃えられます。
地図の実体はWordPressの投稿なので、下書き保存などいつもの操作で育てていけます。

クリックの先を、その場で見せるポップアップ

地方単位の表示では、クリック先を1つのURLに絞らず、ポップアップで複数の行き先を見せられます。タイトル・説明文に加えて、リンク項目はURLの手入力でもサイト内の投稿・固定ページ・カテゴリーの検索選択でも指定可能。リンク項目を設定しない地方は、県ごとのリンク一覧に自動でフォールバックします。

  • 表示トリガーはクリック/ホバーから選択(タッチ端末では自動的にタップ)。
  • 画面が狭いスマートフォンでは、下から出るボトムシート表示に自動で切り替え。
  • ESCキー・外側クリックで閉じる、フォーカス管理などの操作性も標準で作り込み済み。
地方ポップアップのフロント動作(クリック → リンク一覧 → 遷移)

画像を貼るのではなく、軽量なSVGを「生成」する

出力されるのは画像ファイルではなくインラインSVG。拡大しても粗れず、画面幅に合わせて滑らかに縮小されます。

  • 画像読み込みゼロ:地図はHTMLに直接埋め込まれ、追加のリクエストが発生しません。表示が速く、訪問者を待たせません
  • JS依存も最小:jQuery不要。JavaScriptを読み込むのはポップアップを使うマップのみ。
  • 精度を選べる:海岸線の細かさを複数レベルから選択でき、ページ容量と見た目のバランスを調整できます。
  • 最大幅指定:px/%で出力サイズを制御でき、サイドバーや2カラムにも収まります。

画像マップや地図サービス埋め込みと、どう違う?

クリックできる日本地図の作り方は主に3通りあります。判断材料として、一般的な傾向を観点ごとに整理します。

観点 画像+クリック領域を自作 外部地図サービス埋め込み 本プラグイン(WordPress内)
エリア変更のしやすさ 画像の再編集+座標の再設定 サービス側の管理画面で操作 WordPress管理画面でチェックを変えて保存するだけ
市区町村単位の対応 手作業では非現実的 サービス仕様に依存 全国の市区町村(約1,900単位・JIS X 0402基準)を標準収録。対応エリアの市・区を選ぶだけ(政令市の区も個別)
表示速度 大きな画像の読み込みが発生 外部スクリプトの読み込みが発生 インラインSVG・追加リクエストなし
スマホ表示 クリック領域がずれやすい サービスのUIに依存 レスポンシブSVG+ボトムシート対応
外部依存 なし APIキー・利用規約・仕様変更の影響 外部API不要、自サイト内で完結
コスト構造 都度の制作工数/外注費 無料枠+従量・月額が一般的 サイト単位のライセンス制(管理画面から自動更新)

※ 左の2列は一般的な傾向の整理で、比較対象のサービス・作り方により異なります。本プラグインの列は本製品の仕様です。

どんな用途で使える?

店舗・拠点のエリア案内

「お近くの店舗を探す」
→ 県や市をクリックすると該当店舗の一覧ページへ。

配達・対応エリアの明示

飲食・清掃・修理・訪問サービスの対応範囲を、凡例つきの色分け地図で一目で提示。

士業・専門サービスの対応エリア

行政書士・社労士・税理士などの出張・対応エリアを市区町村単位で明示し、相談・問い合わせページへ接続。

都道府県別コンテンツへの導線

旅行・グルメ・地域情報メディアの「県別記事一覧」へ、地図から自然に回遊させる。

求人・営業エリアの可視化

勤務地・営業所のあるエリアを塗り分けて、応募・問い合わせページへ接続。

実績・進出状況のアピール

「全国○県で導入」「対応地域拡大中」を、リンクなしの塗り分け地図で視覚化。

制作会社の制作物として

複製機能とプリセット色で同型の地図を量産。ライセンスはサイト単位(1サイト=1ライセンス・移し替え可)。

導入後の運用も安心

  • 有効なライセンスがあれば、管理画面から通常のプラグインと同じ操作で最新版へ自動アップデート
  • ライセンスは1サイトでアクティベート。解除すれば別サイトへ移し替えできます。
  • ライセンスの解除・無効化では作成した地図データは消えません。アンインストール(削除)時も既定では残り、「クリッカブル地図 > 設定」でデータ削除を有効にした場合のみ消去されます。
  • マップは複製して差分だけ編集でき、似た地図の量産・テンプレート化に対応。
  • 編集画面のライブプレビューで、公開前に仕上がりを確認できます。

動作環境

  • WordPress6.0 以上
  • PHP8.1 以上
  • 確認済みWordPress 7.0
  • 言語日本語

外部の地図サービス・APIキーは不要です。地図データはプラグインに同梱されています(国土交通省「国土数値情報(行政区域データ)」を加工して作成。地図を表示するページには出典の明記が必要です)。

管理画面・動作イメージ

都道府県マップ編集画面 — 範囲選択と色・リンク設定をノーコードで
都道府県マップ編集画面 — 範囲選択と色・リンク設定をノーコードで
地方をクリックするとポップアップでリンク一覧を表示
市町村マップ — 配達エリアの色分けと凡例表示
市町村マップ — 配達エリアの色分けと凡例表示

よくあるご質問

どんな地図が作れますか?

全国47都道府県の日本地図、選択した県だけを表示する地図、市区町村単位の地図が作れます。全国表示では県別のほか、8地方区分(北海道〜九州)や「東海(愛知/岐阜/三重)」のような独自エリアでまとめることもできます。

コードや画像編集の知識は必要ですか?

不要です。表示範囲の選択・色分け・リンク設定はすべて管理画面の入力だけで完結し、地図はプラグインがSVGとして自動生成します。設置もショートコードを1行貼るかブロックを追加するだけです。

地図をクリックすると何が起きますか?

県・市区町村ごとに設定したURLへ移動します。リンクを設定していない領域はクリックできず、カーソルも変化しないため、訪問者が「押せそうで押せない」と迷うことがありません。地方単位の表示では、直接リンクのほかに、タイトル・説明文・リンク一覧を載せたポップアップを開くこともできます。

市区町村単位の色分けはできますか?

できます。JIS X 0402(5桁コード)基準の約1,900単位に対応し、政令指定都市は「横浜市鶴見区」のように区単位で扱えます。県をまたいだ組み合わせも自由で、県タブ+検索ボックスで素早く選択できます。

配達エリア・対応エリアの表示に使えますか?

市町村マップの「エリア」機能が向いています。「配達エリアA」「要相談エリア」のようなエリアを定義して色とリンクを設定し、市区町村を割り当てるだけ。エリアの色と名前は地図の下に凡例として表示できます。

一部の県だけの地図は作れますか?

作れます。表示モード「選択した県のみ」で必要な県だけをチェックすると、その範囲に合わせてズームした地図になります。付属の離島を描画するかどうかも切り替え可能です。全国表示から特定の県を除外し、残った領域に合わせてズームする使い方もできます。

デザインはどこまで調整できますか?

地図全体の規定色に加えて、県・市区町村・地方・エリアごとに色を上書きできます。よく使う色は「プリセット色」として最大24色まで登録でき、カラーピッカー横のパレットから選ぶだけで統一感を保てます。都道府県名・地方名ラベルの表示、境界線の太さ(市町村マップ)、出力時の最大幅も設定できます。

スマートフォンでも表示できますか?

地図はレスポンシブなSVGとして出力され、画面幅に合わせて縮小されます。地方ポップアップはタッチ端末では自動的にタップで開き、画面が狭い場合は下から出るボトムシート表示に切り替わります。

ページの表示は重くなりませんか?

地図は画像ファイルではなくインラインSVGとして出力されるため、画像の読み込みが発生しません。jQuery等のライブラリも不要で、JavaScriptを読み込むのはポップアップを使うマップだけです。地図の精度(描画の細かさ)も複数レベルから選べるため、用途に応じてデータ量を抑えられます。

1つのサイトに複数の地図を設置できますか?

マップはいくつでも作成でき、それぞれ別のショートコード/ブロックとして別々のページに設置できます。マップ一覧の「複製」を使えば、既存マップの設定を引き継いだ下書きを作って差分だけ編集できるため、似た地図の量産も簡単です。

動作要件は何ですか?

WordPress 6.0 以上、PHP 8.1 以上で動作します。管理画面・フロントとも日本語に対応しています。

地図データの出典表記は必要ですか?

必要です。同梱の地図は国土交通省「国土数値情報(行政区域データ)」を加工して作成しています。利用規約(政府標準利用規約準拠・CC BY 4.0互換)に基づき、地図を表示するページのフッターや凡例など確認できる箇所に「『国土数値情報(行政区域データ)』(国土交通省)を加工して作成」と出典を記載してください。

ライセンスを解除すると地図データは消えますか?

解除(無効化)では消えません。アンインストール(削除)時も既定ではデータは残ります。作成したマップを完全に削除したい場合は、「クリッカブル地図 > 設定」でデータ削除を有効にしてからアンインストールしてください(有効時は関連する投稿・設定がすべて削除されます)。

アップデートはどうやって行いますか?

有効なライセンスがあれば、WordPress管理画面のプラグイン一覧から、通常のプラグインと同じ操作で最新版へ更新できます。ライセンスは1サイト単位で、解除すれば別サイトへ移し替えできます。

プラグイン共通のご質問

返品・キャンセルはできますか?

本製品はダウンロード提供のデジタル商品という性質上、購入後の返品・返金は一切お受けできません。あらかじめご了承ください。なお、サブスクリプションの次回以降の更新を止めたい場合は、マイページのライセンス詳細で自動更新をオフにできます(有効期限までは引き続きご利用いただけます)。

購入にアカウント登録は必要ですか?

必要です。メールアドレスでアカウントを登録し、確認メールのリンクからメールアドレスの確認を完了のうえログインすると購入できます。ライセンスキーの確認やプラグイン本体のダウンロードも、ログイン後のマイページから行います。

支払い方法と料金体系を教えてください。

クレジットカードによるサブスクリプション(自動更新)です。請求情報や支払い方法の変更、自動更新の停止は、マイページのライセンス詳細から行えます。

1つのライセンスで複数のサイトに使えますか?

ライセンスはサイト単位で、利用できるサイト数の上限はマイページのライセンス詳細に表示されます。別のサイトへ移す場合は、旧サイトでライセンスを無効化するか、マイページのライセンス詳細で対象ドメインを解除すると枠が解放されます。

お問い合わせ対応の範囲を教えてください。

個別カスタマイズサポートは行っておりません。導入方法・基本操作に関するお問い合わせのみ対応しております。ご利用環境固有の不具合調査・コード改修は対象外です。テーマ・他プラグインとの競合調査は保証対象外です。

「対応エリアはどこ?」に、一目で答える地図を

管理画面で県・市区町村を選んで色を塗り、ショートコードを貼るだけ。クリックできる日本地図がすぐに完成します。

購入にはログインが必要です

使い方ガイド

インストールからライセンス認証、設定・公開までの流れをまとめています。購入前の確認にもご利用いただけます。

使い方ガイドを見る

開発者の方へ

フック・ショートコード・カスタム投稿タイプなど、拡張に必要な情報をまとめています。

開発者向け情報を見る