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
230909_chiriin-fc_kato
Search
Hajime Kato
September 09, 2023
0
1.2k
230909_chiriin-fc_kato
「地理院地図ファンクラブ」2023年9月定例会にて、
江戸時代の現代風マップ「れきちず」紹介スライドです。
Hajime Kato
September 09, 2023
Tweet
Share
More Decks by Hajime Kato
See All by Hajime Kato
地図・デザイン・可視化 −情報をわかりやすく伝えるために−
hjmkth
1
430
現代風歴史マップ「れきちず」フロントエンドのウラとオモテ|フロントエンドカンファレンス北海道2024 / frontend of Rekichizu
hjmkth
0
140
240803_tochiji-hai_hackathon_kato
hjmkth
2
200
231229_Datavizjp_kato
hjmkth
2
1k
231206_Book-launch-event_kato
hjmkth
2
1.3k
231129_FOSS4G-ASIA-2023_kato
hjmkth
1
440
231007_tokyor_kato
hjmkth
6
1.5k
230904_Geo-Lang_kato
hjmkth
0
1.4k
230726_MIERUNE BBQ #03_kato
hjmkth
1
400
Featured
See All Featured
Building Applications with DynamoDB
mza
90
6k
Scaling GitHub
holman
458
140k
BBQ
matthewcrist
85
9.2k
Why Our Code Smells
bkeepers
PRO
334
57k
For a Future-Friendly Web
brad_frost
174
9.3k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
130k
Documentation Writing (for coders)
carmenintech
65
4.4k
Web development in the modern age
philhawksworth
205
10k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
The Cult of Friendly URLs
andyhume
77
6k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
49k
Transcript
地図とかデザインとか (加藤 創) ウェブ地図サイト 「れきちず」について
01 02 03 04 CONTENTS 自己紹介 背景(きっかけ) 既往事例 目的 05
06 07 方法 結果 今後の展望
01 自己紹介
デザイナー 加藤 創 Hajime Kato
自己紹介 ━ • 千葉県市川市生まれ • 去年まで東京都江東区に住んでいました • 北海道の企業に転職し、今は札幌市に住んでいます
お仕事 ━ • 株式会社MIERUNE (位置情報,GISを専門とする企業) • グラフィックデザイナーとして会社のプロモーショ ンツール、ノベルティ等のデザインを担当
None
趣味 ━ • 地図や路線図が好きで、 Twitterにデザインと絡めた作品を投稿
None
02 背景(きっかけ)
きっかけ(社会) ━ • 昨今、街歩き・街道歩きがブームとなっている • 関連した書籍や地図など様々なサービスがある
• 自分は昔から地図が好きで、 古地図・絵図などにも興味があった しかし… きっかけ(個人) ━
天保国絵図「武蔵国」国立公文書館デジタルアーカイブ
天保国絵図「武蔵国」国立公文書館デジタルアーカイブ
天保国絵図「安房国」国立公文書館デジタルアーカイブ 小…? 朝…? …? 村😵
• 「小」だと思っていたら 実は「北」だった! 「北」(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
ウェブ地図化する ━ https://qiita.com/chizutodesign/items/d48fc29df1baa0f71a67 非エンジニアの自分が ウェブ地図サイトを公開するまで 詳細はQiitaにまとめましたのでそちらをどうぞ
None
06 結果
https://rekichizu.jp/map/ れきちず 検索
07 今後の展望
• POI(ポイント情報)などが少ない、バラツキがある • ある程度までしかズームできない • POIの表示の挙動もあまりよくない (重要度を高くしている地点が途中で消えたりする) 現状の課題 ━
None
• 現在の地図と2画面で比較・重ね合わせる • 地点を押すと情報表示できる • 多言語表示やふりがなを表示できる • 経路検索機能(できれば) 今後機能を強化したい点 ━
2画面表示 ━
情報表示 ━ 「名所江戸百景 五百羅漢さゞゐ堂」 国立国会図書館デジタルコレクション
多言語表示 ━ 「名所江戸百景 五百羅漢さゞゐ堂」 国立国会図書館デジタルコレクション
経路検索 ━
None
• 国立情報研などが運営する「ROIS-DS人文学オープン データ共同利用センター」* の江戸の地名等のデータ セットを今後活用し地図を強化していきたい オープンデータの活用 ━ * https://codh.rois.ac.jp/
• ここまで反響を頂けるとは思っておらず、感謝です • 資料がデジタル化されていることのありがたさ! • 土地の歴史調べ・街道巡り等に活用いただければ • 自分は素人なので、「ここは違うよ!」 「こうした方がいいよ!」等の情報を募集中です 公開した感想
━
ありがとうございました!