スクロールテリング
Scrollytelling / 2012– / レイアウト / ウェブの読み物
読む位置を送る動作そのものを話の進行に割り当てたウェブの版面。図版や地図や動画が送りに応じて入れ替わり、上へ戻せば同じ順で元へ戻る。研究の側では長文報道のウェブ版として整理され、筋は一本道か、望んだ人だけ深く潜れる伸縮式かに分かれる。
ひと目で判断
見た目の特徴
- 図版が画面に留まったまま、本文だけが細い一列で通り過ぎる
- 図版の切り替えは不透明度の変化と地図の移動で行われ、逆に送ると元へ戻る
- 写真と動画とデータ図の三種類が同じ記事の中に混在する
- 筋は一本道か、途中で深掘りへ枝分かれして戻ってくるかのどちらか
向いている用途
- 調査報道や研究紹介を、図版を止めたまま本文だけ流す一枚のページに組むとき
- 手のひらの画面で読ませる長文に、操作の説明なしで進める仕掛けを入れたいとき
このスタイルを使う
短い指針を制作へ持ち込むか、構造化された仕様をAIへ渡せます。
詳しい作り方と出典制作ルール、実在作例、比較、研究、引用形式
辞書情報
- 文字
- 本文は一列に保つ。読む速さを決めるのは版面ではなく送りなので、行長を狭くし、見出しは筋の切れ目にだけ置く。
- 構成
- 図版を画面に固定し、その上を本文が通る形にする。図版1つに本文を何段割り当てるかが、そのまま進行の速さになる。
- 素材
- 差し替えは巻き戻せる作りだけで組む。不透明度の交代や地図の移動のように、送りの量と一対一で結べる変化を使う。
- 注意
- 送りに一度きりの再生を結びつけると、上へ戻った読者の前には空白しか残らず、記事の途中から読み直せなくなる。
- 関連研究
- 一本道の筋と伸縮式の筋の違い、そして伸縮式で読者が戻ってくる仕組み / 図版1つに割り当てる本文の量と、読み終わるまでの時間の関係 / 地図の移動を送りの量と結び、両方向で成立させる作り方
関連項目
- フォトエッセイ（Photo Essay）共通する印象：信頼。スクロールテリングとフォトエッセイの違いを見る
- アイソタイプ（Isotype）共通する印象：信頼 / 技術。スクロールテリングとアイソタイプの違いを見る
取り違えられやすい
ウェブの読み物をさらに見る
同じ「ウェブの読み物」から、共通する印象が多い順に次の項目を選んだ。
- インフィニット・キャンバス（Infinite Canvas）
- ウェブトゥーン（縦スクロール漫画）（Webtoon (Vertical-Scroll Comics)）
- シングルサービング・サイト（Single-Serving Site）
この項目を引用する
辞典はリンクされるためにある。書いている場所に合う形をそのまま持っていってよい。
- Link
- https://indexstyle.org/ja/styles/scrollytelling
- Markdown
- [スクロールテリング（Scrollytelling） — デザインスタイル辞典](https://indexstyle.org/ja/styles/scrollytelling)
- HTML
- <a href="https://indexstyle.org/ja/styles/scrollytelling">スクロールテリング（Scrollytelling） — デザインスタイル辞典</a>