mapbox-style-patterns

Mapbox スタイルパターンのスキル

このスキルでは、一般的なマッピングシナリオ向けに、実績のあるスタイルパターンとレイヤー設定を紹介します。

パターンライブラリ

パターン 1：レストラン／POI 検索

ユースケース： レストラン、カフェ、バーなどのポイントオブインタレストを表示するコンシューマー向けアプリ

視覚的な要件：

• POI がすぐに見えること
• ナビゲーションに必要な道路の状況がわかること
• 背景がニュートラルであること（写真やコンテンツを重ねて表示）
• モバイルに最適化されていること

推奨レイヤー：

{
  "layers": [
    {
      "id": "background",
      "type": "background",
      "paint": {
        "background-color": "#f5f5f5"
      }
    },
    {
      "id": "water",
      "type": "fill",
      "source": "mapbox-streets",
      "source-layer": "water",
      "paint": {
        "fill-color": "#d4e4f7",
        "fill-opacity": 0.6
      }
    },
    {
      "id": "landuse-parks",
      "type": "fill",
      "source": "mapbox-streets",
      "source-layer": "landuse",
      "filter": ["==", "class", "park"],
      "paint": {
        "fill-color": "#e8f5e8",
        "fill-opacity": 0.5
      }
    },
    {
      "id": "roads-minor",
      "type": "line",
      "source": "mapbox-streets",
      "source-layer": "road",
      "filter": ["in", "class", "street", "street_limited"],
      "paint": {
        "line-color": "#e0e0e0",
        "line-width": {
          "base": 1.5,
          "stops": [
            [12, 0.5],
            [15, 2],
            [18, 6]
          ]
        }
      }
    },
    {
      "id": "roads-major",
      "type": "line",
      "source": "mapbox-streets",
      "source-layer": "road",
      "filter": ["in", "class", "primary", "secondary", "tertiary"],
      "paint": {
        "line-color": "#ffffff",
        "line-width": {
          "base": 1.5,
          "stops": [
            [10, 1],
            [15, 4],
            [18, 12]
          ]
        }
      }
    },
    {
      "id": "restaurant-markers",
      "type": "symbol",
      "source": "restaurants",
      "layout": {
        "icon-image": "restaurant-15",
        "icon-size": 1.5,
        "icon-allow-overlap": false,
        "text-field": ["get", "name"],
        "text-offset": [0, 1.5],
        "text-size": 12,
        "text-allow-overlap": false
      },
      "paint": {
        "icon-color": "#FF6B35",
        "text-color": "#333333",
        "text-halo-color": "#ffffff",
        "text-halo-width": 2
      }
    }
  ]
}

主な特徴：

• 彩度を抑えたベースマップ（写真と競合しません）
• コントラストの高いマーカー（オレンジ色の #FF6B35 は目立ちます）
• 見やすい道路網（明るいグレーに白）
• 公園は見えるものの控えめ
• 読みやすさを高めるテキストハロー

パターンの選択ガイド

判断ツリー

質問 1：主なコンテンツは何ですか？

• ユーザーが作成したマーカー／ピン -> POI 検索パターン
• 不動産データ／境界線 -> 不動産パターン
• 統計データ／分析データ -> データ可視化パターン
• ルート／道順 -> ナビゲーションパターン
• リアルタイムの追跡／配送ゾーン -> 配送／物流パターン（顧客マーカーには、2つ目の円レイヤーと requestAnimationFrame、setPaintProperty を使ったパルスアニメーションを含めてください。references/delivery-logistics.md を参照）

質問 2：閲覧環境はどのようなものですか？

• 日中／オフィス -> ライトテーマ
• 夜間／暗い環境 -> ダークモードパターン
• 変化する環境 -> テーマ切り替えを用意する

質問 3：ユーザーが主に行う操作は何ですか？

• 閲覧／探索 -> POI と詳細情報を重視
• ナビゲーション -> 道路とルートの視認性を重視
• 配送／物流の追跡 -> リアルタイム更新、ゾーン、ステータスを重視
• データ分析 -> ベースマップを最小限に抑え、データを最大限に表示
• 場所の選択 -> 境界線と周辺状況をわかりやすくする

質問 4：対象プラットフォームは何ですか？

• モバイル -> シンプルにし、タッチターゲットを大きくして、詳細を減らす
• デスクトップ -> 詳細や複雑さを増やすことができます
• 両方 -> モバイルファーストで設計し、デスクトップ向けに拡張する

レイヤー最適化パターン

パフォーマンスパターン：ズームレベルに応じた簡略化

{
  "id": "roads",
  "type": "line",
  "source": "mapbox-streets",
  "source-layer": "road",
  "filter": [
    "step",
    ["zoom"],
    ["in", "class", "motorway", "trunk"],
    8,
    ["in", "class", "motorway", "trunk", "primary"],
    12,
    ["in", "class", "motorway", "trunk", "primary", "secondary"],
    14,
    true
  ],
  "paint": {
    "line-width": {
      "base": 1.5,
      "stops": [
        [4, 0.5],
        [10, 1],
        [15, 4],
        [18, 12]
      ]
    }
  }
}

リファレンスファイル

追加のパターンと設定は references/ ディレクトリにあります。特定のパターンが必要な場合は、該当するファイルを読み込んでください。

ファイル	内容
references/real-estate.md	パターン 2：不動産マップ — 物件の境界、価格の色分け、設備マーカー
references/data-viz-base.md	パターン 3：データ可視化用ベースマップ — コロプレスマップ／ヒートマップを重ねるための最小限のグレースケールベースマップ
references/navigation.md	パターン 4：ナビゲーション／ルート案内マップ — ルート表示、ユーザーの位置、方向矢印
references/dark-mode.md	パターン 5：ダークモード／ナイトテーマ — ほぼ黒の背景、明るさを抑えた配色
references/delivery-logistics.md	パターン 6：配送／物流マップ — リアルタイム追跡、ゾーン、ドライバーマーカー、到着予定時刻のバッジ
references/expressions-clustering.md	データ駆動型の式パターンと、密集した POI 向けのクラスタリング
references/common-modifications.md	3D 建物、地形／陰影起伏、カスタムマーカー
references/interactions.md	addInteraction、setFeatureState、appearances の比較 — それぞれの連携方法と使い分け

読み込み手順： ユーザーのユースケースに合ったリファレンスファイルを読み込んでください。たとえば、配送追跡マップを実装する場合は、references/delivery-logistics.md を読み込みます。

テストパターン

ビジュアルリグレッションチェックリスト

• ズームレベル 4、8、12、16、20 でテストする
• モバイル（幅 375px）で確認する
• デスクトップ（幅 1920px）で確認する
• データが密集した状態でテストする
• データがまばらな状態でテストする
• ラベルの重なりを確認する
• 色のコントラスト（WCAG）を確認する
• 読み込みパフォーマンスをテストする

このスキルを使用するタイミング

次の場合にこのスキルを呼び出してください。

• 特定のユースケース向けに新しいマップスタイルを作成するとき
• レイヤー設定の例を探すとき
• 一般的なマッピングパターンを実装するとき
• 既存のスタイルを最適化するとき
• 一般的なシナリオで実証済みのレシピが必要なとき
• スタイルの問題をデバッグするとき
• Mapbox のスタイル設定のベストプラクティスを学ぶとき