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
デザイナーが可視化する上でやってきたこと
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Hajime Kato
October 07, 2023
Design
1.8k
6
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
デザイナーが可視化する上でやってきたこと
第109回R勉強会@東京にて発表した、
「デザイナーが可視化する上でやってきたこと」のスライドです。
Hajime Kato
October 07, 2023
More Decks by Hajime Kato
See All by Hajime Kato
気圧・高度・GPSを記録&可視化するアプリ「Koudo」を作った話
hjmkth
1
370
情報を翻訳する-伝わる可視化3原則とオープンデータ活用-
hjmkth
1
310
「れきちず」のこれまでとこれから - 誰にでもわかりやすい歴史地図を目指して / FOSS4G 2025 Japan
hjmkth
1
4k
地理院地図をもっと楽しく!れきちず新機能のご紹介
hjmkth
1
780
オリジナルのデザイン地図を作ってみた!〜OpenMapTilesとMaputnikを活用した地図スタイル〜
hjmkth
1
1.2k
オープンデータを利用して色々なものを作った話
hjmkth
1
280
日本最大級!地図・技術界隈の文化祭「FOSS4G 2024 Japan」に参加した話
hjmkth
1
150
地図・デザイン・可視化 −情報をわかりやすく伝えるために−
hjmkth
2
900
現代風歴史マップ「れきちず」フロントエンドのウラとオモテ|フロントエンドカンファレンス北海道2024 / frontend of Rekichizu
hjmkth
0
690
Other Decks in Design
See All in Design
The Art of Caring
klemens
0
370
1000人規模の組織でデザインハーネスを導入するための第一歩
pkshadeck
PRO
4
2.8k
AIスライド生成を進化させるMDファイル
kenichiota0711
1
1.5k
再設計される業務 - AIにより再設計される "デザインワークフロー" / AI Ops Lab #2 Redesigned orkflows
kgsi
0
790
絵や写真から学ぶ、要素がもたらす副作用
kspace
0
440
AI-Slopなデザインを生まないためのデザインプロセス戦略
takanorip
7
4.8k
where_imagination_ends_ai_begins.pdf
r5ni4
0
250
空間アプリ開発のフィードバックをCodexにするための抽象的なデザインツールの模索
karad
0
160
Техники структурирования беседы с собой, заказчиком и командо
ashapiro
0
200
全員がアウトプットを出せる時代、 誰を採用する?
nishame
0
620
デザイナーが主導権を握る、AI協業の本音と実践
satosio
7
3.4k
Rethinking IFUs: What Board Game Rulebooks Contribute to IFU Usability
deadlinepoet
0
340
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
55
8.2k
For a Future-Friendly Web
brad_frost
183
10k
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
2
430
Balancing Empowerment & Direction
lara
6
1.2k
The Impact of AI in SEO - AI Overviews June 2024 Edition
aleyda
5
1.1k
Primal Persuasion: How to Engage the Brain for Learning That Lasts
tmiket
0
390
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
aleyda
1
1.3k
SEO in 2025: How to Prepare for the Future of Search
ipullrank
3
3.7k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
35
2.5k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.8k
Why You Should Never Use an ORM
jnunemaker
PRO
61
9.9k
Leveraging Curiosity to Care for An Aging Population
cassininazir
1
420
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👍