エクスプローラブル・エクスプラネーション
Explorable Explanations / 2011– / 技法 / ウェブの読み物
Bret Victorが2011年3月の同名の記事で名付けた、読み物の中に動く模型を埋め込む書き方。地の文の数値に点線の下線が引かれ、掴んで動かすと続きの文章と傍らの図が同時に書き換わる。主張の根拠を読者自身が揺すって確かめられる。
ひと目で判断
見た目の特徴
- 地の文の中の数値に点線の下線が引かれ、触れると青に変わる
- その数値を左右に動かすと、続く文章と傍らの図が同時に書き換わる
- 図が別枠のサンドボックスに隔離されず、段落と段落の間に地続きで置かれる
- 何も触らない状態でも図が意味を成し、初期値のまま読み進められる
向いている用途
- 数式やモデルを含む解説を、読者が仮定を変えて確かめられる形で公開するとき
- 教材で、結論だけでなく結論が変わる条件まで見せたいとき
このスタイルを使う
短い指針を制作へ持ち込むか、構造化された仕様をAIへ渡せます。
詳しい作り方と出典制作ルール、実在作例、比較、研究、引用形式
辞書情報
- 文字
- 本文は普通の読み物の組みのまま置く。可変の数値だけを下線と色で区別し、書体は変えない。
- 構成
- 本文を600px前後の1カラムに絞り、図はそれを説明する段落のすぐ横か直後に置く。触る所と変わる所が同時に視野へ入る距離を守る。
- 素材
- 操作は掴んで動かすことだけに絞り、入力欄と送信ボタンを置かない。触らなくても意味の通る初期値を必ず用意する。
- 注意
- 触って初めて中身が現れる作りにすると、動かさない読者にはただの空白の記事になる。
- 関連研究
- Bret Victorの2011年の記事本体と、そこで公開されたTangleの実装 / reactive document、explorable example、contextual informationという3つの型の違い / 同じ主張を静止した図と可変の図で書き分け、どこで理解が分かれるか試す
関連項目
- アイソタイプ（Isotype）共通する印象：信頼 / 技術。エクスプローラブル・エクスプラネーションとアイソタイプの違いを見る
- フローチャート（Flowchart）共通する印象：技術 / 信頼 / 遊び。エクスプローラブル・エクスプラネーションとフローチャートの違いを見る
取り違えられやすい
ウェブの読み物をさらに見る
同じ「ウェブの読み物」から、共通する印象が多い順に次の項目を選んだ。
- インフィニット・キャンバス（Infinite Canvas）共通する印象：遊び。
- ウェブトゥーン（縦スクロール漫画）（Webtoon (Vertical-Scroll Comics)）共通する印象：遊び。
- シングルサービング・サイト（Single-Serving Site）共通する印象：遊び。
この項目を引用する
辞典はリンクされるためにある。書いている場所に合う形をそのまま持っていってよい。
- Link
- https://indexstyle.org/ja/styles/explorable-explanations
- Markdown
- [エクスプローラブル・エクスプラネーション（Explorable Explanations） — デザインスタイル辞典](https://indexstyle.org/ja/styles/explorable-explanations)
- HTML
- <a href="https://indexstyle.org/ja/styles/explorable-explanations">エクスプローラブル・エクスプラネーション（Explorable Explanations） — デザインスタイル辞典</a>