Opus 5.5で、データビジュアライゼーションのリールを作ってみた

今回作ったのは、東京の気温を色と音で見せる40秒の映像です。題材にしたのは、気温の変化を色の帯で表す「ウォーミングストライプ」です。映像は帯を積み上げながら年代を進め、最初と最後の30年間の平均気温、猛暑日と冬日の日数へと切り替わります。

見た目は一発で出てきました。ただ、数字の意味と出典の書き方は、映像ができてからも確認が必要でした。

ウォーミングストライプとは？

ウォーミングストライプは、一年ごとの平均気温を一本ずつの色の帯に置き換え、年代順に並べたものです。基準となる期間の平均より気温が低い年は青、高い年は赤で表します。英国のレディング大学のEd Hawkins教授が考案した、気候変動を伝えるためのデータビジュアライゼーションです。レディング大学による紹介

数字や目盛りを省き、色の並びで長い期間の変化を見せるところに特徴があります。一本ずつ見れば年ごとの気温の違い、全体を見れば青の多い時代から赤の多い時代への移り変わりが分かります。細かな数値を読み取るよりも、気温の変化に目を向けてもらうための表現です。

今回は、気象庁の東京の年平均気温を使い、1876〜2025年の150本の帯を描きました。1961〜1990年の平均を色分けの基準にしています。その帯を一本ずつ積み上げ、現れるタイミングに音を合わせることで、一枚の図を40秒のリールにしました。

注記：Show Your Stripesで公開されているウォーミングストライプの画像には、CC BY 4.0（クリエイティブ・コモンズ 表示4.0国際）が適用されています。条件を守れば、商用利用や画像の改変も認められています。利用する際は、作者などのクレジットと出典、ライセンスへのリンクを示し、変更した場合はその旨を記載する必要があります。

40秒を1,200コマに分けて書き出す

動画にする際、ブラウザの画面をそのまま録画する方法は使っていません。リアルタイムの録画では、描画が追いつかない場面でコマが抜けることがあるためです。

今回は、ブラウザを自動操作するPlaywrightをPythonから使い、ウィンドウを表示しない状態でChromeを動かしました。描画する時刻を1/30秒ずつ進め、一コマずつ画像にします。40秒で1,200コマ。各コマの描画に時間がかかっても、動画の中の時刻は一定の間隔で進みます。

音は、実際に再生せず音声データを計算するWeb Audioの仕組み、OfflineAudioContextで40秒分を書き出しました。映像と音には同じ時刻表を使っています。最後に、動画変換ソフトのffmpegで画像と音をまとめ、映像をH.264、音声をAACにしたMP4にしました。

書き出しで一度つまずいたのは、音割れです。最初の音声は最大レベルがデジタル音声の上限である0dBFSに達していて、音が割れていました。音の振幅を抑える処理を加え、音声を作り直しました。

音の存在の大きさに気づいた

私の印象では、データビジュアライゼーションの作品で音がついているものは、あまり多くありません。今回のリールでは、映像に音が加わることで没入感が増したと感じ、音の存在の大きさに気づきました。

今後の作品づくりでも、ビジュアルにどんな音を合わせるか、動きと音をどう組み合わせるかを意識したいと思います。

自分の作品をリールにする作業を任せたい

今回のように一から映像を作る場合は、何を伝えるか、数字は正しいか、出典をどう書くかという判断が残ります。見た目がすぐにできても、そこまで終わったわけではありません。

作品のビジュアルを自分で作り込んでから、紹介用のリールに仕上げてもらうのが良い使い方ではないかと思います。配色や構図、データの見せ方は、自分で納得できるところまで整えておく。その作品をもとに、短い動画としての構成や音の合わせ方をOpus 5.5と詰めていけば、作品の表現を確かめながら、SNSで紹介するまでの手間を減らせそうです。

作る側で準備しておけることもあります。HTMLの作品を、時刻を指定すればその瞬間の絵を描けるようにしておくことです。そうすれば、あとから一コマずつ書き出して動画にできます。これからWebで作る作品には、リールにするための時刻指定も最初から用意しておこうと思います。

データ出典：気象庁「過去の気象データ検索」（東京）をもとにS. Kuwahara作成。30年平均、差、色は制作者が算出。

ウォーミングストライプの参照元：Professor Ed Hawkins（University of Reading）、Show Your Stripes。