Mapbox Japan
アメイジング・スパイダーマン風マップ|マップデザインの基礎
見出し画像

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

Mapbox Japan

2000年代初頭、私はポップコーンを口に押し込みながら、映画館で『スパイダーマン』3部作を観ました。
そして先日、リメイク版のスパイダーバース作品に足を踏み入れました。それぞれのスパイダーヒーローの画風や服装が違っていて、とてもよかったです。
そんな思いから、スパイダーヒーローの衣装とコミックの美学にインスパイアされたマップを作ることにしました。

まず、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の翻訳記事です。

【関連記事】

お問い合わせは下記までご連絡ください
https://www.mapbox.jp/contact

みんなにも読んでほしいですか?

オススメした記事はフォロワーのタイムラインに表示されます!

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

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