ちょっと前になりますが、ThinkMobile2011というイベント向けに制作したHTML5製ソーダ缶のデモをご紹介します。
担当の方から、広告主向けにHTML5を使ったスマートフォン広告の新しい形を紹介したいので、何かアイディアはないかと依頼を受けました。技術的にHTML5の何かを使った広告を作ること自体は難しくないかもしれませんが、イベントのデモとして見せるということで、ある程度の派手さとHTML5ならではという部分のわかりやすさが要求されたため、アイディア出しそのものに最も時間を割きました。
コンセプト
ネイティブアプリケーションにできてウェブアプリケーションにできないことはまだまだ多いですが、いかにネイティブアプリケーションに近づけるか、という部分がHTML5の醍醐味でもあります。逆にウェブアプリケーションのネイティブアプリケーションに対するアドバンテージに、インストール無しでさらっと見せることができる、という部分があります。
そこで、HTML5らしいアプリケーションぽい派手さを持ちながら、バナーをクリックした先ですぐに体験できる広告、かつオーディエンスに具体的なイメージが湧くものを考えてみたのが、このソーダ缶です。
デモ
実際のデモはこちらです。iPhoneかiPadで御覧ください。(Chrome+MacBookProでも動くとは思うけど壊さないようにね)
- 画面がロードしたら「Googleサイダー」と書かれた缶が表示されます(元々はコーラだったのですが、諸事情でJerome SenaillatにGoogleサイダーにしてもらいました)
- iPhone / iPadを傾けてみて下さい。3Dで表示されているので、くるくる回すことができます。
- これはソーダです。試しに振ってみてください。どうなると思いますか・・・？
十分降ったら、蓋をタッチしてみてください。クラッシュしたらごめん。
いかがでしょう？炭酸飲料水のバナーをクリックして、こういう広告が出てきたら面白いと思いませんか？応用も色々有り得そうです。
技術解説
ところでこれをどうやって実現しているか、分かりましたか？ぱっと見て気になるであろう点としては
- どうやって3Dを実現しているのか
- どうやって傾きが分かるのか
- どうやって降っていることが分かるのか
- どうやってスマートフォンであのパフォーマンスを出しているのか
といったところでしょうか。ポイントは大きく3つあります。
- 縦長のDOMを細かく並べた円柱表現
- CSS3の3D Transformを使った立体表現とパフォーマンス(GPUパワー)
- Device Orientationを使った傾きと重力の検知
缶の側面は、JavaScriptを使って縦に長く、かつ背景にソーダ缶の画像を少しずつずらして適用したものをたくさん(ここでは180枚)丸く3Dに並べています。蓋と底を足せば缶のできあがり。3D Transformが適用されると処理がGPUで行われるので、Device Orientation APIを使って検知された角度を適用してCSSが変更されても、180枚以上のDOMエレメントがあることを感じさせません。
これ以上は解説を書くよりもソースコードを読んでもらったほうが早いと思うので、あえて細かいコードの話は書きませんが、大まかにはそんなトリックになっています。
まとめ
たまたま見かけたバナー広告でわざわざアプリをインストールしてリッチな広告を体験するというのは本末転倒もいいところですが、ウェブアプリである程度それが実現できるのであれば、直接コンバージョンに繋がる広告として考えることもできるのではないでしょうか。
今後ますますHTML5でできることは増えてきますので、オリジナルの面白い広告アイディアがどんどん出てきてくれればと思います。
という訳で、今回はHTML5時代の広告を考えた、というお話でした。
このブログで関連すると思われる他の投稿
Comments
Powered by Facebook Comments
0 Responses
Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.