Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
231007_tokyor_kato
Search
Hajime Kato
October 07, 2023
Design
6
1.5k
231007_tokyor_kato
第109回R勉強会@東京にて発表した、
「デザイナーが可視化する上でやってきたこと」のスライドです。
Hajime Kato
October 07, 2023
Tweet
Share
More Decks by Hajime Kato
See All by Hajime Kato
地図・デザイン・可視化 −情報をわかりやすく伝えるために−
hjmkth
2
530
現代風歴史マップ「れきちず」フロントエンドのウラとオモテ|フロントエンドカンファレンス北海道2024 / frontend of Rekichizu
hjmkth
0
210
240803_tochiji-hai_hackathon_kato
hjmkth
2
240
231229_Datavizjp_kato
hjmkth
1
1k
231206_Book-launch-event_kato
hjmkth
2
1.4k
231129_FOSS4G-ASIA-2023_kato
hjmkth
1
500
230909_chiriin-fc_kato
hjmkth
0
1.3k
230904_Geo-Lang_kato
hjmkth
0
1.5k
230726_MIERUNE BBQ #03_kato
hjmkth
1
440
Other Decks in Design
See All in Design
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜 移動・不動産領域の取り組み
tmtgtkhs
0
160
202409_会社概要資料_Englishver.pdf
zakkerooni
0
210
LayerX DesignersDeck
layerx
PRO
0
920
ABEMAの進化 – 複雑化したコンテンツ構造とUI改善への道 – / abema-ui-improve
cyberagentdevelopers
PRO
2
470
コンセプトで経営・事業・組織を動かす、 Ameba20周年ブランディング / ameba-20th-branding
cyberagentdevelopers
PRO
1
420
Managing Design Systems (Smashing NY 2024)
nathanacurtis
2
340
20240921-図書館の実空間とデジタル資源の接点をデザインする-dtk55-Designing-the-interface-between-the-library's-physical-space-and-digital-resources
majimasachi
0
380
Charcoal 2.0: デザインシステムの基盤を再構築
godlingkogami
1
550
ふわっとはじめるSSOT – SSOT for Communication Design
sekiguchiy
0
1.2k
20241019-CUD友の会「困った!を解決するデザイン改訂版」交流会
majimasachi
0
290
(第1回) アーキテクト・テックリード育成講座
masakaya
0
110
ネーミングの極意 - その名は体を現していますか? -
kakukoki
2
400
Featured
See All Featured
Navigating Team Friction
lara
183
15k
Designing Experiences People Love
moore
138
23k
Automating Front-end Workflow
addyosmani
1366
200k
Building Better People: How to give real-time feedback that sticks.
wjessup
365
19k
Site-Speed That Sticks
csswizardry
2
190
A Philosophy of Restraint
colly
203
16k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
For a Future-Friendly Web
brad_frost
175
9.4k
Documentation Writing (for coders)
carmenintech
66
4.5k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
26
1.9k
Building Adaptive Systems
keathley
38
2.3k
Transcript
デザイナーが可視化する上で やってきたこと 地図とかデザインとか(加藤創) 藻岩山から札幌市中心部を望む 09/27撮影
©OpenStreetMap contributors 自己紹介・会社紹介 可視化で重要だと思うこと 可視化で気をつけていること まとめ 01 02 03 04
©OpenStreetMap contributors 01 自己紹介
©Project PLATEAU / MLIT Japan デザイナー 加藤 創 Hajime Kato
©Project PLATEAU / MLIT Japan • 千葉県市川市生まれ • 去年まで東京都江東区に住んでいました •
去年の夏に北海道の企業(MIERUNE)に 転職し、札幌市に住んでいます
©Project PLATEAU / MLIT Japan © MIERUNE | © MapTiler
© OpenStreetMap contributors
©Project PLATEAU / MLIT Japan 7月に会社のメンバーと 行って来ました
©Project PLATEAU / MLIT Japan © MIERUNE | © MapTiler
© OpenStreetMap contributors 札幌 稚内・宗谷岬 “日本最北の地” 340km
©Project PLATEAU / MLIT Japan © MIERUNE | © MapTiler
© OpenStreetMap contributors 宗谷岬 07/23撮影
©Project PLATEAU / MLIT Japan 個人の趣味でこんなもの を作ったり
©Project PLATEAU / MLIT Japan
©Project PLATEAU / MLIT Japan
©Project PLATEAU / MLIT Japan
©Project PLATEAU / MLIT Japan
©Project PLATEAU / MLIT Japan
©Project PLATEAU / MLIT Japan
©Project PLATEAU / MLIT Japan
©Project PLATEAU / MLIT Japan
©Project PLATEAU / MLIT Japan 最近、こんなサイトも 作りました🙌
©Project PLATEAU / MLIT Japan
©Project PLATEAU / MLIT Japan 「れきちず」 https://rekichizu.jp/
©OpenStreetMap contributors ここから 会社の話を少しだけ🏢
©Project PLATEAU / MLIT Japan
©Project PLATEAU / MLIT Japan みえるね 位置情報に関する可視化
©Project PLATEAU / MLIT Japan オフライン/オンラインイベントをやったり… Web技術に関する オフラインイベント@札幌 「MIERUNE BBQ」
位置情報技術のユルい オンライン勉強会 「MIERUNE JCT」
©Project PLATEAU / MLIT Japan 国際カンファレンスに参加して登壇したり… FOSS4G 2023 Prizren (コソボ)
©Project PLATEAU / MLIT Japan 札幌の市電を貸し切って社内イベントをしたり
©Project PLATEAU / MLIT Japan イベントしてばかりじゃ…?🤔 いえ、ちゃんと仕事もしてます!😀
©Project PLATEAU / MLIT Japan G7高松都市大臣会合 minecraftデータ作成
©Project PLATEAU / MLIT Japan 林野庁 森林データ処理・Web開発
©Project PLATEAU / MLIT Japan などなど…いろいろやってます noteやXで情報発信中!
©Project PLATEAU / MLIT Japan では、加藤は何やってるの?😏
©Project PLATEAU / MLIT Japan 会社のデザインに関わるものを 作ってます!🎨
©Project PLATEAU / MLIT Japan
©Project PLATEAU / MLIT Japan 宣伝が長くなってしまいました🙇 ここからが本題になります
©OpenStreetMap contributors 02 可視化で重要だと思うこと
©Project PLATEAU / MLIT Japan ❶ 目的
©Project PLATEAU / MLIT Japan 誰に伝えたいか?
©Project PLATEAU / MLIT Japan 誰に伝えたいか? 見る人(ターゲット)によって変わる
©Project PLATEAU / MLIT Japan 何を伝えたいか?
©Project PLATEAU / MLIT Japan 何を伝えたいか? 意図・メッセージを明白にする
©Project PLATEAU / MLIT Japan ❷ 方法
©Project PLATEAU / MLIT Japan どう表現するか?
©Project PLATEAU / MLIT Japan どう表現するか? いろいろな可視化の方法がある りんご もも なし
いちご みかん
©Project PLATEAU / MLIT Japan 実例1:コンビニ地図
©Project PLATEAU / MLIT Japan よく見かける、こういう地図 セブン-イレブン ファミリーマート ローソン ※地図を
制作した 2018年 当時
©Project PLATEAU / MLIT Japan 例えば奈良県… 緑のファミマが 優勢なのかなと思いきや 悪いとは言いません、悪いとは言わないですが… ※地図を
制作した 2018年 当時
©Project PLATEAU / MLIT Japan 悪いとは言いません、悪いとは言わないですが… セブン 140店 ファミマ 144店
ローソン 140店 ※地図を 制作した 2018年 当時
©Project PLATEAU / MLIT Japan 悪いとは言いません、悪いとは言わないですが… セブン 140店 ファミマ 144店
ローソン 140店 3社がほぼ拮抗している のに、地図では緑一色に 塗られてしまっている! ※地図を 制作した 2018年 当時
©Project PLATEAU / MLIT Japan セブン-イレブン ファミリーマート ローソン この表現で良いのだろうか? 悪いとは言いません、悪いとは言わないですが…
©Project PLATEAU / MLIT Japan そんなわけで、こんな表現を考えてみた。 セブン-イレブン ファミリーマート ローソン 店舗数の割合を、
光の3原色(RGB)を 用いて表現
©Project PLATEAU / MLIT Japan そんなわけで、こんな表現を考えてみた。 セブン-イレブン ファミリーマート ローソン 赤くなるほど
セブン優勢 3社拮抗だと グレーに
©Project PLATEAU / MLIT Japan そんなわけで、こんな表現を考えてみた。 ※地図を 制作した 2018年 当時
セブン-イレブン ファミリーマート ローソン
©Project PLATEAU / MLIT Japan そんなわけで、こんな表現を考えてみた。 ※地図を 制作した 2018年 当時
セブン-イレブン ファミリーマート ローソン 3社が拮抗する奈良県は ほぼグレーで表される
©Project PLATEAU / MLIT Japan 一応こちらのバージョンも… ※地図を 制作した 2018年 当時
セブン-イレブン ファミリーマート ローソン
©Project PLATEAU / MLIT Japan ただ、弱点もある ※地図を 制作した 2018年 当時
セブン-イレブン ファミリーマート ローソン 3原色ということで 3社以上表現できず、 セイコーマートが強い 北海道は表現できない
©Project PLATEAU / MLIT Japan 実例2:乗降客数路線図
©Project PLATEAU / MLIT Japan 東京メトロの乗降客数 ※地図を 制作した 2018年 当時
https://www.tokyometro.jp/corporate/enterprise/passenger_rail/transportation/passengers/2018.html
©Project PLATEAU / MLIT Japan 東京メトロの乗降客数 ※地図を 制作した 2018年 当時
池袋 大手町 北千住 銀座 新橋
©Project PLATEAU / MLIT Japan 東京メトロの乗降客数 ※地図を 制作した 2018年 当時
575,043 356,634 292,684 265,325 253,678 池袋 大手町 北千住 銀座 新橋 まだ見にくい…😭
©Project PLATEAU / MLIT Japan 東京メトロの乗降客数 ※地図を 制作した 2018年 当時
都心部の駅が 重なってよく わからない😢 データ:国土交通省「国土数値情報」
©Project PLATEAU / MLIT Japan 東京メトロの乗降客数 ※地図を 制作した 2018年 当時
路線図にした ことでわかり やすくなった🤗
©Project PLATEAU / MLIT Japan
©OpenStreetMap contributors 03 可視化で気をつけていること
©Project PLATEAU / MLIT Japan ❶ 伝え方
©Project PLATEAU / MLIT Japan 不安を扇動するもの
©Project PLATEAU / MLIT Japan 不安を煽動するもの ええじゃないか 発生マップ 慶應3年10月7日 1,234,567人
※フィクションです
©Project PLATEAU / MLIT Japan 不安を煽動するもの ええじゃないか 発生マップ 慶應3年10月7日 1,234,567人
※フィクションです 必要以上に煽る必要はあるか?
©Project PLATEAU / MLIT Japan 警戒を呼びかけるもの
©Project PLATEAU / MLIT Japan 警戒を呼びかけるもの どこかのアカウント @•••dokokano_account 【拡散希望】このままだと•日後に 栗まんじゅうで本州が覆い尽くされます!
今すぐ避難の準備を! ※フィクションです
©Project PLATEAU / MLIT Japan 警戒を呼びかけるもの どこかのアカウント @•••dokokano_account 【拡散希望】このままだと•日後に 栗まんじゅうで本州が覆い尽くされます!
今すぐ避難の準備を! 生命・財産に関わる責任を取れるか? ※フィクションです
©Project PLATEAU / MLIT Japan ❷ 伝える内容
©Project PLATEAU / MLIT Japan 差別や偏見・ヘイトを 助長するもの
©Project PLATEAU / MLIT Japan 差別や偏見・ヘイトを助長するもの https://www.nichibenren.or.jp/document/statement/year/2022/220825_2.html
©Project PLATEAU / MLIT Japan 差別や偏見・ヘイトを助長するもの https://www3.nhk.or.jp/news/html/20230628/k10014111941000.html
©Project PLATEAU / MLIT Japan 年収••万円以上の割合 ※地図はイメージでフィクション そこまで行かなくても、よくあるこういう地図 20%- 15-20%
10-15% 5-10% 0-5% 😔 😃
©Project PLATEAU / MLIT Japan そこまで行かなくても、よくあるこういう地図 20%- 15-20% 10-15% 5-10%
0-5% 😔 😃 社会課題・ジャーナリズムとの境界は? 年収••万円以上の割合 ※地図はイメージでフィクション
©Project PLATEAU / MLIT Japan プライバシーに関わるもの
©Project PLATEAU / MLIT Japan プライバシーに関わるもの http://www.jame.or.jp/portrait_rights/case_law/
©Project PLATEAU / MLIT Japan そこまで行かなくても、たとえば… •加藤の生活 ※フィクションです
©Project PLATEAU / MLIT Japan •加藤の生活 ※フィクションです その情報は公開していいものか? そこまで行かなくても、たとえば…
©OpenStreetMap contributors 04 まとめ
©OpenStreetMap contributors 目的をもって可視化する • 誰に伝えたいか? • 何を伝えたいか?
©OpenStreetMap contributors 気をつけて可視化する • 不安を煽動していないか? • 警戒を呼びかけていないか? • 差別や偏見・ヘイトを助長していないか? •
プライバシーを侵害していないか?
©OpenStreetMap contributors 可視化は利器にも、 凶器にもなりうる
©OpenStreetMap contributors いろいろ可視化して みてください! Enjoy👍