test

ニュースレター購読

デザイン

アメイジング・スパイダーマン風マップ|マップデザインの基礎

2022
06
09

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

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

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

今すぐ無料登録

お問い合わせはこちら

お問い合わせ

2000年代初頭、私はポップコーンを口に押し込みながら、映画館で『スパイダーマン』3部作を観ました。

そして先日、リメイク版のスパイダーバース作品に足を踏み入れました。それぞれのスパイダーヒーローの画風や服装が違っていて、とてもよかったです。

そんな思いから、スパイダーヒーローの衣装とコミックの美学にインスパイアされたマップを作ることにしました。

No items found.
No items found.

まず、Mapbox Streets v7で作成された2017年のエイミー・リー・ウォルトン氏のデザイナースタイル「Whaam!」からいくつかのデザイン要素を取り入れ、このスタイルを最新の地図データタイルセット(Mapbox Streets v8)で作成するために、「Whaam!」の個々のレイヤーを見直し、60年代初期コミックの雰囲気を捉えた、このスタイルの基盤となるポップアートのような美しさを再現することにしました。

アイコノグラフィー

アイコンも小さいけれど、力強いものを選択しました。高速道路のアイコンは、まさにオノマトペのようなデザインです。このマップを使えば、もう高速道路の出口を見逃すことはないでしょう。

また、スパイダーマンのコスチュームは、壊れやすさを考慮して、薄いドット柄のテクスチャを採用しています。これを再現するために、マップは陸地にストライプ柄を、水辺の全体に柔らかいドット柄のテクスチャを採用しました。

▲左から高速道路の出口、陸地、水辺に使用

道路ネットワーク

道路の太い白線は、スパイダーマンの強力な蜘蛛の糸が縦横無尽に飛び交う様子を表現しています。

スパイダーマンのコスチュームの目をモチーフに、道路は太い黒枠で囲み、白い道路の幅を変えて、道路の階層を表現しています。

▲カリフォルニア州サンディエゴ
▲メキシコシティの街並み

アメイジング

コミックの実名が「The Amazing Spider-Man」なので、Expressionsを使ってすべての国名の前に「The Amazing」を付けてみました。

以下の式をcountry-labelレイヤーに追加した。

[ "to-string", [ "concat", "the amazing", "\n", ["get", "name_en"] ] ]

*本記事は、Mapbox Inc. Blogの翻訳記事です。

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

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

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

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

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

今すぐ無料登録

お問い合わせはこちら

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

お問い合わせ

関連記事