Webアプリに地図機能を実装するとき、多くの人が最初に思い浮かべるのはGoogle Mapsでしょう。

しかし、個人開発や副業でサービスを作る場合、Google Mapsには意外な落とし穴があります。

従量課金なのでアクセス増加時のコストが読めない
JavaScriptライブラリが重い
Googleの規約に縛られる
将来的な料金変更リスクがある

そこで近年、個人開発者やスタートアップの間で再評価されているのが

Leaflet + OpenStreetMap

という組み合わせです。

今回はこの構成がなぜ人気なのか、Next.jsで導入する際のポイントとあわせて解説します。

LeafletとOpenStreetMapの違い

まずはこの2つの役割を整理しましょう。

Leafletとは
OpenStreetMapとは
なぜセットで使うのか
window is not defined
解決方法
1. 商店街向けマップサービス
2. 空き家管理マップ
3. レトロスポットマップ
4. 防災・避難所マップ

Leafletとは

LeafletはWebブラウザ上で地図を操作するためのJavaScriptライブラリです。

主な特徴は次の通りです。

軽量（約40KB）
スマホ操作に強い
プラグインが豊富
学習コストが低い

地図の表示そのものではなく、地図を操作するための「器」のような存在です。

OpenStreetMapとは

OpenStreetMap（OSM）は世界中のユーザーによって作られているオープンな地図データです。

特徴は次の通りです。

商用利用可能
基本無料
オープンデータ
カスタマイズしやすい

Google Mapsの代替というより、「地図データそのもの」と考えるとわかりやすいです。

なぜセットで使うのか

簡単に言うと

Leaflet = 地図ビューア
OpenStreetMap = 地図データ

という関係です。

Leafletが地図の表示枠を作り、その中にOpenStreetMapのタイル画像を読み込むことで地図アプリが完成します。

Google Mapsとの比較

個人開発目線で比較すると違いはかなり大きいです。

項目	Leaflet + OSM	Google Maps
初期費用	無料	無料
ランニングコスト	ほぼ無料	従量課金
軽さ	非常に軽い	やや重い
自由度	高い	低め
ベンダーロックイン	なし	あり
カスタマイズ性	高い	普通

特に重要なのがコストです。

Google Mapsは月200ドルの無料枠がありますが、バズった瞬間に課金が発生するリスクがあります。

個人開発の場合、

「アクセスが増えるほど赤字になる」

という事態は避けたいところです。

Leaflet + OSMならこの心配がほぼありません。

Next.jsでLeafletを使う時の注意点

Next.jsでLeafletを導入すると、多くの人が最初に遭遇するエラーがあります。

window is not defined

原因はLeafletがブラウザ環境前提で作られているためです。

Next.jsはサーバー側でもレンダリングを行うため、サーバー環境では存在しないwindowオブジェクトを参照してしまいます。

解決方法

最も安全なのは

dynamic(() => import('./LeafletMap'), {
  ssr: false
})

を使う方法です。

これによりLeafletコンポーネントをクライアント側のみで読み込みます。

CLS対策は必須

Leafletを動的ロードすると地図が後から表示されます。

その結果、

ページ全体がガクッと動く
Lighthouseスコアが下がる
UXが悪化する

という問題が発生します。

対策としては地図と同じ高さのスケルトンを表示しておきます。

<div className="h-[500px] bg-slate-900 animate-pulse">
  読み込み中...
</div>

これだけでCLSを大幅に削減できます。

ダークモード対応テクニック

OpenStreetMapは基本的に明るい地図です。

ダークテーマのサイトに埋め込むと違和感が出ることがあります。

そんな時はCSSフィルターを利用します。

.dark-tiles {
  filter:
    invert(100%)
    hue-rotate(180deg)
    brightness(95%)
    contrast(90%);
}

これだけでダークテーマ風の地図になります。

Zustandとの連携

店舗一覧と地図を連動させる場合、

「リストをクリックしたら地図が移動する」

というUIを作りたくなります。

その場合はLeafletの

map.flyTo()

を利用します。

map.flyTo(activeCoordinates, 14, {
  animate: true,
  duration: 1.2
});

これでGoogle Mapsのような滑らかな移動が実現できます。

個人開発で使えるサービスアイデア

Leaflet + OpenStreetMapは副業とも相性が良いです。

1. 商店街向けマップサービス

テイクアウト予約
店舗紹介
イベント案内

などをまとめた地域特化型サービス。

2. 空き家管理マップ

これは空き家管理事業とも相性が良いです。

巡回記録
写真管理
GPS記録
報告書作成

をスマホで完結できます。

3. レトロスポットマップ

昭和遺産や古い町並みが好きな人向け。

遊郭跡
赤線跡
レトロ商店街
廃線跡

などを地図上で紹介するサービスです。

4. 防災・避難所マップ

自治体オープンデータと組み合わせて

ハザードマップ
避難所検索
避難ルート表示

を実装できます。

まとめ

個人開発や副業で地図機能を実装するなら、今でも

Leaflet + OpenStreetMap

は非常に有力な選択肢です。

特に次のような人にはおすすめです。

Google Mapsの料金が気になる
地図サービスを副業で作りたい
SaaSの固定費を抑えたい
Next.jsで高速なサイトを作りたい

Google Mapsほど派手ではありませんが、

「軽い・安い・自由度が高い」

という3つの強みは、個人開発において非常に大きな武器になります。

地図アプリを作る予定があるなら、一度試してみる価値は十分あるでしょう。

Google Mapsはもう高い？個人開発・副業SaaSでLeaflet + OpenStreetMapを選ぶべき理由