Mapbox Studio 入門編

今回は、Mapbox Studioを触ったことのない方でも簡単に始められる入門編の手順を紹介します！


## 1. アカウント作成してログインする
[こちら](https://www.mapbox.jp/)のページの右上「ログイン」からログインする。(初めての方は「サインアップ」からアカウントを作成する。)
![61558d50de796c07cfb3e69c_picture_pc_4c6701c4e6718582d7c4c56d9b6e529c.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2516459/7876ce02-a001-e4be-f514-3427ce108fbe.png)
こちらの画面に移行したら「Go to Mapbox Studio」をクリックして[Mapbox Studio](https://studio.mapbox.com/)に移動する。
![61558d5034cb6828fb5f7f07_picture_pc_37848286c870d5b23a834420282e0da0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2516459/2c7a53b1-a6f9-ff21-d716-9c8428f43936.png)
## 2. 「New Style」で自分のスタイルを新規作成する
「New style」をクリックしてお好きなテンプレートを選択する。
![61558d508d87a92fe427be68_picture_pc_9a279a03efae659b6b461cfa2064b49a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2516459/a1569993-8b37-9c93-70a1-4c93a8510dc7.png)
## 3. テンプレートを選択
Mapbox Studioには、デフォルトでスタイリングとカスタマイズが施された __6つのテンプレート__ が用意されています。もちろんテンプレートを使用せずにゼロからマップのデザインを始めることもできますが、これらのテンプレートは特定のユースケース（ナビゲーションや不動産、フィットネスアプリ、データビジュアライゼーションなど）に合わせて設計されているので、お好みのテンプレートがございましたらぜひご活用ください。
テンプレートによってはベースとなる色の選択も可能です。

ここでは、一部のテンプレートを紹介します。
![61558d50b25097536f76ed79_picture_pc_acf6c921ae0115f8b578b43f7c02ab85.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2516459/eedda4cb-b135-69c9-3232-d1ea5bf976c6.png)
__Monochrome（モノクローム）__ - シンプルな色合いのため、表示するデータを目立たせるのに最適です。
![61558d50f70d3463629235dd_picture_pc_1424aa5ee007b80055c815e5ee848321.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2516459/28ac9257-ff36-3a42-2bc0-8eb04471721a.png)
__Streets（道路）__ - ユーザーが自分の位置を理解するのに最適な地図です。
![61558d507efeb866152dc525_picture_pc_98b65c2acf45ecd89567383e44426f09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2516459/c220a0fb-697c-f342-8ae0-05314c74a62c.png)
__Basic（ベーシック）__ - 「Street」よりも詳細でありながらシンプルなマップスタイルです。
![61558d5129d86ae1d1b47022_picture_pc_5965e9bf29f54ba799d0a7761be1a01b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2516459/27d7548d-410e-43b4-6d9e-54237ddb0436.png)
__Outdoors（アウトドア）__ - 地形のビジュアルや標高データ、トレイルや山頂のような自然に関する情報がわかりやすく、フィットネスや自然に関連したユースケースに最適です。
![61558d51fa0f164c33f08331_picture_pc_416fcf0b2a1063fcdaa69d2282b097da.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2516459/50506806-ed23-344b-8abd-2673903150a9.png)
__Satellite Streets（衛星画像+道路）__ - 道路の詳細なデータと衛星画像を組み合わせたマップで、不動産業者や農業従事者などが必要とする情報を一目で把握できます。
![61558d516c19de828e403e79_picture_pc_b7f3c4aeb6d3bef10a9e3824339fcdbc.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2516459/e0099414-d3c3-63dd-fc7f-4b6c049dd565.png)
__Navigation（ナビゲーション）__ - ライトスタイルとダークスタイルの両方で、道路の詳細な情報やリアルタイムの交通量データを表示し、ナビゲーションに関するアプリやユースケースに適しています。
## 4. Components とLayersの基本的な説明
Mapbox Studioは基本的に __「Components」__ と __「Layers」__ の２つの設定があります。Componentsはデータセットが9つあり、建物や自然、道路などの設定ができます。LayersはComponentsを更に細かくした、より詳細な設定ができます。
![61558d5129d86a6effb47025_picture_pc_86fc4d410db56b5679893403d684482d.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2516459/bda984ee-540c-ec4c-b2fb-4a1194fc218b.png)
## 5. 言語を変更する
デフォルトの設定だと道路や建物の表記名が英語になっているため、日本語に変更しましょう。Componentsの設定の一つのである「Place labels」の中の「Language」を「Japanese」に変更する。同じく、「Point of interest labels」と「Road network」の中にある「Language」も「Japanese」に変更する。
![61558d515fdacc5c3573441e_picture_pc_fc99517414573bbc9305b5ff081fc7e8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2516459/c3e3905b-da1d-bf11-a902-dd41a846240f.png)
## 6. マップの色を変更する
色を選ぶことは、マップをデザインする上で楽しいことの一つです。ここでは、色を変更する方法を2通り紹介します。

1. Componentsの下の段にある「Color」から変更したい部類(Base や　Greenspaceなど)の色を個別に変更する。
![61558d523f75ef085ca36358_picture_pc_dcabd69e0390d0a9529dfe69635ba9b1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2516459/d9be97e8-3c73-70d6-078d-14a239a9ab20.png)
2. マップ上で変更したいポイントをクリックし、吹き出しに表示されている色を変更する。
![61558d51d4c0c3617f2dfe2e_picture_pc_d7930bcc4609ea1460dc599384ff811a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2516459/eedb943f-3fa3-7ed6-a312-cc44212ac95d.png)
## 7. 書体をカスタマイズする
![61558d510fc7924feab5bb06_picture_pc_be49b5970bda6c7e9b0df2b129c91209.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2516459/0b6b7ee4-a91a-86ed-87dc-f462370a7707.gif)
書体をカスタマイズするだけで、マップをユニークにすることができます。Componentsの「Typography」から各項目の書体を変更可能です。さらに、テキストサイズや大文字小文字（UpperCase/lowercase）も設定できます。
Mapbox Studioには45種類以上の書体が組み込まれていますが、独自のカスタムフォントをお持ちの場合は、そのフォントをMapbox Studioにアップロードしてご利用いただけます。良いフォントを選ぶためのポイントをもっと知りたい方には、[Smashing magazineの記事](https://www.smashingmagazine.com/2010/12/what-font-should-i-use-five-principles-for-choosing-and-using-typefaces/)にあるガイドラインがおすすめです。
## 8. 道路のデザインを調整する
Mapbox Studioでは、道路のデザインも簡単に変更できます。優れたデザインの道路により、より素晴らしいマップを作成できます。
![61558d52e7f0842264690a46_picture_pc_371cc848ced97935d91c56d1cf159d2f.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2516459/71295ca7-a412-84c6-31e8-205d95faa99f.gif)
Componentsの「Road Network」から「Road width」のトグルを調整すると、道路幅が変わり、世界中の道路に反映されます。
![61558d5229d86a9c09b47026_picture_pc_52751c542494128fe661136c413eefb7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2516459/ef4233a1-c209-4802-3a4c-3c5ac12c4c3e.png)
以下の画像は異なる道路の表現方法をした三つの例です。
![61558d521f348eac1a40898a_picture_pc_e0178e09618c63c1e4d735b39788f551.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2516459/2ac55c2d-bef8-5975-172f-a71f9a2220d4.png)
▲基本マップスタイルでは、道路はアウトラインのない実線で構成されています。このようなミニマルなスタイルは、地図の他の特徴を際立たせるのに適しています。
![61558d52fa0f166feff08333_picture_pc_c674b3f7f33079262c2cae1dc8e76fb0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2516459/90e4e76d-a8fe-8157-2ea5-6c75855d6771.png)
▲ナビゲーションマップスタイルでは、道路に焦点を当てています。目立つ高速道路、大きくて読みやすい道路ラベル、道路と土地の明確なコントラスト、交通パターンなど、このマップスタイリングは、ユーザーにとって道路が重要な機能であることを明確にしています。
![61558d52f70d34ebeb9235de_picture_pc_70f6d9365517cedbd3f1769ce9784f7e.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2516459/ed90652d-d349-f2ff-12ad-a090cf1cc9cb.png)
▲ブループリントのマップスタイルは、道路の重なりを美的に伝えるために、道路を枠線のみで表現しています。
## 早速始めてみましょう
今回はマップの色を変更するところまでの入門編を紹介しました。
基本的な色や表示のデザイン変更以外にも道路やテクスチャの変更や3Dマップや衛星写真の追加など幅広くカスタマイズできるのがMapbox Studioの特徴です。