Mapbox 地図デザイン スキル

このスキルは、Mapboxを使用して効果的で美しく機能的な地図を設計するための専門的な地図学知識を提供します。

コア地図学の原則

ビジュアルハイアラーキー

地図は閲覧者の注意を最も重要な要素に導く必要があります：

• 最重要: POI、ユーザーの位置、ルートハイライト
• 二次: 主要道路、都市ラベル、ランドマーク
• 三次: 小規模な街道、行政的な境界線
• 背景: 水、土地利用、地形

実装方法:

• サイズ、色の強度、コントラストを使用してハイアラーキーを確立
• 主要な機能: 高いコントラスト、より大きいシンボル、大胆な色
• 背景機能: 低いコントラスト、淡い色、小さいテキスト

地図のための色理論

色調和:

• 類似色: 色相環の隣同士の色を使用（青-緑-青緑）して統一されたデザインを実現
• 補色: 反対の色を使用（青/オレンジ、赤/緑）して高いコントラストの強調
• 単色: 単一の色相に異なる彩度と明度のバリエーションで、エレガントで最小限のデザイン

色彩心理学:

• 青: 水、信頼、落ち着き、プロフェッショナル（水域のデフォルト色）
• 緑: 公園、自然、成長、エコフレンドリー（植生、公園）
• 赤/オレンジ: 緊急、重要、飲食（アラート、レストラン）
• 黄: 注意、強調、注目（警告、選択項目）
• グレー: ニュートラル、背景、道路（インフラ）

アクセシビリティ:

• テキストのコントラスト比を4.5:1以上に確保（WCAG AA）
• 情報伝達を色だけに頼らない
• 色覚異常シミュレーターでデザインをテスト
• 重要な識別のために赤/緑の組み合わせを回避

カラーパレットテンプレート:

ライトテーマ（昼間/プロフェッショナル）:

{
  "background": "#f5f5f5",
  "water": "#a0c8f0",
  "parks": "#d4e7c5",
  "roads": "#ffffff",
  "buildings": "#e0e0e0",
  "text": "#333333"
}

ダークテーマ（ナイトモード）:

{
  "background": "#1a1a1a",
  "water": "#0d47a1",
  "parks": "#2e7d32",
  "roads": "#3a3a3a",
  "buildings": "#2d2d2d",
  "text": "#ffffff"
}

ダークテーマの道路色ルール: 道路はニュートラルな暗いグレー（#3a3a3a）を使用し、背景と見た目に区別がつくが着色されていない状態である必要があります。道路にアンバー、青、その他の色合いでスタイルを設定しないでください — 色はアプリのデータレイヤー（ルート、マーカー）のために予約してください。着色されたベース道路と着色されたデータレイヤーは視覚的に競合します。背景に混ざり込む小規模道路（#1a1a1a上の#1e1e1e）は、街路名が目に見える道路がない状態で表示される「浮いたラベル」問題を生成します。

ハイコントラスト（アクセシビリティ）:

{
  "background": "#000000",
  "water": "#0066ff",
  "parks": "#00ff00",
  "roads": "#ffffff",
  "buildings": "#808080",
  "text": "#ffffff"
}

ビンテージ/レトロ:

{
  "background": "#f4e8d0",
  "water": "#b8d4d4",
  "parks": "#c8d4a4",
  "roads": "#d4c4a8",
  "buildings": "#e4d4c4",
  "text": "#4a3828"
}

地図スケールでのタイポグラフィ

フォント選択:

• サンセリフ (Roboto, Open Sans): モダン、清潔、小さいサイズでの高い可読性 - ラベルに使用
• セリフ (Noto Serif): 伝統的、フォーマル - タイトルまたは歴史的地図に限定して使用
• モノスペース: 技術データ、座標

テキストサイズ:

場所のラベル（都市、POI）: 11-14px
街路のラベル: 9-11px
機能ラベル（公園）: 10-12px
地図タイトル: 16-20px
著作権表記: 8-9px

ラベル配置:

• ポイントラベル: 中央または若干オフセット（シンボルとの重複を回避）
• ラインラベル: ライン曲線に沿って、長い機能には繰り返す
• エリアラベル: ポリゴンの中央に配置し、適切にサイズ調整
• 優先順位: 主要な機能を最初にラベル付けし、スペースがあれば小規模な機能をラベル付け

ズームレベル戦略

ズーム 0-4（世界～大陸）:

• 主要国の境界線
• 大洋と海のラベル
• 首都のみ

ズーム 5-8（国～州）:

• 州/県の境界線
• 主要都市
• 主要高速道路
• 大きな水域

ズーム 9-11（大都市圏）:

• 市の境界線
• 近隣地区
• すべての高速道路と主要道路
• 公園とランドマーク

ズーム 12-15（近隣地区）:

• すべての街道
• 建物のフットプリント
• POI（レストラン、店舗）
• 街路名

注記: MapboxのホストされているStreets スタイルは、デフォルトではズーム14付近でほとんどのPOIを表示します。カスタムスタイルの場合は、ズーム12からPOIを開始してください — これは近隣地区スケールで、密度が管理可能で、ユーザーが閲覧している場所です。ズーム14は遅い；ズーム10（大都市圏スケール）は遠すぎて、深刻なアイコンの混雑を生成します。

ズーム 16-22（街路レベル）:

• すべての詳細
• 番地
• 駐車場
• きめ細かいPOI

Mapbox固有の実装ガイダンス

スタイルレイヤーのベストプラクティス

レイヤー順序（下から上へ）:

1. 背景（単色またはパターン）
2. 土地利用（公園、住宅地、商業地）
3. 水域（大洋、湖、河川）
4. 地形/陰影起伏（標高を使用する場合）
5. 建物（3Dまたは2Dフットプリント）
6. 道路（高速道路→小規模な街道）
7. 境界線（国、州の線）
8. ラベル（場所名、街路名）
9. POIシンボル
10. ユーザー生成コンテンツ（ルート、マーカー）

よくある間違い: 開発者は「POIは可視のままにしなければならない」という理由で、アプリのルート線またはアクティブなマーカーをPOIシンボルの_下_に配置することがよくあります。これは逆です — ユーザー生成コンテンツ（ルート、選択された位置、ユーザーの位置）は最も重要なレイヤーであり、POIを含むすべての上に描画されなければなりません。POIアイコンを覆うルート線は許容されます；POIアイコンで隠されるルートは許容されません。

マップコンテキストの考慮事項

対象ユーザーを知る:

• 一般公開: シンプルにし、おなじみのパターンを使用（Google/Appleスタイル）
• 技術ユーザー: より多くの詳細、技術レイヤー、データ精度を含める
• 領域専門家: 専門的なデータを表示、領域固有のシンボルを使用

プラットフォームの考慮:

• モバイル: より大きいタッチターゲット（最小44x44px）、シンプルなデザイン、腕の長さで読める
• デスクトップ: より多くの詳細を含める、ホバーインタラクション、複雑なオーバーレイ
• 印刷: より高いコントラスト、より大きいテキスト、CMYKカラースペースを検討
• 屋外/明るい環境: より高いコントラスト、微妙なグレーを回避

使用事例の最適化:

• ナビゲーション: 道路を強調、明確なハイアラーキー、ルートの可視性
• データ可視化: 淡いベースマップ、データを目立たせる
• ストーリーテリング: 閲覧者の注意を導く、色で気分を確立
• 位置選択: POIを明確に表示、コンテキストを提供
• 分析: 関連レイヤーを含める、異なるズームで明確性を維持

参照ファイル

特定のトピックに関する詳細なガイダンスについては、必要に応じてこれらの参照を読み込んでください：

• references/scenarios.md — 一般的なシナリオガイダンス（レストラン検索、不動産、データ可視化、ナビゲーション）
• references/performance-testing.md — パフォーマンス最適化、テストチェックリスト、よくある間違いを回避

このスキルをいつ使用するか

以下の場合にこのスキルを起動してください：

• 新しい地図スタイルを設計する
• 地図要素の色を選択する
• ビジュアルハイアラーキーに関する決定を行う
• 特定の使用事例に最適化する
• 可視性の問題をトラブルシューティングする
• アクセシビリティを確保する
• テーマ地図を作成する（ダークモード、ビンテージなど）