Mapbox Style Patterns Skill

このスキルは、一般的なマッピングシナリオに対する実戦で検証されたスタイルパターンとレイヤー構成を提供します。

パターンライブラリ

パターン 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: 配送/ロジスティクスマップ -- リアルタイム追跡、ゾーン、ドライバーマーカー、ETA バッジ
references/expressions-clustering.md	データドリブン式パターン + 密集 POI 用クラスタリング
references/common-modifications.md	3D ビルディング、地形/ヒルシェード、カスタムマーカー

ロード手順: ユースケースに合致するリファレンスファイルを読み込んでください。例えば、配送追跡マップを実装する場合は references/delivery-logistics.md をロードしてください。

テストパターン

ビジュアル回帰チェックリスト

• ズームレベルでテスト: 4, 8, 12, 16, 20
• モバイル (375px 幅) で検証
• デスクトップ (1920px 幅) で検証
• 密集データでテスト
• スパースデータでテスト
• ラベル衝突をチェック
• 色のコントラストを検証 (WCAG)
• ロードパフォーマンスをテスト

このスキルを使用すべき場合

以下の場合にこのスキルを呼び出してください:

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