test

ニュースレター購読

デジタルマップ活用の業界別事例

Mapbox Japanでは、業界別デジタルマップの活用方法やデジタルマップ導入による効果について紹介した資料をご用意しております。無料でダウンロードいただけますので、ぜひMapboxのビジネス活用のご参考にご利用ください。

いますぐダウンロード

地図ゲーム開発におけるMapbox活用ガイド - Mapbox Gaming Solution

Mapbox Japanでは、地図ゲーム開発におけるMapboxのプロダクト活用方法や地図ゲーム開発向け基本APIを紹介した資料を無料でご提供しております。ぜひMapbox活用のご参考にご利用ください。

いますぐダウンロード

【デモ】Mapboxと歩く京都観光マップ

観光名所、京都の街を舞台にMapboxを活用したデモマップを作成しました。 旅行・観光業界の方はもちろん、Mapboxでどのようなマップが作れるのか知りたい方にもおすすめです。

無料でデモをみる

デザイン

Mapbox Studio 入門編|マップデザインの基礎

2021
09
15

Mapboxのサービス概要資料はこちら

無料でダウンロード無料でダウンロード

Mapboxのアカウント作成はこちら

今すぐ無料登録

お問い合わせはこちら

お問い合わせ

驚くほど美しく、機能性があること。状況や文脈に即していること。これが、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つのテンプレートが用意されています。もちろんテンプレートを使用せずにゼロからマップのデザインを始めることもできますが、これらのテンプレートは特定のユースケース(ナビゲーションや不動産、フィットネスアプリ、データビジュアライゼーションなど)に合わせて設計されているので、お好みのテンプレートがございましたらぜひご活用ください。
テンプレートによってはベースとなる色の選択も可能です。

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

画像4

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

画像5

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

画像6

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

画像7

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

画像8

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

画像9

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


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 をつけて是非シェアしてください!

No items found.
No items found.

Mapboxのサービス概要資料はこちら

Mapbox Japanでは、プロダクトの概要や導入事例を紹介した資料をご用意しております。無料でダウンロードいただけますので、ぜひMapboxのビジネス活用のご参考にご利用ください。

無料でダウンロード無料でダウンロード

Mapboxのアカウント作成はこちら

Mapboxではお得な無料枠をご用意しているため、お気軽にご利用を開始することができます。ご登録がお済みでない方は今すぐMapboxアカウントに登録してMapboxのツール・サービスをお試しください。

今すぐ無料登録

お問い合わせはこちら

Mapboxのプロダクトや企業情報に関するご質問・ご不明点はこちらからお問い合わせください。

お問い合わせ

関連記事