地図をデザインする方法

地図デザインは、解決しようとしている問題から始まります。ビジョンを練り上げるにつれて、デザインと構築、そして時にはやり直しの繰り返しを超えて解決策にたどり着きます。 

製品に合わせて特定し、カスタマイズする必要がある4つの主要なデザイン要素について学びます。マップスタイルは完全に制御できますが（実際、どの機能もカスタマイズできます）、更新は控えめに行ってください。マップのカスタマイズは、色、タイポグラフィ、アイコン、テクスチャを変更することから始めることをお勧めします。

これらの設計上の決定事項を踏まえ、地図が適切に設計されるようにするための4つの主要な設計原則、すなわちコントラスト、階層、密度、判読性を遵守してください。これらの原則は、単独で適用されるべきではなく、相互補完的なものです。

Mapbox Studioを使用して、無料でカスタム地図デザインを始めましょう。経験は必要ありません。次の地図デザイン要素と原則を使用して、正確な仕様に合わせて地図を構築および設計します。 

地図デザインの4つの重要な要素は何ですか？

地図をブランドに合わせて、またはブランドのユーザーインターフェースを補完したいとお考えでしょう。通常、これらの要素はスタイルガイドに概説されています。ブランドに固有のフォント、色、画像、パターン、トーンなどを探して、地図のカスタマイズとデザインに関する意思決定に役立ててください。

1. 色

色は、注意を引き、類似した要素をグループ化し、意味を示し、美観を高めるためにデザインで使用されます。通常、各マップのカラーパレットからデザインプロセスを開始します。これは、まとまりのある原色とアクセントカラーのグループで構成されています。これは反復的なプロセスです。

配色は、デザインを開始し、地図上で何がうまく調和するかを確認するうちに、変化し、成長していく可能性が高いです。最終的な地図とパレットに一貫性を持たせ、調和がとれるようにしてください。 

地図をデザインする際に使用すべき色の数は？

色の使用は控えめにしてください。目は一度に多くの色を処理できないため、色数は少ない方が適しています。地図デザインの複雑さにもよりますが、フルボディのカラーパレットでは10〜12色が標準的です。また、多くの人が色覚に制限があることを考慮し、それに応じてスタイルを設定してください。 

色数を制限することも、視覚的な調和に役立ちます。たとえば、ナビゲーションや交通機関に関連する多くの機能は、同じ青色を共有しています。鉄道のラベル、高速道路の標識、フェリーのルート、さらにはこの目的のための道路ケーシングなどです。

地図のカラーパレットには一貫性が必要ですか？

視覚的な調和を維持しながら、カラーパレットを微調整します。カラーパレット内のさまざまな色相間で彩度と明度を一致させることで、これを実現します。 彩度は、色の強度または色の優位性を示します。彩度を下げると、色相の鮮やかさが低下し、色の支配力が弱まります。彩度が0になると、すべての色相が無色の灰色になります。 

2. タイポグラフィ

タイポグラフィは、地図の最も重要なデザイン要素の1つであり、地図の読みやすさを左右します。地図にあるテキストのほとんどを占めるラベルは、多くの場合、1〜3語で、非常に小さいサイズで表示されます。この制約により、一般的に、xハイトが高く、カウンタが開いており、セリフのないフォントが地図上で最も効果的です。

お客様のブランドのフォントが、地図スタイルのニーズに合うとは限りません。その場合は、Mapbox Studioから直接、お客様のブランドに合うフォントを選択してください。フォントの品質、読みやすさ、個性を考慮してください。

品質

高品質のフォントは、さまざまなスタイル（イタリック、大文字、大文字イタリック、スモールキャップ）、太さ（ウルトラライトからウルトラブラック、およびその間のすべて）、幅（コンデンス、ナロー、ノーマル、モノ、および拡張）を提供します。この多様性を活用して、ラベルを簡単に区別し、地図スタイルに階層を表示できます。

読みやすさ

読みやすさとは、読者の目がコンテンツに容易かつ明瞭にアクセスできるように単語を配置することです。このスキルを磨くには時間がかかりますが、マップの読みやすさを大幅に向上させるための優れた方法をいくつかご紹介します。

1. ラベル分類の多様性。 ラベルデータで利用可能な分類とプロパティに設計上の区別を設けます。 たとえば、場所ラベルは、都市、町、村、近隣などの分類を提供します。 この多様性を区別するための処理システムを作成します。

2. ラベルの色の多様性。これは、同じ色相の彩度または明度を変更することで、さりげなく実現できます。これは、カフェや学校などのポイントのカテゴリを区別するために、ポイントオブインタレスト（POI）のスタイルを設定する場合に特に有効です。ただし、ほどほどにしてください。

3.スペーシングのコントロールレタースペーシング（しばしばトラッキングと呼ばれます）は、テキスト内のすべての文字の間隔を調整します。これにより、ラベルをよりオープンで魅力的に見せることができます。文字間隔を少し開けることで、小さな文字も読みやすくなります。何事もそうですが、トラッキングはやり過ぎに注意しましょう。ラベルの幅は、改行される前に何文字が一行に収まるかを決めるので、注意してください。特に、ボールドやブラックなど、重い書体を使うときは注意してください。

個性

書体の個性は、それが醸し出す声とエネルギーを物語っています。最も人気のある書体スタイルは、サンセリフ、セリフ、スクリプトです。サンセリフフォントは、画面上のDPI（ドット/インチ）が低いため、Webやモバイルに最適です。サンセリフフォントには、ヒューマニスト、トランジショナル、ジオメトリックの3つの主要なタイプがあります。

1. ヒューマニスト・サンセリフ書体 は手書きを模倣し、暖かさと個性を感じさせます。 

2. トランジショナル・サンセリフ書体は、ストロークが強く、より直立しており、均一です。一般的に、控えめで、権威主義的で、モダンな印象を与えます。 

3.幾何学的なサンセリフ書体は、幾何学的な形を文字の骨格に使うことで、厳密で客観的、普遍的な雰囲気を作り出します。

3. アイコン

地図アイコンは通常、POI（Point of Interest：注目地点）を示します。図書館からカフェ、公園、美術館、バス停まで、あらゆる種類の場所やビジネスを表すことができます。地図で使用するアイコンは、ブランドを強化し、地図のブランド認知度と読みやすさを向上させる必要があります。優れた地図アイコンは、文化を超えて広く認識され、可能な限りシンプルで、11pxという小さなサイズでも判読できる必要があります。

Mapbox は、地図製作者が地図製作のために作成した、ピクセル単位で調整されたポイントオブインタレストアイコンのコレクションである Maki を作成しました。Maki は、可能な限り高品質で一貫性があり、包括的なポイントオブインタレストアイコンセットを目指しています。Maki アイコンはシンプルに設計されており、Mapbox Studio とシームレスに連携します。

4. テクスチャ

テクスチャは、地図デザインのツールキットに追加されたボーナスです。デザイン作品の表面品質を表します。パターンを地図フィーチャに追加して、要素を区別またはブレンドできます。また、地図または背景全体のテクスチャとして独立して使用することもできます。

テクスチャはシームレスである必要があります。シームレスなテクスチャとは、画像またはパターンを並べて配置しても、画像の2つのコピー間に目立った境界線が作成されないものです。テクスチャは繰り返しパターンであるため、小さくする必要があります。通常、16x16、32x32、または64x64ピクセルです。

地図デザインの4つの重要な原則は何ですか？

コアとなる地図デザインの原則は、地図上およびページ上のコンテンツの相対的な重要性を理解するためのシステムを形成します。これらの適用された原則がなければ、地図ベースのコミュニケーションは失敗します。 

1. コントラスト

人間は違いに気づくようにできています。そのため、コントラストは地図デザインにおいて非常に強力なデザイン原則となります。コントラストは注意を引き、視線を誘導します。これにより、フィーチャが周囲の要素から分離され、強調と関心を即座に生み出すことができます。

コントラストは、注目を集めるだけでなく、要素間の境界線を確立します。

2. 階層構造

階層構造は、パターンを識別しながら、視聴者が重要なものに集中するのに役立ちます。強力で視覚的に明確な階層システムは、理解度を高める最も効果的な方法の1つです。色とスケールは、地図スタイルの視覚的な階層を活用するために調整したい主要なデザイン要素です。

3. 密度

地図のフィーチャがあるズームレベルで利用可能であっても、フィーチャは可用性に基づいてスタイル設定しないでください。特定のズームレベルで情報を過度に表示すると、混乱を招いたり、地図の焦点が薄れたりする可能性があります。地図をデザインする際は、情報の密度が地図の視覚的な重みをどのように増加させ、視覚的な階層を乱す可能性があるかを検討してください。

4. 判読性

判読しやすいということは、容易に読めるということであり、地図デザインにおいて最も重要です。これにより、ユーザーは表現された空間をどのようにナビゲートするかを容易に理解できます。ほとんどの地図フィーチャの判読性は色とサイズに依存し、ラベルやテキストに加えて、アイコンも含まれます。アイコンは、小さいサイズでも認識でき、背景とのコントラストが良好になるように、十分にシンプルに設計する必要があります。