GeoDirectory

カスタムマップマーカーの作成方法（完全ガイド）

Paolo

ディレクトリサイト、Leafletマップ、またはMapboxダッシュボードにカスタムマップマーカーを追加しようとしたことがあれば、その問題はすでにご存知でしょう。

デフォルトのマーカーは個性がありません。

ディレクトリサイト、Leafletマップ、またはMapboxダッシュボードにカスタムマップマーカーを追加しようとしたことがあれば、あの繰り返しをご存知でしょう。

デフォルトは個性がなく、既存の無料ツールはたいてい1つのアイコンライブラリ（通常はFont Awesome）しか対応しておらず、PNGのみしか出力できません。

Lucideアイコンを使ったマーカーが必要になった瞬間、ブランドカラーに完全一致させたい瞬間、またはCSSで色を変えられるクリーンなSVGが欲しい瞬間——そのたびにIllustratorに戻るか、SVGパスをCodePenに貼り付けることになります。

私たちは GeoDirectory を12年以上開発してきましたが、カスタムマップマーカーはサポートチケットに毎週のように登場します。

そこで、あったらいいなと思っていたツールを作りました： MapMarker Studio.

無料で使え、ブラウザベースで、サインアップ不要。40,000以上のアイコンを収録し、ピクセルパーフェクトなSVGまたはPNG形式のマップマーカーをダウンロードでき、主要なマッピングプラットフォームすべてに対応したコードをそのまま貼り付けられる形で出力します。

この記事は、カスタムマップマーカーの作成に関する完全ガイドです。

マーカーとは何か、デフォルトが不十分な理由、優れたマーカーのデザイン方法、そして実際にマップに組み込む方法を解説します。

カスタムマップマーカーとは？

マップマーカーとは、地図上の場所をピン留めする視覚的なインジケーターです。

どのマッピングプラットフォームにもデフォルトのマーカーが搭載されています。

Google Mapsには赤い雫形、Leafletには青いピン、Mapboxには円形のマーカーがあります。

機能はしますが、印象に残りません。

1つのマップに複数の種類の場所（レストランとホテル、営業中と閉店中、無料と有料など）がある場合、デフォルトでは得られない視覚的な区別が必要になります。

カスタムマップマーカーとは、自分でデザインまたはカスタマイズしたマーカーのことです。

形を変える、色を変える、アイコンを入れる、ラベルを付ける、影を加える——ユーザーが地図をすばやくスキャンするのに役立つものなら何でも構いません。

知っておくべきカテゴリーが3つあります。

画像ベースのマーカー は、特定の座標でマップ上に配置されるPNGまたはSVGファイルです。

シンプルで汎用性が高く、あらゆる環境でサポートされています。ただし、SVGを使用しない限り、PNGはRetinaディスプレイでくっきりとスケールされないという欠点があり、色を変更するたびに再エクスポートが必要です。

シンボルまたはアイコンマーカー は、マッピングライブラリ自体がコードでスタイリングしながら描画するベクター形状です。

どのズームレベルでも鮮明で、色の変更も簡単。Mapbox GLやLeaflet（プラグイン経由）などのライブラリにネイティブ対応しています。

HTMLマーカー は、フルHTMLエレメントをマーカーとして使用します。クラスター、情報バッジ、アニメーションピンに最適です。

柔軟性は高い一方、大規模なレンダリングにはコストがかかります。

ディレクトリやダッシュボードのユースケースの90%において、SVG画像マーカーが最適な選択肢です。鮮明で軽量、色の変更も簡単で、あらゆるプラットフォームで動作します。

デフォルトマーカーの限界

カスタムマーカーが必要になる3つの理由。

1つのマップに複数のカテゴリー。 マップにレストラン、ホテル、ガソリンスタンドを表示する場合、視覚的に区別できる3種類のマーカーが必要です。異なるアイコンで同じ形状にするか、同じアイコンで異なる色にするかのどちらかです。デフォルトでは1種類しか提供されません。

ブランドの一貫性。 ニュートラルなグレーと単一のアクセントカラーを使ったSaaSダッシュボードに、Googleの赤いピンが浮いて見えるのは好ましくありません。マーカーはUIの一部です。

情報の密度。 使用していない限り Marker Cluster extension、200個のマーカーが表示されるマップには、8個のマップよりもシンプルで小さなマーカーが必要です。デフォルトは「中程度の密度」向けのサイズで、両極端では見た目が崩れてしまいます。

良いマップマーカーの条件

WordPressサイト向けのマップを長年制作してきた経験から、いくつかのルールが見えてきました。どれも意外なものではありませんが、既存のツールのほとんどはそれを無視しています。

小さいサイズでも認識できること。 マーカーの多くは24〜32ピクセルで表示されます。そのサイズでアイコンが判読できなければ、マーカーとして失敗です。目を細めてテストしてみましょう。

地図との高いコントラスト。 明るい地図タイル上に明るいマーカーは埋もれてしまいます。サテライト、ストリート、ダークテーマのいずれでもマーカーが見えるよう、塗りつぶしの色とそれに対比する枠線の色を選びましょう。

シルエットが明確なひとつの形。 涙型のピンが定番なのには理由があります。場所を指し示す明確な「先端」があるからです。円・四角・六角形も効果的ですが、アンカーポイントが不明確なマーカーは、地図上のどの地点を示しているのかユーザーが誤読する原因になります。

アイコンはマーカーの中に、横ではなく。 アイコンが外側に出ているマーカー（ラベルスタイル）は地図を散らかしてしまいます。意味はシルエットの内側に収めましょう。

色は最大3色まで。 マーカー、アイコン、アクセントカラーの3つまで。それ以上になると、小さいサイズで見たときにマーカーがごちゃごちゃした印象になります。

ユースケースの95%をカバーする8つのマーカー形状

実際のGeoDirectoryマップを使って数十種類のマーカーシルエットをテストしました。この8つでほぼすべての用途に対応できます。

  1. ピン（クラシック涙型）。 Google Mapsの定番ピン。最良のデフォルト選択です。
  2. 円。 ミニマルでモダン。密度の高い地図に最適。
  3. 角丸四角形。 マテリアルデザインの雰囲気。アプリスタイルのUIに最適。
  4. 正方形。 シャープで技術的。建築やデータダッシュボードに最適。
  5. フラッグ。 目的地やゴールのイメージ。イベントや開始・終了地点に最適。
  6. シールド。 安全・セキュリティ・公式感。緊急サービスや認証済みリスティングに最適。
  7. ヘキサゴン。 テックやデータビジュアライゼーションでトレンド。モダンなダッシュボードに最適。
  8. 吹き出し。 レビューやチャット的なコンテキストに。口コミやコメントマーカーに最適。

MapMarker Studio には、出発点として8種類すべてが含まれています。

適切なアイコンの選び方

マーカー内のアイコンが意味を伝えます。アイコンの選択を誤ると、どれだけ美しいデザインのマーカーも台無しになります。いくつかのガイドラインをご紹介します。

マップ全体で単一のアイコンライブラリを使用する。 Font Awesome、Lucide、カスタムSVGを混在させると視覚的なノイズが生じます。ひとつのライブラリを選び、それを貫きましょう。

アイコンスタイルをマーカースタイルに合わせる。 アウトライン系マーカーにはアウトライン系アイコン、塗りつぶし系マーカーには塗りつぶし系アイコンを。スタイルの一貫性は、どのライブラリを選ぶかよりも重要です。

細い線のアイコンは避ける。 1pxのストロークはマーカーサイズでは消えてしまいます。1.5px以上の太さのアイコン、または複数のウェイトを提供するライブラリ（Phosphorはこの点で優れています）を選びましょう。

MapMarker Studio には、厳選された14のアイコンライブラリが同梱されています：Lucide、Phosphor、Tabler、Font Awesome、Heroicons、Material Symbols、Iconoir、Remix、Boxicons、Bootstrap Icons、Mage、Octicons、Radix、そしてSimple Icons（Airbnb、Starbucks、TripAdvisorなどのブランドロゴ用）。

アイコン総数40,000点以上。すべて商用利用無料。

カスタムマーカーをマップに追加する方法

具体的なコードはプラットフォームによって異なります。最も一般的なプラットフォームでの動作方法を、つまずきやすいポイントも含めてご紹介します。

Leaflet

const customIcon = L.icon({
  iconUrl: 'https://your-cdn.com/marker.svg',
  iconSize: [32, 40],
  iconAnchor: [16, 40],   // tip of the marker
  popupAnchor: [0, -40]
});

L.marker([40.7128, -74.0060], { icon: customIcon }).addTo(map);

注意点： 

iconAnchor
は、アイコンの左上からマップ上のピン留め位置までのピクセルオフセットです。しずく型ピンの場合、これは下部中央（先端）になります。ここを間違えると、マーカーが誤った場所を指してしまいます。

Mapbox GL JS

const el = document.createElement('div');
el.style.backgroundImage = 'url(https://your-cdn.com/marker.svg)';
el.style.width = '32px';
el.style.height = '40px';
el.style.backgroundSize = 'contain';

new mapboxgl.Marker(el)
  .setLngLat([-74.0060, 40.7128])
  .addTo(map);

注意点：Mapbox は 

[lng, lat]
の順番を使用しますが、Leaflet は 
[lat, lng]
を使用します。開発者が頻繁に混同するポイントです。

Google Maps

new google.maps.Marker({
  position: { lat: 40.7128, lng: -74.0060 },
  map: map,
  icon: {
    url: 'https://your-cdn.com/marker.svg',
    scaledSize: new google.maps.Size(32, 40),
    anchor: new google.maps.Point(16, 40)
  }
});

注意点：Google Maps はアイコン URL を積極的にキャッシュします。同じ SVG URL への変更をテストしている場合は、 

?v=2
キャッシュバスターを追加してください。

GeoDirectory

GeoDirectory をご利用の方は、カスタムマーカーを カテゴリー → カテゴリーを編集 → デフォルトカテゴリーアイコンに設定します。SVG または PNG をアップロードすると、GeoDirectory がそのカテゴリーのすべてのリスティングに自動的に適用します。

Image URL: https://your-cdn.com/restaurant-marker.svg
Recommended size: 36×46 px

MapMarker Studio は、適切なサイズとアンカーポイントを備えた GeoDirectory 対応の SVG ファイルを出力します。そのままドロップするだけで完了です。

一度デザインして、どこへでもエクスポート

私たちが MapMarker Studio を開発した理由は、まさに上記のループにあります。Figma でマーカーをデザインし、SVG をエクスポートし、Leaflet の設定をうろ覚えで書いて（最初は iconAnchor を間違え）、テストして、修正して、デプロイする。そしてマップ上のすべてのカテゴリーでこれを繰り返す。

このツールは、そのループをたった4ステップに凝縮します。

  1. 形状を選択（8種類）。
  2. アイコンを選択（14ライブラリから40,000点以上）。
  3. カラーを選択。
  4. Leaflet、Mapbox、Google Maps向けのコピペ対応コードを生成。または、主要なWordPressマッピング・ディレクトリプラグイン向けにSVG/PNGを直接ダウンロード。

すべてブラウザ上で動作。会員登録不要。サーバーへのアップロード不要。無料。

MapMarker Studio を試す →

ファイル形式について

このガイドからひとつだけ持ち帰るとすれば： SVGを使うこと。プラットフォームがSVGに対応していない場合はPNGも許容できますが、2026年においてそのようなケースはほとんどありません。

SVGはあらゆるズームレベルでも鮮明に表示され、一般的なマーカーの複雑さに対してファイルサイズも小さく、CSS変数による色の変更にも対応しています。PNGは2×・3×バリアントを用意しない限り、Retinaディスプレイで画質が劣化します。

唯一の例外は、極端な規模でのパフォーマンスです。1,000個以上のマーカーを同時に表示するマップでは、PNGの方がわずかに描画が速い場合があります。それ未満の数であれば、SVGが最適な選択です。

まとめ

カスタムマップマーカーの作成は、10分で終わりそうに見えて結局2時間かかってしまう作業のひとつです。その摩擦のほとんどはツール側にあります。

既存のソリューションはどれも、制限が多すぎるか、費用がかかりすぎるか、汎用的すぎるかのいずれかです。

私たちがMapMarker Studioを開発したのは、GeoDirectoryの導入を通じて何度もこの壁にぶつかってきたからです。

無料で提供しており、これからも無料のままです。思いつくあらゆるマッピングプラットフォームに対応しています。

対応していないユースケースがあれば、ぜひご連絡ください。皆さまのフィードバックがツールをより良くします。

MapMarker Studio を開く →