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
231206_Book-launch-event_kato
Search
Hajime Kato
December 06, 2023
Design
2
1.4k
231206_Book-launch-event_kato
2023年12月6日に東京・浅草橋で行われた『地図とか路線図とか @chizutodesign』出版記念イベントでの発表資料です。
Hajime Kato
December 06, 2023
Tweet
Share
More Decks by Hajime Kato
See All by Hajime Kato
地図・デザイン・可視化 −情報をわかりやすく伝えるために−
hjmkth
2
490
現代風歴史マップ「れきちず」フロントエンドのウラとオモテ|フロントエンドカンファレンス北海道2024 / frontend of Rekichizu
hjmkth
0
180
240803_tochiji-hai_hackathon_kato
hjmkth
2
220
231229_Datavizjp_kato
hjmkth
2
1k
231129_FOSS4G-ASIA-2023_kato
hjmkth
1
480
231007_tokyor_kato
hjmkth
6
1.5k
230909_chiriin-fc_kato
hjmkth
0
1.2k
230904_Geo-Lang_kato
hjmkth
0
1.5k
230726_MIERUNE BBQ #03_kato
hjmkth
1
430
Other Decks in Design
See All in Design
ZKK_001.pdf
nicholaspegu
0
1.4k
Design Your Own App Using Figma by Medha Muppala
gdgmontreal
0
170
root COMPANY DECK / We are hiring!
root_recruit
1
15k
Arborea Art Book
thebogheart
1
290
Improve a service workshop
mastervicedesign
1
110
知を活かせるチームづくりとは?-MIMIGURIで実践している「全員探究」の仕組みと文化づくり-
chiemitaki
1
700
デザインシステム構築の進め方 基本から実践まで、具体的な手順を徹底解説
ncdc
1
210
太田博三(@usagisan2020)
otanet
0
190
ABEMAの進化 – 複雑化したコンテンツ構造とUI改善への道 – / abema-ui-improve
cyberagentdevelopers
PRO
2
410
コンセプトで経営・事業・組織を動かす、 Ameba20周年ブランディング / ameba-20th-branding
cyberagentdevelopers
PRO
1
300
ユーザーに向き合うデザインが介護・福祉の現場を変える / User-facing design changes the field of care and welfare
sms_tech
0
140
ゲーム開発における、Figma活用事例の紹介 / applibot-figma
cyberagentdevelopers
PRO
2
340
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
50
7.2k
How to train your dragon (web standard)
notwaldorf
88
5.7k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2.1k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
Thoughts on Productivity
jonyablonski
67
4.3k
The Language of Interfaces
destraynor
154
24k
GitHub's CSS Performance
jonrohan
1030
460k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Optimising Largest Contentful Paint
csswizardry
33
2.9k
Building an army of robots
kneath
302
43k
Raft: Consensus for Rubyists
vanstee
136
6.6k
Building Better People: How to give real-time feedback that sticks.
wjessup
364
19k
Transcript
地図とかデザインとか (加藤 創) 「地図とか路線図とか」 「れきちず」について
01 02 03 04 CONTENTS 自己紹介 これまでの経緯 れきちずについて まとめ・謝辞
01 自己紹介
地図とかデザインとか @chizutodesign (加藤 創)
自己紹介 ━ • 千葉県市川市生まれ • 去年まで東京都江東区に住んでいました • 転職で今は札幌市に住んでいます
お仕事 ━ • 株式会社MIERUNE (位置情報,GISを専門とする企業) • グラフィックデザイナーとして会社のプロモーショ ンツール、ノベルティ等のデザインを担当
None
02 これまでの経緯
2018 年
• グラフィックデザイナーとして、 デザイン制作会社で勤務していた 2018年 ━
2018年 ━ • 昔から好きだった地図や路線図とデザインを 組み合わせたものを趣味で作っていた • せっかくなのでTwitter(現X)に投稿してみよう!
None
2018年 ━ • 言い方は良くないですが電力という比較的 マイナーなもので反響をいただいてビックリ • 他のものも色々作ってみよう!
None
None
None
None
None
None
None
2019 年
None
None
2019年 ━ • Googleマップ風地図で大きな反響をいただく • 色々な方に指摘・改善点を教えていただき、 良いものを一緒に作り上げられたことが嬉しかった
None
2019年 ━ • 北海道にあるMIERUNEという会社のエライ人から TwitterでDMが届く 北海道で開催する地図系の カンファレンスで発表しませんか?
2019年 ━ • 北海道行ったことないし、お呼びいただいたの だからせっかくなら行ってみよう…! • ということで「FOSS4G Hokkaido 2019」に参加!
INTERNET Watch なぜ北海道でGISベンチャーを起業したのか――ルーツは「FOSS4G Hokkaido」 https://internet.watch.impress.co.jp/img/iw/docs/1282/185/html/mierune08_o.jpg.html より
https://www.youtube.com/watch?v=MOcSU1pDglY より
2019年 ━ • こういった場で発表するのは初めてでドキドキ • 色々な人と交流できて楽しかった!
None
None
2020 年
None
日本テレビ「月曜から夜ふかし」 https://www.ntv.co.jp/yofukashi/ より
None
202 1 年
None
None
None
2022 年
None
None
2022年 ━ • MIERUNEに転職を決意 • 人生で初めて関東を出て、北海道に移住
None
None
None
2023 年
None
2023年 ━ • 春ごろに書籍化のお話をいただく • 快諾!
None
None
None
None
None
2023年 ━ • 8月27日「れきちず」を公開 • 大きな反響をいただく • ネットメディアのみならず、 Abema・テレビ朝日で放送
None
2023年 ━ • 11月17日『地図とか路線図とか @chizutodesign』が 発売
紀伊國屋書店 新宿本店さん https://twitter.com/KinoShinjuku/status/1725074221469245720
2023年 ━ • 11月28日〜12月2日に韓国ソウルで行われた 「FOSS4G ASIA 2023」で発表
None
03 れきちずについて
きっかけ(社会) ━ • 昨今、街歩き・街道歩きがブームとなっている • 関連した書籍や地図など様々なサービスがある
• 自分は昔から地図が好きで、 古地図・絵図などにも興味があった しかし… きっかけ(個人) ━
天保国絵図「武蔵国」国立公文書館デジタルアーカイブ 「築地八町堀日本橋南絵図」国立国会図書館デジタルコレクション 文字の可読性に やや難がある 文字の向きが バラバラ
• 歴史・地理にそこまで詳しくない・興味がない人に とってもわかりやすい地図を作る • 江戸を含む、より広い領域の地図とする ねらい ━ 現代の地図デザインで制作する
• 2019年〜、Googleマップ風の地図として制作・公開 • 著作権の問題や1枚画像であることもあり ウェブサイトとしての公開は難しい 当初 ━
None
• 当時の江戸時代の絵図を見てみると… 制作方法の検討 ━
天保国絵図「武蔵国」国立公文書館デジタルアーカイブ
「安政改正御江戸大絵図」国立国会図書館デジタルコレクション
• とても素敵なのですが、現代の地図と重ねて 描き起こせるほどの精度は残念ながら無い • ではどうするか? 当時の絵図の精度 ━
• 明治初期(1880年代)の地図(迅速測図)を 農研機構の「歴史的農業環境閲覧システム」が公開 • 明治〜平成にかけての旧版地図を故 谷謙二先生の 「今昔マップ」が公開 明治初期の地図を使用 ━ こんじゃく
「2万分の1迅速測図」農研機構 歴史的農業環境閲覧システムより
• 位置データの閲覧・ 編集ができるオープン ソースのGISソフト • 世界的に広く使用 https://qgis.org/ 地図の土台づくり ━ キュージーアイエス/キュージス
• 江戸時代の絵図、明治初期の地図と さらに誤差を補正するために 国土地理院の「地理院タイル」を用いて 海岸線・街道・国境・航路などをQGIS上で描画する 地図の土台づくり ━
国立公文書館デジタルアーカイブ 農研機構 歴史的農業環境閲覧システム 江戸時代の絵図 明治初期の地図 国土地理院 地理院タイル 道筋・海岸線等を 判断・抽出 道筋・海岸線等を
描画 誤差を補正
背景画像は国土地理院「地理院タイル」
• 江戸時代の絵図、『江戸名所図会』などの当時の文献 をもとにPOI(ポイント情報)をプロット • 村・宿場町の位置は明治の地図および 「日本歴史地名大系」「角川日本地名大事典」 より推定 地図情報をつくる ━
「江戸名所図会 7巻 [1] 第1-3冊: 巻1」 国立国会図書館デジタルコレクション https://dl.ndl.go.jp/pid/2559040/1/37
背景画像は国土地理院「地理院タイル」 日本橋 永代橋 京橋
• 地図のデザインやアイコンも オリジナルで作成! 地図デザイン・アイコン ━
峠 渡/湊 寺 劇場 関所 門 茶屋 山 宿場 神社
史跡 橋 城 市/店
None
• 参考にした文献等は国・行政機関・地方自治体や 博物館などの信頼性の高い出典元を極力使用した • Googleマップ等、商業地図の情報は使わない 情報をつくる上で留意した点 ━
• QGISでタイル書き出し https://qgis.org/ ウェブ地図化する ━
• MapLibleで地図を表示 https://maplibre.org ウェブ地図化する ━
None
https://rekichizu.jp/map/ れきちず 検索
• POI(ポイント情報)などが少ない、バラツキがある • ある程度までしかズームできない • POIの表示の挙動もあまりよくない (重要度を高くしている地点が途中で消えたりする) 現状の課題 ━
None
• 現在の地図と2画面で比較・重ね合わせる • 地点を押すと情報表示できる • 多言語表示やふりがなを表示できる • 経路検索機能(できれば) 今後機能を強化したい点 ━
2画面表示 ━ ※1「地理院地図」より
情報表示 ━ 「名所江戸百景 五百羅漢さゞゐ堂」 国立国会図書館デジタルコレクション
多言語表示 ━ 「名所江戸百景 五百羅漢さゞゐ堂」 国立国会図書館デジタルコレクション
経路検索 ━
None
• 国立情報研などが運営する「ROIS-DS人文学オープン データ共同利用センター」* の歴史地名データセット などを今後活用し地図を強化していきたい オープンデータの活用 ━ * https://codh.rois.ac.jp/
• この地図を作るにあたり様々な文献を利用した • 特に、博物館や図書館のデジタルライブラリーで資料 がデジタル化していることのありがたさを改めて実感 謝辞 ━
最後にもうひとつ…
• 来年以降、会社のサポートを受けて運用します • 自分が中心となって進めていきます • MIERUNEの技術力でより良い地図に • オープンな(自由に使える)精神*は変わりません • 詳細は後日改めてお知らせします
「れきちず」をMIERUNEでやります! ━ * 個人で非営利目的の場合。企業さんが営利目的で使われる場合はご相談
「2万分の1迅速測図」農研機構 歴史的農業環境閲覧システムより 続きまして「迅速測図」の 農研機構・岩崎さんの発表です