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
「本のつながり」を可視化する
Search
SUGIMOTO Tatsuo
November 10, 2025
Design
0
6
「本のつながり」を可視化する
SUGIMOTO Tatsuo
November 10, 2025
Tweet
Share
More Decks by SUGIMOTO Tatsuo
See All by SUGIMOTO Tatsuo
データビジュアライゼーションの制作方法を学ぶ
sugi2000
0
1.8k
DataMapp データ駆動型地図表現ツールの開発
sugi2000
0
210
文芸テキストを地図上にビジュアライズする観賞型Webアプリ「bibliomaps」の開発
sugi2000
1
1.3k
データビジュアライゼーションのツール」
sugi2000
0
1.4k
地域の可視化をたのしもう
sugi2000
2
860
Other Decks in Design
See All in Design
デザイナーがAIを使い倒して爆速プロダクト開発!社内ハッカソンでの取り組み紹介
abokadotyann
9
2.7k
DESIGNEAST 2025 A-3
_kotobuki_
0
110
A Platform Connecting Brand Philosophy and Assets: "LY Corporation Design Hub"
lycorptech_jp
PRO
0
470
逆向きUIの世界〜AndroidアプリのRTL言語対応〜
akatsuki174
1
620
Liquid GlassとApp Intents
touyou
0
510
地理院地図をもっと楽しく!れきちず新機能のご紹介
hjmkth
1
220
プロダクトリニューアルと同時に進める初めてのデザインシステム
techtekt
PRO
0
170
maki setoguchi
maki_setoguchi
0
570
BXデザイン組織が挑んだスクラム 〜ブランドを育み、デザイナーを解放する変革の物語〜(Scrum Fest Mikawa 2025)
tadashiinoue
0
820
Meet, Learn, Grow × AI ― コミュニティで加速するスキル循環 「コミュニティと関わり方」
tame
0
310
デザインから開発まで一貫したデザインシステムを構築するベストプラクティス / Best Practices for Building a Consistent Design System from Design to Development
lycorptech_jp
PRO
0
600
企画を動かすデザイナーの思考!「広げて絞る」アプローチ。
hikidakan
0
210
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
17k
Reflections from 52 weeks, 52 projects
jeffersonlam
355
21k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
The Cost Of JavaScript in 2023
addyosmani
55
9.3k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
980
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.6k
GraphQLとの向き合い方2022年版
quramy
49
14k
Designing for Performance
lara
610
69k
A better future with KSS
kneath
239
18k
Java REST API Framework Comparison - PWX 2021
mraible
34
9k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Practical Orchestrator
shlominoach
190
11k
Transcript
「本のつながり」を可視化する opencoverとhonbacoの開発 2025-11-08 RuRo Seminar 杉本達應
本と本棚
縮小する 出版産業 『出版指標 年報 2025年版』
拡大する 読書活動 コンテンツとしての 本棚 選書フェア 選書コーディネート 文学館 本棚劇場 坂本図書 テレビ・雑誌・書籍
読書体験施設 文喫 Book and Bed TSUTAYA 次世代型図書館 まちライブラリー 既存流通にのらない 本 ZINE 同人誌 読書を通じた交流 一箱古本市 シェア型書店 ビブリオバトル 読書会
本棚を見せるための施設
本棚特集
シェア型書店、まちライブラリー、一箱古本市
オンラインコミュニティ
棚に生まれる個性 〈キュレーション〉としての選書、陳列 【文脈棚】自分の懐の話だけだった選挙戦のあとに - 往来堂書店
棚に生まれる個性 家の棚は収納家具だが、複数の場所から、自分の関心や必要に応じて集めてきたも のが凝縮された、ひとつの世界でもある。さまざまな場所に分散していた者を自分 が集めなおし、「自己」という新しいジャンルを作って、私的な空間に再現してい るようなものだ。大げさにいえば書棚は自分の分身であり、家の中に書棚があるこ とは、その分身と常に向き合っていることを意味する。 家族がいれば、その世界は家族とも共有される。置き場所によっては来客が目に する機会もある。他人の家や仕事場を訪問して、つい置いてある書棚に目をやって しまった経験がないだろうか。雑誌などではしばしば有名人の書斎の写真を載せた
りするが、そこに対する好奇心は、本の並びにあらわれるその人の内面や知的関心 に向けられている。(柴野京子,2012,『書物の環境論』弘文堂.)
空間と記憶 「特に分類していないので、どの本 がどこにあるのかは、身体感覚で覚 えています。それが狂うともう探せ ない。(笑)」(東浩紀) 『松岡正剛の書棚──松丸本舗の挑 戦』p.98
スクリーンの書籍表現
スクリーンの書籍表現
本は多面体 …なのに、 表紙のデータしかない!
書影をめぐる問題 ライセンス(利用許諾)が不明瞭 利用目的の制限(非商用に限定など) 解像度が低い そもそも画像がない
書影をめぐる問題 openBDプロジェクトの挑戦と縮小 https://hon.jp/news/1.0/0/47164
書誌情報・書影のAPI API(Application Programming Interface) Amazon Product Advertising API (2003–) 楽天API
(2007–) アフィリエイト(成果報酬型広告)利用はで きるが、そのネットショップでの購入促進に つながる利用に限られる API提供企業の仕様や規約変更に振り回される
背表紙の効用 何度も目にしている書棚の様子は、努 力しなくても自然と頭に入ったりもす る。例えば、これまで何度も訪れた本 屋なら、入口から奥まで、フロアの形 や棚の配置、あるいはどこにどんな分 野の本が置かれているか、知らず識ら ずのうちに覚えているものだ。(p.177) 山本貴光『記憶のデザイン』(2020)
背表紙の効用 本はそれぞれが、ある外見や重さや手触りや 匂いを備えている。そしてもっぱら、離れた 場所から眺める場合、そのデザインが目に入 る。背表紙は、多くの場合、著者名、書名、 副題、叢書名、版元といった要素が表記さ れ、デザインを施されている。すでに内容を 知っている本なら、この背表紙はその内容に 対するインデックス(索引)のようなものと して機能する。(p.182)
山本貴光『記憶のデザイン』(2020)
杉浦康平デザインアーカイブ(武蔵野美術大学 美術館・図書館)
An Ocean of Books Gael Hugo, in collaboration with Satellite
Studio
蔵書家の悩み スペース 空間の限界 ・十分な容量の本棚を持てない ・蔵書数に限界がある アクセシビリティ ・棚の奥や箱、倉庫に入れると アクセスしづらい ファインダビリティ
検索しづらさ ・目的の本に辿り着けない ・重複本がある 永続性 ・死んだら散逸する
教育実践 https://tmu-2024-net-1-web.pages.dev/
教育実践 https://net-1-2025.sugi2000.workers.dev/
これまでの開発
プロジェクトの目標 書籍間ネットワークの提示と可視化デザイン 書籍カバー画像を自由に利用できるインフラの 提供とオープンソースコミュニティの構築 書籍コレクションのデジタルアーカイブ構築 個人の書籍コレクションの作成・編集・共有が できるサービスの提供
著者 著者 著者 評者 読者 著書 引用 参照 書評 読書
読者Aの本棚 読者Bの本棚 本のネットワーク パラテクスト(本文以外のテキスト) コンテクスト(文脈)
opencover honbaco library 書籍カバー画像を生成・配信する ウェブAPI みんなでつくる opencover 図書館の書架を閲覧 できるサービス 構成
ユーザが書籍コレクションを作成・ 共有できるウェブサービス スタイルシートの共同編集 プラットフォーム
opencoverとは 書籍カバー画像の配信サービス 自由に利用できる 書誌情報からカバー画像を簡易再現 出版社の許諾が得られたら実画像提供も Web APIを通じて外部サービスからも利用可 背表紙を並べることで本棚を作れる
背表紙画像の生成プログラム (ジェネレーター)
ISBN→書誌情報にスタイルシートを適用する
本棚インターフェイスの事例 新書マップ NPO法人連想出版 Digital Bookshelf(電子書架) 東京都立図書館
本棚インターフェイスの事例 新書マップ4D NPO法人連想出版 バーチャル図書館 大日本印刷・図書館流通センター
出版社サイトの事例 筑摩書房 みすず書房
開発プロセス 「書棚のたのしみ」2010年1月 こうした試みは、ネットでもできるかもしれません。も ちろん、それは、単に現実空間の書棚を仮想空間に再 現するという意味ではありません。バーチャル空間なら ではの書棚の見せ方ができるのではないかと思いまし た。 ネットで編集された書棚を見せるときに、本の「背表 紙」が圧倒的な力を持つと思います。背表紙のビジュア ルは、コンパクトな面積にタイトルや著者名、出版社
やシリーズ、本の厚み(つまり、ボリューム)を、一瞬 にして伝えてくれます。
開発プロセス 2012年6月
プロトタイプ(HTML)
プロトタイプ(SVG)
プロトタイプ(SVG)
カスタムスタイル表示
3D表示
API公開 2025年3月
対象書籍の範囲 現在 約72,000冊 新書・文庫シリーズの一部 今後 収録範囲の拡張 スタイル未定義の書籍も画像出力
ZINE『オープンカバーの旅する本箱』(すぎもと組) Jimbocho Zine Fair in ひじりばし博覧会2025
3D Book Collection(開発:坂村空介) https://3d-book-collections.vercel.app/
みんなでつくる opencover (開発中) スタイルの共同編集
みんなでつくる opencover (開発中) スタイルの 共同編集
Figmaプラグイン
ユーザによる協働 Wikipedia
ユーザによる協働 OpenStreetMap
honbaco (開発中) 本棚共有サービス 見せたい棚だけ公開 する
図書館の書架再現 東京都立大学図書館日野館 新書・文庫の書架 約7,000冊 honbaco library (開発中)
図書館の書架再現 honbaco library (開発中)
書評の棚 (開発中)
これまでにもらった 感想や意見 ・自宅の書棚を再現したい ・もっている電子書籍の書棚を作りたい ・選んだ本をその場で読みたい ・帯・函も再現してほしい ・棚の奥や横向きにも積みたい ・SNSでシェアしたい ・3D・VR・ARで見たい ・国際特許とるべき
今後の予定
スケジュール 2025年度 ・「honbaco library」一般公開 (東京都立大学図書館 日野館)バージョン ・「honbaco」限定公開 ・「みんなでつくるopencover」公開 2026年度以降
・「honbaco」一般公開
THANK YOU