インタラクティブってなんだろう、2016年のwebはそんな年

インタラクティブってなんだろう、2016年のwebはそんな年

まろ

まろ

こんにちは、まろCです。2016年を振り返るといろんなwebサイトがありました。
印象的なのは、映像を絡めて心に突き刺さる演出をしている点です。

作り手がwebに動きを求めた結果、より良いユーザー体験が生まれ、話題となるコンテンツが続々と生まれました。しかし、受け手にとっては、それがwebglでも動画でもどちらでも良いこと。よりよい体験のためにどんな手法を選択するかは、作り手の舵によるところがあります。そして、その手法は発信者から受け手に対して一方的であったり、受け手のアクションを検知して次の動作を分岐させたりと、手法も様々です。

今回は、個人的に、そこをうまく突いたな〜と思う動画や、キャンペーンサイトを紹介したいと思います。

世界初の通話連動型MV

スクリーンショット 2016-12-12 11.46.45
http://ura-shinozaki.com/

URA SHINOZAKI-ほんとうの愛を、知っていますか?

ブラウザ上で流れる動画をスマホで操作するサイト。

PCとスマホ上でMVを開いてリンクさせると、スマホに電話がかかってきたような演出が始まり、MVが再生されます。スマホから流れる喋りとMVの歌がリンクしたりと、MVの再生に合わせてギミックがあります。

途中で電話を切ったりすると、また違う演出が見れたりします。

 

スクリーンショット 2016-12-12 11.46.54

技術的には websocket で通信を行っていると思うのですが、なにより企画が面白いです。インタラクションをスマホで行うと言ってしまえばそれだけなのですが、篠崎愛と電話できるサイトだと思うとテンションが上がります。企画と技術がうまく融合したサイトだな、と思ってピックアップしました。

ちなみに、その次に発表された「SNS横断型」のMVは全然面白くありませんでした。ひとを驚かせ続けるって難しいですね。

スマホをジャックするMV

lyrical schoolの「RUN and RUN」のMV

前章で「SNS横断型」の話が出たので、次は「スマホをジャックするMV」です。

これは、本当にすごいと思いました。スマホでの視聴が前提ですが、縦長の全画面で閲覧すると、本当にスマホが操作されているような感覚に陥ります。スマホでできるインタラクションを フルに使っているように見せているところが面白いです。

それに加え、キャンペーン用のwebサイトを新たに作らなくても、MVを既存のwebサービスで公開するだけで、SNSでバズったという点が面白い。そこには、スマホをもつ多くの人に馴染みのあるコンテンツを盛り込んで、webをうまく使った企画のすごさを感じました。

「webで動かす」手法だけではない、良いプロモーションの例だと思います。

過去から今を振り返るMV

スクリーンショット 2016-12-12 12.05.23
http://www.beams.co.jp/special/tcs/

TOKYO CULTURE STORY presented by BEAMS

40年間の東京のカルチャーをファッションと音楽で振り返るMV、そしてそれを伝えるサイトです。

各年代のファッションを再現して、かつ、90年代の東京ストリートシーンを彩った『今夜はブギー・バック(smooth rap)』を、1976年から各時代を代表するアーティストたちがメドレー形式でカバーしています。自分の時代を見れば「おお!」となるし、知らない世代を見れば「おお!」となる。好きなものを好きにやるこんなカルチャーが素晴らしいと思いました。

同時に本も出ました(買いました)。

WHAT'S NEXT? TOKYO CULTURE STORY (マガジンハウスムック)

WHAT’S NEXT? TOKYO CULTURE STORY (マガジンハウスムック)

  • 価格¥ 1,650(2017/01/20 10:54時点)
  • 出版日2016/10/31
  • 商品ランキング3,552位
  • ムック207ページ
  • ISBN-104838751583
  • ISBN-139784838751587
  • 出版社マガジンハウス

じっくり全部に目を通したくなる、珠玉の歴史本だと思います。

特設サイトもいい感じです。

まとめ

いかがでしたか?

どのサイトも、webの枠にとらわれないキャンペーン手法になっていましたが、webだってツールのひとつなのでそれでいいし、それがいいと思います。もっと五感を刺激するサイトを作って、このような「仕掛け」も作って行きたいと思います。

それでは。

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

フロントエンドエンジニアのまろCです。 コンセプト設計中心でものづくりしています。

このメンバーの記事をもっと読む
それいけ!フロントエンド | 213 articles
デザイン力×グローバルな開発体制でDXをトータル支援
お問い合わせ 会社概要DL