こんにちは。インターンの菊池です。
今回は、5月に開催した「MARVEL風マップ」企画について紹介させていただきます。当企画は、Mapbox Studioを用いてMARVELのキャラクター達をイメージしたマップをデザインし、新作映画の公開日に合わせてTwitterで毎日投稿するというものでした。キャラクターイメージマップの作成には、青山学院大学 地球社会共生学部 古橋研究室の他の学生も協力してくれました。
Mapbox Studioを活用したキャラクターイメージマップを作成するにあたって「鬼滅の刃風マップ」をデザインしてみました(古橋研究室)という記事を参考にしました。この記事では、鬼滅の刃のキャラクターイメージマップと、そのポイントについて紹介しています。
本記事では、より多くの方にキャラクターイメージマップを楽しんでいただくためにその極意をお伝えしたいと思います。
作品一覧
Day1 「ハルク」イメージデザイン マップスタイルはこちら
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/62a1c352315fd6643395f56b__2ldjnK24-kKdMpTlC6G2LFxYf-2gBZxSE6pxasnUlJ89Rwkq8RSxJe312m6-TzsJC0dnQLg7myTioE1Q1aK-Kej2EI_wBQsOQLnwzRUM-xeG5iAaJkNfeD0WbANvd3q8XFicogXyNrY6dCjiQ.png)
Day2 「ブラック・ウィドウ」イメージデザイン マップスタイルはこちら
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/62a1c35159ee004475cc268f_Y4ylo74LyUZzQATYe5tC8W_DHnYJfppnWy4b9Ahr850nCA-zmU5JbEMquBajuamUYONuTQH4dLBE066reZLzTwyhddEymB1tk3n5BRrB9nSN2bkA5mT-vrnOth7etbVUMXikkuVnUMNLaN5cxw.jpeg)
Day3「ブラックパンサー」イメージデザイン マップスタイルはこちら
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/62a1c35186188f708f6b6771_L4FsSNgR23Jr7xRx6PdjyusQudU6s5NMHXtO50pa75NBHRBft9Y4_6yKRcmpXHa-hd7_JfZTkTIQwwhgU3e-B22IPxNI_nY2s7bHEclP9S6ZnTW4gpkhTuEK4NFfQ5jFEOaFylHqBYn9qycunw.jpeg)
Day4 「サノス」イメージデザイン マップスタイルはこちら
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/62a1c352f593eb16db70d74d_BuB1AnXWmn3aJUSn6CqjxOmAlg4Gm533ud8XVDuIkDUXPwCuS16TaNujIZHgzgKclL944MwxdBaLuVdTarD007Cifj-V05KQ-gmkKNaxMPVedqw1qvMhn33cNPv_QNPUQVfc3r26D3VEceWdhQ.png)
Day5 「キャプテン・アメリカ」イメージデザイン マップスタイルはこちら
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/62a1c3514afef759b42d0800_w37WixFofE0wEgHuz9VBQ0FgkXZItDbxle8c-tPVZ5uCgHdim3dQCuwf4E6OXSN4c-G3uMrh-Yo_lJHH21lZd4zz2orKbPzU6pitovjnpuaUgJiSyEBRJPcDpjcUl-iepkztpKG54SNfzLbh2w.jpeg)
Day6 「アイアンマン」イメージデザイン マップスタイルはこちら
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/62a1c3514afef70b562d0801_shTQuhHjZqEpRdQTln2kICB3C48llLf6cuCynvpr_AAPbU4ybXpB4IC6Sbga9tNW5TNW6xRhTs8DsKl5E-c-ge35EUAetsYi1jmATVwsf0wsR9GD0OnGqZjMMqw7iBw_O3zhjY21Gt7Ohoip8A.jpeg)
Day7① 「ドクター・ストレンジ」イメージマップ マップスタイルはこちら
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/62a1c35242efb321a183efc0_xl4FxTWkTkvioLTQL7apWcW6MrGhPUp_i_kZO1MnpgEcEX6wO0F9d-DEpAXd4W0dbxdCrL8EpO9wsFs65ht3uLXgKKDpZoUoMM_LgorfHAV8XDUSa5S-A5S7Pc4C9_6rYar3o4aGjzKchXH95A.png)
Day7② 「ワンダ」イメージデザイン マップスタイルはこちら
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/62a1c352919a1fe749c03a1a_qqwp3xnF1Nu5zi3njeaCBpaeGzqXhwn9nvkuL2D9o0MUzunR299GKHynGWMMiYmnOD_dN0c42G4d6wfZ5QAdpxuV97EbGSneLmlEoUePNpDZJ0wnuuuwUTrhdK2VjkX2YTwMrp7ih0gq2-zyfg.jpeg)
Day7③ 「アメリカチャベス」イメージデザイン マップスタイルはこちら
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/62a1c352ffa3c42384df7f52_8loYDTwG0hahp1zkrPhkhv62Lymmnv1r4poTv0Z61-sHnx1ElvfdeWwx-LJ4AIEEzWNvw1bBMLSV4EglhkGXg398Tb1jN9OMKgGlI5vY_QcyYk_aj2HW3oP8cy602euxRJ6B9y7gunnwGjO6gg.jpeg)
キャラクターイメージマップの極意1 忠実に選択すること
冒頭で紹介した「鬼滅の刃風マップ」をデザインしてみました(古橋研究室)では、制作プロセスで重要な以下の3点を説明しています。
- カラー選び
- モチーフや特徴的要素の再現
- イメージを崩さないフォント選び
3つに共通するのは選択することです。モチーフとなるキャラクターをよく理解した上で、一目で分かる表現を目指して選択します。
「ドクター・ストレンジ」イメージマップを例に解説します。
- カラー選び:実際の画像から抽出した色を使っています。原色の赤や青ではないくすんだ色を選択しました。また、道路が光って見えるように白い枠線をつけています。
- モチーフや特徴的要素の再現:場所については、青(Water)部分をマントに見立てた広がりのある地形、鞭のような魔法に近い形状の道路・橋、ドクター・ストレンジにゆかりのある場所という3点から香港を選択しました。地形や都市構造で再現できるイメージが厳密なものでない場合はキャラクターの設定から関連する国・地域を選択するという方法もあります。
- フォント選び:直感的にフォントを選択した結果、フォントは魔法陣に浮かぶ文字のイメージにぴったりでした。Mapboxが提供するフォントは非常に幅広いので、モチーフにあった選択ができます。ラベルは非表示にすることもできるので、「アメリカチャベス」イメージマップのように消してしまうのも一つの方法だと思います。
キャラクターイメージマップの極意2 Mapbox Studioの使い方
ここからはキャラクターイメージマップ制作するためのMapbox Studioの使い方を解説していきます。
まずはMapbox Studioから、New styleを選択します。テンプレートはBasicをお勧めします。様々な要素が初めから入っていて、カスタマイズしやすいからです。
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/62a1c354919a1fce74c03b17_Fjf3pShhJdyE60aM0hmfdLu7pMuwv43JzZmRcKE4F0dZx3cQIWNvtLs-lp5mZ84snbr_B7iYtM2ddpPfuVVMUB34zEXba7pZTxeCGvecg1-Kc91kRifgfUTCGmppKzHRWqxF3T1AAAvAQhI5tg.png)
表示された画面の左上にあるLayersをクリックしてみましょう。
基本概念として、Mapboxのマップはレイヤー構造になっています。Landが最下層にあり、そこにWater、Road network、Buildings、Labelsというように属性ごとに積み重なっています。
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/62a1c35442efb3202983f11f_tqP9E780GtOp9mxev6XysitHLbOMsgHMxnHW7K_NWvS3AfjWZg3X0pdHyXDRskEvw2--bbUcvwpbfGWJ51vxCWg5PfBoBA80AeiYMEga9XDWmMHkQxUAUhpCPzT55AkYbyZ6umGsNWigiCW07w.png)
キャラクターイメージマップはこの構造を理解し、どこの属性を変更するかで表現していきます。そう聞くと難しそうですが、Mapbox Studioの操作はもっと直感的です。
公園の緑の部分をクリックすると以下のように情報が表示されます。クリックしたポイントに積み重なっている属性を見ることができるのです。
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/62a1c3536230565e064853a3_A9u9iMQh-JxqDxC_hDxsbt-yreD1_6aQ5KtyVM0BACiy2PgYLevg8jwweaiGCXdnL3XkPOqKc8133Nli9G2nAQmsnDnJ3qZUfM5uyIU2C1c-nPUrpU6YoIMRgLfOhVVPLd1Sot4oU1jtK2ejcg.png)
landuseというレイヤーでは、いくつかの土地の情報をまとめています。
他にもRoad networkのレイヤーでは、国道、路地などの情報を道としてまとめています。
これら一つ一つの色を変えることで地図にイメージを投影していきます。
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/62a1c35486188ffc1d6b69e0_IBE_AM3gVMkwU7AeGYOhO_owBh_qT2y6ynk-m_1AumseyDgU6uOxZZ2hrVDyaDZeDFRXXFeonOU7G2IgN3GRUpEFR31y_o-Qsku2DjERsB1FC2l8YJE_uhWxbDvO_p2U3JvQE-dNSyhHPbBA-Q.png)
注意点として、変更前にメニューの右上のOverrideをクリックして操作可能な状態にする必要があります。道幅の変更などでも同様の操作が必要です。
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/62a1c35270d337662df223a5_4zDd6mbkl5olfaDad3HQVBTu87ZnT72_y3ZwHCevDT6TsDgoKkTDFfcGM8jgKQOi7N-bOCtjvO6rTdD6wV_ank1_zw1s2F6PWGO0f3tjg6dr5hpe7H02xfxi5gS4499_GSyEmwNtRsy_eBcDdA.png)
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/62a1c35349ad4fd96a6f35e6_XjZ2WyX9GkIOiiNh-7T_GO31L16X8-RmkFED0TCeVVkZmlhjcj4lvCK60WNiFK4JboysyCvTOdgv9H2w6ySav5Ezs0S4QIfGF2Vtl5Jv6PH1C3hZwweCGWoDmD7iA04PMLYg7Zlh2pEjkQ3tyQ.png)
最後に、メニュー上部のComponentsを見てみましょう。
下にColorsとTypographyというメニューが出てきます。ここでは色とフォントを一括操作することができます。非常に便利なのでぜひ活用してみてください。
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/62a1c352f593eb125770d780_QhkZkHDUQNDBJE-DEnp8xDA5LDUXW8Yw1OS8RhVKRN1U7wK4QEHl8uyKBULv-hwWt8Bxywaawi6ARDS2uU-PtCEfEL6jtBy4VJxWwF_ni7Wdj0w7C5yF5yDKFCNv1PryW2LVoeedfIIHDQ3RHg.png)
以上がキャラクターイメージマップの極意です。
実際に操作するとまた多くの機能を発見でき、自分なりの地図デザインをすることができると思います。ぜひキャラクターへの愛を地図に表現してみてください!