こんにちは。Mapbox Japanのインターン生の吉田、長久、上原です。
この度、インターン生のミニプロジェクトとして、K-POPアイドルのMVが撮影されたスポットを紹介していくストーリーテリング・マップを作成したので紹介させていただきます。Mapbox Japanのインターン生3人でMapbox Studio、Mapbox Story Tellingを用いてマップをデザインしました。
Mapbox Story Tellingの始め方についてはこちらをご覧ください。
作成したストーリーテリングマップはこちら
制作手順
Mapbox Studioでオリジナルマップを作成
マップは視覚的情報を最低限にしたかったため、GreenSpace、 Water、 Buildingsのみに色をつけました。また、マーカーをマップ上に常に出しておきたかったため、ピン画像を紹介スポットの位置に出るよう設定しました。以下手順です。
- LayersのAdd new layerからcostom layerを選び、Upload dataでMBTiles、KML、GPX、GeoJSON、Shapefile(zip圧縮)、csvファイルを挿入。(今回はcsvファイルを使用)
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/6524a9adf1003b6b2bdfc404_T2HEhUQfyU7_6Ac7JGd7U15X3BlKSbxDwSSXZVJoH3Q1zwKB1rY6ubJr393MFuiAQGsAN26nMZo_mnzsJuV2jbLHBg4yE9WeGNhlVivuTkNCqj-7hCkPpGFk4llD6EbheNmre1-5yXdrlNKqQ2_eoAs.png)
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/6524acd8c406531634aafd55_urHSr_ckePv09h5EkD26nvolLkI8kWCax7urieJpvcGdao7eLi6g-aPLrb0JP38OUDKfZyqH5nltV2EiwyK4DnnTHG2YE_yKpCuLala5STbfjm33xc6SQH8oXH6d9NjniOq3gZ_uXVb6tmEnRB12I7g.gif)
- Select dataを選択しTypeを「Symbol」にし、Styleに移動してIconを選択。
- Icon imageで追加した画像を選択する。
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/6524a9ac826d16ca77ff04ee_cMJOVG7ntJ1V2j91K0EsEyPbhMJI1eaKKdbi5acT5UIqdFHTFEIAjxlNwg3u7gPYjWWpO_UV0_luGpaF4rSqDksLtSBMPs_mfEFEIp6s45RjkPnagKliPdLKmZYmBLVMaholnxsg8crbK9Q3GVtPLoU.gif)
そうするとこのようなマップが出来上がります。
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/6524a9afee775bb2ecf3d84b_xXI4vNWw-ijfixUxLJVaATMVAmcmnVXUK20LlGuhBkuiUh6c_TBS05ru4YVDdNLUZaMy1yy15PYoifSsaSZnuqZeOch-w4enQhrY8S0DAQVcnc98aj6V5AVot4MjiqNO8oL2qjsKFTo9r9tBlAaywYc.png)
Story Telling Map作成
マーカーはMapbox Studioで出しているため、セクションごとに緯度経度に合わせてマーカーが出る’’showMarkers’をfalseにし、画面右下に全体マップが表示される’inset’もfalseにしています。
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/6524a9ac96d4151055bb7c78_-Q8zIUd4HaaT9nsOqXfUXHq_tEnsoG7UJOkVt-CGcsrDAlQYB7koQvM3HcQF3ErQGdyyEOGT6wUNDFl1IRf3NMl1LbA1zQVDsuGhYnwWnQDPi-pE8bEzw-9fCyh144rbvGd2xz1MmZPG6EtbemKKVlA.png)
また、掲載している画像は、二次利用可能な画像、もしくはLicenseがCC BY-SAであるMapillaryの画像を使用しています。
GitHub Pagesにてアップロード
このストーリーテリングマップはGitHub(Furuhashi lab)のGitHub Pagesにて公開しています。ぜひご覧ください。
以上が制作手順になります。
マップ作成者である吉田が好きなK-POPのテーマだったため、スポット選定からマップ作成まで楽しく制作できました。マップの見せ方、ライセンス周りに特に注意して制作に当たりました。
◆楽しかった点
楽しかったのは地点の選定でした。自分たちの趣味や知識をベースにアイドルごとに書き出した上で、地図で映えるように日韓様々な地点を選定していく作業は心躍る時間でした。もちろん、マップ化するにあたり位置情報の整理やキャプションの執筆など付随する作業もありましたが、自分の興味のある分野を切り口にすることで能動的に学びながら取り組めたと感じています。
◆大変だった点
難しかった点は写真の選出でした。いいな!と思った画像が二次利用不可だったことが多かったです。その後、Mapillaryから探すように切り替えましたが、それも時間がかかりました。Mapillaryはアカウントを持っていれば誰でも投稿でき、写真の二次利用も可能ですが、その分写真の質にバラつきがあったり、欲しい画角の情報がなかったり、画像選定に苦労しました。しかし、苦労した分、ライセンスへの理解やリテラシーについて再確認できたように思います!
このストーリーテリングマップ制作を機に、現在のテーマから派生したものも作りたいなと考えています。皆さんもMapbox Story Telling機能を使って、自分の好きなテーマでストーリーテリングマップを作ってみてはいかがでしょうか!
Mapbox Story Tellingの始め方についてはこちらをご覧ください。