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.6k
231007_tokyor_kato
第109回R勉強会@東京にて発表した、
「デザイナーが可視化する上でやってきたこと」のスライドです。
Hajime Kato
October 07, 2023
Tweet
Share
More Decks by Hajime Kato
See All by Hajime Kato
日本最大級!地図・技術界隈の文化祭「FOSS4G 2024 Japan」に参加した話
hjmkth
1
15
地図・デザイン・可視化 −情報をわかりやすく伝えるために−
hjmkth
2
560
現代風歴史マップ「れきちず」フロントエンドのウラとオモテ|フロントエンドカンファレンス北海道2024 / frontend of Rekichizu
hjmkth
0
220
240803_tochiji-hai_hackathon_kato
hjmkth
2
250
231229_Datavizjp_kato
hjmkth
1
1.1k
231206_Book-launch-event_kato
hjmkth
2
1.4k
231129_FOSS4G-ASIA-2023_kato
hjmkth
1
520
230909_chiriin-fc_kato
hjmkth
0
1.3k
230904_Geo-Lang_kato
hjmkth
0
1.5k
Other Decks in Design
See All in Design
HCDフォーラム2024 「HCDとHAI ~人間とAIが共存する世界の実現~」
kamechi7222222
0
250
The Very Small Creatures - dressing up warm sequence
lizziestoryboards
0
130
portfolio2025_kanakoohata
kanako106
0
480
開発チームの中心で心理的安全性をつくる、UXデザイナーの問いかけ方
takuto_yonemichi
2
650
Design Your Own App Using Figma by Medha Muppala
gdgmontreal
0
1.5k
FANCL×CA流アプリリニューアルPJ 成功の秘訣とそのプロセス / dx-fancl-renewal
cyberagentdevelopers
PRO
2
590
Карта реализации историй — убийца USM
ashapiro
0
300
The One
chinweanimation
0
110
ZKK_001.pdf
nicholaspegu
0
1.4k
共通言語としてのデザイントークンと Figmaでの運用
kamy0042
0
190
ABEMAの進化 – 複雑化したコンテンツ構造とUI改善への道 – / abema-ui-improve
cyberagentdevelopers
PRO
2
510
デザインできるもの、できないもの | Designship 2024 | Yasuhiro Yokota
yasuhiroyokota
2
980
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
94
13k
Site-Speed That Sticks
csswizardry
3
270
A designer walks into a library…
pauljervisheath
205
24k
A Modern Web Designer's Workflow
chriscoyier
693
190k
How to Ace a Technical Interview
jacobian
276
23k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
1.2k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
YesSQL, Process and Tooling at Scale
rocio
170
14k
Building Applications with DynamoDB
mza
93
6.2k
Become a Pro
speakerdeck
PRO
26
5.1k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7k
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👍