ご機嫌いかがでしょうか。
今回はフロントエンドエンジニアの岩橋がお届けします。
少し息抜きにビーチサイドの話と、フロントエンド視点で注目した作品を分析してみたいと思います。
Check it out !!
という事でカンヌはビーチサイドも熱いのです。
ビーチはフェスティバルの中でもエンターテイメント色が強く楽しいのですが、見方を変えると各企業が推しているサービスが反映されていて見逃せないエリアです。
特に人気なのはFacebookビーチとGoogleビーチ。
まずはそのエリアから1つずつ刺さったものをピックアップして紹介します。
Facebookビーチ
まず会場に比較的近いFacebookビーチ。
会場内はInstagramをフィーチャーしていて、写真や動画に関連するコンテンツを中心に展開しています。
リアルタイム動画投稿
一番目立っていたのが48個のディスプレーからなるリアルタイムで動画投稿を体験するコンテンツです。
タブレットが設置されていて、投稿したい位置の番号を選択しインカメラで撮影を開始します。
9秒間の撮影が終わると対応するディスプレーにシームレスに投稿される仕組みです。
具体的に内部で使用しているテクノロジーは確認できなかったのですが、最終的にフレームレートを少し落としているように見えました。
いずれにしても「リクエスト」-「レスポンス」-「アウトプット」とシンプルなフローです。
なんにせよ会場に来たお客さんが気軽に楽しめる施策である事は間違いないです。
Tick Tock
これは、、似たようなものが以前Hackistブログでも登場していましたね。
Ad:techTokyo 2014に出展した「TickTock」です。
TickTockは投稿から動画のコマ絵変換や秀逸なアテンション演出で、
よりインスタレーションが強いものになっています。
そうなるとFacebookのも、もう一歩仕掛けがあっても良かったのかなと思います。
Googleビーチ
Facebookビーチから300メートル程歩くとGoogleビーチに到着します。
CardBoard
ここではMobile部門でグランプリを獲得した、cardboradの体験ができます。
ダンボールにスマートフォンを差し込んで、専用アプリを起動するとARを体験できる簡易的なHMDです。
昨年のGoogle I/Oでも配布されていましたが、今回も体験するともらえます。
現地カンヌで賞を獲得したプロダクトとわかっているとよりテンションあがりますね。
ちなみに買うと1000円＋税です。
実際装着してみると、奥行きや空間表現など、オキュラスリフトと同等のVR体験を楽しめます。
ダンボールで組み立てるHMDで、ここまで質感高い体験ができるのは凄いです。
イベントでもカジュアルな利用用途であればハコスコと同様に選択肢の一つなると思います。
ビーチ全体的にエンタメ要素が強く空間演出が非常にうまいです。
さすがGoogleといった感じで、このフェスティバルの中で一番気に入ったエリアです。
作品分析
次にフロントエンドエンジニアとして注目した作品を紹介・分析します。
The Banner That Makes You Like Banners
By BBDO RUSSIA GROUP
For 3M
[Media部門 ゴールド]
ターゲティング広告の仕組みを逆手にとったアイデア作品。
アイデア：
メモとして置き換わった画像も、実はポストイットのターゲティング広告。
メモの内容は入力したサイトと連動しているため、
自分がメモした内容が目障りな広告と置き換わり、便利なものにしてしまおうというアイデア。
技術：
専用サイトのフォームからポストイットで表示する画像（ここではダイナミックな文字列）をサーバに保存しサードパーティのクッキーにヒモ付ける。
表示の際はリタゲエリアとセットのJavascriptが反応し、クッキー情報をサーバに送ると、サーバからポストイット画像と、対応する文字列が返ってくる仕組み。
画像に見えるユニークな文字は実はデバイスフォントでウェブフォントの技術が利用されています。
所感：
ターゲティング広告とフロントエンド技術をうまく融合させています。
断片的に普段利用している技術故に、アイデアが如何に素晴らしかったのかと納得させられました。
所謂、既存技術の使い方のイノベーション。
商品特性に対するドンピシャのアイデアで広告の面白さを実感しました。
EA SPORTS MADDEN GIFERATOR : AN ART ,COPY & CODE PR
[ショートリスト][CreativeData部門 ゴールド]
賞はとっていないけど個人的に気になってずっと調べていた作品。
※とかいってたらCreative Dataでゴールドを獲得！勝手に嬉しい！
XBOXのNFLのゲームを制作する会社が仕掛ける施策。
応援しているチーム、そうでないチームに向けて独自のメッセージを書き、それがハイクオリティな動画GIF、SNS連携、Googleの広告連携と全体的にうまくまとまっている作品。
参考：http://giferator.easports.com/create/team
アイデアと技術：
選択構成をサーバにポストすると画像加工プログラムで動画GIFが生成されます。
併せてURLも発行されるのでシェアする事が可能です。
作成される動画GIFは動画を元に作成される為クオリティが非常に高いです。
動画GIFは３つのレイヤーから合成されて作成されます。
・バックグラウンドレイヤー（動画）
・ダイナミックテキストレイヤー（ユーザ入力）
・グラフィクレイヤー（動画）
ここからが注目でこのサービスはGoogleDisplayNetworkを採用していて、
スポーツ関連のサイトで一般ユーザーが作成した動画GIFが表示されます。
アドテクノロジー×フロントエンド×バックエンドの技術が綺麗に連携されていますね。
最終的にユーザが作成したものがバナーエリアに出現する事もモチベーションとさせたのも素晴らしいです。
The Other Side
By Wieden+Kennedy
For Honda Motor Europe
[サイバー部門 ゴールド]
ホンダシビックTypeRのプロモーションコンテンツ。
昼は子供を迎えに学校へ向かう良き父親、そして夜の顔は？と。
CIVICと男性を時系列で対にし、パラレルワールド的に見せるコンテンツ。
アイデア；
車のタイプRの冠と掛けあわせて、キーボードの「R」ボタンを押すことで動画を切り替えさせ、
「R」により意味を持たせてブランド×ストーリー×インタラクティブの作品に仕上がっている。
技術：
YoutubeIframeAPIを使った施策でHTML5のpostMessagegの機能を使う。
YouTubeIframeAPIReadyを皮切りにプレーヤー制御を開始。
2枚配置した動画の表示・再生ヘッド位置・音量などを、キーボード入力したタイミングでjavascriptでAPIを介してシンクロ制御をしている。
所感：
これはYouTubeの新しい表現方法を使った事で既存サービスの使い方のイノベーションって感じもある。
ここ数年で音や動画を有効に使った優れた印象的なサイトは出てきている。
スマートデバイスではまだ演出上で難題は多いとはいえ、動画コンテンツで上手く攻めればチャンスがある。
KPIによっては3デバイス対応は重要な要素。
ウェブ標準技術の中でも、エンタメ色の強いインタラクティブコンテンツが作れるので、引き続きアイデアは模索する価値が高い。
動画をメインの切り口に使っている有名なサイト
・TOKYO CITY SYNPHONY（カンヌ2013 サイバー部門受賞）
http://tokyocitysymphony.com/
・Happy: Pharrell Williams
http://24hoursofhappy.com/
■他にはWEBGL（大抵Three.js）、HTML5、CSS3というキーワードで、
ブラウザだけOK！などのアプローチが入っている作品もいくつかShorListに入っています。
それは目的達成の手段の一つで多少なりとも加点はあると感じられます。
もちろん多様な課題に対して解決するアイデアがあってこそな話である事は言うまでもなく、プロダクト作品等にも言える事だと思います。
最後に、Lions Innovationのセミナーで、記事を書きながら見た、Googleのビッグデータ（画像）のビジュアライズのライトニングトークが超面白かったです。
以上岩橋からお送りしました。
