面白法人カヤック

トップへ戻る
ツイ

Client Work

2015.03.24

#クリエイターズインタビュー 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を使うやり方がわかったし、その便利さが実感できたのでよかったですね。最新技術を空気のように使うという感じで。

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

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

画像

扱う内容は災害という大きな物でしたが、実際に関わった3人からはなんともほっこりする雰囲気が感じられる取材でした。これからの彼らの活動にもご期待ください。

御嶽山「噴火の証言」
http://www3.nhk.or.jp/news/ontake2014/

バックナンバー
#クリエイターズインタビュー

ブレストが授業を変える!?カヤックのブレストが鎌倉の中学生に届くまで
ブレストが授業を変える!?カヤックのブレストが鎌倉の中学生に届くまで
No.49
ブレストが授業を変える!?カヤックのブレストが鎌倉の中学生に届くまで
昨年、SFC(慶應義塾大学湘南藤沢キャンパス)の創立25周年を記念して、卒業生と在校生が一緒に取り組むプロジェクト「未来創造塾」が立ち上がりました。 SFC卒業生が母校で在校生向けに、各々自由...
2016.04.11
日本のデザイナーの活躍を世界に広げていく。iichiの新たな挑戦とは
日本のデザイナーの活躍を世界に広げていく。iichiの新たな挑戦とは
No.48
日本のデザイナーの活躍を世界に広げていく。iichiの新たな挑戦とは
カヤックが2012年から出資してきたハンドメイドマーケットプレイス「iichi(いいち)」。「つくる人を増やす」を企業理念とするカヤックとスタンスも近く、5年に渡って良好な関係を築いてきました。...
2016.03.16
ネーミングサービス「KOTODAMA」を新潟の高校生に譲りました【対談あり】
ネーミングサービス「KOTODAMA」を新潟の高校生に譲りました【対談あり】
No.47
ネーミングサービス「KOTODAMA」を新潟の高校生に譲りました【対談あり】
カヤックコピー部のコピーライターがあなたに代わって、ネーミングやキャッチコピーを考えるサービス「KOTODAMA」。 2012年にオープンしてからの約3年半、華道教室の名前・玉ねぎの苗の名...
2016.03.03
剣を振ってキャラクターたちと一緒に闘う衝撃の体験「乖離性ミリオンアーサーVRデモ」を開発!
剣を振ってキャラクターたちと一緒に闘う衝撃の体験「乖離性ミリオンアーサーVRデモ」を開発!
No.46
剣を振ってキャラクターたちと一緒に闘う衝撃の体験「乖離性ミリオンアーサーVRデモ」を開発!
カヤックで、スクウェア・エニックスさまの人気スマートフォンゲーム「乖離性ミリオンアーサー」VRコンテンツ開発のお手伝いをしました。 「乖離性ミリオンアーサー」といえば1,300万DL超のヒ...
2016.03.02
カヤック流!エイプリルフールに流行るコンテンツをつくるコツ
カヤック流!エイプリルフールに流行るコンテンツをつくるコツ
No.45
カヤック流!エイプリルフールに流行るコンテンツをつくるコツ
毎年インターネット上では、多くのエイプリルフールネタが公開されていますが、昨年度カヤックは自社企画で3本、受託コンテンツも複数手がけました。 そこで今回は、2015年のエイプリルフール企画を振...
2016.01.28

関連ニュース

カヤック公式ツイッタ @kayac_inc

絶賛更新中!!

© KAYAC Inc. All Rights Reserved.

お好みのデザインに変更できます
5つのテーマから選んでください

学歴・職歴

×

送信

資格・スキル

×

送信

長所短所

×

送信

趣味興味
のあること

×

送信

ポリシーこだわり

×

送信

カヤックの
サービスについて

×

送信

その他

×

送信