Pages Navigation Menu

For Creative Communication

2013年、世界を最もHAPPYにしたWebサイトは?

どうやらそれは、PHARRELL WILLIAMS – 24 HOURS OF HAPPY。元N.E.R.Dのシンガー、ファレルのミュージックビデオに連動した、インタラクティブなサイトです。

HAPPY

デジタル・クリエイティブ界での絶賛

権威あるWebデザインのアワードサイト “FWA” での Site Of The Year 受賞に続き、同じく質の高いデザインが集まる “Awwwards” でも Site Of The Year User’s Choice を受賞!FWAの受賞記事では、各国のデジタルクリエイターたちが手放しで絶賛しています。このサイトはモバイルに対応していないにもかかわらず、今日時点のView数は670万回。YouTubeのオフィシャルMVは、なんと4千万再生以上…!

(ピンと来ない人は、まず4分7秒のオフィシャルMVを見てみるといいかも。4分を24時間に「延ばす」ことの意味がなんとなく、意味がわかってきました)

…でも、日本語で、この作品やサイトに言及した記事ってほとんど見かけません。なぜだろう…。

この曲はもともと、2013年公開のCG映画 “Despicable Me 2” 、邦題「怪盗グルーのミニオン危機一発」のサウンドトラック。同映画は日本国内でも吹き替え版が公開され、9月22-23日には週末観客動員1位を獲得したそうです(「風立ちぬ」の人気が一段落した頃)。Wikipediaによれば、サントラとサイトのリリースは11/21、シングルカットが12/16とあるので、英語圏でも本当に年末差し迫った頃、アディショナルタイムでの決勝点みたいな展開でした。なので、まだ口コミが海を越えてこないのかも。(ファレルの知名度もあんまりない?そうでもない?Ne-Yoに似てる?J-WAVE TOKIO HOT 100でも、1/12付けの10位が最高位の模様)

評価のポイント

FWAの評者コメントで多く指摘されている、このサイトの突出した良さは、「シンプルなコンセプト・アイデアと、それを完璧に実現した技術」(“A perfect union of concept and execution”)です。

4分の動画をつなげて24時間=1440分ということは、360本ぐらい映像を撮ってつなげているわけです(すごい根性)。それを、秒単位の時刻で辻褄を合わせて、サイトを開いたら曲が最初からスタートして。前後の映像に切り替えたり、時計のUIから時刻をずらすと、映像は変わるけど曲の位置は変わらない(切り替えた先の映像でぴったり頭出しをしているということ。レスポンスもそんなに遅くないのに…)、、という、すごくすごく大変そうな調整作業の山が裏に隠れているわけです。 “It takes a huge amount of work to deliver so much joy from something so elegantly simple.” (こんなにエレガントにシンプルなものからたくさんの喜びを届けるために、莫大な量の仕事が必要) というコメントも頷けます。

サイトのコンテンツは本当にシンプル(曲とコントロールとcreditしかない)、インターフェースの面では、時計の外枠はビートで揺れる動きがあったり、ちっちゃいファレルの写真入り丸印をクリックすると「公式動画」の位置に遷移したりと、芸が細かいです。

happy2

360本?の動画のほとんどは「素人さん」の踊りを撮ったものということですが、時折セレブ(マジックジョンソンとか、JoJoとか)が登場する「隠し要素」も口コミのきっかけだったり、サイトは現在時刻に連動しているので「いま見に行くと誰が出てるのかな〜」という再訪の楽しみがあったりと、中毒性の高いデザインがされています。

#とはいえ、やっぱり日本語圏だと、よっぽど洋楽詳しい人じゃないと、セレブ云々のお楽しみ要素は「何それおいしいの?」状態かも。でも、たまに超ダンスうまい人が映っていたりするんですよ〜

カスタマーエクスペリエンス?

私も当初、このサイトがAwwwardsのSite Of The Dayに選ばれた時は、「コンセプトは面白いし、時計のUIもかっこいいけど、そんなに良いか…?」という印象でした。

でも、あらためて曲をじっくり聞いたり、歌詞を読んだりして、あらためてサイトをこまかく見てみると、徐々にこのプロジェクトの世界観である「HAPPY」な気持ちがわかってきました。(シンプルだけど、まっすぐ前向きで、とてもよい曲。)

Because I’m Happy
Clap along if you feel like a room without a roof
Because I’m Happy
Clap along if you feel like hapiness is the truth
Because I’m Happy
Clap along if you know what happiness is to you
Because I’m Happy
Clap along if you feel like that’s what you wanna do
(だっておれ今ハッピーだから/手ぇたたいていこうよ/屋根のない部屋って感じならさ/幸せ、それが真実って感じならさ/君にとっての幸せ それが何か分かっているならさ/それが今君の求めていることならさ)
※訳詞は男子洋楽部さん

24 HOURS OF HAPPY の高評価は、クールな仕掛けと丁寧な仕事のおかげで、「ハッピーなエクスペリエンス」をうまーく増幅する装置として、Webが機能しているから、という点が大きいと思います。良い体験でも、ポジティブな感情を引き起こさなかったら、ここまで前向きなバズは生まれない。また、ストレスをちょっとでも感じずに楽しみ続けることができる実装だからこそ、安心してシェアされる。海外のWebデザインを見ていると、javascriptをとことんチューニングして、切れ目のない動きを実現することの重要さを、痛いくらい教えられます。

それだけではなく、裏側で動いているであろう、動画同期の処理など、気になるテクニカル面の裏話が聞いてみたい!Awwwardsは時折、メイキングや詳細な技術情報を含むケーススタディをコンテンツにしてくれるので(例:Escape Flight。これイチオシだったのに、サイト閉じちゃったからな…)、そんな記事を待ちたいと思います。(パリのカンファレンスにもanonymousが出るらしい。行ってみたい…)

Good job, creators!! > We are from L.A; ICONOCLAST INTERACTIVE; i am OTHER; anonymous

コメントを残す