心にひっかかるサイトはこう作る！「いじめを考える」プロジェクト

2016年4月8日
TEXT：佐藤勝

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

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

水たまりに映るコンテンツは、スクロール操作で閲覧できる。傾きだけでなく、奥行きもリアルに表現されている
AD：佐藤ねじ　D：福澤準　実装：田島真吾　ディレクター：泉聡一　プロデューサー：北川尚広
コピーライター：日野原良行

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

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

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

青空は、いじめを考えるキャンペーンソングの重要なモチーフ。その青空を、水たまりを通して見せることで、より印象深いビジュアルに。

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

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

水面の感触を表現するために、マウスカーソルが重なると、中の要素が浮き上がるようなアニメーションや、水面に波紋をつける演出も（PCサイトのみ）

動画のサムネイルをクリックすると、画面がグレーアウトして動画再生が始まる仕組み

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

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

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