mapbox-cartography

Mapbox 地図作成スキル

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

地図作成の基本原則

視覚的な階層

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

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

実装方法：

• サイズ、色の強さ、コントラストを使って階層を確立します
• 主要な地物：高いコントラスト、大きめの記号、鮮やかな色
• 背景の地物：低いコントラスト、落ち着いた色、小さめの文字

地図の色彩理論

色の調和：

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

色彩心理：

• 青：水、信頼、落ち着き、プロフェッショナルな印象（水域のデフォルト色）
• 緑：公園、自然、成長、環境への配慮（植生、公園）
• 赤／オレンジ：緊急性、重要性、飲食（アラート、レストラン）
• 黄色：注意、強調、注目（警告、選択項目）
• グレー：中立、背景、道路（インフラ）

アクセシビリティ：

• テキストのコントラスト比を 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）：伝統的で格式があるため、タイトルや歴史地図に控えめに使用します
• 等幅：技術データ、座標

テキストサイズ：

Place labels (cities, POIs): 11-14px
Street labels: 9-11px
Feature labels (parks): 10-12px
Map title: 16-20px
Attribution: 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 — パフォーマンス最適化、テスト用チェックリスト、避けるべきよくある間違い

このスキルを使用する場面

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

• 新しい地図スタイルを設計するとき
• 地図要素の色を選ぶとき
• 視覚的な階層について判断するとき
• 特定のユースケースに合わせて最適化するとき
• 表示の問題をトラブルシューティングするとき
• アクセシビリティを確保するとき
• テーマ付きの地図（ダークモード、ビンテージなど）を作成するとき