{"id":"explorable-explanations","no":531,"name":"Explorable Explanations","ja":"エクスプローラブル・エクスプラネーション","era":"2011–","family":"ウェブの読み物","kind":"技法","collection":"Dictionary expansion 26","addedAt":"2026-08-19","source":{"title":"Bret Victor — Explorable Explanations (2011, 一次資料)","url":"https://worrydream.com/ExplorableExplanations/"},"reference":{"status":"verified","pageUrl":"https://worrydream.com/ExplorableExplanations/","credit":"Bret Victor — Explorable Explanations (2011, 一次資料)","gallery":[{"imageUrl":"https://commons.wikimedia.org/wiki/Special:FilePath/Parable%20of%20the%20Polygons%20-%20first%20board.png?width=640","pageUrl":"https://commons.wikimedia.org/wiki/File:Parable%20of%20the%20Polygons%20-%20first%20board.png","credit":"Vi Hart／Nicky Case《Parable of the Polygons》2014年 — Wikimedia Commons / CC0"},{"imageUrl":"https://commons.wikimedia.org/wiki/Special:FilePath/To%20Build%20a%20Better%20Ballot%20Election%20result.gif?width=640","pageUrl":"https://commons.wikimedia.org/wiki/File:To%20Build%20a%20Better%20Ballot%20Election%20result.gif","credit":"Nicky Case《To Build a Better Ballot》2016年 — Wikimedia Commons / CC0"},{"imageUrl":"https://commons.wikimedia.org/wiki/Special:FilePath/Quantum%20teleportation%20-%20interactive%20simulation%20in%20Virtual%20Lab%20by%20Quantum%20Flytrap.png?width=640","pageUrl":"https://commons.wikimedia.org/wiki/File:Quantum%20teleportation%20-%20interactive%20simulation%20in%20Virtual%20Lab%20by%20Quantum%20Flytrap.png","credit":"Piotr Migdał《Virtual Lab by Quantum Flytrap》2024年 — Wikimedia Commons / CC BY-SA 4.0"}]},"essence":"Bret Victorが2011年3月の同名の記事で名付けた、読み物の中に動く模型を埋め込む書き方。地の文の数値に点線の下線が引かれ、掴んで動かすと続きの文章と傍らの図が同時に書き換わる。主張の根拠を読者自身が揺すって確かめられる。","cues":["地の文の中の数値に点線の下線が引かれ、触れると青に変わる","その数値を左右に動かすと、続く文章と傍らの図が同時に書き換わる","図が別枠のサンドボックスに隔離されず、段落と段落の間に地続きで置かれる","何も触らない状態でも図が意味を成し、初期値のまま読み進められる"],"intents":["技術","遊び","信頼"],"works":["数式やモデルを含む解説を、読者が仮定を変えて確かめられる形で公開するとき","教材で、結論だけでなく結論が変わる条件まで見せたいとき"],"recipe":{"type":"本文は普通の読み物の組みのまま置く。可変の数値だけを下線と色で区別し、書体は変えない。","layout":"本文を600px前後の1カラムに絞り、図はそれを説明する段落のすぐ横か直後に置く。触る所と変わる所が同時に視野へ入る距離を守る。","material":"操作は掴んで動かすことだけに絞り、入力欄と送信ボタンを置かない。触らなくても意味の通る初期値を必ず用意する。"},"avoid":"触って初めて中身が現れる作りにすると、動かさない読者にはただの空白の記事になる。","colors":["#FFFFFF","#0000FF","#FDFFE9"],"motif":"graphic","pair":["isotype","flowchart"],"study":["Bret Victorの2011年の記事本体と、そこで公開されたTangleの実装","reactive document、explorable example、contextual informationという3つの型の違い","同じ主張を静止した図と可変の図で書き分け、どこで理解が分かれるか試す"],"en":{"essence":"The name Bret Victor gave, in a March 2011 essay of the same title, to writing that embeds a running model inside the prose. Numbers in the body text carry a dotted underline and can be dragged, and pulling one rewrites the rest of the sentence and the figure beside it at the same time. He described the result as a written argument whose assertions are backed by explorable computational models.","cues":["Numbers inside the running text sit on a dotted underline and turn blue when touched","Dragging one of those numbers rewrites the following sentence and the neighboring figure at once","Figures are not quarantined in a separate sandbox but sit continuous with the paragraphs around them","Untouched, the piece still reads, because the default values already make the figures meaningful"],"works":["Publishing an explanation built on a model, where readers should be able to change the assumptions themselves","Teaching material that has to show not just the conclusion but the conditions under which it flips"],"recipe":{"type":"Set the prose like ordinary reading matter; mark only the live numbers, with an underline and a color, and never with a different typeface.","layout":"Hold the text to a single column of roughly 600px and place each figure beside or directly after the paragraph it belongs to, close enough that the handle and its effect share one field of view.","material":"Limit the interaction to grabbing and dragging, with no input fields and no submit buttons, and always ship default values that already say something."},"avoid":"If the content only shows up once the reader touches something, everyone who does not touch it gets a blank article.","study":["Bret Victorの2011年の記事本体と、そこで公開されたTangleの実装","reactive document、explorable example、contextual informationという3つの型の違い","同じ主張を静止した図と可変の図で書き分け、どこで理解が分かれるか試す"]}}