English

MIRAIT ONE GROUP

Mapbox ブログ

好きな画像から色をクリックするだけ!簡単にオリジナルの地図デザインが作れるMapbox「Cartogram」のご紹介

2021/08/26

製品情報

使い方 - CartogramとMapbox Studioで作るあなただけのマップ

Cartogramは、ドラッグ&ドロップだけで簡単にオリジナルマップを作成できるマップデザインツールです。

画像をアップロードし、好きな色を選択するだけで、ブランドやスタイルにぴったりなマップができあがります。また、Cartogramで作成されたマップはウェブサイトやモバイルアプリですぐに使用することができるほか、Mapbox Studioに保存して独自データを追加したり、スタイルをさらに調整することもできます。

*本記事のキャプチャ画像には一部古いバージョンのMapbox Studioの画像が含まれます。

CartogramとMapbox Studioを使うことで、下のようなマップを4分程度で作ることができます。では早速、オリジナルマップを作っていきましょう。

まず、自分の好きな画像をCartogramにドラッグ(もしくは画像を選択)してアップロードします。ここではブランドカラーをまとめた画像をアップロードしてみました。

次に、プリセットのフィルターを変更したり(今回は「Colorful」の代わりに「Light」を使用)、画像が表示されたウィンドウから配色をカスタマイズしたりして、直感的にワクワクするようなマップを作りましょう。

【配色をカスタマイズできるコンポーネント】
・Land(陸地)
・Water(海・川・湖)
・Road(道)
・Greenspace(緑地)
・Label(ラベル)

スタイルが完成したら、Mapbox Studioで開いてみましょう。(「Saved style!」をクリック)

Mapbox Studioではレイヤーに調整を加えることで、さらに魅力的なマップへと仕上げることができます。好みに合わせてフォントや道路の縁取りなどを微調整し、マップを完成させましょう!

Mapbox Studioによる調整前(左)と調整後(右)

早速、弊社事業所案内のマップを作る際に「Cartogram」を試してみました。

Cartogramに会社のロゴ画像をアップロードするだけで、たった数分で簡単にコーポレートカラーに基づいた背景地図を作ることができました。

オフィスの位置を拡大してみると、このような感じになります。他の地図では見られない不思議な色合いですね。
縮尺によって色を変えることも可能なので、詳細地図になるタイミングで見慣れた通常のスタイルに戻したり、それぞれの縮尺に応じて色が変わる地図を作ることもできます。

そのほかのオリジナル地図デザインについては、こちらの記事をご参照ください。

単体では差別化することが難しかった背景地図ですが、Mapbox Cartogramを使って競合や他サービスと被らない一点物のデザイン地図を使ってみてはいかがでしょうか。
自由自在にカスタマイズできる地図サービスMapbox、気になる方は是非弊社までお問い合わせください。

この記事はマップボックス・ジャパン合同会社の許諾を得て同社のブログ記事(https://blog.mapbox.jp/n/ndfc853c3f833)を転載し、国際航業が加筆・修正をしています。

Mapbox

Mapboxサービス
Mapboxはリアルタイムで更新されるライブロケーションマップを備えたプラットフォームを開発・提供しています。
開発者はこのプラットフォームを利用して様々なロケーションサービスの開発が可能となります。
ノンコードでの地図作成など、開発者目線で扱いやすい数々のソリューションを展開しています。
Mapboxを使えば本来力を入れるべきアプリケーションのデザインや開発に、よりフォーカスすることができます。