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
2
490
現代風歴史マップ「れきちず」フロントエンドのウラとオモテ|フロントエンドカンファレンス北海道2024 / frontend of Rekichizu
hjmkth
0
180
240803_tochiji-hai_hackathon_kato
hjmkth
2
220
231229_Datavizjp_kato
hjmkth
2
1k
231206_Book-launch-event_kato
hjmkth
2
1.4k
231129_FOSS4G-ASIA-2023_kato
hjmkth
1
480
231007_tokyor_kato
hjmkth
6
1.5k
230909_chiriin-fc_kato
hjmkth
0
1.2k
230726_MIERUNE BBQ #03_kato
hjmkth
1
430
Other Decks in Design
See All in Design
若手デザイナーチームが手がける CADC2024クリエイティブディレクションの全貌 / opening-design
cyberagentdevelopers
PRO
1
620
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
14
6.1k
PMとデザイナーはニコイチ! メリットと具体的なアクション10選
mosmos_noki
2
1.1k
美しいUIを作るために デザイナーが意識している ちょっとした考え方
yuichi_hara7
51
32k
Design System for training program
mct
0
280
Credence
lratmansunu
0
460
Night Shift concept 9/15/2024
cpineda57
0
740
Designship2024 Panel Discussion インハウスデザイナーは 何をデザインしているか、するべきか で使用したスライドを公開します。
kiyoshifuwa
0
2.1k
管理画面の全体UXは利用時品質モデルで考える
readymadegogo
2
2k
新しいemoji😄のアイデアをUnicodeが募集中‼️🏃♀️💨💨💨傾向を学んでみんな提案しよう💪
oguemon
2
690
拡大するマルチプロダクトSaaSの顧客理解にデザイン組織はどう取り組んでいるか / RAKUSTechCon2024_Design
rakus_dev
0
2.1k
想像するためのデザイン - LARPの可能性を探求してみた話
okabemy
0
550
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
43
13k
The World Runs on Bad Software
bkeepers
PRO
65
11k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
27
4.3k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
Optimizing for Happiness
mojombo
376
70k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Why Our Code Smells
bkeepers
PRO
334
57k
Optimising Largest Contentful Paint
csswizardry
33
2.9k
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人文学オープン データ共同利用センター」の江戸の地名等のデータ セットを今後活用し地図を強化していきたい オープンデータの活用 ━
• ここまで反響を頂けるとは思っておらず、感謝です • 資料がデジタル化されていることのありがたさ! • 土地の歴史調べ・街道巡り等に活用いただければ • 自分は素人なので、「ここは違うよ!」 「こうした方がいいよ!」等の情報を募集中です 公開した感想
━
ありがとうございました!