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
非エンジニアのデザイナーがウェブ地図サイト「れきちず」を作った話 / MIERUNE JCT #01
Search
MIERUNE
PRO
August 29, 2023
Technology
0
730
非エンジニアのデザイナーがウェブ地図サイト「れきちず」を作った話 / MIERUNE JCT #01
20230830開催のオンラインイベントMIERUNE JCT #01 での発表
非エンジニアのデザイナーがウェブ地図サイト「れきちず」を作った話/地図とかデザインとか
MIERUNE
PRO
August 29, 2023
Tweet
Share
More Decks by MIERUNE
See All by MIERUNE
MIERUNE BBQにおけるユーザー中心設計()
mierune
PRO
1
110
MIERUNE BBQ #10 in 札幌時計台 オープニング・クロージング
mierune
PRO
0
60
セイコーマートの近くに住みたい!Pythonで到達圏解析
mierune
PRO
1
400
ドラッグストア店員が 独学で化粧品顧客管理アプリを作成した話
mierune
PRO
1
410
フロントエンドエンジニアがCLIを開発した話 〜TSの旨味ソースがけ〜
mierune
PRO
0
200
2つの画像が有意に異なるのか検定した話
mierune
PRO
0
270
M5Stackを用いたIoT開発
mierune
PRO
0
310
そして広がるNotionの可能性 〜Notion APIを添えて〜
mierune
PRO
0
280
Expanding the use of FOSS4G Through QGIS Workshops
mierune
PRO
0
400
Other Decks in Technology
See All in Technology
OSSコミットしてZennの課題を解決した話
dyoshikawa1993
0
150
Classmethod流のPlatform Engineering / classmethod-platform-engineering-devio2024
tomoki10
0
480
頼られるのが大好きな 皆さんへ - 支援相手との期待の合わせ方、突き放し方 -/For_people_who_like_to_be_relied_on
naitosatoshi
1
290
DDDにおける認可の扱いとKotlinにおける実装パターン / authorization-for-ddd-and-kotlin-implement-pattern
urmot
4
390
目標設定は好きですか? アジャイルとともに目標と向き合い続ける方法 / Do you like target Management?
kakehashi
10
3k
How to Think Like a Performance Engineer
csswizardry
4
590
シフトレフトで挑む セキュリティの生産性向上
sekido
PRO
0
270
ACRiルーム最新情報とAMD GPUサーバーのご紹介
anjn
0
160
AWSサービスメニュー開発をしていてAWSを好きだ!と感じた瞬間
toru_kubota
0
130
サービスの持続的な成長と技術負債について
siva_official
PRO
10
4.4k
What is DRE? - Road to SRE NEXT@広島
chanyou0311
3
630
ゆめみのアクセシビリティの現在地と今後
ryokatsuse
3
290
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
Building a Scalable Design System with Sketch
lauravandoore
458
32k
A Modern Web Designer's Workflow
chriscoyier
689
190k
The Brand Is Dead. Long Live the Brand.
mthomps
52
36k
Web Components: a chance to create the future
zenorocha
307
41k
We Have a Design System, Now What?
morganepeng
46
7k
4 Signs Your Business is Dying
shpigford
178
21k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
129
32k
Clear Off the Table
cherdarchuk
89
320k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Optimizing for Happiness
mojombo
373
69k
Designing the Hi-DPI Web
ddemaree
276
34k
Transcript
地図とかデザインとか (加藤 創) 非エンジニアの デザイナーが ウェブ地図サイト 「れきちず」を作った話
01 02 03 04 CONTENTS 自己紹介 れきちずのきっかけ れきちずの制作 れきちずの今後
01 自己紹介
デザイナー 加藤 創 Hajime Kato
前職 • 東京のデザイン制作会社で グラフィックデザイナーとして7年間勤務 • 主に販促・広告デザインなどを制作
趣味 地図や路線図が好きで Twitterにデザインと絡めた作品を投稿
None
None
None
None
None
None
None
仕事 • Twitterの投稿を見た社長から誘われ、 去年MIERUNEに転職。 • 会社ではデザイン全般の制作を担当
名刺 メールアドレス
ロールアップバナー
会社案内リーフレット
プラグインアイコン
YouTubeサムネ
MIERUNE BBQロゴ
MIERUNE JCTロゴ (アイキャッチ)
マスキングテープ
クリアボトル
奈文研・産総研 3D DB Viewer ページ https://sitereports.nabunken.go.jp/3ddb
02 れきちずのきっかけ
きっかけ • 昔から地図が好きで、 古地図・絵図なども興味がありました。 しかし…
天保国絵図「武蔵国」国立公文書館デジタルアーカイブ
天保国絵図「安房国」国立公文書館デジタルアーカイブ 小…? 朝…? …? 村😵
• 「小」だと思っていたら 実は「北」だった! 「北」(U+5317) 日本古典籍くずし字データセットより http://codh.rois.ac.jp/char-shape/unicode/U+5317/ = 北 北 朝
夷 村🤗 き た あ さ い
古地図・絵図の問題点 • 地図・歴史好きの人は見るのが楽しいが、 そうでない人にはややハードルが高い
改善するために • 全員にわかりやすく伝えるためには? 現代の地図デザインに置き換えよう!
03 れきちずの制作
どうやって作る? • 当時の江戸時代の絵図を見てみると…
天保国絵図「武蔵国」国立公文書館デジタルアーカイブ
「安政改正御江戸大絵図」国立国会図書館デジタルコレクション
当時の絵図は… • とても素敵なのですが、現代の地図と重ねて 描き起こせるほどの精度は残念ながら無い…
明治初期の地図を使おう! • 明治初期(1880年代)の地図(いわゆる迅速測図)を 農研機構の「歴史的農業環境閲覧システム」が公開 • 明治〜平成にかけての旧版地図を故 谷謙二先生の 「今昔マップ」が公開
「2万分の1迅速測図」農研機構 歴史的農業環境閲覧システムより
地図の土台を作る • 江戸時代の絵図、明治初期の地図と さらに誤差を補正するために 国土地理院の「地理院タイル」を用いて 海岸線・街道・国境・航路などをQGIS上で描画する
背景画像は国土地理院「地理院タイル」
地図の情報を作る • 江戸時代の絵図、『江戸名所図会』などの当時の文献 をもとにPOI(ポイント情報)をプロット • 村・宿場町の位置は明治の地図と「角川日本地名大事 典」より推定
地図デザイン・アイコンの作成 • 地図のデザインやアイコンも オリジナルで作成!
峠 渡/湊 寺 劇場 関所 門 茶屋 山 宿場 神社
史跡 橋 城 市
背景画像は国土地理院「地理院タイル」
情報を作る上で気をつけたこと • 参考にした文献等は国・行政機関・地方自治体や 博物館などの信頼性の高い出典元を極力使用した • Googleマップ等、商業地図の情報は使わない
地図をウェブ地図化する • QGISの「タイル作成機能」を使用しウェブ上で 見れる形に書き出した上、MapLibreという オープンソースの地図ライブラリに読み込み サーバ上にアップロードを行った
None
04 れきちずの今後
現状の課題 • POI(ポイント情報)などが少ない、バラツキがある • ある程度までしかズームできない • POIの表示の挙動もあんまりよくない (重要度を高くしている地点が途中で消えたりする)
None
今後、機能を強化したいところ • 現在の地図と2画面で比較・重ね合わせる • 地点を押すと情報表示できる • 多言語表示やふりがなを表示できる • 経路検索機能(できれば)
None
既存のオープンデータの活用 • 国立情報研などが主催する「ROIS-DS人文学オープン データ共同利用センター」の江戸の地名等の データセットを今後活用し地図を強化していきたい
今回公開してみて • ここまで反響を頂けるとは思っておらず、感謝です • 資料がデジタル化されていることのありがたさ! • 土地の歴史調べ・街道巡り等に活用いただければ • 自分は素人なので、「ここは違うよ!」 「こうした方がいいよ!」等の情報を募集中です
ありがとうございました!