久本空海／「スクローリーテリング」から考えるジューシーなデータ可視化

Fri, 29 Dec 2023 00:00:00 +0000

Data Visualization Japan Meetup 2023（2023年12月29・30日開催）における、久本空海さん（株式会社MIERUNE）の講演です。スクロールテリングの事例と作り方、インタラクションと読者の関係、そして「メタメディアとしてのコンピュータ」までを3部構成で辿ります。

メイン発表1発目ということで、久本が発表させていただきます。今日は1時間ほど枠をいただいているのですが、スライドを Web で公開しているので、欲張っていろいろな情報を入れました。後でスライドを見ていただければと思います。気楽に聞いていただければ幸いです。

今日は3部構成です。

スクロールテリングの話——事例、プログラミングよりの作り方、私が作ったもののケーススタディ
インタラクションと読者——ニューヨークタイムズの「Snow Fall」から始めて、そもそもスクロールという行為や、それ以外のインタラクションはどう影響するのか
メタメディア——感性、知性、そしてもっと大きな話としてコンピュータと新しい表現について

デモ：東海道中スクロール栗毛

まず、話すばかりもあれなのでデモを。**今年の4月ぐらいに作った「東海道中スクロール栗毛」**というものです。スクロールテリングを考えていたときに「こういうのはできるかな」と作ってみました。

東海道中を、地図を使ってこういう感じで進んでいけるようになっています。下敷きは MapTiler ——後で説明する MIERUNE の地図です——のもので、**空に雲がかかっていたり、夜になったりと変わったりする。**作り方は後ほどお話しします。

自己紹介

久本空海と申します。ソフトウェアエンジニア、コードを書く側の人間です。去年から北海道に住んでいて、位置情報の可視化——つまり地図ですね——をやる MIERUNE という会社に所属しております。さきほどの藤井さんの話にもありましたが、昔は自然言語処理をやっていました。

これは2週間前の写真ですが、昨日もまたどかっと雪が降って、こういう寒い中からお送りしております。

個人で作っているもの

会社の仕事と分け隔てなく、個人でもウェブサイトを色々作っています。

People Map of Japan ——アイデア自体は私ではなく、The Pudding というすごくクールなアメリカの人たちがやっていたものを日本風にしたものです。Wikipedia である期間に一番アクセスされた人を、その出身地の代表点として地図にするインタラクティブな地図。
緯度で並べた人口分布 ——各自治体の人口を南北（緯度）方向に並べたもの。**東京から大阪あたりにかなり固まっている。**一番上の2ミリオンが札幌なので、**南北で見るとちょっと特異な場所に見える。**これは Observable で作りました。
北海道版 Wordle ——ニューヨークタイムズに買収された単語当てゲーム Wordle を元に、地図と組み合わせてみたもの。北海道には自治体が180近くあって、全国では1700ほど。****10%以上が北海道にあるということで、自分の地理の勉強とプログラムを兼ねて作りました。

MIERUNE

位置情報を扱う可視化の専門集団です。「MIERUNE」という名前ぐらいですので、専門家として可視化をやっております。**北海道が拠点で、今26名ぐらい。**オープンソースのコミュニティから生まれた会社——FOSS4G という界隈があるのですが、そこから生まれた会社なので、カルチャーとして独特な面白さがあるかなと思っています。

外に出せるものとしては——

Yahoo! JAPAN さんの人流データ可視化。先ほど清水さんの発表にもありましたが deck.gl を使っています。
文化財総覧 WebGIS ——日本全国の遺跡が60万件以上発掘されているのですが、書類ではなく地図上に載せると色々見えることがある。最近は機械学習と DEM（数値標高モデル）を使って古墳を探してみるということをやって、実際に新しい古墳が見つかったりしています。
産総研さんのもの。産総研はめちゃくちゃ大きなデータと計算機資源を持っているのですが、その点群データや3Dデータを表示できるビューアを作ったり。
Minecraft のもの。PLATEAU（国土交通省が出している都市の3Dモデル）なども参考にして、都市のモデルを作って街づくりのコンテストに使う。

先ほど LT で**「れきちず」**のお話が一番最初にありましたが、その加藤さんも MIERUNE のメンバーとして一緒にやっています。右側が先月ぐらいに出た新しい本、地図とか路線図のものですね。

もう一人、小松さんという方がいて、彼もすごく面白いものを色々作っています。面白いのが、彼は元々林業をやっていて木を切ったりしていたのですが、プログラミングが面白くなってきて、林業のデータを地図でやる方が面白いと言ってきた。新宿のデータを 3DGS（3D Gaussian Splatting）で3Dにするというのを先週出していて、結構見られていたようです。

（昨日、紹介するよという話をしたら——記事では「法務省の」と書かれていたのですが、**それは誤りで、法務省ではなく AIGID という団体がやっている「G空間情報センター」**だという訂正をしておいてくれ、とのことでした。）

コミュニティへの関わり

先ほどコミュニティという話もしましたが、オープンソースのコミュニティにかなり関心があって、QGIS や MapLibre に年間1万ドル、4000ユーロといった金銭的な支援をしたり、メンバーとして関わったりしています。

情報共有もいろいろしていて、**『位置情報エンジニア養成講座』は弊社 CTO の井口が出したものです。特に Web やソフトウェアエンジニア周りの話は体系的にまとまったものがなかなかないので、参考になるのではないかと思います。また、『ソフトウェアデザイン』**というエンジニア向け雑誌でも連載をさせていただいております。

コミュニティイベントもやっていて、今年は札幌の路面電車を貸し切ってやったり。MIERUNE のオフラインの勉強会を社内外の人を集めて毎月やっているので、札幌にお越しの際はぜひ遊びに来てみてください。

言語から地図へ

もう少しだけ自己紹介を。元々自然言語処理——コンピュータで日本語や英語といった人間の言葉を扱う技術をやっていました。この1年は ChatGPT が大きく扉を開いたのではないかと思いますが、私の場合は主に日本語で、**形態素解析（単語分割）**をやったり、法律のデータを使ったりしておりました。

**「言語をやっていて、なんで急に地図や可視化をやるんだ」**と飛躍があるように思われるかもしれませんが、私の中ではほとんど同じことをやっているつもりがあります。

**「辞典が好きな人は、暇なときに Google マップを見る説」**という記事がありました。地図も、現実のものをなるだけ正確に書き写して、どのようにまとめて表現するのかというところは共通する。****抽象的な概念の表現という意味で似ているのではないか。私もそういう観点で、どちらも面白いと思っています。

2年前に**『データ視覚化の人類史』の翻訳が出ましたが、そこでも「歴史を通じて、人々の考えや現象は言葉や数字、そして図表で表されてきた」「時代を経るにつれ、より抽象化されたもの——初期の地図や図表——になってきた」**と言われているそうです。

私の興味は、抽象的には**「思考のための道具」**です。言語も地図も、そしてデータ可視化も、思考のための道具なんだなと思っています。

人間の認知はバイオロジカルな意味では数百万年レベルで変わっていないはずですが、**こういう道具や概念によって、これまで考えられなかったことを考えることができる。****それがすごく面白い。**これが、今日話したいこと全てに通底する話です。

コミュニティと私の変化

もう少しだけ、この場なので話したいことがあります。

2年前はまだ NLP をやっていて、趣味で可視化で遊んでいました。地図が面白いなと思ってきて、何かしら分からないなりにやる。

ジョン・スノウのコレラ地図——ここに来られている方はご存じかと思いますが、伝染の仕組みが科学的に分からなかった時代に、地図上にマッピングしたら「ここの井戸が」と分かったという、データ可視化の先駆けとして知られている例ですね。そういう王道も見つつ、可視化をどうしたらいいかな、NLP もやりつつと思っていたら、「データ可視化の学び場」というコミュニティが立ち上がった。今日の主催でもある矢崎さんがやるというので、周りにそういう人がいないから入ってみようと。

そうしたら、MIERUNE を創業した古川さんが「北海道で MIERUNE という会社をやっています」と。ちょうど2年前のこの Data Visualization Japan Meetup でも古川さんはメイン発表をされていましたが、その前に私があちらの勉強会で発表させてもらったときに「こういう人が来て」と紹介させていただいて——**そういうご縁もあって MIERUNE に入社したり、北海道に移住してきたり。**人生が変わる Data Visualization Japan というところで、これを話したかったのです。

1年前には LT でコミュニティの話もさせてもらいました。NLP からは離れたかなと思ったら——コメントにもありましたが記号接地問題（シンボルグラウンディング）、まさにそれで、ChatGPT はテキストでしか見ていないのかもしれない。そこをもう少し現実世界と接地させていくのはすごく面白いし、まだやられていない部分でもある。今年も沖縄で言語処理学会の大会がありましたが、そこでセッションを設けたりと、1周回ってまた繋がったりしています。

矢崎さんの昔のエッセイに**「みんなで踊る」**という社会課題の話があります。**誰かが踊っていたときに「面白そうだな、私も加わってみたいな」と入ってくる。**そのオープンソース精神・コミュニティ精神が面白いなと思いますし、そういう意味で今日この場でお話しさせてもらうのは大変光栄だなと思っております。

すごく長い前置きになりましたが、本題に入っていきます。

第1部：スクロールテリング

スクロールテリング——聞いたことがある方もない方もいるかもしれませんが、見たら「見たことあるな」と思うものだと思います。スクロールとストーリーテリングを組み合わせた言葉です。

今年、**荻原和樹さんの『データ思考入門』**が出ましたが、そこにもインタラクションの節がありました。ボタンを押す、スクロールする——紙ではできない、デジタルメディアだからこそできるダイナミックな表現があるし、それを活用しない手はない。そしてただ受動的に読むのではなく、自分が何か操作をしたり能動的にアクションすることで記憶に残りやすくなる。****スクロールテリングはその代表的な手段である、と述べられていました。

海外の事例

ニューヨークタイムズ（コロナ死者100万人）

1年前のものですが、アメリカのコロナ死者数が100万人を超えたときの記事です。**スクロールしていくとドットが増えていき、実際に100万点プロットされる。**これは WebGL のような技術を使っています。

点は1つ1つ点でしかないけれど、1人の人生であるわけです。****その人に人生があって、それが100万失われているというところを表している。スクロールしていくと地図があり、モーフィングで死者数の時系列のグラフになったり、それがまた地図の方にモーフィングされていく。

紹介したかったのは、WebGL というすごい技術を活用していることそのものではなく、技術を使うために使っているのではないという点です。それでこういうストーリーを紹介するというところがすごくいい。

フィナンシャル・タイムズ（ウクライナ）

戦車が通っているところの動画から始まり、90km を進んで東部を奪還したという作戦の例です。地図があって、テリトリーがどう変わっていくか。

文章で表現するよりも、スタティックな地図で表現するよりも、こう見えてくるだろうと。**地図がダイナミックに、スクロールによって時系列で変わっていく。そして90km の進軍の例が航空写真で載っていて、他のマルチメディア——動画など——も出てくる。**物語をすごく印象付けている。

ロイター（トルコ・シリア地震）

ロイターはグラフィックデスクがすごく強い印象があります。今年の **IIB（Information is Beautiful Awards）**でもショートリストに入っていました。

今年のトルコ・シリアの地震で、地震の後に有毒な粉塵が出てきている問題について述べたものです。どれだけの量の粉塵が出ているのか、1つ1つが1つのビルという単位になっていて、スクロールしていくとビルが増えていき、アングルが変わってスケールが変わる。右側がマンハッタンで、そのサイズと並べると圧倒的なサイズ感が数字を見るよりも分かるし、こんな量があるよというのが伝わる。

ブルームバーグ（生成AIのバイアス）

画像生成——Stable Diffusion のものですが、**学習データによってバイアスがあるというのはよく言われる話。**それに対して、顔写真を職業ごとに生成して、肌のトーンや色を見たときにどういう違いがあるか、どういった偏りがあるかを実際に見せている。これも効果的ではないかと思いました。

CNN（イギリス海峡）

また違ったテイストで心に残ったもの。イギリス海峡を不法移民のボートが通ってくるというところで、**イギリス政府はそれを「Stop the Boats」と言って止めようとし、ドローンなどの技術を投入している。それでも船が見つからず、沈んで死亡者が出てしまう。**そういうところを、全体の色合いやトーンも含めて、ウォーニングのような図も交えて見せている。面白いというとあれですが、印象的な例。

ABC ニュース（オーストラリアの減税）

シンプルなんだけど面白いなと思った、今年の例です。オーストラリアで大規模な減税をやるという話で、**「税金が減るのは嬉しいことだけど、それってどれくらいのスケールなの、本当にそれでいいの」**を表すところ。

平均年収の9万2千をドットで表したときに、100ミリオンはこう、243ビリオンだとこうと。右のスクロールバーの小ささを見てほしいのですが、こういう感じで延々とやっていく。****スケールを見せるというのは、読者にとってより伝わる感覚に訴えかけるところがあるのではないかと思います。

サウス・チャイナ・モーニング・ポスト

日本だと聞き慣れないかもしれませんが、香港のプレスです。かなりグラフィックが強いと個人的に感じていますし、すごい作品が出ています。

一例として、漢服（漢民族の服）がリバイバルしているという話。**イラストが効果的に使われていて、スクロールすることでレイヤーを見せたり。**もちろん現代のニュースも出していますが、すごくいいトーンでやられていて、いつも参考になると思っています。

Rest of World

英語のメディアだと基本的にアメリカやヨーロッパがフィーチャーされるけれど、そうじゃない「その他の世界」に対して英語メディアをやっている団体です。すごく気合いの入った記事が多い。

今日持ってきたのはインドの例で、ムケシュ・アンバニという人の商業帝国が、食べ物からスマホから何から本当にいろいろな業界にわたっていて、その中にいるんだよというもの。データ可視化とはまた少し違うのかもしれませんが、スクロールするとイラストの中が動いていく。

日本からの事例

日本経済新聞（処理水）

今年の記事で、ヘリコプターを飛ばして大量に写真を撮り、フォトグラメトリで3Dモデルを作るということをやっています。メイキングの記事も出ていて、日経としてフォトグラメトリーを本格的に活用した初事例とのこと。日経さんは本当にいろいろなことをやられていますが、非常に効果的だし興味深い。

NHK（ガザ）

2年前、2021年のガザの紛争の記事です。**スクロールすると爆撃の様子の画像が再生されたり、地図があったり。**2021年時点の話で「なかなか先が見えないよね」という内容ですが、2年後の今もこういう状況になっている。

これは担当された方が——エンジニアが本業ではないと思うのですが——自分でプロトタイプ開発をしたり、現地の記者と連絡を取ったりして作られたというところが、すごく面白い例だなと思って紹介させていただきました。

朝日新聞（Premium A）

日経さんとはまた違った向きで色々出されていますが、日本バスケの話が面白かった。**スクロールするとステッカーのようなものがパンパンと出てきて、全体の印象としてバスケのポップな感じに合っている。**私はバスケに詳しくないのですが、面白いなという印象を得ました。

縦スクロールだけではない

縦のスクロールを紹介してきましたが、そうでないものも世にあるので少しだけ言及します。

**横スクロールでスケールを見せるもの。**ずっと横にスクロールしていく。
**月を1ピクセルにしたときの、地球や太陽、太陽系の他の天体の大きさと距離を実寸で出したもの。**右に延々とスクロールしていくのですが、大体は真っ暗。****宇宙がどれくらい広いのかというスケール感が見えるという意味で面白い例でした。
The Pudding の「スペード」——トランプカードとアフリカ系アメリカ人の話。そのゲームのデックに見立てて、右にスクロールしていくとカードが出て、また動いたり、その中に文章が書かれていたり。****これはまた新しい表現だなと記憶に残っています。
上に行くもの。**neal.fun の宇宙エレベーター**。一番下から始まって、どんどん上にスクロールしていくと成層圏が、といったものが出てくる。この方はその前は深海で下に行くものをやっていたり、トロッコ問題のシミュレーションみたいなものもやっていて、すごくおすすめです。
**映画『Mondays』のウェブサイト。**今年見て面白かったタイムループものの映画なのですが、**サイトをスクロールして一番下まで来ると、また最初のところに戻って、スクロールが永遠に続く。**映画のテーマと合っていて面白い表現。
**あるウェブメディアで、縦に小説を書くというもの。****縦に4行、同時にセンテンスが続いていって、それがくっついたり離れたりしていく。**スクロールを活用した表現として記憶に残っています。

作り方

時間があまりないのでさらっといきますが、興味があればスライドを見ていただければと思います。

ノーコードでやるなら——Flourish は使われている方も多いと思いますが、今年スクロールテリングの機能が出ているそうです。地図周りだと ArcGIS にストーリーマップの機能があります。他にも Shorthand など、ノーコードで Web を作るツールにストーリーテリングの機能が盛り込まれているものがいくつかあるようです。

私の場合は主にプログラミングで自分でコードを書いて作るので、そこも少し紹介します。

Intersection Observer API ——現代の JavaScript にはこれがあります。昔はスクロールイベントを使ったりしましたが、すっきり書けるようになりました。
Scrollama ——これを使うことで、自分で細かいところまで全部作るというよりは簡単にできる。****現代においては Scrollama を使うのが一番いいのではないかと個人的には思っています。それ以前にも群雄割拠な時代がありました。
GreenSock（GSAP） ——アニメーションやゲームでも使われるライブラリで、スクロール用のプラグインがあります。サウス・チャイナ・モーニング・ポストで使われているのを見たことがあります。**凝ったアニメーションをやるにはこれもいい。**商用だとライセンスが少し違うところがあると聞きました。
Svelte ——Web フレームワークの Svelte がすごくおすすめです。Svelte 自体、元々ニューヨークタイムズのグラフィックエディターだった方が作ったものなので、相性がいいし、コミュニティにも受け入れられているように思います。ロイターの方が「Svelte だとスクロールテリングはこう書けるよ」というパターン集・テンプレートを用意してくれているので、実装の参考になるかと思います。
Mapbox / MapLibre ——Web 地図でスクロールテリングをできるライブラリやテンプレートがあります。Mapbox にはFree Camera API があって、**カメラを動かしていくことができる。たとえばツール・ド・フランスの中継で、ルートを登っていくのをカメラが追従するようなもの。**ただ、単にルートに沿ってカメラを動かすとガクガクしてめちゃくちゃ酔うので、lerp（線形補間）でスムーズにする、元のデータ自体を simplify するといったテクニックが必要です。

ケーススタディ：東海道中スクロール栗毛

冒頭でお見せしたものの作り方を簡単に。

絵はパブリックドメインのもの。
街道のデータがなければどうしようもなかったのですが、実際にデジタルデータで公開してくださっている方がいたので、それを使わせていただいています。
宿場の位置情報（緯度経度）や説明は Wikipedia に載っているものを、コードを書いてクローリング／スクレイピングして半自動で取得。
Svelte、Mapbox、そして Scrollama を使っています。

Scrollama を用いた実装は、パッと見てもよく分からないと思いますが、それぞれの DOM 要素にクラスをつけて、「このクラスに入ったら移動する」という形になっています。コード側と宣言側（HTML 側）を分離できる。

コードとデータは全て公開しているので、気になるところがあれば全部見られるようになっていますし、何かあれば Issue を立てていただければ幸いです。

第2部：インタラクションと読者

Snow Fall と The New York Times

「Snow Fall」——ニューヨークタイムズが2012年に出した記事です。スクロールテリングの先駆けとも言えるもので、マルチメディアも入れてものすごくヒットしました。11名で6ヶ月以上かけて作って、今で言うバズった。****ピュリッツァー賞、ピーボディ賞も受賞。業界としては「Snow Fall」が大名詞になるような、大きな転換点になったと言われています。

Data Visualization Society の Nightingale というマガジンでも、**「以前は『Apple みたいなサイトを作ってくれ』と言われることが多かったが、Snow Fall が出たら『うちのサイトも Snow Fall させたい』と言われるようになった」**というクライアントからの要望の話が紹介されていました。

日本でも、朝日新聞の「浅田ラストダンス」という記事がありました。これも Snow Fall にかなり直接的に影響を受けて作られたもので、当時おられた古田さんが**「Snow Fall から学んだものである」「このコンテンツを朝日新聞が作ったということ自体が、他のメディアのニュースになるほど話題になった」**と述べておりました。

Snow Fall については制作陣へのインタビュー、Wikipedia の記事、そして10周年記念の記事が出ています。ある特定の記事に対して「10周年」という記事が出るのはかなり大きなことだと思うのですが、そこで述べられていたのは——

**グラフィックのデスクが強くなった。**グラフィックはおまけではなくなり、記事ができた後に追加するのではなく、それを主体として作っていく形になった。
**ビジュアルスキルを持つ人々がジャーナリズム業界に注目するきっかけになった。**私自身も元々ジャーナリズムにいたわけではないですし、デザイナーやエンジニアが「ジャーナリズム面白い」「私も活躍できる場があるんじゃないか」と目を開くきっかけになった。

「読者はスクロールしかしたくない」

しかし、そのように大きく取り上げられたものなのですが——2016年のニューヨークタイムズの Archie Tse さんの発表を見ると、**「インタラクティブなものをニューヨークタイムズでは減らしている」と言っているんですね。「読者はただスクロールをしたいのであって、インタラクションは見ないししない」**と。

彼は3つのルールを述べていました。

スクロール以外のことをさせるなら、何かすごいことが起きなければならない。
ツールチップやクリックさせるものは基本的に誰も見ないから、そこに情報を隠さない。
**2012年からの違いはモバイルプラットフォームの台頭。**そこに対して見せ方を変えなければならず、すごく大きなコストがかかる。

続けて、同じくニューヨークタイムズの Gregor Aisch さんも2016年に、先ほどの話を引いて「誰もインタラクションなんか見てないよ」という話をしていました。実際のニューヨークタイムズの事例だそうですが——**あるグラフィックのページで、30秒以上滞在したユーザーだけに限定しても、10%しかボタンを押さなかった。****吹き出しをつけて強調してみても15%。**つまり85%の人は押さなかった。

言われてみれば、読者として全員が押すかというとそうではないのですが、**データとして見ると「85%押さないのか」**と。

これについてはネット上でいくつか議論があり、**「そもそも作る側は作っているけれど、見る側には時間の制約があるし、記事のゴールが何なのか、読者の関心が何なのかという話があるのではないか」といった反応もありました。Aisch さん自身は「多くが見ないとしても、だからインタラクティブはもうやらなくていいという話ではない」**と述べたりしています。

スクロールは継続、クリックは決断

では、スクロールとクリックなど他のインタラクションはどう違うのか。

**「スクロールは継続で、クリックは決断」**という話をしている人がいました。スクロールは連続的な動作であり、クリックは非連続的な、何かしらデシジョンメイキングをするもの。****読者にとってのハードルはそこで上がっているというのは、実感としてあるのではないでしょうか。

今年の記事で面白かったものですが——「長いページは読まれない」「下の方は読まれない」という話があったりしますが、そういう証拠は別になくて、アイトラッキングなどの調査では結構下の方も見ていたりするらしい。ただし、スクロールはするけれど、スクロールする＝読んでいる、とは限らない。

**ざっと見る（スキャニング）は反応としてやっていく。****ただ「読む」は選択的な行動である。**そこでこの人がやっているのは——

重要な情報は一貫した場所に置く
**繰り返し（レペティション）**も何かを伝えるものである
間にある空白もニュートラルなものではなく、メリハリをつける

**文章の長さが問題なのではなく、構造とリズムがポイントなのではないか。**これは読者としても「そうだそうだ」と思います。**長ければいい／悪いという話ではない。**ぎっしり詰まっていたら——自分が研究をしていて「これを読むぞ」というのでなければ——日々の大量の情報の中でどれだけ見るか、エンゲージするかは難しかったりするのではないでしょうか。

スクロールジャッキングへの批判

話が逸れますが、スクロールテリングが出てきた2016年頃に**「スクロールテリングはやめてくれ」という話をしている方もいました。私は同意しない部分も多いのですが——スクロールしても長さが全然分からない、スクロールジャッキング——プログラムでスクロールを制御していて、思った通りのスクロールをしない——そういうものはフラストレーションが溜まるという話です。これはすごく同意できるところ**だと思います。

ただ、「ではステップのボタンを押させるといいか」というと、それもさっき言った『決断』の話になってくる。読者にとってフラストレーションにならない形のスクロールであればいいのではないかと思っております。

個人的に思うのは、**読者側もスクロールテリングという手法に慣れてきているので戸惑わなくなってきているだろうし、作る側も「どうスクロールするべきか」が分かってきている。**なので、ここで述べられているようなフラストレーションの溜まるスクロールテリングは、それほどないのではないかというのが私の個人的な見立てです。

マイク・ボストック——D3.js を作ったことでも有名な方ですが、彼も早い段階でスクロールについての持論を述べていました。クリックよりスクロールがいいだろう、スクロールジャッキングはやめよう、そして——**動画の再生を開始するといったとき、読者は画面全体を視野として見ているわけではない。****上の方を読んでいるときに下で動画が始まると混乱を招く。**そういったことを考慮したスクロールコンテンツを、という話です。

（言及までですが、ある方がスクロールについて講演されていて、実際のデモや歴史の話などをユーモラスに扱っていて、すごく面白いものでした。動くスライドがウェブサイトで見られます。）

スクロールテリングが助けになる理由

さきほども出てきた Nightingale の記事ですが、ここまで話してきたことに繋がるところで——人間の認知能力には限りがある。そして読む側の余裕や興味にも限りや偏りがある。そこに対してスクロールテリングが助けとなるのではないか。

「スプーンフィーディング」——ちょっとずつ、小分けにして与えられると。**パラグラフがどんどん続いているよりは、読者にとって咀嚼しやすい。**まさにそうではないかと思います。

同じ記事で違う観点として、**「スクロールテリングは動画の再生制御として完璧な方法である」**という話もしていました。現実と同じく直線的に、時間をかけて1度に1つ。****リニアに繋がっている。かつ動画と違って、前に戻る、もっと早く進むといったコントロールがしやすいからさらに良い。****人間の考える、直列に時系列に物事が起こるというところでは、記事のフォーマットとして分かりやすかったりするのかなと思います。

第3部：メタメディア

時間があと10分ぐらいはあるかと思うので、最後に話題を広げてお話しさせてください。

また荻原さんの記事なのですが、**「なぜデータジャーナリズムは日本で普及しないのか」**という話。そこに書かれていた観点として、プラットフォーマーの配信があるのではないかと。Yahoo! ニュースなどで配信される場合はテキストと画像が出されるので、自分で全体をコントロールできない。****日経ビジュアルデータのような自社の場に来てくれれば好きにできるけれど、それができるだけのパブリッシャー／プレスがいるのかというところが課題ではないか、と。それはそうなのかなと思います。

ただ、それでいいのかというと、個人的にはやはりインタラクションは面白いし、適切にやれば有用なものなのではないかと思います。**では、どうやっていくか。****インタラクションにはより広くどういう面白さや可能性があるのか。ここで「ジュース」**という話に入っていきます。

Juice ― UI の手触り

冒頭でも述べた Wordle というゲーム。単語を推測するゲームですが、爆発的に瞬時に流行ってニューヨークタイムズに買収された。****SNS でシェアできることやゲーム性の面白さもあるのですが、カードのめくれるアニメーションが結構小気味よく、気持ちいいんですね。

Wordle を作ったジョシュ・ウォードルさんのポッドキャストのインタビューを昔聞いたときに面白かったのが、**UI における「ジュース」**という話でした。ユーザーに対してどうやってフィードバックを与えるか。

コンピュータとしては、押した瞬間に答えは瞬時に分かっている。****ただ現実ではそうではないので、アニメーションを作り、もっとオーガニックな印象でカードがめくれていって、ちょっとずつ答えが分かるようにする。****この成分が Wordle の成功に大きく貢献したのではないかと彼は述べておりました。

「ジュース」という言葉は元々ビデオゲームの会話から来たそうです。キャッチオールフレーズというか、細かいディテールの話で、**「絶え間ない豊富なユーザーフィードバック」**と、2005年のおそらく初出の記事では述べられています。

ウォードルさんも言っていたのが、**「Juice it or lose it」**という発表の動画。これがすごく面白くて、今日いろいろ欲張って入れましたが、1つだけ見るとしたらこの動画がおすすめです。

**ブロック崩しのゲームを例に、1個1個こうやって少しずつ足していく。****ここでちょっと揺れを入れるとどうなるか、軌道を出すとどうなるか、スローモーションにすると、音を入れると。**そういうのを実際に見ていって「なるほどな」となる。見ていてすごく楽しいものなのでお勧めです。

**「ジュース」はよく分からないんだけど、なんか気持ちいい。**感性のところだと思います。

nendo の方が言っていて面白かったのが、UI の実用と娯楽という話。アクセシビリティやユニバーサルデザインという話はあるけれど、そこだけだとアイデアが制限される。****でも娯楽のみだとアイデアが溺れていく。****それでも遊び心を入れていくのは大切なのではないか、と。

今年出た記事でものすごく面白かったのが——**iPad をスワイプするような動きが、現実のメタファーにどう沿っているか。****なぜこういうふうに、ちょっとだけ触るとちょっとだけ大きくなるのか。**本当にちょっとしたディテールを見せていて、この一手でかなり変わっていくというのが解説されている。言語化できるかどうか分かりませんが、使う側としては「これいいな」「これちょっと違うな」というのはあると思います。

先日見た話では——物理的な距離と、人間が感じる距離は違う。リニアではない。普通に数式で1本の線を引くよりも、遠くになったらエクスポネンシャルに変わる、そういうところを加えると人間にとってより感じやすいものになったりするのかなと思います。

この分野では中村勇吾さんというインターフェイスデザイナーの方がいます。結構前のインタビューですが、**「なんだか気持ちいい」**という話をしていて——生理的に気持ちいい、触っている感じ。****実際に触っていない、画面で触れているわけじゃないんだけど、そこにある。****触る前の認識と触った後の認識との落差、その面白さを追求していると言っていて、**そこが面白いところ。**個人的にも「よく分からないけど、なんかいい」というのはあると思うんですよね。

中村さんは2年前に多摩美で公開講座をされていて、これもめちゃくちゃ面白かったのですが——なぜ画面の中に質感を感じるのか。****「質」というもの自体は見えないけれど、そこから出る現象、動き、ライティングの感じから見えるのではないか。

**人間は動きから「そこに何かがいる」と感じる。例として出していたのは、ただのポリゴンなんだけれど、動きを見ると「これは中に人間が入っているように見える」というアニマシー知覚の話。さらに面白いのは、「では新しい現象を逆に作ることで、これまでにない新しい質を表せるのではないか」**と言っていたこと。そういうところがデジタルメディアの可能性なのではないかと思っています。

知性 ― 人間拡張という系譜

感性の話をしましたが、知性の話も少しだけ。

今日はスクロールテリングやマウスの話をしました。マウスを作ったのはダグラス・エンゲルバート——HCI 分野のパイオニアですね。**68年のデモ（The Mother of All Demos）**をやった人です。

**「なぜマウスを作ったんですか」と聞かれたら、「マウスを作りたかったわけではなくて、もっと大きな『人間の知性を拡張するためのプロジェクト』のパーツでしかなかった」**と。

この人間拡張というのはポイントというか、脈々とあるものだと思います。**最近 AI がありますが、それとはまた少し違うもの。****パーソナルコンピュータの系譜——アラン・ケイやスティーブ・ジョブズもそうだと思いますが——エンパワーメントであって、人工知能的なもの、Google 的なものとはまた違うのではないか。**もちろん ChatGPT のようなものを道具として使うというのはあるのですが、思想的な系譜としては違うのではないかというのは、私も思うところです。

スティーブ・ジョブズの有名な**「思考のための自転車」**という言葉があります。**動物の運動効率を見たとき、1kg・1移動あたりのカロリーが一番少なかったのはコンドル。****人間は上から1/3ぐらいでそんなに良くなかったけれど、自転車に乗ったら断トツで良くなる。だからコンピュータは、自分自身が速くなるわけではないけれど、心にとって・思考にとっての自転車である。****自分の力なんだけど、より遠くに行ける。**やっぱりこういうところが面白いなと思っています。

コンピュータと新しい表現

もう最後なので駆け足で。

**Explorable Explanations（探索可能な説明）**という概念・ジャンルがあります。シミュレーションで、インタラクティブに触ったら実際に動かせるもの。

ブレット・ヴィクターさんが2011年にやっていたのは——論文自体は紙・スタティックなものとしてはできる限り分かりやすいけれど、それをインタラクティブなメディアにすることでよりよく分かるようになるよねという話。それ以外にもインフィニット・キャンバスやプログラマブルなインクなど、脈々といろいろな試みがあります。

参考までに、Metamuse というポッドキャストがあって、こういった方々が（英語ですが）話しているのですごくおすすめです。Muse という iPad のアプリの人たちがいろいろなゲストと喋っています。Muse 自体は残念ながら今年チームが解散ということになってしまいました。大学でやる学術研究でもない、VC から資金獲得してやるスタートアップでもないというところで、**こういったものを作るのはなかなか難しい。**10月にレトロスペクティブが出ていますが、そういう観点からも、実行という意味でもすごく面白いものです。

ブレット・ヴィクターの例でもそうですが、それでしか考えられないことを可能にするメディア——**グラフやチャートもそうだと思いますが——そういったものの可能性がすごく面白い、というのが今日言いたかったことです。

**コンピュータと表現に興味がある。**スクロールの話をしていたらどんどん話が広がっていますが、そういうところが面白いなと思っています。

山辺さんがインタビューで言われていたのが——イギリスで昔、鉄が使えるようになったとき、最初は鉄で作られた橋を見たことがないから、石や木で作るような感じの橋を作っていたと。素材とテクノロジーをベストの形に結びつけるまでには時間がかかる。****我々がコンピュータをどう扱うかというのも、同じような段階なのかなと思います。（ちなみに山辺さんはこの後ご発表があるので、邪魔にならないよう、もう少しで終わります。）

最後にこの話だけして終わります。映画の話が結構好きなのですが——19世紀末に映画という技術が発明されたとき、最初はカメラは固定されていて、舞台演劇のメタファーや延長だった。****それ以外を見たことがないからです。

ただ、**「いや、カメラを動かしたらいいんじゃないか」**と。19世紀末に、カメラをゴンドラに乗せた人がいた。****カメラワーク自体はしていないけれど、ゴンドラが動いているから向こうが動いていくという表現をしたらしいです。

20世紀に入ると、カメラを動かせばいいんじゃないかとか、逆再生してみて壊れた壁が戻るとか、もちろん映像編集といったものが出てきた。これが新たな芸術——時間と空間を融合したような芸術になってきた。****たったこの1世紀でできた新たな表現だと思うんです。

なので、コンピュータにおける表現も同じように考えると、これからできることがたくさんあるのではないかと思っています。

**コンピュータは、その可能性がより広い「道具を作る道具」**だと私は思います。ただ、それがやはり——**舞台演劇じゃないですけれど——紙とペンからなる世界観の延長にあったりするのではないでしょうか。**電子書籍や電子版の新聞も、多くの場合そうだったりすると思います。

**このメタメディアたる装置の表現力は、メタファーもあるんだけれど、それ以上の可能性がある。****もっといろいろなことができるのではないか。**それが思っていることです。

というところで、こういったお話をさせていただきました。ちょっと長くなってしまいましたが、私の発表はこんな感じです。ありがとうございました。

スクロールテリング on Data Visualization Japan

久本 空海／「スクローリーテリング」から考えるジューシーなデータ可視化