Web業界の潮流に乗り遅れるな！
いますぐ知っておきたい
第4回 Google Web DesignerによるYouTubeコンテンツ
2013年12月24日
TEXT：川村 健一（株式会社オプト）
前回はGoogle Web Designerを使って、GPSを活用したGoogleMapコンテンツをつくった。今回はYouTubeを活用する作例を試してみよう。
Google Web Designerを起動後、ファイルメニュー→“新しいファイル”を選択すると、以下のダイアログが出てくる。今回の設定はエキスパンド（エキスパンドバナー）を選択したのち、［初期サイズ：300×250］、［ディメンション（展開時）：480×250］、［名前：index.html］、［アニメーションモード：詳細］とした。
続いて、デザインを用意する。エキスパンドバナーの場合、最低2画面が必要になる（初期表示時のデザインと、エキスパンド後のデザイン）。今回は仮のデザインとして、扉ページのデザインを以下のようなイメージで用意した。
※Retina対応のため、Photoshopを使って300×250の2倍のサイズでデザインしている
上記のデザインをGoogle Web Designerに組み込んでいこう。まず、あらかじめPhotoshopで各素材をPNG形式で書き出しておく。
書き出しが終わったら、Google Web Designerを開き、背景色を設定する。最初はバナーを拡大するためのボタン“expand-button”のみ配置されているので、背景色を設定するためのcanvasを用意する。ツールバーから“長方形ツール”を選び、 ステージ上に配置。配置した要素を選択し、塗りの色を［#CC181E］と指定する。
ツールバーから“長方形ツール”を選ぶ
canvasを選択し、塗りの色を［#CC181E］と指定
塗りつぶされた
次に、canvasのサイズを“プロパティ”により、ステージサイズに合わせる。“expand-button”の上に他の要素があると、その要素がある部分はボタンをクリックできなくなってしまうため、サイズを合わせたら、“expand-button”が置かれているレイヤーを最上部に移動するのを忘れないようにしよう。
expand-buttonを最上部にする
背景を設定したら、書き出しておいたデザインを配置していく。2倍の大きさでデザインしているので、ステージ上に配置したら、“プロパティ”により、大きさを半分にし、パーツをデザイン通りに配置していこう。配置が終わったら、タイムラインにキーフレームを打っておく。
パーツを配置し、タイムラインにキーフレームを設定
各パーツが表示される順にキーフレームを調整する。なにもない状態から、デザインが次第に表示されるアニメーションにするため、はじめにすべてのパーツを透明にしておく。また、タイムラインの最初のキーフレームを選び、“プロパティ”から［透明度：0］を選び、非表示にする。
すべてのパーツの最初のキーフレームで透明にしておく
アニメーションをよりブラッシュアップさせるために“イージング”を調整する。“イージング”は初期値として“リニア”が選択されている。“リニア”の場合、一定のスピードを保って値が変化していく。このままでも問題はないものの、やや不自然な面があるため、最初は早く、次第にゆっくりするような動きにしてみよう。右クリックメニュー→“イージング”から［イーズアウト］を選べばばOKだ。最初は遅く、次第に早くするには［イーズイン］とする。基本の概念なので、実際に動かして試してみてほしい。
各要素のキーフレームの間で右クリックすると、イージングを設定できる
イーズアウトを選択
エキスパンド前の画面は上記で完成したので、続いてエキスパンド後の画面を用意しよう。Google Web Designer上で右下のタブから、“expandPg1”を選択する。
ページが切り替わったのち、［コンポーネント:YouTube］を選択し、ステージ上にドラッグ＆ドロップする。今回は全画面で映像を表示させたいので、コンポーネントを配置したら左上に移動し、サイズをステージの大きさに合わせた。コンポーネントを選択した状態で［コンポーネント プロパティ：URL］にYouTubeページのURLを入れる。また、［コンポーネント プロパティ：自動再生］にチェックを入れ、そのほかはチェックをはずす。続いて、もともと配置してあった“Close Button”が上にくるようにレイヤーの位置を調整した。
以上の設定が済んだら、［公開］をクリック。ZIPファイルを解凍し、FTPでデータを上げれば完成だ。
以上のように、Google Web Designerを使えばYouTube映像を簡単に導入できる。今回のデータはテストサイトにアップしたので、確認してみてほしい。
http://www.twist-cube.com/demo/gwd/02/
id: demo pass: mdn
・DoubleClick Studio Certified User
・東京インタラクティブ・ アド・アワード・銅賞
●株式会社オプト：http://www.opt.ne.jp/
●個人LinkedIn：http://www.linkedin.com/in/twistcube
いますぐ知っておきたい
リッチメディア広告制作の最新事情
第4回 Google Web DesignerによるYouTubeコンテンツ
2013年12月24日
TEXT：川村 健一（株式会社オプト）
前回はGoogle Web Designerを使って、GPSを活用したGoogleMapコンテンツをつくった。今回はYouTubeを活用する作例を試してみよう。
Google Web Designerを起動後、ファイルメニュー→“新しいファイル”を選択すると、以下のダイアログが出てくる。今回の設定はエキスパンド（エキスパンドバナー）を選択したのち、［初期サイズ：300×250］、［ディメンション（展開時）：480×250］、［名前：index.html］、［アニメーションモード：詳細］とした。
続いて、デザインを用意する。エキスパンドバナーの場合、最低2画面が必要になる（初期表示時のデザインと、エキスパンド後のデザイン）。今回は仮のデザインとして、扉ページのデザインを以下のようなイメージで用意した。
※Retina対応のため、Photoshopを使って300×250の2倍のサイズでデザインしている
上記のデザインをGoogle Web Designerに組み込んでいこう。まず、あらかじめPhotoshopで各素材をPNG形式で書き出しておく。
書き出しが終わったら、Google Web Designerを開き、背景色を設定する。最初はバナーを拡大するためのボタン“expand-button”のみ配置されているので、背景色を設定するためのcanvasを用意する。ツールバーから“長方形ツール”を選び、 ステージ上に配置。配置した要素を選択し、塗りの色を［#CC181E］と指定する。
ツールバーから“長方形ツール”を選ぶ
canvasを選択し、塗りの色を［#CC181E］と指定
塗りつぶされた
次に、canvasのサイズを“プロパティ”により、ステージサイズに合わせる。“expand-button”の上に他の要素があると、その要素がある部分はボタンをクリックできなくなってしまうため、サイズを合わせたら、“expand-button”が置かれているレイヤーを最上部に移動するのを忘れないようにしよう。
expand-buttonを最上部にする
背景を設定したら、書き出しておいたデザインを配置していく。2倍の大きさでデザインしているので、ステージ上に配置したら、“プロパティ”により、大きさを半分にし、パーツをデザイン通りに配置していこう。配置が終わったら、タイムラインにキーフレームを打っておく。
パーツを配置し、タイムラインにキーフレームを設定
各パーツが表示される順にキーフレームを調整する。なにもない状態から、デザインが次第に表示されるアニメーションにするため、はじめにすべてのパーツを透明にしておく。また、タイムラインの最初のキーフレームを選び、“プロパティ”から［透明度：0］を選び、非表示にする。
すべてのパーツの最初のキーフレームで透明にしておく
アニメーションをよりブラッシュアップさせるために“イージング”を調整する。“イージング”は初期値として“リニア”が選択されている。“リニア”の場合、一定のスピードを保って値が変化していく。このままでも問題はないものの、やや不自然な面があるため、最初は早く、次第にゆっくりするような動きにしてみよう。右クリックメニュー→“イージング”から［イーズアウト］を選べばばOKだ。最初は遅く、次第に早くするには［イーズイン］とする。基本の概念なので、実際に動かして試してみてほしい。
各要素のキーフレームの間で右クリックすると、イージングを設定できる
イーズアウトを選択
エキスパンド前の画面は上記で完成したので、続いてエキスパンド後の画面を用意しよう。Google Web Designer上で右下のタブから、“expandPg1”を選択する。
ページが切り替わったのち、［コンポーネント:YouTube］を選択し、ステージ上にドラッグ＆ドロップする。今回は全画面で映像を表示させたいので、コンポーネントを配置したら左上に移動し、サイズをステージの大きさに合わせた。コンポーネントを選択した状態で［コンポーネント プロパティ：URL］にYouTubeページのURLを入れる。また、［コンポーネント プロパティ：自動再生］にチェックを入れ、そのほかはチェックをはずす。続いて、もともと配置してあった“Close Button”が上にくるようにレイヤーの位置を調整した。
以上の設定が済んだら、［公開］をクリック。ZIPファイルを解凍し、FTPでデータを上げれば完成だ。
以上のように、Google Web Designerを使えばYouTube映像を簡単に導入できる。今回のデータはテストサイトにアップしたので、確認してみてほしい。
http://www.twist-cube.com/demo/gwd/02/
id: demo pass: mdn
【著者プロフィール】
川村 健一（Ken-ichi KAWAMURA）
株式会社オプト / ArtDirector
オプトにて、アートディレクション、デザインを担当。インタラクションを絡めた表現を得意としている。
・DoubleClick Studio Certified User
・東京インタラクティブ・ アド・アワード・銅賞
●株式会社オプト：http://www.opt.ne.jp/
●個人LinkedIn：http://www.linkedin.com/in/twistcube
