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
230904_Geo-Lang_kato
Search
Hajime Kato
September 04, 2023
Design
0
1.5k
230904_Geo-Lang_kato
第5回 「地理空間と言語処理」勉強会の発表資料です。
https://connpass.com/event/291648/
Hajime Kato
September 04, 2023
Tweet
Share
More Decks by Hajime Kato
See All by Hajime Kato
地図・デザイン・可視化 −情報をわかりやすく伝えるために−
hjmkth
1
460
現代風歴史マップ「れきちず」フロントエンドのウラとオモテ|フロントエンドカンファレンス北海道2024 / frontend of Rekichizu
hjmkth
0
170
240803_tochiji-hai_hackathon_kato
hjmkth
2
210
231229_Datavizjp_kato
hjmkth
2
1k
231206_Book-launch-event_kato
hjmkth
2
1.4k
231129_FOSS4G-ASIA-2023_kato
hjmkth
1
450
231007_tokyor_kato
hjmkth
6
1.5k
230909_chiriin-fc_kato
hjmkth
0
1.2k
230726_MIERUNE BBQ #03_kato
hjmkth
1
410
Other Decks in Design
See All in Design
Charcoal 2.0: デザインシステムの基盤を再構築
godlingkogami
0
240
Cardápio - Caraguá A Gosto 2024 - De 01/08 a 08/09/2024
caraguatatuba
0
5.8k
202409_会社概要資料_Englishver.pdf
zakkerooni
0
200
圧縮デザインスプリントによるオンボーディングの体験設計事例
hassy_pixiv
0
130
Картирование процесса фасилитация стратсессий с Картой гипотез при помощи Карты процесса-опыта
ashapiro
0
380
知を活かせるチームづくりとは?-MIMIGURIで実践している「全員探究」の仕組みと文化づくり-
chiemitaki
1
670
エムスリー株式会社 デザイングループ紹介資料 / m3design-team-profile
m3designer
0
3.7k
portfolio
amitnk
1
120
Yahoo Newsletter Clicker Template
xuechunwu
0
290
アクセシビリティのはじめかた デザイナー編
tokimari
3
1.3k
SpectrumTokyoMeetup12_自動貯金アプリ『finbee』での取り組みについて
shihorishimazu
2
380
AIと創る広告の未来 ― タップルと極AIお台場スタジオの最新事例― / ai-tapple-odaiba
cyberagentdevelopers
PRO
1
190
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
GraphQLの誤解/rethinking-graphql
sonatard
66
9.9k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Practical Orchestrator
shlominoach
186
10k
Ruby is Unlike a Banana
tanoku
96
11k
Teambox: Starting and Learning
jrom
132
8.7k
A better future with KSS
kneath
238
17k
A Tale of Four Properties
chriscoyier
156
23k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Bash Introduction
62gerente
608
210k
Producing Creativity
orderedlist
PRO
341
39k
Transcript
地図とかデザインとか (加藤 創) ウェブ地図サイト 「れきちず」について
01 02 03 04 CONTENTS 自己紹介 背景(きっかけ) 既往事例 目的 05
06 07 方法 結果 今後の展望
01 自己紹介
デザイナー 加藤 創 Hajime Kato
お仕事 ━ • 会社のプロモーションツール、ノベルティ等の デザインを担当
None
趣味 ━ • 地図や路線図が好きで、 Twitterにデザインと絡めた作品を投稿
None
02 背景(きっかけ)
きっかけ(社会) ━ • 昨今、街歩き・街道歩きがブームとなっている • 関連した書籍や地図など様々なサービスがある
• 自分は昔から地図が好きで、 古地図・絵図などにも興味があった しかし… きっかけ(個人) ━
天保国絵図「武蔵国」国立公文書館デジタルアーカイブ
None
天保国絵図「安房国」国立公文書館デジタルアーカイブ 小…? 朝…? …? 村😵
• 「小」だと思っていたら 実は「北」だった! 「北」(U+5317) 日本古典籍くずし字データセットより http://codh.rois.ac.jp/char-shape/unicode/U+5317/ = 北 北 朝
夷 村 😃 き た あ さ い
• 地図・歴史好きの人は見るのが楽しいが、 そうでない人にはややハードルが高い 古地図・絵図の課題 ━
03 既往事例
• 江戸の古地図『江戸切絵図』を復刻したものが いくつか存在した(制作当時) ◦ gooマップ古地図(人文社)※2023年9月27日サービス終了 ◦ 大江戸今昔めぐり(大江戸今昔めぐり製作委員会) など 既往事例 ━
• デザインは当時の絵図を踏襲 「築地八町堀日本橋南絵図」 国立国会図書館デジタルコレクション 筆者の再現イメージ
「築地八町堀日本橋南絵図」国立国会図書館デジタルコレクション 文字の向きが バラバラ…😢
「築地八町堀日本橋南絵図」国立国会図書館デジタルコレクション 文字の向きは、 建物の表門の 位置を表して いた!😲 NHK 美の壺 「File105 江戸の古地図」 https://www.nhk.or.jp/tsubo/ arc-20081010.html 表門
表門
• デザインは当時の絵図を踏襲している • 当時の絵図は文字の向きがバラバラ • 地図や歴史にそこまで興味のない人にとっては 視認性・可読性に少々難のある可能性がある • 地図領域が江戸とその周辺にほぼ限定されている 既往事例の課題
━
04 目的
天保国絵図「武蔵国」国立公文書館デジタルアーカイブ 「築地八町堀日本橋南絵図」国立国会図書館デジタルコレクション 文字の可読性に やや難がある 文字の向きが バラバラ
• 歴史・地理にそこまで詳しくない・興味がない人に とってもわかりやすい地図を作る • 江戸を含む、より広い領域の地図とする 目的 ━ 現代の地図デザインで制作する
05 方法
• 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 なるほど、 わからん🤯
「江戸名所図会 巻1 (日本図会全集)」 国立国会図書館デジタルコレクション https://dl.ndl.go.jp/pid/1176676/1/32 読める… 読めるぞ!
• 地図のデザインやアイコンも オリジナルで作成! 地図デザイン・アイコン ━
峠 渡/湊 寺 劇場 関所 門 茶屋 山 宿場 神社
史跡 橋 城 市/店
None
• 参考にした文献等は国・行政機関・地方自治体や 博物館などの信頼性の高い出典元を極力使用した • Googleマップ等、商業地図の情報は使わない 情報をつくる上で留意した点 ━
• QGISの「タイル作成機能」を使用しウェブ上で 閲覧できる形に書き出した上、MapLibreという オープンソースの地図ライブラリに読み込み サーバ上にアップロードを行った ウェブ地図化する ━
ウェブ地図化する ━ https://qgis.org/ https://maplibre.org
None
06 結果
https://rekichizu.jp/map/ れきちず 検索
07 今後の展望
• POI(ポイント情報)などが少ない、バラツキがある • ある程度までしかズームできない • POIの表示の挙動もあまりよくない (重要度を高くしている地点が途中で消えたりする) 現状の課題 ━
None
• 現在の地図と2画面で比較・重ね合わせる • 地点を押すと情報表示できる • 多言語表示やふりがなを表示できる • 経路検索機能(できれば) 今後機能を強化したい点 ━
2画面表示 ━
情報表示 ━ 「名所江戸百景 五百羅漢さゞゐ堂」 国立国会図書館デジタルコレクション
多言語表示 ━ 「名所江戸百景 五百羅漢さゞゐ堂」 国立国会図書館デジタルコレクション
経路検索 ━
None
• 国立情報研などが運営する「ROIS-DS人文学オープン データ共同利用センター」の江戸の地名等のデータ セットを今後活用し地図を強化していきたい オープンデータの活用 ━
• ここまで反響を頂けるとは思っておらず、感謝です • 資料がデジタル化されていることのありがたさ! • 土地の歴史調べ・街道巡り等に活用いただければ • 自分は素人なので、「ここは違うよ!」 「こうした方がいいよ!」等の情報を募集中です 公開した感想
━
ありがとうございました!