{"id":"scrollytelling","no":528,"name":"Scrollytelling","ja":"スクロールテリング","era":"2012–","family":"ウェブの読み物","kind":"レイアウト","collection":"Dictionary expansion 26","addedAt":"2026-08-19","source":{"title":"arXiv (IEEE TVCG 版) — ScrollyVis: Interactive visual authoring of guided dynamic narratives for scientific scrollytelling","url":"https://arxiv.org/abs/2207.03616"},"reference":{"status":"verified","pageUrl":"https://arxiv.org/abs/2207.03616","credit":"arXiv (IEEE TVCG 版) — ScrollyVis: Interactive visual authoring of guided dynamic narratives for scientific scrollytelling"},"essence":"読む位置を送る動作そのものを話の進行に割り当てたウェブの版面。図版や地図や動画が送りに応じて入れ替わり、上へ戻せば同じ順で元へ戻る。研究の側では長文報道のウェブ版として整理され、筋は一本道か、望んだ人だけ深く潜れる伸縮式かに分かれる。","cues":["図版が画面に留まったまま、本文だけが細い一列で通り過ぎる","図版の切り替えは不透明度の変化と地図の移動で行われ、逆に送ると元へ戻る","写真と動画とデータ図の三種類が同じ記事の中に混在する","筋は一本道か、途中で深掘りへ枝分かれして戻ってくるかのどちらか"],"intents":["技術","信頼"],"works":["調査報道や研究紹介を、図版を止めたまま本文だけ流す一枚のページに組むとき","手のひらの画面で読ませる長文に、操作の説明なしで進める仕掛けを入れたいとき"],"recipe":{"type":"本文は一列に保つ。読む速さを決めるのは版面ではなく送りなので、行長を狭くし、見出しは筋の切れ目にだけ置く。","layout":"図版を画面に固定し、その上を本文が通る形にする。図版1つに本文を何段割り当てるかが、そのまま進行の速さになる。","material":"差し替えは巻き戻せる作りだけで組む。不透明度の交代や地図の移動のように、送りの量と一対一で結べる変化を使う。"},"avoid":"送りに一度きりの再生を結びつけると、上へ戻った読者の前には空白しか残らず、記事の途中から読み直せなくなる。","colors":["#000000","#FFFFFF","#4A4A4A"],"motif":"graphic","pair":["photo-essay","isotype"],"study":["一本道の筋と伸縮式の筋の違い、そして伸縮式で読者が戻ってくる仕組み","図版1つに割り当てる本文の量と、読み終わるまでの時間の関係","地図の移動を送りの量と結び、両方向で成立させる作り方"],"en":{"essence":"A web page form in which the reader's scroll position is the clock of the story, with graphics, maps and video changing as the page moves and reversing when the reader scrolls back. Visualization researchers treat it as the web equivalent of long form journalism and describe its structure as either linear or elastic, the elastic kind letting a reader dive deeper on demand. News outlets including the New York Times, the BBC and The Economist built the form out.","cues":["A graphic that holds still on screen while a single narrow column of text passes over it","Changes made by opacity and by moving a map, so that scrolling back undoes them in the same order","Photography, video and data visualization sharing one article","A path that is either straight through or branches into an optional deeper detour and returns"],"works":["Laying out an investigation or a research explainer as one page where the graphic holds and only the text moves","Giving a long read on a phone a way to advance that needs no instructions"],"recipe":{"type":"Keep the body in one column. The scroll sets the pace, not the page, so hold the measure narrow and place headings only at joints in the story.","layout":"Pin the graphic and let the text pass over it. How many paragraphs you assign to one graphic is the pacing.","material":"Build only changes that can run backwards, such as opacity crossfades and map moves, each tied one to one with scroll distance."},"avoid":"Tying a one shot animation to the scroll leaves a reader who scrolls back looking at nothing, and makes the middle of the article impossible to reread.","study":["一本道の筋と伸縮式の筋の違い、そして伸縮式で読者が戻ってくる仕組み","図版1つに割り当てる本文の量と、読み終わるまでの時間の関係","地図の移動を送りの量と結び、両方向で成立させる作り方"]}}