カスタムマップを5つのステップで作成する方法

驚くほど、便利で、適切で、文脈に沿っている。それがMapboxで作成されたすべての地図に対する私たちの目標です。そして、Mapbox Studioのスタイルコンポーネントを使用すると、デザイナーは地図の表示を微調整して、対象者に合った機能を強調表示できます。

地図は、場所を伝える以上の役割を果たす必要があります。地図は、使用目的に合わせて、上に表示されるデータを理解しやすくする必要があります。特定のユースケースに合わせて作成されたカスタムマップを使用すると、デザイナーは、フィットネスアプリの地形やナビゲーションユースケースの道路の詳細など、ユーザーにとって最も関連性の高い情報に焦点を当てることで、判読性と美観の調整に集中できます。

Studioでスタイルコンポーネントを使用してカスタム地図を作成する際に、高レベルの設計を決定する方法について、Map Designチームからの5つのヒントをご紹介します。

1. 適切なベースマップスタイルから始める

Studioでは、ナビゲーションから不動産、フィットネスアプリ、データ可視化まで、特定のユースケース向けに設計されたデフォルトのスタイルとカスタマイズを備えた5つのコアマップスタイルを提供しています。ゼロから始めることもできますが、これらのベースマップは、独自のデフォルトスタイルでカスタマイズプロセスを迅速に開始するため、デザインのトーンを設定し、必要なすべてのものを使い始めるには、適切なものを選択することが重要です。

モノクロ - データやビジュアライゼーションを際立たせるのに最適です

Mapbox Streets - ユーザーが自分のいる場所を理解するのに最適な汎用マップ

Mapbox Outdoors - 地形のビジュアル、標高、トレイルやピークなどの自然の特徴に関する情報を備えており、フィットネスや自然関連のユースケースに最適です

Mapbox Satellite Streets - 通りの詳細と俯瞰図を組み合わせることで、不動産業者、住宅購入者、農家は必要な情報を一目で把握できます

ナビゲーション - ライトとダーク両方の スタイルは豊富な道路詳細とライブ交通情報により、ナビゲーションアプリやユースケースとシームレスに連携します。

2. 書体をアップデート

書体は地図に個性を与え、簡単な切り替えで地図を独自のものにします。書体とフォントの書式を調整すると、地図にさらにコンテキストを追加できます。判読性が高いほど、視覚的な階層での位置が高くなります。サイズ、大文字と小文字の区別、または大文字表記を変更することで、判読性を構成できます。

Mapbox Studioには45種類以上の書体が組み込まれていますが、独自のカスタムフォントをお持ちの場合は、Studioにアップロードして地図で使用できます。適切なフォントの選択方法に関するヒントが必要な場合は、Smashing magazineのこの記事のガイドラインをご覧ください。

3. 道路ネットワークを調整する

適切に設計された道路は、優れた地図を素晴らしい地図に変えることができます。多くの人々は、自分の経験から都市がどのように見えるかを理解しているため、そのメンタルモデルに一致する道路ネットワークを作成することが、デザインを最も効果的に伝えるのに役立ちます。

スタイルコンポーネントでは、道路ネットワークの変更を簡単に行えるようにします。道路スタイルの切り替えを調整することで、高度な設計上の決定を簡単に行うことができ、世界中の道路や道路タイプに変更が反映されます。

上記の画像では、それぞれの最も顕著な違いは、道路ネットワークの表現方法です。

Streetsマップスタイル（左）では、道路は道路ネットワーク機能のいくつかのレイヤーで構成されており、立体感を追加し、トンネルと橋を区別しています。Streetsの道路ネットワークは、多くの道路ネットワークの詳細を提供しますが、他の機能が際立つように控えめになっています。 

ナビゲーションマップスタイル（中央）は、道路に完全に焦点を当てています。目立つ高速道路の標識、大きく読みやすい道路ラベル、道路ケーシングによる道路と土地の明確なコントラストにより、このマップスタイルは、道路がユーザーにとって重要な機能であることを明確に示しています。

Blueprint地図スタイル（右）は、道路ネットワークの階層を美的に伝えるために、道路ケーシングの幅のみを使用しています。

4. テクスチャを追加

テクスチャは、地図上のフィーチャに奥行きを与え、水、土地被覆、背景の土地などの大きなポリゴンフィーチャに適用すると最も効果的です。古い印刷システムへの敬意として、テクスチャを使用して、重ね刷りの色の効果を模倣します。Mapboxタイルは512x512ピクセルであるため、パターンを正しく繰り返すには、シームレスなパターンアイコンを512で割り切れる必要があります。

5. 適切な色を選択

色の選択は、間違いなく地図のデザインで最も楽しい部分の1つであり、デザインプロセスの早い段階で行いたくなるものです。ただし、最初に一般的な色を選択し、他のすべてが完了するまで最終的な色の選択を待つことをお勧めします。これにより、線の太さ、テクスチャ、および色の選択と衝突する可能性のあるその他の機能などの詳細を、本当に調和のとれたパレットを選択する前にロックできます。色は楽しいものですが、正しく選択するのは難しい場合があります。AdobeとLyftは、調和のとれた色を生成するための使いやすいパレットピッカーを作成しました。

上記の地図デザインを手がけたFrankは、ミニマルなカラーパレットを使用しています。一度に多くの色を使用しないように、色の総数を減らし、デザインに必要な場合にのみ色を追加しました。この方法により、デザインにとって何が重要かを検討し、地図の見やすさだけでなく、見た目の美しさのために、視覚的なツールとして色をどのように使用するかをより критично に検討することができました。

独自のカスタムマップの作成を開始するには、Mapbox Studioにアクセスして無料で構築を開始するか、ギャラリーページでインスピレーションを得てください。気に入ったデザインを作成したら、Twitterで#builtwithmapboxを使用して共有し、デザインを披露してください。