mapbox-cartography

Mapbox カートグラフィースキル

このスキルでは、Mapbox を使って効果的で美しく、機能的な地図をデザインするための専門的な地図作成の知識を提供します。

地図作成の基本原則

視覚的な階層

地図では、最も重要な情報に見る人の注意を誘導する必要があります。

• 最も重要：POI、ユーザーの現在地、ルートの強調表示
• 二次的：主要道路、都市ラベル、ランドマーク
• 三次的：細街路、行政境界
• 背景：水域、土地利用、地形

実装方法：

• サイズ、色の強さ、コントラストを使って階層を設定します
• 主要な地物：高いコントラスト、大きめのシンボル、鮮やかな色
• 背景の地物：低いコントラスト、控えめな色、小さめの文字

地図の色彩理論

色の調和：

• 類似色：色相環で隣り合う色（青、緑、青緑）を使い、統一感のあるデザインにします
• 補色：反対の色（青／オレンジ、赤／緑）を使い、強いコントラストで強調します
• 単色：1つの色相で彩度や明度を変化させ、洗練されたミニマルなデザインにします

色が与える印象：

• 青：水、信頼、落ち着き、専門性（水域の標準色）
• 緑：公園、自然、成長、環境への配慮（植生、公園）
• 赤／オレンジ：緊急、重要、飲食（警告、レストラン）
• 黄色：注意、強調、注目（警告、選択項目）
• グレー：中立、背景、道路（インフラ）

アクセシビリティ：

• テキストのコントラスト比は 4.5:1（WCAG AA）を確保します
• 情報を伝える際に色だけに頼らないようにします
• 色覚シミュレーターでデザインをテストします
• 重要な違いを示す際は、赤と緑の組み合わせを避けます

タイポグラフィのベストプラクティス

フォントの選択：

• サンセリフ体（Roboto、Open Sans）：モダンですっきりしており、小さいサイズでも読みやすいため、ラベルに使用します
• セリフ体（Noto Serif）：伝統的で格式があるため、タイトルや歴史地図で控えめに使用します
• 等幅フォント：技術データ、座標

テキストのサイズ：

Place labels (cities, POIs): 11-14px
Street labels: 9-11px
Feature labels (parks): 10-12px
Map title: 16-20px
Attribution: 8-9px

ラベルの配置：

• 点のラベル：中央または少しずらして配置します（シンボルと重ならないようにします）
• 線のラベル：線のカーブに沿って配置し、長い地物では繰り返します
• 面のラベル：ポリゴンの中央に、適切なサイズで配置します
• 優先順位：主要な地物からラベルを付け、スペースに余裕があれば細かい地物にも付けます

地図のコンテキストに関する考慮事項

対象者を把握する：

• 一般のユーザー：情報を簡略化し、なじみのあるパターン（Google／Apple のスタイル）を使います
• 技術系ユーザー：詳細を増やし、技術レイヤーや精度の高いデータを含めます
• 分野の専門家：専門的なデータを示し、分野固有の記号表現を使います

ユースケースに合わせた最適化：

• ナビゲーション：道路を強調し、明確な階層と見やすいルートを実現します
• データの可視化：ベースマップの色を抑え、データを目立たせます
• ストーリーテリング：見る人の注意を誘導し、色で雰囲気を作ります
• 場所の選択：POI を明確に示し、周囲の状況も伝えます
• 分析：関連レイヤーを含め、さまざまなズームレベルで明瞭さを保ちます

プラットフォームに関する考慮事項：

• モバイル：タップ対象を大きくし（最小 44x44px）、デザインを簡潔にして、腕を伸ばした距離でも読みやすくします
• デスクトップ：詳細を増やしたり、ホバー操作や複雑なオーバーレイを含めたりできます
• 印刷：コントラストを高め、文字を大きくし、CMYK 色空間を考慮します
• 屋外／明るい環境：コントラストを高め、微妙なグレーは避けます

Mapbox 固有のガイダンス

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

レイヤーの順序（下から上）：

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

ズームレベルの戦略

ズーム 0～4（世界から大陸まで）：

• 主要な国境
• 海洋と海のラベル
• 首都のみ

ズーム 5～8（国から州まで）：

• 州・省の境界
• 主要都市
• 主要幹線道路
• 大きな水域

ズーム 9～11（都市圏）：

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

ズーム 12～15（近隣地域）：

• すべての道路
• 建物の外形
• POI（レストラン、店舗）
• 道路名

ズーム 16～22（道路レベル）：

• すべての詳細情報
• 番地
• 駐車場
• 詳細な POI

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

ライトテーマ（日中／プロフェッショナル）：

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

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

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

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

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

ビンテージ／レトロ：

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

一般的なマッピングのシナリオ

シナリオ：レストラン検索アプリ

要件：

• レストランを目立たせる必要があります
• ナビゲーションのための道路情報が必要です
• 背景は控えめにします（料理の写真を重ねて表示）

推奨事項：

• レストランのマーカーには、暖色系の鮮やかな色（赤、オレンジ）を使用します
• 背景をグレー調にします（低彩度）
• 道路ラベルは明瞭にしつつ、目立ちすぎないようにします
• 選択したレストランには高いコントラストを適用します
• モバイル向けにタッチ領域を最適化します

シナリオ：不動産マップ

要件：

• 物件の境界を明確に表示します
• 近隣地域の情報を表示します
• 価格の違いを示します

推奨事項：

• 価格帯を色で示します（緑＝手頃、赤＝高額）
• 公園や施設を目立つように表示します
• 関連性があれば学区を含めます
• 近隣地域の名前を明確に表示します
• 公共交通機関へのアクセスを表示します

シナリオ：データ可視化のオーバーレイ

要件：

• データレイヤーを主役にします
• ベースマップはコンテキストの提供にのみ使用します
• 複数のデータポイントが密集する場合があります

推奨事項：

• 単色でコントラストを抑えたベースマップにします
• データインク比の原則を使用します（データ以外の要素を最小限にします）
• ベースマップはグレースケール、または彩度を抑えた単色にします
• 不要なラベルを削除します
• データが暗色なら明るいベースマップを、逆の場合も同様に使用することを検討します

シナリオ：ナビゲーション／ルート案内

要件：

• ルートを確実に目立たせる必要があります
• ターンごとの案内を明確にします
• 現在地を常に表示します

推奨事項：

• ルートにはコントラストの高い色（青または紫）を使用します
• ルート線をアニメーション表示するか、破線パターンを使用します
• 大きく、明確な方向転換インジケーターを表示します
• 関係のない地物を暗く表示します
• ユーザーの位置は、点滅する青いドットで表示します
• 次の方向転換は、目立つ矢印／アイコンで表示します

パフォーマンスの最適化

スタイルのパフォーマンス：

• レイヤー数を最小限に抑えます（類似するレイヤーを統合します）
• バリエーションごとに複数のレイヤーを使用する代わりに、式を使用します
• ズームレベルが低い場合は、複雑なジオメトリを簡略化します
• 繰り返し使用するアイコンにはスプライトシートを使用します
• タイルセットの簡略化を活用します

読み込み速度：

• 重要なズームレベルを事前に読み込みます
• スタイル最適化ツールを使用します
• 外部リソースの呼び出しを最小限に抑えます
• スプライトシート内の画像を圧縮します

デザインのテスト

チェックリスト：

• 関連するすべてのズームレベルで表示を確認します
• さまざまな照明条件でテストします
• 実際のデバイス（モバイル、デスクトップ）で確認します
• 色のアクセシビリティを確認します（colorblind.org）
• 対象ユーザーにレビューしてもらいます
• 実際のデータ密度でテストします
• ラベルの衝突や重なりを確認します
• 低速なデバイスでのパフォーマンスを確認します

避けるべきよくある間違い

1. 色が多すぎる：メインカラーは最大 5～7 色にします
2. コントラストが不十分：テキストが読みやすいことを確認します
3. 情報の詰め込みすぎ：すべてにラベルを付ける必要はありません
4. ズームレベルを無視する：縮尺に適した詳細情報を表示します
5. ラベルの階層が不適切：重要度に応じて整理します
6. スタイルに一貫性がない：視覚的な一貫性を保ちます
7. パフォーマンスを軽視する：複雑なスタイルは描画を遅くします
8. モバイルを忘れる：実際のデバイスでテストします

このスキルを使う場面

次の場合にこのスキルを呼び出します：

• 新しいマップスタイルをデザインするとき
• 地図要素の色を選ぶとき
• 視覚的な階層について判断するとき
• 特定の用途に合わせて最適化するとき
• 視認性の問題を解決するとき
• アクセシビリティを確保するとき
• テーマ付きのマップ（ダークモード、ビンテージなど）を作成するとき