笠居トシヒロの“おしえて!! Flashバナー”

講師：笠居トシヒロ氏

意外と軽く見られがちでも、実際に携わると「美味しく、手離れが良い Flashバナー」の制作方法を、クライアントとのやりとりを思わせながら、Adobe Motion Awardのバナーを事例に紹介していただきました。
◇仕上がり例


今回のサンプルをいだきました！
サンプルをダウンロード

レギュレーション（広告規定）を確認しよう

訴求ポイントを軸にコンセプトを立てよう

■オーナー　→　誰が？
■ゴール　→　どうしたい？
■ターゲット　→　誰に対して
■コンテンツ　→　何を？
■スタイル　→　どのように？
バナーは、誘導するためのもの。なので「すべてを語ってしまう」のは、ダメ。あくまで注意を惹きつけ、クリックしたくなるような工夫が大切。

■アテンション
■キャッチ（フック）
■キメ
つまり、起・承・結で作りましょう。(転はなしです)

クライアントに静止画を5,6画面見せる（下の画像は、多い方）

※あとで、バナーに使用できるように意識して作成する。

■画像が主体の場合　→　Fireworks
・Photoshopだと、アンチエイリアス無しのオブジェクトや、ピクセル単位のレイアウトがやりにくい
・Flashに持っていく場合のことを考慮する
■ベクターが主体の場合　→　Flash
■既存のデザインがある場合　→　Illustrator

■ロゴ、イラストなど　→　Illustrator、Flash
■画像　→　Fireworks、Photoshop

■まずは定番作業
・ドキュメントのプロパティを設定：
　 「ムービーの圧縮」のチェックを外す
　「ActionScript」のバージョンは、ActionScript 1.0
　ステージサイズは、728x90
　フレームレートは、18fps
・背景色は白。他の色の背景の場合は、その色のベタを敷く。
・外周に 1pxのラインをいれる
　 （ラインを1pxにしてしまうと、上下左右 0.5pxなので、2pxのラインを使う）
・ヒットエリアを作って、透明ボタンを作る
■実はトメ画面が重要
・尺を作る（カンプをそのまま、バナー制作に持っていく）
・全体の尺が決まっている際は、あらかじめコメントのラベルで、ある程度のカット割を決めておく
・右クリックメニューから実行できる「レイヤーに配分」は大いに使える
■見やすく、伝わりやすく、目立つPOP的レイアウト
■素材は出来るだけ100%で配置(後々修正作業がやりやすいように)
・新規シンボルを作成した中に aiファイルを読み込む
　 → レイヤー情報を保ったまま読み込める
・ロゴデータを着色→プロパティで「着色」カラー（白）100%

■メイングラフィックを動かす
・「シンボルの複製」を使って、動きや形状の似たシンボルを作る
■テキストを動かす
・テキストは1度の「テキストを分解」をすると、一字ずつの文字になる　→　さらに「レイヤーの配分」で各レイヤーに一字ずつ配分
・1フレームごとにずらすと、順にぱたぱたと表示されるアニメになる
・時間的に足らなそうであれば、一字ずつの表示するのではなく、マスクをトゥイーンで左から右に移動して「パッ」と表示する風にする方法もある
■基本は「現れる→消える」の繰り返し
■コンセプトに沿って、テイストをはずさないように

■ファイルサイズの減量
■タイムラインの整理
・あらかじめ最初から最後までのモーショントゥイーンを作っておき、そのあと、途中途中キーフレームを入れていき、すべてトゥイーンを削除する
■文字のアウトライン化
■代替ファイルの制作（GIF、JPEG、小容量SWF）