地図・デザイン・可視化 −情報をわかりやすく伝えるために−

Slide 1

Slide 1 text

地図･デザイン･可視化 −情報をわかりやすく伝えるために− 2024.09.03｜Entertainment Computing 2024 @北海道情報⼤学 Hajime Kato (MIERUNE Inc.)

Slide 2

Slide 2 text

突然ですが、⼀昨⽇まで道東に同僚と⾏ってました

Slide 3

Slide 3 text

今ここ ©OpenStreetMap contributors

Slide 4

Slide 4 text

今こここのあたりに⾏きました！ ©OpenStreetMap contributors

Slide 5

Slide 5 text

本⼟最東端「納沙布岬」 ©OpenStreetMap contributors 納沙布岬(根室市) 筆者撮影

Slide 6

Slide 6 text

野付半島「トドワラ」 ©OpenStreetMap contributors トドワラ(別海町) 筆者撮影

Slide 7

Slide 7 text

野付半島「トドワラ」 ©OpenStreetMap contributors トドワラ(別海町) 筆者撮影

Slide 8

Slide 8 text

屈斜路湖を望む⽇の出 ©OpenStreetMap contributors 津別峠(津別町) 筆者撮影

Slide 9

Slide 9 text

加藤創 Hajime Kato 地図とかデザインとか @chizutodesign 改めまして、こんにちは！ ● グラフィックデザイナー ● 北海道に移住して３年⽬のひよっこ道⺠🐣

Slide 10

Slide 10 text

⾃⼰紹介会社‧事例紹介情報をわかりやすく伝えるには？気をつけていることおわりにもくじ 1 2 3 4 5

Slide 11

Slide 11 text

1 ⾃⼰紹介

Slide 12

Slide 12 text

2018年｜はじまり ●東京でデザイン制作会社に勤務 ●Twitterに⾃分が好きな地図や路線図をモチーフにした作品を趣味として投稿

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

2019年｜出会い ●MIERUNEという会社の社⻑からTwitterでDMが届く北海道で開催する位置情報系のカンファレンス(FOSS4G Hokkaido)で発表しませんか？

Slide 21

Slide 21 text

FOSS4G Hokkaido 2019 ●位置情報に関するオープンなツールのコミュニティイベント ●北海道に⾏ったことがないし、せっかくなら⾏ってみよう！ ●⼈⽣初のコミュニティイベントに参加！

Slide 22

Slide 22 text

INTERNET Watch なぜ北海道でGISベンチャーを起業したのか――ルーツは「FOSS4G Hokkaido」 https://internet.watch.impress.co.jp/img/iw/docs/1282/185/html/mierune08_o.jpg.html

Slide 23

Slide 23 text

https://www.youtube.com/watch?v=MOcSU1pDglY

Slide 24

Slide 24 text

2020-2021年｜続く ●その後も⾊々と制作、投稿

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

2022年｜北へ⾏こう ●MIERUNEにジョイン ○⼈⽣で初めて東京近郊を出て、北海道移住

Slide 32

Slide 32 text

幌⾒峠(札幌市) 筆者撮影

Slide 33

Slide 33 text

釧路湿原(釧路市) 筆者撮影

Slide 34

Slide 34 text

宗⾕岬(稚内市) 筆者撮影

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

2023年｜れきちずの制作 ●2018年、江⼾時代の Googleマップ⾵地図を作成 ●⼤きな反響をいただく

Slide 38

Slide 38 text

2023年｜れきちずの制作 ●社会的に街歩き‧街道歩きがブーム ○関連した書籍や地図などがある ●⾃分も昔から地図が好きで古い地図に興味があった ○しかし、問題があった

Slide 39

Slide 39 text

天保国絵図「武蔵国」国⽴公⽂書館デジタルアーカイブ⽂字の向きがバラバラ⽂字の可読性が低い「築地⼋町堀⽇本橋南絵図」国⽴国会図書館デジタルコレクション

Slide 40

Slide 40 text

2023年｜れきちずの制作 ●歴史‧地理にそこまで詳しくない‧興味がない⼈にとってわかりやすい地図を作る ●江⼾は複数先⾏事例があったため、より広い領域の地図とする ⇨現代の地図デザインで制作する

Slide 41

Slide 41 text

2023年｜れきちずの制作 ●GISソフトウェア「QGIS」や地図ライブラリ「MapLibre」などのオープンソースのソフトウェアを活⽤して、ウェブ地図サイトを制作 ●地図デザイン、アイコンも独⾃に作成 https://qgis.org https://maplibre.org

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

2023年｜れきちずの反響 ●⼤反響をいただき公開翌⽇に 10万ページビュー ●ネットメディアのみならず、 Abema‧テレビ朝⽇で放映、朝⽇新聞や雑誌に掲載朝⽇新聞 2023年12⽉16⽇⼣刊紙⾯

Slide 44

Slide 44 text

2023年｜出版 ●⼈⽣初となる書籍『地図とか路線図とか @chizutodesign』を出版

Slide 45

Slide 45 text

紀伊國屋書店新宿本店さん https://twitter.com/KinoShinjuku/status/1725074221469245720

Slide 46

Slide 46 text

2024年｜受賞 ●AMD Award'23 江並直美賞(新⼈賞)を受賞

Slide 47

Slide 47 text

https://amd.or.jp/award/29/

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

会社‧事例紹介 2

Slide 50

Slide 50 text

会社紹介 ●株式会社MIERUNE ●位置情報を扱う可視化の専⾨集団 ●2016年設⽴、北海道を拠点 ●31名(2024年8⽉現在)

Slide 51

Slide 51 text

様々なイベントを企画‧参加しています！

Slide 52

Slide 52 text

2024.08 カンファレンス参加 ●フロントエンドカンファレンス北海道 ●スポンサー参加 ●スピーカー登壇

Slide 53

Slide 53 text

2024.07 時計台イベント ●およそ⽉1回、札幌で開催する技術についてのオフラインイベント、｢MIERUNE BBQ｣ ●第10回を記念して札幌時計台を貸切！ ●70名ほどの参加者が集まった

Slide 54

Slide 54 text

2023.06 市電貸切 ●社内イベントで札幌を⾛る市電を貸切！ ●他にも札幌芸術の森、エスコンフィールドでも社内イベントを開催

Slide 55

Slide 55 text

もちろん、ビジネスもちゃんとやっています…

Slide 56

Slide 56 text

事例01｜れきちず ●現代⾵デザインの歴史地図サイト ●もともと個⼈の趣味で制作していたが、 2024年5⽉から会社プロジェクトとして移管 ●研究機関との連携、データのオープン化も進む ※国⽴情報学研究所 ROIS-DS⼈⽂学オープンデータ共同利⽤センター ※

Slide 57

Slide 57 text

れきちず

Slide 58

Slide 58 text

DEMO https://rekichizu.jp

Slide 59

Slide 59 text

事例02｜マイクラデータ作成 ●実在の都市をゲーム「マインクラフト」に再現 ●国交省の3D都市モデル「PLATEAU（プラトー）」のデータをボクセルと呼ばれるブロックに変換‧調整して作成 ●⼦ども向けワークショップにも協⼒

Slide 60

Slide 60 text

マインクラフトデータ作成（札幌市）

Slide 61

Slide 61 text

マインクラフトデータ作成（⾼松市）

Slide 62

Slide 62 text

マインクラフトワークショップ https://www.mlit.go.jp/plateau/journal/j038/

Slide 63

Slide 63 text

事例03｜⽂化財総覧WebGIS ●全国60万件の⽂化財を閲覧できる地図サイト ●研究者のみならず、⼀般の⽅も⾃由にアクセス可能 ●フィルタリング検索や詳細も参照できる

Slide 64

Slide 64 text

⽂化財総覧WebGIS（奈良⽂化財研究所） https://heritagemap.nabunken.go.jp/

Slide 65

Slide 65 text

DEMO https://heritagemap.nabunken.go.jp/

Slide 66

Slide 66 text

事例03｜AIST 3DDB Client ●産業技術総合研究所（AIST）が提供する3次元データベースを利⽤するためのウェブサイト ●さまざまな3Dモデルの検索‧閲覧‧ダウンロードが可能

Slide 67

Slide 67 text

AIST 3DDB Client（産業総合技術研究所）

Slide 68

Slide 68 text

DEMO https://mierune.github.io/aist_3ddb_client/

Slide 69

Slide 69 text

情報をわかりやすく伝えるためには？ 3

Slide 70

Slide 70 text

突然ですがここでクイズです

Slide 71

Slide 71 text

どちらのサイトのデザインが優れているでしょうか

Slide 72

Slide 72 text

　Amazon 1 https://www.amazon.co.jp/

Slide 73

Slide 73 text

楽天 2 https://www.rakuten.co.jp/

Slide 74

Slide 74 text

正解は…

Slide 75

Slide 75 text

両⽅正解

Slide 76

Slide 76 text

どちらも正解？ ●Amazon ○商品をすぐ発⾒できる ○購⼊がスムーズ ●楽天 ○ウィンドウショッピング、宝探し的な楽しさ https://www.amazon.co.jp/ https://www.rakuten.co.jp/

Slide 77

Slide 77 text

情報伝達に重要な２要素　　誰に伝えたいか？何を伝えたいか？ 1 2

Slide 78

Slide 78 text

誰に伝えたいか？ ●⾒る⼈はどんな⼈か？ ●ターゲットを明確に ○世代：⼦ども∕壮年∕⾼齢者 ○職業：学⽣∕会社員∕研究者などなど 1

Slide 79

Slide 79 text

●伝えたいメッセージは何か？ ●意図‧テーマを明確に ○情報：新しい技術∕歴史的なもの ○感情：驚き∕共感 ○⾏動：購⼊∕参加などなど何を伝えたいか？ 2

Slide 80

Slide 80 text

※フィクションです (写真は筆者撮影) マンションのチラシ

Slide 81

Slide 81 text

Photo ACよりスーパーのチラシ

Slide 82

Slide 82 text

実際の例

Slide 83

Slide 83 text

れきちず誰に伝えたいか？ ● 地図や歴史にそこまで興味がない⼈や教育現場など ● (もちろん興味がある⼈) ● (⽐較的、年齢層は⾼め) 何を伝えたいか？ ● 歴史‧地理の⾯⽩さ ● 地元の歴史を知ってもらう ● 旅先で活⽤してもらう

Slide 84

Slide 84 text

気をつけていること 4

Slide 85

Slide 85 text

情報を伝えるにあたって気をつけていることが２つあります

Slide 86

Slide 86 text

情報伝達で気をつけていること　伝え⽅伝える内容 1 2

Slide 87

Slide 87 text

情報伝達で気をつけていること　伝え⽅伝える内容 1 2

Slide 88

Slide 88 text

不安を扇動していないだろうか？

Slide 89

Slide 89 text

Slide 90

Slide 90 text

©Project PLATEAU / MLIT Japan 不安を扇動するもの不安を扇動していないか ※フィクションですええじゃないか発⽣マップ慶應3年10⽉7⽇ 1,234,567人 ●過度に不安を煽っていないだろうか？ ●不安を煽る内容‧⾒た⽬（デザイン、⾊使いなど）にしていないだろうか？

Slide 91

Slide 91 text

情報に対して責任は取れるか？

Slide 92

Slide 92 text

©Project PLATEAU / MLIT Japan 出した情報に対し責任は取れるか？どこかのアカウント @●●●dokokano_account 【拡散希望】このままだと●⽇後に栗まんじゅうで本州が覆い尽くされます！最⼤限の警戒を！ ※フィクションです

Slide 93

Slide 93 text

©Project PLATEAU / MLIT Japan 出した情報に対し責任は取れるか？どこかのアカウント @●●●dokokano_account 【拡散希望】このままだと●⽇後に栗まんじゅうで本州が覆い尽くされます！最⼤限の警戒を！ ※フィクションです ●⽣命‧財産に関わる責任を取れるか？ ●不確実な情報を伝えていいのか？

Slide 94

Slide 94 text

情報伝達で気をつけていること　伝え⽅伝える内容 1 2

Slide 95

Slide 95 text

差別や偏⾒‧ヘイトを助⻑しないか？

Slide 96

Slide 96 text

Slide 97

Slide 97 text

Slide 98

Slide 98 text

Slide 99

Slide 99 text

©Project PLATEAU / MLIT Japan 年収●●万円以上の割合 ※地図はイメージでフィクション 20%- 15-20% 10-15% 5-10% 0-5% 😔 😃 そこまで⾏かなくても、よく⾒るこういう地図 ●その情報を出す⽬的/意義は何か？ ●社会課題/ジャーナリズムとの境界は？

Slide 100

Slide 100 text

プライバシーを侵害していないか？

Slide 101

Slide 101 text

Slide 102

Slide 102 text

Slide 103

Slide 103 text

Slide 104

Slide 104 text

わかりやすく情報を伝えることは社会的意義がある⼀⽅で、責任も伴う

Slide 105

Slide 105 text

おわりに 5

Slide 106

Slide 106 text

地図･デザイン･可視化この３つには共通点があります

Slide 107

Slide 107 text

ある世界の情報をわかりやすく伝える地図

Slide 108

Slide 108 text

課題解決を⽬的として情報をわかりやすく伝えるデザイン（特にグラフィックデザイン）

Slide 109

Slide 109 text

⽬に⾒えない情報をわかりやすく伝える可視化

Slide 110

Slide 110 text

情報をわかりやすく伝えるには ●誰に、何を伝えたいか考える ●伝え⽅、伝える内容に気を付ける研究発表でも⽇常⽣活でも活⽤してみてください👍