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

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

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

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

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

2. 書体をアップデート

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

Studioには45種類以上の書体が組み込まれていますが、独自のカスタムフォントをお持ちの場合は、Studioにアップロードして地図で使用できます。優れたフォントの選び方についてさらにヒントが必要な場合は、Smashing magazineの記事のガイドラインが参考になります。

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

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

Style Componentsでは、道路ネットワークの変更を簡単に行えるようにしました。トグルを調整して道路の幅を変更するなど、高度な設計上の決定を下すと、その変更が世界中の道路や道路の種類に反映されるようになります。

上記の画像では、それぞれの最も顕著な違いは、道路ネットワークの表現方法です。Basicマップスタイル（左）では、道路はアウトラインのない実線で構成されています。このミニマリストなスタイルは、他の地図フィーチャを目立たせるのに最適です。Navigationマップスタイル（中央）は、道路に完全に焦点を当てています。目立つ高速道路の標識、大きくて読みやすい道路ラベル、道路ケーシングによる道路と土地の明確なコントラスト、交通パターンにより、このマップスタイルは、道路がユーザーにとって重要なフィーチャであることを明確に示しています。Blueprintマップスタイル（右）では、道路ケーシングの幅のみを使用して、道路ネットワークの階層を美的に表現しています。

4. テクスチャを追加

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

5. 適切な色を選択

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

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

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