Mapbox Studio 入門編
見出し画像

Mapbox Studio 入門編

驚くほど美しく、機能性があること。状況や文脈に即していること。これが、Mapboxで作成されるすべてのマップの目標です。
マップの役割は場所を伝えることだけではありません。マップは使用目的を達成するためのツールであり、データを理解しやすく表示するものでなければなりません。

今回は、Mapbox Studioを触ったことのない方でも簡単に始められる入門編の手順を紹介します。これを読んでいる皆さんも一緒に地図デザイナーとしての一歩を踏み出しましょう!

1. アカウント作成してログインする

こちらのページの右上「ログイン」からログインする。(初めての方は「サインアップ」からアカウントを作成する。)

スクリーンショット 2021-09-15 19.29.56

こちらの画面に移行したら「Go to Mapbox Studio」をクリックしてMapbox Studioに移動する。

画像2


2. 「New Style」で自分のスタイルを新規作成する

「New style」をクリックしてお好きなテンプレートを選択する。

画像3


3. テンプレートを選択

Mapbox Studioには、デフォルトでスタイリングとカスタマイズが施された6つのテンプレートが用意されています。もちろんテンプレートを使用せずにゼロからマップのデザインを始めることもできますが、これらのテンプレートは特定のユースケース(ナビゲーションや不動産、フィットネスアプリ、データビジュアライゼーションなど)に合わせて設計されているので、お好みのテンプレートがございましたらぜひご活用ください。
テンプレートによってはベースとなる色の選択も可能です。

ここでは、一部のテンプレートを紹介します。

画像4Monochrome(モノクローム) - シンプルな色合いのため、表示するデータを目立たせるのに最適です。

画像5Streets(道路) - ユーザーが自分の位置を理解するのに最適な地図です。

画像6Basic(ベーシック) - 「Street」よりも詳細でありながらシンプルなマップスタイルです。

画像7Outdoors(アウトドア) - 地形のビジュアルや標高データ、トレイルや山頂のような自然に関する情報がわかりやすく、フィットネスや自然に関連したユースケースに最適です。

画像8Satellite Streets(衛星画像+道路) - 道路の詳細なデータと衛星画像を組み合わせたマップで、不動産業者や農業従事者などが必要とする情報を一目で把握できます。

画像9Navigation(ナビゲーション) - ライトスタイルとダークスタイルの両方で、道路の詳細な情報やリアルタイムの交通量データを表示し、ナビゲーションに関するアプリやユースケースに適しています。


4. Components とLayersの基本的な説明

Mapbox Studioは基本的に「Components」と「Layers」の2つの設定があります。Componentsはデータセットが9つあり、建物や自然、道路などの設定ができます。LayersはComponentsを更に細かくした、より詳細な設定ができます。

画像10


5. 言語を変更する

デフォルトの設定だと道路や建物の表記名が英語になっているため、日本語に変更しましょう。Componentsの設定の一つのである「Place labels」の中の「Language」を「Japanese」に変更する。同じく、「Point of interest labels」と「Road network」の中にある「Language」も「Japanese」に変更する。

画像11


6. マップの色を変更する

色を選ぶことは、マップをデザインする上で楽しいことの一つです。ここでは、色を変更する方法を2通り紹介します。

1. Componentsの下の段にある「Color」から変更したい部類(Base や Greenspaceなど)の色を個別に変更する。

スクリーンショット 2021-09-15 19.54.11


2. マップ上で変更したいポイントをクリックし、吹き出しに表示されている色を変更する。

スクリーンショット 2021-09-15 19.54.37


7. 書体をカスタマイズする

画像14

書体をカスタマイズするだけで、マップをユニークにすることができます。Componentsの「Typography」から各項目の書体を変更可能です。さらに、テキストサイズや大文字小文字(UpperCase/lowercase)も設定できます。
Mapbox Studioには45種類以上の書体が組み込まれていますが、独自のカスタムフォントをお持ちの場合は、そのフォントをMapbox Studioにアップロードしてご利用いただけます。良いフォントを選ぶためのポイントをもっと知りたい方には、Smashing magazineの記事にあるガイドラインがおすすめです。


8. 道路のデザインを調整する

Mapbox Studioでは、道路のデザインも簡単に変更できます。優れたデザインの道路により、より素晴らしいマップを作成できます。

画像15

Componentsの「Road Network」から「Road width」のトグルを調整すると、道路幅が変わり、世界中の道路に反映されます。

画像16


以下の画像は異なる道路の表現方法をした三つの例です。

画像17

▲基本マップスタイルでは、道路はアウトラインのない実線で構成されています。このようなミニマルなスタイルは、地図の他の特徴を際立たせるのに適しています。

画像18

▲ナビゲーションマップスタイルでは、道路に焦点を当てています。目立つ高速道路、大きくて読みやすい道路ラベル、道路と土地の明確なコントラスト、交通パターンなど、このマップスタイリングは、ユーザーにとって道路が重要な機能であることを明確にしています。

画像19

▲ブループリントのマップスタイルは、道路の重なりを美的に伝えるために、道路を枠線のみで表現しています。

・・・

早速始めてみましょう

今回はマップの色を変更するところまでの入門編を紹介しました。
基本的な色や表示のデザイン変更以外にも道路やテクスチャの変更や3Dマップや衛星写真の追加など幅広くカスタマイズできるのがMapbox Studioの特徴です。
ぜひオリジナルのマップをデザインして、唯一無二のマイマップを作成してみてください!気に入ったデザインができましたら、Twitterで #builtwithmapbox をつけて是非シェアしてください!

【関連記事】


Twitterでは毎日情報を発信しています!ぜひフォローしてください!

嬉しい!ありがとうございます!
Mapbox Japanの公式noteです。地図づくりをスマートにする地図開発プラットフォームを提供しています。主にサービスの最新情報や導入事例などを発信します。 お問い合わせはこちら:https://www.mapbox.jp/contact