MS 広告制作ガイド

MS 広告制作ガイド
カンバス フローティング
2013.12.06
カンバス フローティング
目次
1.
表紙
2.
目次
3.
概要
4.
挙動の解説
5.
広告仕様
6.
入稿ファイルについて
7.
FLASH制作ガイド 1-1
FLASH全般について
8.
FLASH制作ガイド 2-1
表現・デザイン・動作上の確認事項 ＜1＞デフォルトフローティング
9.
FLASH制作ガイド 2-2
表現・デザイン・動作上の確認事項 ＜2＞カンバスアニメーション
10. FLASH制作ガイド 2-3
表現・デザイン・動作上の確認事項 ＜3＞マウスオーバーフローティング
11. FLASH制作ガイド 3-1 制作上の注意事項 マウスオーバー誘因演出について
12. FLASH制作ガイド 3-2 制作上の注意事項 フレーム毎の容量について
13. FLASH制作ガイド 4-1
FLASHテンプレートについて カンバスエリアの位置とフローティング可動領域
14. FLASH制作ガイド 4-2
FLASHテンプレートについて クリッカブルエリアの設定
15. FLASH制作ガイド 4-3
FLASHテンプレートについて フローテインング収束後に戻るフレームを指定
16. FLASH制作ガイド 4-4
FLASHテンプレートについて MSNホーム、ニュースページのキャプチャ
17. FLASH制作ガイド 5-1
主要機能一覧
18. FLASH制作ガイド 6-1
禁止Action Script一覧
19. 音の使用について
20. 制作ガイドに関するお問い合せ
2
MS広告制作ガイド
カンバス フローティング
MS広告制作ガイド
概要
カンバス フローティングとは
「カンバスフローティング」は広告が表示されると、デフォルトで3秒間のフローティングが展開される
アテンション力の高いカンバス商品です。
マウスを乗せると新たにフローティングが展開され、マウスオン時はアニメーションの永続再生が可能です。
カンバス フローティングのしくみ
※点線エリア内のみの挙動は次ページ参照
OK
デフォルトフローティング
マウスアウトで
収束
JavaScript判定
・ブラウザバージョン
・FlashPlayerバージョン
カンバス
NG
3
代替イメージ表示
マウスオーバーフローティング
マウスオーバーで
展開
カンバス フローティング
MS広告制作ガイド
挙動の解説
＜挙動の解説＞
＜1＞デフォルトフローティングアニメーションが再生
カンバスエリア外でアニメーションが展開される
3秒以内で収束
＜2＞カンバスアニメーションが再生
カンバス内でアニメーションが再生
12秒以内で静止
※デフォルトフローティングとあわせて初動15秒以内
＜3＞カンバスアニメーションの静止、マウスオーバー誘因
カンバスアニメーションが静止してマウスオーバー誘因要素
が表示される
＜4＞フローティングの展開
カンバスエリアにマウスオーバーすると、カンバスエリア外
でフローテインングアニメーションが展開される
アニメーション：永続可
＜5＞フローティングの収束条件
フローティングエリアからマウスアウトする
4
カンバス フローティング
MS広告制作ガイド
広告仕様
広告仕様
カンバス フローティ
ング
原稿サイズ
（左右 x 天地）
ファイル容量
アニメーション
ファイル形式
Altテキスト
SWF
500 x 612 pixel
2MB
初動15秒以内
SWF
-
代替イメージ
300 x 600 pixel
40KB
15秒以内
GIF / JPEG
-
表示保証環境
OS
ブラウザ
Windows XP, Windows Vista, Windows 7, Windows 8
バージョン
Internet Explorer 7.0 以上, Firefox最新版, Chrome最新版
プラグイン
Flash Player 8.0 以上
設定
JavaScript設定が「有効」であること
ActiveXコントロールが「有効」であること
※上記以外の環境は、表示保証外とさせていただきます。
※Internet Explorerのベータ版はサポート対象外となります。
5
カンバス フローティング
MS広告制作ガイド
入稿ファイルについて
入稿ファイル
① カンバスフローティング SWF、Fla
② 代替イメージ
③ リンク先URL
④ クリエイティブ
QA通過証明書
・GIF
・JPEG
ファイル名について
6
SWF
掲載開始日 + クライアント名（小文字） + 代理店名（大文字略称） + アンダースコア + 商品名
代替イメージ
＜例＞0513microsoftMSN_canvasfloating.swf / 0513microsoftMSN_canvas.gif
カンバス フローティング
MS広告制作ガイド
FLASH制作ガイド 1-1
FLASH全般について
広告を制作する際は
！

必ずMS提供のFLAテンプレートを使用してください。

設定済みのコード（Action Script）やラベルを変更しないでください。
※FLAテンプレートはFlash CS5で作成されています。 なお入稿いただくFLAはCS5以下のバージョンで作成してください。
パブリッシュ設定
バージョン
Flash Player 8（ActionScriptバージョン2.0以下）
ムービーの圧縮
使用可能
フレームレート
～24fps推奨
ドキュメントプロパティ設定
背景色
音声
デフォルト（白）のまま
※配信時に無効になります。
※背景色はレイヤーの最下層に設定してください。
デフォルトはミュート
※ユーザーの操作によってのみ再生可能
サウンドの詳細な仕様は、P.19「音の使用について」をご確認ください。
フォント
インタラクションについて
7
「分解」して「塗り」に変換（アウトライン化）
ユーザーインタラクションによって開始したアニメーションは、インタラクションが続く限り永続可。
但し同様のインタラクションによって停止させる必要があります。
例）・マウスオーバーによってアニメーション開始 ⇒ マウスアウトによってアニメーション停止
・クリックによってアニメーション開始 ⇒ クリックによってアニメーション停止
カンバス フローティング
MS広告制作ガイド
FLASH制作ガイド 2-1
表現・デザイン・動作上の確認事項
＜1＞デフォルトフローティングアニメーション
1. デフォルトフローティングアニメーションが3秒以内に停止
300 x 600のカンバスエリア外でアニメーションを展開できます。
デフォルトフローティングアニメーションは3秒以内に停止させて
ください。
※カンバス外可動領域 上部:12px 左部:20px 右部180px
2. カンバスが背景同化していない
300 x 600のカンバスエリアはMSNサイトと背景が同化しないよう
に、白以外の色を付ける、もしくは枠線で囲うようにしてください。
3. デフォルトフローティングアニメーション再生中のクリッカブルエリ
アはリンク先遷移のみ
デフォルトフローティングアニメーション再生中はマウスオーバー
でフローティングアニメーションが展開されないよう、リンク先遷
移処理のみを設定してください。
クリッカブルエリアは可視エリアと一致するようにしてください。
8
カンバス フローティング
MS広告制作ガイド
FLASH制作ガイド 2-2
表現・デザイン・動作上の確認事項
＜2＞カンバスアニメーション
1. カンバスアニメーションが12秒以内に停止
デフォルトフローティングアニメーション収束後のカンバスアニメ
ーションは12秒以内に停止するようにしてください。
※デフォルトフローティングとあわせて初動15秒まで
2. 300 x 600 のカンバスエリア内にオブジェクトが収まっている
カンバスアニメーション再生中、停止後はオブジェクトが300x600
のカンバスエリア内に収まるようご注意ください。
カンバスエリアにマスクを設置する等、必ずカンバスエリア内で
展開されるようにしてください。
3. マウスオーバー誘因要素がある
マウスオーバー誘因要素は必ず付与してください。
※P11を参照
4. カンバスADエリアが背景同化していない
300 x 600エリアはMSNサイトと背景が同化しないように、
白以外の色を付ける、もしくは枠線で囲うようにしてください。
5. カンバスアニメーション時のクリッカブルエリア
カンバスアニメーション中、停止後のクリッカブルエリアは、
マウスオーバー展開も可能です。
クリッカブルエリアはカンバスサイズになります。
9
カンバス フローティング
MS広告制作ガイド
FLASH制作ガイド 2-3
表現・デザイン・動作上の確認事項
＜3＞マウスオーバーフローティングアニメーション
1. フローティングエリアのクリッカブルエリアからマウスカーソル
が外れた場合はマウスオーバーフローティングアニメーションが
収束
フローティングエリアに設置されているクリッカブルエリアから
マウスカーソルが離れるとフローティングが収束されて、
任意のフレームに戻ります。
※P15をご参照ください
10
カンバス フローティング
MS広告制作ガイド
FLASH制作ガイド 3-1
制作上の注意事項
マウスオーバー誘因演出について
マウスオーバーの誘因演出は必須ですか？
→必須です
理由は？
◆ユーザビリティーの観点から◆
ユーザビリティ上、特定の操作（マウスオーバーや
クリック等）により、何らかのアクションが発生す
る広告であると、ユーザーが認識できなくてはなり
ません
（NG例）ユーザーが広告をクリックしようとした
のに、予期せずフローティングが展開された
◆広告効果の観点から◆
フローティング広告は、ユーザーの操作がなければ、
フローティングでの訴求が展開されません。認知率
やクライアントサイトへの誘導率を高めるために、
フローティングを展開させる演出や文言を入れてく
ださい。
11
カンバス フローティング
MS広告制作ガイド
FLASH制作ガイド 3-2
制作上の注意事項
◆第一フレームについて
＜Action Script＞
第一フレームには、MSで設置したAction Script以外を記述しないでください。
＜ファイル容量＞
第一フレームのファイル容量は、40KB以下にしてください。
＜注意事項＞
音声・ビデオは、場合によってファイルのダウンロード前に進む可能性があるため、
第一フレームには音声・ビデオを入れることを禁止します。
◆2フレーム目以降について
＜ファイル容量＞
1フレーム毎のファイル容量を40KB以下にしてください。
＜ファイル容量確認方法＞
①SWFファイルを、Flash で開く。
※パブリッシュ時に、「読み込みプロテクト」の
チェックをしていると開くことができません。
②[表示]－[プロファイラ]をクリック
12
③フレーム毎のファイル容量が確認できる画面が
表示されたら、各フレームが40KB以下に
なっているか確認する。
カンバス フローティング
MS広告制作ガイド
FLASH制作ガイド 4-1
FLASHテンプレートについて
カンバスエリアの位置とフローティング可動領域
カンバスの位置は、FLAファイル上で
Left(x):20px Top(y):12px
になります。
カンバスの背景、マスク等は必ず上記座標に設置して変更しないよう
にしてください。
※カンバスの座標については「MSA Guide ※カンバスエリア」
レイヤーをご参照ください
FLAファイル内のカンバスエリア外の領域（左図の白の領域）が、
フローティング可動領域になります。
（上部：12px
左部：20px
右部：180px）
FLAファイルの領域を超えたオブジェクトは広告上でも表示されませ
んのでご注意ください。
13
カンバス フローティング
MS広告制作ガイド
FLASH制作ガイド 4-2
FLASHテンプレートについて
クリッカブルエリアの設定
クリッカブルエリアは可視エリアと完全に一致するようにしてください。
テンプレートに設置されている通りに、デフォルトフローテインング時、カンバス時、マウスオーバーフローティング時、
それぞれのコードを記述してください。
デフォルトフローティング
on(release){
_root.jpmsa_ct();
}
14
カンバス
on(rollOver){
_root.remOverFunc();
}
on(rollOut){
_root.remOutFunc();
}
on(release){
_root.jpmsa_ct();
}
マウスオーバーフローティング
on(rollOver){
_root.floOverFunc();
}
on(rollOut){
_root.floOutFunc();
}
on(release){
_root.jpmsa_ct();
}
カンバス フローティング
MS広告制作ガイド
FLASH制作ガイド 4-3
FLASHテンプレートについて
フローテインング収束後に戻るフレームを指定
マウスオーバーアニメーション収束後に戻るフレームをMS Code1レイヤーのフレームアクションに記述されている
変数「MOUSE_OUT_FRAME」に設定してください。
テンプレートではカンバスアニメーション停止フレームを指定しています。
15
カンバス フローティング
MS広告制作ガイド
FLASH制作ガイド 4-4
FLASHテンプレートについて
MSNホーム、ニュースページのキャプチャ
カンバス フローティングのFlashテンプレートにはMSNホームページ、ニュースページのキャプチャ画像が設置されています。
カンバスエリア外での可動領域を確認できますので、ご参照ください。
※必ずガイドレイヤーでパブリッシュされたSWFファイルをご入稿ください
ホームページ
「HOME Capture」レイヤー
16
ニュースページ
「NEWS Capture」レイヤー
カンバス フローティング
MS広告制作ガイド
FLASH制作ガイド 5-1
主要機能一覧
関数名、変数名
説明
使用例
remOverFunc
リマインダ（カンバス）のクリッカブルエリアマウスオーバー用
処理
on(rollOver){
_root.remOverFunc();
}
remOutFunc
リマインダ（カンバス）のクリッカブルエリアマウスアウト用処
理
on(rollOut,releaseOutside){
_root.remOutFunc();
}
floOverFunc
フローティングのクリッカブルエリアマウスオーバー処理
on(rollOver) {
_root. floOverFunc();
}
floOutFunc
フローティングのクリッカブルエリアマウスアウト処理
on(rollOut,releaseOutside) {
_root. floOutFunc();
}
jpmsa_ct
フローティングのリンク先遷移処理
on(release){
_root.jpmsa_ct();
}
MOUSE_OUT_FRAME
マウスアウトでフローティング収束後に戻るフレームを指定
MOUSE_OUT_FRAME = 199;
17
カンバス フローティング
MS広告制作ガイド
FLASH制作ガイド 6-1
禁止 Action Script 一覧
内容
外部ファイルの取り込み
外部サーバとの通信
ユーザーの環境や情報にア
クセス
CPU負荷率を高める設計
！
18
Action Script
処理
loadMovie
外部ファイルをムービークリップ内に読み込む
loadMovieNum
外部ファイルを任意のレベルに読み込む
loadSound
外部サウンドをSoundオブジェクトに読み込む
loadVariables
外部ファイルからムービークリップ内に変数を読み込む
loadVariablesNum
外部ファイルから任意のレベルに変数を読み込む
LoadVars
サーバーとデータの送受信を行う
unloadMovie
loadMovie() を使って読み込んだ外部ファイルを削除
unloadMovieNum
loadMovieNum() を使って読み込んだ外部ファイルを削除
fscommand
ブラウザやFlashプレイヤーにコマンドを送る
LocalConnection
同一マシン上で実行中のswf間でメッセージを送受信
NetConnection
ストリーミング FLV ファイルをローカルドライブまたは HTTP アドレスから再生できる
NetStream
FLV ファイルの再生を制御
XMLSocket
サーバーと接続を開いたまま、相互にデータをやりとりする
SharedObject
ユーザーのコンピュータ上で限定された量のデータを読み込みおよび格納するために使用
Camera
ビデオカメラからのビデオをキャプチャする
Microphone
マイクからオーディオをキャプチャする
Video
SWF ファイルに埋め込むことなく、ライブストリーミングビデオをステージ上に表示する
System
ユーザーの再生環境を取得
duplicateMovieClip
SWF ファイルの再生中にムービークリップのインスタンスを作成する
他にもユーザーPCに対して極度に負荷をかけるような処理は禁止となります。目安としてWindows XPの推奨システム要件を満たすマシンで
50％以上、Windows Vista及びWindows 7で40％以上のCPU負荷が2秒以上継続する場合は、過度のCPU負荷と見なします。
Windows XP：
http://www.microsoft.com/japan/windowsxp/pro/evaluation/sysreqs.mspx
Windows Vista： http://www.microsoft.com/japan/windows/products/windowsvista/buyorupgrade/systemrequirements.mspx
Windows 7：
http://windows.microsoft.com/ja-JP/windows7/products/system-requirements
カンバス フローティング
MS広告制作ガイド
音の使用について
仕様
1.
デフォルトはミュートで設定してください。
2.
ユーザーが、音声を再生・停止できる機能を実装してください。
3.
音源の推奨スケールは-3dbをピーク値とし、-20～-10dbの間を平均値としてスケールを調整してください。
4.
音声をSWFファイルにおいて再生する場合は、タイムライン第２フレーム以降に設置してください。
＜音声ボタンについて＞
以下のURLより4種類の音声ボタンテンプレートがダウンロードできます。
http://advertising.jp.msn.com/richmedia/creater/method.htm

ボタンサイズ：16 x 16 pixel 以上

ボタン周り余白：5 x 5 pixel 必要

クリックによる音声の再生/停止機能の実装
●ダウンロードできる素材一覧
グレー地
黒地
停止中
（デフォルト表示）
再生中
デザインはカスタマイズ可能です。ただし上記の
規定を満たすように制作してください。
注意事項
1.
クラクション音、急ブレーキ音、永続する地鳴り、叫び、不快音、耳障りな音などの使用を禁止します。
2.
著しくパンを繰り返すもの、ダイナミックレンジの激しい音の使用を禁止します。
3.
音質の悪いクリエイティブは掲載不可と致します。
4.
音声が再生・停止される事がわかりにくいクリエイティブは、修正をお願いする場合があります。
5.
ユーザーに不快感を与えるクリエイティブは、修正をお願いする場合があります。
6.
掲載中にユーザーからクレームを受けた場合、必要に応じて無音声広告（代替イメージなど）に差し替える場合があります。
7.
その他、社会的道義上、掲載に不適切であるとマイクロソフトが判断した場合、いかなる状況に対しても広告クリエイティブの掲載不可判断を下し、広告の
配信を停止する場合があります。
19
制作ガイドに関するお問い合わせ
メールアドレス
20
[email protected]