見出し画像

データ報道で広く使われる「Scrollytelling」とは何か

データ報道(Data journalism)やデータ可視化(Data visualization)には地図、アニメーション、インフォグラフィックなど様々な表現方法があります。今回は、最も広く使われる表現手段のひとつである「Scrollytelling」について紹介します。

Scrollytellingとは「Scroll」と「Storytelling」を組み合わせた「画面のスクロールと連動したストーリーテリング」を表す造語です。モバイル端末における報道コンテンツの消費が一般的になった2010年代の中盤から広まった単語です。

Scrollytellingの特徴は、通常のウェブサイトと同じくテキストによるストーリーの描写と、スクロールに連動するインタラクティブなグラフィックが同時進行する点にあります。これにより、ユーザーは複雑な概念の理解を必要とする場面でもテキストとグラフィックの両面から解説を得ることができます。

テキストだけで説明してもわかりにくいので、実例を見てみましょう。代表例としてReuters Graphicsの「Life in the Camps」を取り上げます。

この作品は、ロヒンギャ(ミャンマーに住むイスラム系少数民族)の人々がミャンマー政府に迫害され、バングラデシュとの国境沿いの地域に位置する難民キャンプで暮らす様子を描写したものです。60万人もの人々が劣悪な環境下で生活することを余儀なくされていることが衛星写真などから解説されています。

ここでは内容の詳しい解説はしませんが、ビジュアルに目を向けると、テキストと地図のアニメーションが交互に連動していることがわかります。

画像4

PCで見ると上のように地図とテキストが隣り合っています。一方でモバイルだと地図とテキストが重なっています。

画像5

このように、テキストとインタラクティブなグラフィック表現がスクロールによって連動していくのがScrollytellingの特徴です。Scrollytellingの長所は、モバイルでもタブレットでもPCでもほぼ同じユーザー体験を提供できる点にあります。どのような端末でも、ストーリーテリングの順序や提供する情報量がほぼ同じであることがわかります。

もうひとつ、よりグラフィックに手が込んでいる事例としてNew York Timesのインタラクティブコンテンツ『Masks Work. Really. We’ll Show You How』を取り上げます。

このコンテンツはタイトルの通り、マスクがいかに新型コロナウイルスなどのウイルスを防ぐかをビジュアルでわかりやすく解説するものです。

最初は普通のコンテンツと同様にテキストが表示されますが、途中からテキストのバックグラウンドにある人のグラフィックが徐々に拡大されていきます。

画像1

その後もスクロールを続けると、グラフィックはマスクの内部に移り、マスクによるフィルタリング機能が粒子の大きさによって異なることが解説されます。グラフィック上部には「いま自分が何を見ているのか」も表示されます。

画像2

さらに進むと、綿マスクからN95レスピレーターの解説に移ります。

画像3

スクリーンショットを撮っただけだと、動画での解説に似ているかもしれません。実際、このようなグラフィックとテキストが同時進行する解説は教育チャンネルなどの動画でよくある方法かもしれません。Scrollytellingが動画と異なる大きな点は「自分でスクロールしないと進まない」点にあります。多くの方に経験があると思いますが、動画はついつい集中力を欠いた状態で何となく流してしまうことがあります。私もテレビやネット配信の動画を見ているうちに考えごとにふけり、気がついたときには数分・数十分経過している、という経験があります。能動的に自分からスクロールしないと先に進めない、という制約が一定程度「ながら見」を防ぐことにつながるのでは、と考えています。

ちなみにNew York TimesのコンテンツはInstagramのアプリで閲覧できたりAR(Augumented Reality)コンテンツとして自分の端末がマスクの中にあるかのような体験もできるそうです。

インタラクティブな報道コンテンツにおいては、PCなど大画面で見たときとモバイル端末で見たときのビジュアルをうまくバランスさせることが極めて大きな課題でした。モバイル端末が出始めたときにはPCを優先してモバイルでは情報を落としたり全体のサイズをぎゅっと縮めたりするような作品があったり、モバイルを優先するあまりPCで見るとスカスカした印象を与えるような作品もありました。現在ではモバイル端末によるアクセスが圧倒的である一方で、Scrollytellingのように両者のバランスをうまく取る形式に落ち着いたと言えます。


今回の内容はスマートニュースの社内勉強会での発表を一部抜粋&整理したものです。ふだんはメディア研究所という部署でデータ可視化やデータ報道についての発信をしているので、興味のある方はnoteやTwitterのフォローをよろしくお願いしますm(_ _)m

この記事が気に入ったらサポートをしてみませんか?