2020年度古橋ゼミ論用レポジトリ
学籍番号：1A118074
氏名：斎藤 祐花
地球社会共生学部 地球社会共生学科 3年A組80番
指導教員：古橋 大地 教授
© Furuhashi Laboratory/Yuka Saito, CC BY 4.0
本研究ではブランドイメージを崩さないウェブ地図スタイリングの手法の開発を、漫画・アニメ「鬼滅の刃」のキャラクターを例にしたmapboxでのデザイン地図制作実践をもとに行う。また、最終的にスタイリングしたデザイン地図をどのような形で活用することができるかに関しても模索する。
ITプロダクトやweb上の様々なサービスで欠かせないツールである地図だが、現在ではそれらのブランドイメージや使用事例にあったデザイン地図が多用されており単に道案内や空間情報を伝達する役割だけでなくその地図を使用するユーザーにブランドのイメージを適切に構築させる重要な要素となっている。 Mapbox では、地図のデザインを使用用途やサービスのイメージに合わせフォントやベースのテクスチャーやカラーを細かに選択することができる。今回のゼミ論ではこのMapboxを使用し論文の読み手により伝わりやすいように現在社会現象を巻き起こし老若男女問わず愛される「鬼滅の刃」を例とする。なかでも特徴的な印象をもつキャラクターをピックアップし手法の開発をおこなう。尚、筆者は鬼滅の刃の大ファンでありアニメや単行本もさることながらファンブックや公式キャラクターズブックなども読破済みのためそれらの情報をもとに、より忠実にそのキャラクター自体や鬼滅の世界観やブランドイメージをもタイトル通り崩すことなく再現したい。
Mapboxを使用したオリジナル地図デザインの作成
例： 漫画・TVアニメ「鬼滅の刃」
本研究では、web地図との親和性を考慮し特にTVアニメ版の鬼滅の刃のキャラクターデザインやカラーを参考にする。 TVアニメで登場する主要キャラクターのモチーフや服装などの設定資料を収録した公式キャラクターズブックからキャラクターのカラーや雰囲気、モチーフなどをピックアップしキャラクターイメージを構成する要素をまとめる。はじめはカラーを中心にデザインをしていき、その過程でキャラクターのモチーフとなる要素を地図上におとしこみ最後にキャラクターの性格や雰囲気からそのイメージにあったフォントを選択する。以下カラー、モチーフ、フォントの3点を順に詳細を述べる。
【 カラー 】 各キャラクターのイメージカラーとなりうる、瞳の色、髪の毛の色、羽織の色、鍔や鞘の色を抽出しbaseやroadの全体の面積の多くをしめるエリアから順に適切なカラーを選択
カラーの抽出方法：①本で必要な部分を写真にとる ②カラーピッカー）でカラーコードを抽出(複数候補の色が出た場合はmapboxに反映されたときに実際の色に一番近いものor他の使用色との相性を見て判断)
【 モチーフ 】 先にまとめたキャラクターのイメージを構成する要素を地図上にどうにか落とし込む。例えば、鬼滅の刃の主人公の妹である竹をくわえた少女の鬼”禰豆子”であれば着用している着物の麻の葉模様や竹筒、額の左上の薄桃色の髪飾りなどである。 それらのモチーフの形や配色を、地図上の道の張り巡らせ方や地形に着目しすり合わせていく。
【 フォント 】 キャラクターのイメージや性格、雰囲気などに合わせてフォントを選択する。また、カラーとフォントの相性も見ながら調整する。
結果として以下の三点がブランドイメージを崩さないweb地図スタイリングにおいて重要なポイントである。
【 カラー選び 】
キャラやブランドの特徴的な色をピックアップしカラーパターンを用意することが必要である。メインカラーとサブカラーを設定し、なるべくそれら２色をbaseとroadの色に反映させると簡単にキャラクターのイメージに近づかせることができるが、地図上にカラーを反映させた時の色のぶつかり合いや相性には注意すべきである。例えば、煉獄の事例では髪の毛の多くの配色を締める黄色と羽織や炎の呼吸の使い手であるということから連想される赤の２色をピックアップすることができる。しかしここで安易にbaseを赤系roadを黄色という具合に配色すると煉獄というよりマクドナルドのようなイメージに近づいてしまうためメインとサブの色を実直に面積の多い順から並び替える際に注意が必要となるのだ。
【 モチーフや特徴的要素の再現 】
キャラやブランドの特徴的なモチーフや柄などの要素を挙げ、地図上の道の張り巡らせ方や地形に着目しすり合わせる。例えば禰豆子では、竹筒・麻の葉模様、薄桃色の髪飾りが禰豆子を構成するイメージ要素である。中でも麻の葉模様は地図上の放射線状に広がる道をそれに見立てることができる。
【 イメージを崩さないフォント選び 】
キャラやブランドの性格やイメージを細かに研究し適切なフォントを選択。例えば、しのぶの事例では、胡蝶しのぶの外見から読み取れる華奢さや艶やかさ、羽織と隊服がおりなす曲線感が連想され、作中の言動やキャラクターデザインからは穏やかな表情とは裏腹に歯に衣着せぬ発言のミスマッチさがうみだすミステリアスさが読み取ることができる。そのため使用するフォントは曲線的な要素を多く含むものでありゴツゴツしたものよりも細身の幅のものを洗濯した。
キャラクターのキャラクターによっては、着物やアイテムではバランスが取れていた配色が地図上だとなかなかうまくマッチングしないor色のバランス崩壊が生じる場合がある。例えば、主人公の竈門炭治郎だと特商的な黒と緑の２色の市松模様のはおりが特徴的だが、その２色をメインカラーとしbaseとroadで使用するとroadの歪な線がスイカのようなイメージを持たせてしまったり単純にその２色を大面積の部分に使用することで他のエリアや要素で使用されるカラーを引き立てることが難しくなってしまう。
今回事例とした『鬼滅の刃』は時代設定は大正である。そのためより忠実にその時代背景にそい世界観をつくりあげるならばテクスチャや文字列の縦化などさらなる改善が必要となる。先行研究として慶応義塾大学の石川初研究会 吉田桃子氏がGEO ACTIVITY CONTESTに際して行った現代の江戸切絵図があげられる。アナログではあるものの江戸の地図を参考に江戸の地図特有の文字列の並びや運河の幅、地図のアングルはもちろんのことテキストのフォント感や何よりもベースの質感にこだわりを感じる。今後デジタルのツールであるMAPBOXにおいても先行事例にあるような細部まで手を凝らす必要があると考える。
また、今回作成した地図を含めこのようなデザイン感を重視した地図の使用用途として考えられるのは次の２点である。一点目は本来の地図の役割をそのままいかしイベントの公式HPなどの地図として使用したり位置情報ゲームや謎解きゲーム等でつかわれるアプリやパンフレット上の地図として使用することである。2点目は、地図の本来の機能よりも完全にデザインの面を重視し地図を模様やモチーフにみたててグッズ作成に活かすことである。
今回実践を通して、カラーの選択と配色、モチーフや特徴的要素の地図上での再現、イメージを崩さないフォント選びの３点が基本的であるが需要なポイントであると考える。しかしながら、ブランドイメージやキャラクターイメージをより反映させるには＃ディスカッションでも上がったようにテクスチャーや地図上に反映させる情報の取捨選択などの細部にも気を使うことが求められると考える。４年次の卒業論文にて今回上がった課題点をもとにブラッシュアップし手法の確立をおこなう。
松澤(2020), TVアニメ『鬼滅の刃』 公式キャラクターズブック 壱ノ巻, 集英社, 原作 吾峠呼世晴, ©︎吾峠呼世晴/集英社・アニプレックス・ufotable
木下(2021), TVアニメ『鬼滅の刃』 公式キャラクターズブック 参ノ巻, 集英社, 原作 吾峠呼世晴, ©︎吾峠呼世晴/集英社・アニプレックス・ufotable
吉田桃子(2016) 現代の江戸切絵図 慶応義塾大学石川初研究会
本研究を進めるにあたり地球社会共生学部の古橋大地教授をはじめ多くの方々より多大な助言を賜りました。厚く感謝を申し上げます。