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

Transcript

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

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

3. 今ここ ©OpenStreetMap contributors

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

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

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

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

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

9. 加藤 創 Hajime Kato 地図とかデザインとか @chizutodesign 改めまして、こんにちは！ • グラフィックデザイナー •

   北海道に移住して３年⽬のひよっこ道⺠🐣

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

    5

11. 1 ⾃⼰紹介

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

13. None
14. None
15. None
16. None
17. None
18. None
19. None

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

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

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

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

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

25. None
26. None
27. None
28. None
29. None
30. None

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

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

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

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

35. None
36. None

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

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

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

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

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

42. None

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

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

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

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

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

48. None

49. 会社‧事例紹介 2

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

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

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

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

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

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

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

57. れきちず

58. DEMO https://rekichizu.jp

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

74. 正解は…

75.   両⽅ 正解

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

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

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

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

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

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

82. 実際の例

83. れきちず 誰に伝えたいか？ • 地図や歴史にそこまで興味 がない⼈や教育現場など • (もちろん興味がある⼈) • (⽐較的、年齢層は⾼め) 何を伝えたいか？

    • 歴史‧地理の⾯⽩さ • 地元の歴史を知ってもらう • 旅先で活⽤してもらう

84. 気をつけていること 4

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

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

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

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

89. ©Project PLATEAU / MLIT Japan 不安を扇動するもの 不安を扇動していないか ※フィクションです ええじゃないか 発⽣マップ

    慶應3年10⽉7⽇ 1,234,567人

90. ©Project PLATEAU / MLIT Japan 不安を扇動するもの 不安を扇動していないか ※フィクションです ええじゃないか 発⽣マップ

    慶應3年10⽉7⽇ 1,234,567人 •過度に不安を煽っていないだろうか？ •不安を煽る内容‧⾒た⽬（デザイン、 ⾊使いなど）にしていないだろうか？

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

92. ©Project PLATEAU / MLIT Japan 出した情報に対し責任は取れるか？ どこかのアカウント @•••dokokano_account 【拡散希望】このままだと•⽇後に 栗まんじゅうで本州が覆い尽くされます！

    最⼤限の警戒を！ ※フィクションです

93. ©Project PLATEAU / MLIT Japan 出した情報に対し責任は取れるか？ どこかのアカウント @•••dokokano_account 【拡散希望】このままだと•⽇後に 栗まんじゅうで本州が覆い尽くされます！

    最⼤限の警戒を！ ※フィクションです •⽣命‧財産に関わる責任を取れるか？ •不確実な情報を伝えていいのか？

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

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

96. ©Project PLATEAU / MLIT Japan 差別や偏⾒‧ヘイトを助⻑しないか https://www.nichibenren.or.jp/document/statement/year/2022/220825_2.html

97. ©Project PLATEAU / MLIT Japan 差別や偏⾒‧ヘイトを助⻑しないか https://www3.nhk.or.jp/news/html/20230628/k10014111941000.html

98. ©Project PLATEAU / MLIT Japan そこまで⾏かなくても、よく⾒るこういう地図 年収••万円以上の割合 ※地図はイメージでフィクション 20%- 15-20%

    10-15% 5-10% 0-5% 😔 😃

99. ©Project PLATEAU / MLIT Japan 年収••万円以上の割合 ※地図はイメージでフィクション 20%- 15-20% 10-15%

    5-10% 0-5% 😔 😃 そこまで⾏かなくても、よく⾒るこういう地図 •その情報を出す⽬的/意義は何か？ •社会課題/ジャーナリズムとの境界は？

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

101. ©Project PLATEAU / MLIT Japan プライバシーを侵害していないか？ http://www.jame.or.jp/portrait_rights/case_law/

102. ©Project PLATEAU / MLIT Japan ※フィクションです そこまで⾏かなくても、たとえば… •加藤の⽣活

103. ©Project PLATEAU / MLIT Japan ※フィクションです そこまで⾏かなくても、たとえば… •加藤の⽣活 •その情報は公開していいものか？

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

105. おわりに 5

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

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

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

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

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