Webだからできる、ニュースの新しい伝え方「御嶽山の噴火証言サイト」 | 面白法人カヤック

2015.03.25

#クリエイターズインタビュー No.35
Webだからできる、ニュースの新しい伝え方「御嶽山の噴火証言サイト」

Client Work

2014年9月27日に発生した御嶽山噴火。その災害に遭遇した人々の証言や映像などを記録する「噴火の証言」というサイトを、NHKさんとカヤックが制作しました。3DマップやWebGLなど最新技術を用いたサイトの制作の裏側について、ディレクター伊藤大輔、デザイナー小原暢、エンジニア中山祐平に聞きました。

プロの力で世の中に役立つものを生み出す

― 元々、NHKさんとデータビジュアライゼーションの取り組みをしたいというお話はあったそうですね。

伊藤: ええ。その準備段階で御嶽山噴火が起こったんです。今世の中に伝えるべきはこれだろうというNHKさんの言葉で、僕らもすぐに制作を始めました。ニュースで伝えきれない多くの証言をわかりやすく伝え、減災や防災に活かす。この明確なテーマのお陰で、制作上で困ることはほぼありませんでした。; サイトに来る方が何を求めて来るのか、3Dデータにマッピングされた情報をWebで観る仕組みなど話し合いをかなり密にやりました。なので、NHKさんと共に1つのチームでつくっているという意識も強かったです。

― 災害に関する情報だけに、ビジュアルデザインも難しかったのでは。

小原: 内容は重さと最新の技術、双方のバランスをとったデザインになるようにしました。軽すぎず、でも洗練された印象ですね。色や見せ方などを分類したイメージボードを見せ、NHKさんと意見のすり合わせをして決めました。
伊藤: トーン＆マナーもそうですが、よりこだわったのは見やすさ、使いやすさです。実は、ローンチ後にも何度か修正していて、当初の内容からはだいぶ変わったんですよ。

小原: できるだけ早く世に出したいとの意向があったので、まずは第一段階の物を短期間で完成させたんです。その後、使い勝手の要望やユーザーの意見を反映し、UI(ユーザーインターフェース)や表示方法を調整した改善版をリリースしました。

― 具体的にどんな改善をしたのですか？

小原: 初期は御嶽山の3Dマップ上にある、光の点をクリックすると証言が表示される仕組みだったんです。ただ、これだと全記事を読むには点を全部クリックする必要がある。だから、Facebookのように縦スクロールで一気に読める形へ変更しました。証言の比重をより重くした感じですね。
伊藤: SNSなどを見ると「涙が出た」や「驚いた」と証言に関する意見が多かったんですね。やはり、一番見てもらいたいのは証言ですから、その点を重視して、情報を再び整理し直しました。

最新技術を公共性の高いサイトに組みこむ工夫

― WebGLは、具体的にはどんな技術なんですか？

中山: Webブラウザだけで3Dグラフィックを表示させる機能のことですね。文字や画像のサイトとは、求められる知識や技術も違います。3Dなのでゲームなどに近いスキルが必要になるというか。
小原: WebGLが今回採用された背景には、最近各ブラウザがWebGLに対応しはじめたことが大きいですね。今までは利用環境が限られていて一部の人しか見られなかったんです。

― 災害系の情報サイトで、最新技術を導入するスタンスは珍しいのでは？

伊藤: 「新しい技術」といっても「ニッチな技術」ではなく、いずれ標準になる技術の普及直後という感覚なので、決してサイトを見る方を選んでいるわけではないという認識です。
中山: WebGLは、アート表現に使われることが多かった技術なんですよ。でも今回のようにUIに活用したことで、今までにない事例がつくれたんじゃないかと思っています。

― 技術面などで大変だった点はありますか？

中山: 特に難しさはなかったですかね。最新技術で情報が少ないので、疑問が出るたびに調べて解決しないといけない、という大変さはありましたけど。
伊藤: そう言っていますけど、最近、別の仕事で同じ技術を使っていて、こんなに難しいものだったのかと驚いているんです。不具合がすごく多くて、見られるはずの環境で見られない、ということもよくあります。; でもこのサイトの役割として、見られないなんて絶対に許されないでしょう。そんな中で、大きな不具合もなくこなしていたのかと思うと、感心してしまいます。

― なるほど。では、デザインとの兼ね合いではどうでしたか？

中山: このサイトは、文字やUI、ポイントが画面いっぱい表示されるサイトで、すぐ重くなってしまうんです。だから、できるだけデータを軽くすることを意識しました。
小原: 軽さを保持するために、更新の際には機能をいくつか削り、UI面でも調整を加えました。例えば、発言者を分類するフィルタを削ったり、本当に必要な機能かどうかの検討を丁寧にしました。

― 短期でローンチし、段階的に調整を加えていく進行だったとのことですが、そこでの苦労などはありましたか？

伊藤: いえ、今回はすごく恵まれていた気がします。NHKさんが世の中のためになるモノを出したいという想いで取り組まれていて、課題を解決すべくギリギリまで努力する、というスタンスでしたから。かなり柔軟に対応してくださったので、その辺りも成功した要因だと思います。
小原: いいものにしようという思いが伝わってきましたからね。チームにも一体感があった気がします。
伊藤: NHKさんとは他の部門の方ともお仕事をさせていただいているのですが、、仕事に対して本当に真摯に取り組まれているんですよね。一定のクオリティがある完成物をさらに良くするために改修を入れようなんて提案は、なかなか出ませんからね。

最新技術を空気のように使う

― 今回のプロジェクトを通して実感されたことを教えてください。

小原: WebGLのうまい使い方が生み出せたのはよかったですね。元々の思考プロセスも、証言データに紐付く時間と位置情報をうまく見せるには3Dが最適。それならWebGLがいいね、という流れでしたけど…。; 技術をアピールするのではなく、目的を達成するために技術を活用する。そんな経験ができた気がします。
中山: 証言を快適に見せるためにWebGLを使うやり方がわかったし、その便利さが実感できたのでよかったですね。最新技術を空気のように使うという感じで。

― 伊藤さんは入社して最初の案件だそうですね。

伊藤: 前職は代理店のアートディレクターで、制作物の完成には立ち会えない役回りだったんです。でも今回、友達と朝まで制作に没頭した大学時代のものづくりの感覚を、久しぶりに思い出しましたね。小原さんの責任感と頑張り、ゴン（中山）のスキルの高さにも助けられつつ、チームの力や内製の力、カヤックのいいところを実感した案件でした。