ブルーパドル、音楽に合わせて画面中が全力で泣き出す「泣くWEB」を公開

株式会社ブルーパドルは、5月9日、曲を再生するとサイト内の画像や文字が次々と泣き出す「泣くWEB」を公開した。本サイトは、5月21日に発表される安田レイの新曲「きみのうた」のプロモーションとして作成されたもので、「号泣（5/9)の日」に合わせてリリースしている。

「立川駅のアラサーブログ」と銘打たれた当サイトは、一見すると普通の失恋したアラサー女子ブログのように見える。しかし、女性らしい文章で綴られた失恋と出会いを読み進んでいくと、ブログが盛り上がってきたタイミングで曲の再生ボタンが現れる。そして音楽の再生と同時に、画面全体が泣き出す。ブログの悲しい展開に同調するかのように、サムネイルやSNSボタン、顔文字、絵文字までが画面中で泣き出し、文章内の句読点が涙のように画面を滑り落ちるような仕組みが特徴だ。

さらにブログの文章には、安田レイの新曲「きみのうた」の歌詞が隠されており、曲が進むにつれて歌詞のセリフ部分がハイライトし、新曲の歌詞を見せていく演出が施されている。また、最後はブログタイトル「立川駅のアラサーブログ」の「立」の字と、左上のメニューアイコンが合体して「泣」の字を形作る仕掛けなど、最初から最後まで、凝った作りでストーリー性に富んだ仕様になっている。

【５月19日追記】
5月21日の新曲リリースを控え、開発者にコメントをいただくことができた。音楽と文字を同期させるところには苦労をしたようだ。音楽も画面も自動再生にしないかぎり、完全同期することは難しい。そこで、曲の最初と最後だけ自動スクロールで演出箇所をナビゲート、曲中では画面下端にオリジナルスライダーを設置することで、この問題を解決した。このスライダーは「曲の再生位置」と「画面の閲覧位置」が両方分かるようになっており、一度離脱したユーザーでも再生位置に戻ってくることができる。

演出については、句読点を判別して涙のように落とす仕組みは、渾身のアイデア。SNSボタンが泣くところは、JavaScriptのみだとどうしても単調になってしまうため、Flashで制作したとのことだ。じわじわと「泣」の文字が完成したり、最後に一斉に花の絵文字が現れたりと、最初から最後まで飽きさせないWebサイトに仕上がっている。

「泣くWEB」
URL：http://www.nakiweb.com/

株式会社ブルーパドル
URL：http://blue-puddle.com/
2017/05/09