Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
デザイナーが可視化する上でやってきたこと
Search
Hajime Kato
October 07, 2023
Design
6
1.7k
デザイナーが可視化する上でやってきたこと
第109回R勉強会@東京にて発表した、
「デザイナーが可視化する上でやってきたこと」のスライドです。
Hajime Kato
October 07, 2023
Tweet
Share
More Decks by Hajime Kato
See All by Hajime Kato
「れきちず」のこれまでとこれから - 誰にでもわかりやすい歴史地図を目指して / FOSS4G 2025 Japan
hjmkth
1
770
地理院地図をもっと楽しく!れきちず新機能のご紹介
hjmkth
1
240
オリジナルのデザイン地図を作ってみた!〜OpenMapTilesとMaputnikを活用した地図スタイル〜
hjmkth
1
800
オープンデータを利用して色々なものを作った話
hjmkth
1
180
日本最大級!地図・技術界隈の文化祭「FOSS4G 2024 Japan」に参加した話
hjmkth
1
91
地図・デザイン・可視化 −情報をわかりやすく伝えるために−
hjmkth
2
770
現代風歴史マップ「れきちず」フロントエンドのウラとオモテ|フロントエンドカンファレンス北海道2024 / frontend of Rekichizu
hjmkth
0
510
デザイナーがオープンな〇〇に出会ったことで人生が変わった話
hjmkth
2
390
現代風の歴史マップ「れきちず」について
hjmkth
2
1.1k
Other Decks in Design
See All in Design
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
0
800
Illustrator×Firefly 生成したイラストをベースにドット絵を作ってみよう!
connecre
1
190
【pmconf2025】PdMの頭の中を見える化する体験構造図
kamechi7222222
1
900
AI時代に問われる、リサーチの感受性──地域⇄大企業の現場から見えた「違和感」との向き合い方
muture
PRO
0
320
DESIGNEAST 2025 A-3
_kotobuki_
0
110
Vibe Coding デザインシステム
poteboy
3
1.5k
maki setoguchi
maki_setoguchi
0
580
【MIXI MEETUP!ー TECH & DESIGN DAYー】新たなSNS「mixi2」の “0→1”開発の舞台裏:デザイナーが語るプロダクト誕生秘話
mixi_design
PRO
0
170
Franks Myth
gfht1
0
340
企画を動かすデザイナーの思考!「広げて絞る」アプローチ。
hikidakan
0
220
Treasure_Hunting
solmetts
0
110
アイデアを加速させる!Firefly ボードで発想の幅を広げよう
connecre
1
180
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.3k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
700
Fireside Chat
paigeccino
41
3.7k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.5k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
The Power of CSS Pseudo Elements
geoffreycrofte
80
6.1k
Docker and Python
trallard
46
3.7k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
How GitHub (no longer) Works
holman
316
140k
Optimizing for Happiness
mojombo
379
70k
Why Our Code Smells
bkeepers
PRO
340
57k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
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👍