Web業界の潮流に乗り遅れるな！
いますぐ知っておきたい
第3回 スマートデバイス向けのリッチメディア広告
2013年11月22日
TEXT：川村 健一（株式会社オプト）
現在、HTML5といえば、Flashに変わる魔法の技術のように語られている。
PC環境に限ればFlashのほうが表現力に秀でており、さらに開発の工数も抑えられるケースが多い。したがって、PCユーザーをターゲットにする場合、かつ、表現力が問われるクリエイティブでは、今なおFlashで構築するのが最善の選択肢といえるだろう。
一方、スマートデバイスに向けたコンテンツの場合は事情が変わってくる。iOSではFlashがサポートされていない点、iOSとAndroidでは標準的なHTML5がサポートされていることから、HTML5を積極的に使える環境は整っているのだ。
Googleは「Flash互換環境にいるエンドユーザーよりもHTML5互換の環境にいるエンドユーザーのほうが多い」と述べており、今後2年でHTML5ベースの広告がFlashを上回るという北米市場の予想を紹介している。今後のリッチメディア表現において、HTML5が存在感を高めて行くのはまちがいない。
Google Web Designer
PC向けのインタラクティブコンテンツの場合、Flashを使えばプラグインがブラウザの差異を吸収してくれるので、複雑なプログラムを効率よく開発できる。
HTML5の状況はというと、スマートデバイス向けのツールは各社取り組みを開始した段階であり、Flashのようなデファクトスタンダードは存在していない。そんななか、GoogleがHTML5のコンテンツ制作ツール「Google Web Designer」をリリースした。Googleのツールということもあり、DoubleClick Studioとの連携が考えられているため、HTML5でのリッチメディア広告を作るツールとして非常に使いやすい。
今回は、Google Web Designerを使って、HTML5のリッチメディア広告の可能性を感じられるサンプルをつくってみよう。
GPS連動コンテンツ
外出先で近くにコンビニが無いか知りたいときは無いだろうか。今回のサンプルでは、今いる場所をGPSで取得し、エキスパンド時にマップ上に近くにあるコンビニをプロットするバナーをつくってみよう。
Google Web Designerを起動後、ファイルメニュー→“新しいファイル”を選択すると、以下のダイアログが出てくる。今回の設定はエキスパンド（エキスパンドバナー）を選択したのち、［初期サイズ：300×250］、［ディメンション（展開時）：480×250］、［名前：index.html］、［アニメーションモード：詳細］とした。
続いて、デザインを用意する。エキスパンドバナーの場合、最低2画面が必要になる（初期表示時のデザインと、エキスパンド後のデザイン）。今回は仮のデザインとして、扉ページのデザインを以下のようなイメージで用意した。
※Retina対応のため、300×250の2倍のサイズでPhotoshopにてデザインしている
上記のデザインをGoogle Web Designerに組み込んでいこう。まず、あらかじめ、Photoshopで各素材をPNG形式で書き出しておく。書き出しが終わったらGoogle Web Designerに戻り、デザインを配置したい画面を選択する。今回の場合、初期表示画面とエキスパンド画面のふたつがあるが、それらは右下のボタンから選択できる。まず、初期表示画面の［bannerPg1］を選ぼう。
書き出しておいた画像をGoogle Web Designe上にドラッグ&ドロップすると、画像を簡単に読み込める。プログラムがわからないデザイナーも直感的に制作できるのがうれしい。
画像を選び、Google Web Designer上にドラッグ＆ドロップ
Google Web Designerに配置された
ほかのデザインも同じように配置していく。
要素を配置したら、背景色に色をつける。要素をなにも選択していない状態で、プロパティタブ→“スタイル”に色を指定する。
次に、各デザイン要素にアニメーションをつけていく。FlashやAfterEffectを使ったことがある人にはなじみ深いと思うが、Google Web Designerもタイムラインを使ってアニメーションをつけていく。キーフレームというキーとなるフレームを複数設置することで、座標の移動や透明度などを変えていく仕組みだ。いちばん上にあるテキストを選択し、フレームの最初のコマで右クリックをし、“キーフレームを挿入”を選ぶと、キーフレームができる。続いて、フレームを進んだ個所でも同じようにキーフレームをつくる。
最初につくったキーフレームを選び、プロパティタブ→“スタイル”で［透明度：0］とすることにより、最初透明でフェードイン表示されるアニメーションをつくることができる。同じように、各デザイン要素に対してキーフレームを設定していき、アニメーションを完成させよう。
初期表示画面のデザインは完成したので、次にエキスパンド後の画面を編集する。初期表示画面の右下にある選択部分から［expandPg1］を選択しよう。
今度は、コンポーネントタブにある［地図］をドラッグ＆ドロップし、プロパティタブ→“位置とサイズ”から［幅：450px］、［高さ：250px］と設定したのち、座標を左上に合わせる。
地図を選択した状態で、プロパティタブ→“コンポーネント プロパティ”で［クエリ：コンビニ］と入力。さらに［位置情報をリクエスト］を選択したのち、［詳細設定を表示］を選択する。
これらの設定がすんだら、［公開］をクリック。ZIPファイルを解凍したのち、FTPでデータを上げれば完成だ。
今回のデータはテストサイトにアップしたので、ぜひスマートフォンでチェックしてほしい。
http://www.twist-cube.com/demo/gwd/
id: demo pass: mdn
・DoubleClick Studio Certified User
・東京インタラクティブ・ アド・アワード・銅賞
●株式会社オプト：http://www.opt.ne.jp/
●個人LinkedIn：http://www.linkedin.com/in/twistcube
いますぐ知っておきたい
リッチメディア広告制作の最新事情
第3回 スマートデバイス向けのリッチメディア広告
2013年11月22日
TEXT：川村 健一（株式会社オプト）
現在、HTML5といえば、Flashに変わる魔法の技術のように語られている。
PC環境に限ればFlashのほうが表現力に秀でており、さらに開発の工数も抑えられるケースが多い。したがって、PCユーザーをターゲットにする場合、かつ、表現力が問われるクリエイティブでは、今なおFlashで構築するのが最善の選択肢といえるだろう。
一方、スマートデバイスに向けたコンテンツの場合は事情が変わってくる。iOSではFlashがサポートされていない点、iOSとAndroidでは標準的なHTML5がサポートされていることから、HTML5を積極的に使える環境は整っているのだ。
Googleは「Flash互換環境にいるエンドユーザーよりもHTML5互換の環境にいるエンドユーザーのほうが多い」と述べており、今後2年でHTML5ベースの広告がFlashを上回るという北米市場の予想を紹介している。今後のリッチメディア表現において、HTML5が存在感を高めて行くのはまちがいない。
Google Web Designer
PC向けのインタラクティブコンテンツの場合、Flashを使えばプラグインがブラウザの差異を吸収してくれるので、複雑なプログラムを効率よく開発できる。
HTML5の状況はというと、スマートデバイス向けのツールは各社取り組みを開始した段階であり、Flashのようなデファクトスタンダードは存在していない。そんななか、GoogleがHTML5のコンテンツ制作ツール「Google Web Designer」をリリースした。Googleのツールということもあり、DoubleClick Studioとの連携が考えられているため、HTML5でのリッチメディア広告を作るツールとして非常に使いやすい。
今回は、Google Web Designerを使って、HTML5のリッチメディア広告の可能性を感じられるサンプルをつくってみよう。
GPS連動コンテンツ
外出先で近くにコンビニが無いか知りたいときは無いだろうか。今回のサンプルでは、今いる場所をGPSで取得し、エキスパンド時にマップ上に近くにあるコンビニをプロットするバナーをつくってみよう。
Google Web Designerを起動後、ファイルメニュー→“新しいファイル”を選択すると、以下のダイアログが出てくる。今回の設定はエキスパンド（エキスパンドバナー）を選択したのち、［初期サイズ：300×250］、［ディメンション（展開時）：480×250］、［名前：index.html］、［アニメーションモード：詳細］とした。
続いて、デザインを用意する。エキスパンドバナーの場合、最低2画面が必要になる（初期表示時のデザインと、エキスパンド後のデザイン）。今回は仮のデザインとして、扉ページのデザインを以下のようなイメージで用意した。
※Retina対応のため、300×250の2倍のサイズでPhotoshopにてデザインしている
上記のデザインをGoogle Web Designerに組み込んでいこう。まず、あらかじめ、Photoshopで各素材をPNG形式で書き出しておく。書き出しが終わったらGoogle Web Designerに戻り、デザインを配置したい画面を選択する。今回の場合、初期表示画面とエキスパンド画面のふたつがあるが、それらは右下のボタンから選択できる。まず、初期表示画面の［bannerPg1］を選ぼう。
書き出しておいた画像をGoogle Web Designe上にドラッグ&ドロップすると、画像を簡単に読み込める。プログラムがわからないデザイナーも直感的に制作できるのがうれしい。
画像を選び、Google Web Designer上にドラッグ＆ドロップ
Google Web Designerに配置された
ほかのデザインも同じように配置していく。
要素を配置したら、背景色に色をつける。要素をなにも選択していない状態で、プロパティタブ→“スタイル”に色を指定する。
次に、各デザイン要素にアニメーションをつけていく。FlashやAfterEffectを使ったことがある人にはなじみ深いと思うが、Google Web Designerもタイムラインを使ってアニメーションをつけていく。キーフレームというキーとなるフレームを複数設置することで、座標の移動や透明度などを変えていく仕組みだ。いちばん上にあるテキストを選択し、フレームの最初のコマで右クリックをし、“キーフレームを挿入”を選ぶと、キーフレームができる。続いて、フレームを進んだ個所でも同じようにキーフレームをつくる。
最初につくったキーフレームを選び、プロパティタブ→“スタイル”で［透明度：0］とすることにより、最初透明でフェードイン表示されるアニメーションをつくることができる。同じように、各デザイン要素に対してキーフレームを設定していき、アニメーションを完成させよう。
初期表示画面のデザインは完成したので、次にエキスパンド後の画面を編集する。初期表示画面の右下にある選択部分から［expandPg1］を選択しよう。
今度は、コンポーネントタブにある［地図］をドラッグ＆ドロップし、プロパティタブ→“位置とサイズ”から［幅：450px］、［高さ：250px］と設定したのち、座標を左上に合わせる。
地図を選択した状態で、プロパティタブ→“コンポーネント プロパティ”で［クエリ：コンビニ］と入力。さらに［位置情報をリクエスト］を選択したのち、［詳細設定を表示］を選択する。
これらの設定がすんだら、［公開］をクリック。ZIPファイルを解凍したのち、FTPでデータを上げれば完成だ。
今回のデータはテストサイトにアップしたので、ぜひスマートフォンでチェックしてほしい。
http://www.twist-cube.com/demo/gwd/
id: demo pass: mdn
【著者プロフィール】
川村 健一（Ken-ichi KAWAMURA）
株式会社オプト / ArtDirector
オプトにて、アートディレクション、デザインを担当。インタラクションを絡めた表現を得意としている。
・DoubleClick Studio Certified User
・東京インタラクティブ・ アド・アワード・銅賞
●株式会社オプト：http://www.opt.ne.jp/
●個人LinkedIn：http://www.linkedin.com/in/twistcube
