2016年4月8日
TEXT：佐藤 勝

雨上がりの青空が映った水たまり。その水面にテキストコンテンツが流れている、印象的なビジュアルのWebサイトを、皆さんはもうご覧になっただろうか？
これは、NHKのWebサイト「Sing,THINK,Link. 『あの空』歌おうプロジェクト」で、いじめを考えるキャンペーンソング「あの空」を広めるためのページだ。この、ユニークなUIのWebデザインは、どのようにして生み出されたのだろうか？

「あの空」は、今春AKB48を卒業した高橋みなみさん、プロデューサーの秋元康さんを中心に、全国から寄せられた1300あまりの歌詞をもとにつくられたキャンペーンソングだ。歌は3月19日放送の「いじめをノックアウト」スペシャルで発表され、「うたってみた。」動画を募集するキャンペーンとして、このページが設置された。

コンテンツは、高橋さんからのメッセージ、「あの空」発表時の動画、「歌ってみた。」動画の募集要項や投稿動画の紹介などだ。
青空は歌の世界観を表現する重要なモチーフだが、それを水たまり越しに見せることで、思わず少し立ち止まって考えたくなる、印象的なビジュアルになっている。

◆いじめに無関心な人にこそ届いてほしい

このページのアートディレクションを務めた、面白法人カヤックの佐藤ねじさんは、ビジュアルコンセプトについて次のように話す。

「このプロジェクトの取り組みを伝えるには、シンプルに青空を背景にして、文字をレイアウトするだけでも良かったのですが、いじめの当事者やその周辺の人はもちろん、こういうことに無関心な人に少しでも届いてほしいという思いがありました。そこで、青空をストレートに出すよりも、少し隠すことで、ビジュアルにちょっとした"ひっかかり"を作り、印象深いものにしたいと考えました」

そうしてたどり着いたのが、「水たまりの中に青空が映る」という表現だった。
青空の映った水面に情報を載せることで、「下を向いてる人に、上を向いてもらう」（このプロジェクトに気づいてもらう）という意味も持たせることができるというわけだ。

◆シネマグラフの手法を応用

水たまりの表面にテキストが映っているように見える表現は、静止画のなかで一部だけが動いている「シネマグラフ」の手法をWebに応用したものだ。
技術的には、 CSS3の3D回転機能を使用。XYZの3軸方向に回転が調整でき、パースペクティブも変えることができるので、コンテンツの傾きやパースを写真上の水面の傾き具合に合わせることで、リアルな表現に仕上がった。

「『シネマグラフスクロール』は、パララックスなどのダイナミックな表現手法と比べると、より静的な見せ方になり、歌の世界観にもマッチさせることができました。制作期間が1週間程度と短いため、より少ない工数で済むという点も大きかったですね」と佐藤さんは話している。

デザインで人びとに何かを伝えるのに、派手さやインパクトを出すことが必ずしも正解とは限らない。ぜひ、実際にこのサイトを訪れて、静かだが「心にひっかかる」表現を体験してみてほしい。

■Sing,THINK,Link. 「あの空」歌おうプロジェクト
URL：http://www.nhk.or.jp/ijimezero/song/