Upgrade to Pro — share decks privately, control downloads, hide ads and more …

231007_tokyor_kato

Hajime Kato
October 07, 2023

 231007_tokyor_kato

第109回R勉強会@東京にて発表した、
「デザイナーが可視化する上でやってきたこと」のスライドです。

Hajime Kato

October 07, 2023
Tweet

More Decks by Hajime Kato

Other Decks in Design

Transcript

  1. デザイナーが可視化する上で
    やってきたこと
    地図とかデザインとか(加藤創)
    藻岩山から札幌市中心部を望む 09/27撮影

    View full-size slide

  2. ©OpenStreetMap contributors
    自己紹介・会社紹介
    可視化で重要だと思うこと
    可視化で気をつけていること
    まとめ
    01
    02
    03
    04

    View full-size slide

  3. ©OpenStreetMap contributors
    01
    自己紹介

    View full-size slide

  4. ©Project PLATEAU / MLIT Japan
    デザイナー
    加藤 創
    Hajime Kato

    View full-size slide

  5. ©Project PLATEAU / MLIT Japan
    ● 千葉県市川市生まれ
    ● 去年まで東京都江東区に住んでいました
    ● 去年の夏に北海道の企業(MIERUNE)に
    転職し、札幌市に住んでいます

    View full-size slide

  6. ©Project PLATEAU / MLIT Japan
    © MIERUNE | © MapTiler © OpenStreetMap contributors

    View full-size slide

  7. ©Project PLATEAU / MLIT Japan
    7月に会社のメンバーと
    行って来ました

    View full-size slide

  8. ©Project PLATEAU / MLIT Japan
    © MIERUNE | © MapTiler © OpenStreetMap contributors
    札幌
    稚内・宗谷岬
    “日本最北の地”
    340km

    View full-size slide

  9. ©Project PLATEAU / MLIT Japan
    © MIERUNE | © MapTiler
    © OpenStreetMap contributors
    宗谷岬 07/23撮影

    View full-size slide

  10. ©Project PLATEAU / MLIT Japan
    個人の趣味でこんなもの
    を作ったり

    View full-size slide

  11. ©Project PLATEAU / MLIT Japan

    View full-size slide

  12. ©Project PLATEAU / MLIT Japan

    View full-size slide

  13. ©Project PLATEAU / MLIT Japan

    View full-size slide

  14. ©Project PLATEAU / MLIT Japan

    View full-size slide

  15. ©Project PLATEAU / MLIT Japan

    View full-size slide

  16. ©Project PLATEAU / MLIT Japan

    View full-size slide

  17. ©Project PLATEAU / MLIT Japan

    View full-size slide

  18. ©Project PLATEAU / MLIT Japan

    View full-size slide

  19. ©Project PLATEAU / MLIT Japan
    最近、こんなサイトも
    作りました🙌

    View full-size slide

  20. ©Project PLATEAU / MLIT Japan

    View full-size slide

  21. ©Project PLATEAU / MLIT Japan
    「れきちず」
    https://rekichizu.jp/

    View full-size slide

  22. ©OpenStreetMap contributors
    ここから
    会社の話を少しだけ🏢

    View full-size slide

  23. ©Project PLATEAU / MLIT Japan

    View full-size slide

  24. ©Project PLATEAU / MLIT Japan
    みえるね
    位置情報に関する可視化

    View full-size slide

  25. ©Project PLATEAU / MLIT Japan
    オフライン/オンラインイベントをやったり…
    Web技術に関する
    オフラインイベント@札幌
    「MIERUNE BBQ」
    位置情報技術のユルい
    オンライン勉強会
    「MIERUNE JCT」

    View full-size slide

  26. ©Project PLATEAU / MLIT Japan
    国際カンファレンスに参加して登壇したり…
    FOSS4G 2023 Prizren (コソボ)

    View full-size slide

  27. ©Project PLATEAU / MLIT Japan
    札幌の市電を貸し切って社内イベントをしたり

    View full-size slide

  28. ©Project PLATEAU / MLIT Japan
    イベントしてばかりじゃ…?🤔
    いえ、ちゃんと仕事もしてます!😀

    View full-size slide

  29. ©Project PLATEAU / MLIT Japan
    G7高松都市大臣会合 minecraftデータ作成

    View full-size slide

  30. ©Project PLATEAU / MLIT Japan
    林野庁 森林データ処理・Web開発

    View full-size slide

  31. ©Project PLATEAU / MLIT Japan
    などなど…いろいろやってます
    noteやXで情報発信中!

    View full-size slide

  32. ©Project PLATEAU / MLIT Japan
    では、加藤は何やってるの?😏

    View full-size slide

  33. ©Project PLATEAU / MLIT Japan
    会社のデザインに関わるものを
    作ってます!🎨

    View full-size slide

  34. ©Project PLATEAU / MLIT Japan

    View full-size slide

  35. ©Project PLATEAU / MLIT Japan
    宣伝が長くなってしまいました🙇
    ここからが本題になります

    View full-size slide

  36. ©OpenStreetMap contributors
    02
    可視化で重要だと思うこと

    View full-size slide

  37. ©Project PLATEAU / MLIT Japan
    ❶ 目的 

    View full-size slide

  38. ©Project PLATEAU / MLIT Japan
    誰に伝えたいか?

    View full-size slide

  39. ©Project PLATEAU / MLIT Japan
    誰に伝えたいか?
      見る人(ターゲット)によって変わる

    View full-size slide

  40. ©Project PLATEAU / MLIT Japan
    何を伝えたいか?

    View full-size slide

  41. ©Project PLATEAU / MLIT Japan
    何を伝えたいか?
      意図・メッセージを明白にする

    View full-size slide

  42. ©Project PLATEAU / MLIT Japan
    ❷ 方法 

    View full-size slide

  43. ©Project PLATEAU / MLIT Japan
    どう表現するか?

    View full-size slide

  44. ©Project PLATEAU / MLIT Japan
    どう表現するか?
      いろいろな可視化の方法がある
    りんご
    もも
    なし
    いちご
    みかん

    View full-size slide

  45. ©Project PLATEAU / MLIT Japan
    実例1:コンビニ地図

    View full-size slide

  46. ©Project PLATEAU / MLIT Japan
    よく見かける、こういう地図
    セブン-イレブン
    ファミリーマート
    ローソン
    ※地図を
    制作した
    2018年
    当時

    View full-size slide

  47. ©Project PLATEAU / MLIT Japan
    例えば奈良県…
    緑のファミマが
    優勢なのかなと思いきや
    悪いとは言いません、悪いとは言わないですが…
    ※地図を
    制作した
    2018年
    当時

    View full-size slide

  48. ©Project PLATEAU / MLIT Japan
    悪いとは言いません、悪いとは言わないですが…
    セブン
    140店
    ファミマ
    144店
    ローソン
    140店
    ※地図を
    制作した
    2018年
    当時

    View full-size slide

  49. ©Project PLATEAU / MLIT Japan
    悪いとは言いません、悪いとは言わないですが…
    セブン
    140店
    ファミマ
    144店
    ローソン
    140店
    3社がほぼ拮抗している
    のに、地図では緑一色に
    塗られてしまっている!
    ※地図を
    制作した
    2018年
    当時

    View full-size slide

  50. ©Project PLATEAU / MLIT Japan
    セブン-イレブン
    ファミリーマート
    ローソン
      この表現で良いのだろうか?
    悪いとは言いません、悪いとは言わないですが…

    View full-size slide

  51. ©Project PLATEAU / MLIT Japan
    そんなわけで、こんな表現を考えてみた。
    セブン-イレブン
    ファミリーマート ローソン
    店舗数の割合を、
    光の3原色(RGB)を
    用いて表現

    View full-size slide

  52. ©Project PLATEAU / MLIT Japan
    そんなわけで、こんな表現を考えてみた。
    セブン-イレブン
    ファミリーマート ローソン
    赤くなるほど
    セブン優勢
    3社拮抗だと
    グレーに

    View full-size slide

  53. ©Project PLATEAU / MLIT Japan
    そんなわけで、こんな表現を考えてみた。
    ※地図を
    制作した
    2018年
    当時
    セブン-イレブン
    ファミリーマート ローソン

    View full-size slide

  54. ©Project PLATEAU / MLIT Japan
    そんなわけで、こんな表現を考えてみた。
    ※地図を
    制作した
    2018年
    当時
    セブン-イレブン
    ファミリーマート ローソン
    3社が拮抗する奈良県は
    ほぼグレーで表される

    View full-size slide

  55. ©Project PLATEAU / MLIT Japan
    一応こちらのバージョンも…
    ※地図を
    制作した
    2018年
    当時
    セブン-イレブン
    ファミリーマート ローソン

    View full-size slide

  56. ©Project PLATEAU / MLIT Japan
    ただ、弱点もある
    ※地図を
    制作した
    2018年
    当時
    セブン-イレブン
    ファミリーマート ローソン
    3原色ということで
    3社以上表現できず、
    セイコーマートが強い
    北海道は表現できない

    View full-size slide

  57. ©Project PLATEAU / MLIT Japan
    実例2:乗降客数路線図

    View full-size slide

  58. ©Project PLATEAU / MLIT Japan
    東京メトロの乗降客数
    ※地図を
    制作した
    2018年
    当時
    https://www.tokyometro.jp/corporate/enterprise/passenger_rail/transportation/passengers/2018.html

    View full-size slide

  59. ©Project PLATEAU / MLIT Japan
    東京メトロの乗降客数
    ※地図を
    制作した
    2018年
    当時
    池袋
    大手町
    北千住
    銀座
    新橋

    View full-size slide

  60. ©Project PLATEAU / MLIT Japan
    東京メトロの乗降客数
    ※地図を
    制作した
    2018年
    当時
    575,043
    356,634
    292,684
    265,325
    253,678
    池袋
    大手町
    北千住
    銀座
    新橋
    まだ見にくい…😭

    View full-size slide

  61. ©Project PLATEAU / MLIT Japan
    東京メトロの乗降客数
    ※地図を
    制作した
    2018年
    当時
    都心部の駅が
    重なってよく
    わからない😢
    データ:国土交通省「国土数値情報」

    View full-size slide

  62. ©Project PLATEAU / MLIT Japan
    東京メトロの乗降客数
    ※地図を
    制作した
    2018年
    当時
    路線図にした
    ことでわかり
    やすくなった🤗

    View full-size slide

  63. ©Project PLATEAU / MLIT Japan

    View full-size slide

  64. ©OpenStreetMap contributors
    03
    可視化で気をつけていること

    View full-size slide

  65. ©Project PLATEAU / MLIT Japan
    ❶ 伝え方 

    View full-size slide

  66. ©Project PLATEAU / MLIT Japan
    不安を扇動するもの

    View full-size slide

  67. ©Project PLATEAU / MLIT Japan
    不安を煽動するもの
    ええじゃないか 発生マップ
    慶應3年10月7日
    1,234,567人
    ※フィクションです

    View full-size slide

  68. ©Project PLATEAU / MLIT Japan
    不安を煽動するもの
    ええじゃないか 発生マップ
    慶應3年10月7日
    1,234,567人
    ※フィクションです
      必要以上に煽る必要はあるか?

    View full-size slide

  69. ©Project PLATEAU / MLIT Japan
    警戒を呼びかけるもの

    View full-size slide

  70. ©Project PLATEAU / MLIT Japan
    警戒を呼びかけるもの
    どこかのアカウント
    @●●●dokokano_account
    【拡散希望】このままだと●日後に
    栗まんじゅうで本州が覆い尽くされます!
    今すぐ避難の準備を!
    ※フィクションです

    View full-size slide

  71. ©Project PLATEAU / MLIT Japan
    警戒を呼びかけるもの
    どこかのアカウント
    @●●●dokokano_account
    【拡散希望】このままだと●日後に
    栗まんじゅうで本州が覆い尽くされます!
    今すぐ避難の準備を!
       生命・財産に関わる責任を取れるか?
    ※フィクションです

    View full-size slide

  72. ©Project PLATEAU / MLIT Japan
    ❷ 伝える内容 

    View full-size slide

  73. ©Project PLATEAU / MLIT Japan
    差別や偏見・ヘイトを
    助長するもの

    View full-size slide

  74. ©Project PLATEAU / MLIT Japan
    差別や偏見・ヘイトを助長するもの
    https://www.nichibenren.or.jp/document/statement/year/2022/220825_2.html

    View full-size slide

  75. ©Project PLATEAU / MLIT Japan
    差別や偏見・ヘイトを助長するもの
    https://www3.nhk.or.jp/news/html/20230628/k10014111941000.html

    View full-size slide

  76. ©Project PLATEAU / MLIT Japan
    年収●●万円以上の割合
    ※地図はイメージでフィクション
    そこまで行かなくても、よくあるこういう地図
    20%-
    15-20%
    10-15%
    5-10%
    0-5%
    😔
    😃

    View full-size slide

  77. ©Project PLATEAU / MLIT Japan
    そこまで行かなくても、よくあるこういう地図
    20%-
    15-20%
    10-15%
    5-10%
    0-5%
    😔
    😃
       社会課題・ジャーナリズムとの境界は?
    年収●●万円以上の割合
    ※地図はイメージでフィクション

    View full-size slide

  78. ©Project PLATEAU / MLIT Japan
    プライバシーに関わるもの

    View full-size slide

  79. ©Project PLATEAU / MLIT Japan
    プライバシーに関わるもの
    http://www.jame.or.jp/portrait_rights/case_law/

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  82. ©OpenStreetMap contributors
    04
    まとめ

    View full-size slide

  83. ©OpenStreetMap contributors
    目的をもって可視化する
    ● 誰に伝えたいか?
    ● 何を伝えたいか?

    View full-size slide

  84. ©OpenStreetMap contributors
    気をつけて可視化する
    ● 不安を煽動していないか?
    ● 警戒を呼びかけていないか?
    ● 差別や偏見・ヘイトを助長していないか?
    ● プライバシーを侵害していないか?

    View full-size slide

  85. ©OpenStreetMap contributors
    可視化は利器にも、
    凶器にもなりうる

    View full-size slide

  86. ©OpenStreetMap contributors
    いろいろ可視化して
    みてください!
    Enjoy👍

    View full-size slide