Explorable Explanations
エクスプローラブル・エクスプラネーション / 2011– / 技法 / ウェブの読み物
Bret Victorが2011年3月の同名の記事で名付けた、読み物の中に動く模型を埋め込む書き方。地の文の数値に点線の下線が引かれ、掴んで動かすと続きの文章と傍らの図が同時に書き換わる。主張の根拠を読者自身が揺すって確かめられる。
地の文の中の数値に点線の下線が引かれ、触れると青に変わる / その数値を左右に動かすと、続く文章と傍らの図が同時に書き換わる / 図が別枠のサンドボックスに隔離されず、段落と段落の間に地続きで置かれる / 何も触らない状態でも図が意味を成し、初期値のまま読み進められる
辞書情報
- 向いている用途
- 数式やモデルを含む解説を、読者が仮定を変えて確かめられる形で公開するとき。教材で、結論だけでなく結論が変わる条件まで見せたいとき
- 文字
- 本文は普通の読み物の組みのまま置く。可変の数値だけを下線と色で区別し、書体は変えない。
- 構成
- 本文を600px前後の1カラムに絞り、図はそれを説明する段落のすぐ横か直後に置く。触る所と変わる所が同時に視野へ入る距離を守る。
- 素材
- 操作は掴んで動かすことだけに絞り、入力欄と送信ボタンを置かない。触らなくても意味の通る初期値を必ず用意する。
- 注意
- 触って初めて中身が現れる作りにすると、動かさない読者にはただの空白の記事になる。
- 関連研究
- Bret Victorの2011年の記事本体と、そこで公開されたTangleの実装 / reactive document、explorable example、contextual informationという3つの型の違い / 同じ主張を静止した図と可変の図で書き分け、どこで理解が分かれるか試す
関連項目
この項目を引用する
辞典はリンクされるためにある。書いている場所に合う形をそのまま持っていってよい。
- 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>