全画面固定広告をHTML5 Canvasで作る

最近見かけるようになってきた、スマホのWEB画面を横断する広告サンプルを、「Adobe Animate」とJavaScriptの利用で作ってみます。
 
画面の上部からキャラクターが降ってきて、下部に固定のバナーに着地する目を惹く広告です。
 


作りはシンプルな全画面広告

構成は下記の図のようになります。

とてもシンプルですが、
プログラムもコーディングスキルもないデザイナーでも、ツールで補助してもらいながら作ることで何とかなるかもしれません。

それでは早速挑戦してみます。


全面固定広告の制作

固定広告部分を「Adobe Animate」を使って作っていきます。
※細かいオペレーション部分は割愛

まずはソフトを起動してステージサイズとフォーマットを設定します。
普及端末数の多いiPhone6系画面サイズをWebページの「dvice width」値で設定
375x667px
(750x1334px)


下部固定バナー制作

バナーはメジャーな320x50pxのネットワーク系バナーを今回は仕込んでみます。

作った画像はAnimateの「ライブラリ」に格納して、いつでも配置出来る部品状態にします。

バナーの右側には画面上部から飛んで登場するキャラクターが着地するスペースになりますので、キャラクター画像は載せず空けておきます。


登場キャラクターの作成

アニメーションパターンは運用しやすさと読み込みを考慮して出来るだけ数を抑えます。
今回は

「飛び降りる滑降ポーズ」
「着地時のポーズ」
「立ち上がったポーズ」
「決めポーズ_アニメ01」
「決めポーズ_アニメ02」
「決めポーズ_アニメ03」

以上の6パターンを作りました。

作った画像は先ほどの固定表示されるバナー画像と同じで「ライブラリ」に格納しておきます↓


キャラクターの組み込み

ライブラリーに格納したキャラクター画像は画像のままなので、
制御するために「シンボル化」をします。

シンボル化は、名をつけたフォルダのようなものの中に画像を格納することで、JavaScriptの変数で制御したり、設定したアニメーション等、情報が引き継げるものです。
さらに編集作業などが簡単になり、素材の効率的な運用が出来、「アニメGIF」に比べ、ファイル容量を軽減するメリットもあります。

背景画像など、動かす必要のないものなどはシンボル化の必要はありませんが、背景を動的に差し替える、色変えするなど、状況によって制御する場合も想定できるため、原則シンボルして格納する癖をつけておきます。

シンボルの種類は、違いがわかり難いですが、「グラフィック」「ムービークリップ」があります。
「ムービークリップ」はシンボル画像にアニメーションをつけたりボタン化したりして制御するモノで、
「グラフィック」は静止画像を扱うものです。

今回はアニメーションの静止コマ画像を扱うので「グラフィックシンボル」として格納します。

格納方法はシンボルをダブルクリックで「ステージ」表示画面を開けるので、格納したい画像をライブラリからドラックして適当に置きます。
「Ctrl」+「Alt」+「1」~「6」キーで左上揃えや中心揃えなどショートカットが出来ますので試しましょう。

基本は左揃え
「Ctrl」+「Alt」+「1キー」
を行ったあと、
上揃え
「Ctrl」+「Alt」+「4キー」
を行う
「左上配置」にしておきます。

今回は要素が少ないので「ムービークリップ」にわざわざ「グラフィック」を格納せず、ルート(基本の親階層)にアニメーションのコマ画像を配置していきます。


「グラフィック」をタイムラインへ配置

それでは「グラフィック」(コマ画像)をタイムラインに格納してアニメーションを作ります。

タイムラインは1コマ毎の横並び制御になるので馴染みが多いデザイナーは多いと思います。

アニメーションの開始時点は画面上部画面外ですので、
ステージ上部座標の
x23
y-89
に配置します。
※キャラ画像は高解像度対応で150x150pxで制作してますが、配置する際は半分の72x72pxで配置します。

全6個のキャラクターアニメーション画像とベースバナー画像を配置します。

下部バナー画像に着地して「決めポーズ」をする画像の座標は
x284
y589
あたりで配置しています。

降下中のアニメーションは「飛び降りる滑降ポーズ」コマ画像を「画面外」と「着地寸前」の2箇所に始点終点として配置して「クラシックトゥイーン」で繋ぎ、自動補完アニメーションを使うと簡単です。(タイムラインの紫部分矢印が「クラシックトゥイーン」を設定した状態です。)


アニメーションの制御

アニメーション画像間の表示時間等(フレーム間隔)を調整してイメージ通りのアニメーションが出来ていれば配置は完了ですが、
一度再生されたらそれで止まったままだと広告効果が悪いので、決めボーズのアニメーションを定期的に特定フレームまでリープ処理をさせます。

こちらのスクリプトを最終フレームに書き込みます↓
this.gotoAndPlay(“anime_roop”);


これにより、赤旗で「フレーム名」(フレーム番号でも可)をつけた文字列”anime_roop”の旗地点まで戻って繰り返し再生
されることで無限ループ可能となりました。

バナー画像クリックによるWEB遷移の組み込みは、
下部固定ボタン画像の上に新規レイヤーを作り、

ボタン範囲を制御す「ムービークリップシンボル」を、
・バナー画像と同サイズ
・バナー画像と同座標
・白一色塗り
・アルファの設定を1%
にして薄く透過状態でボタン画像にピッタリ重ね配置します。

制御のJavaScriptは、
作った「透明ムービークリップ」を選択した状態で、「アクションパネル」(スクリプト入力画面)の「コードスプニット」から「HTML5」⇒「クリックしてWEBページに移動」を選べば自動で入力してくれて便利です。

※「ムービークリップ」などシンボルを作った場合は必ず「シンボル名」(名前)を付けておきましょう。
忘れると制御対象が設定できないので名前付けが必須です。


htmlとJavaScriptの書き出し

それではwebページへの組み込みを行います。

「Adobe Animate」から「パブリッシュ」を実行すると、

「html」ファイル
「JavaScript」ファイル
そして、使用した画像が格納されている
「img」フォルダ

以上が書き出されます。

JavaScriptはhtmlファイルのなかに内包する設定も可能です。
※「パブリッシュ設定」から書き出し詳細が変更できます。

以上を表示させたいWebページの「headタグ内」に、
書き出されたAnimateから書き出されたhtmlファイルの

<!-- write your code here -->

で囲まれた部分をコピペし、
「bodyタグ」周りの以下の部分をコピペ

<body onload="init();" style="margin:0px;">
<div id="animation_container" style="background-color:rgba(255, 255, 255, 0.00); width:375px; height:667px">
<canvas id="canvas" width="375" height="667" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 0.00);"></canvas>
<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:375px; height:667px; position: absolute; left: 0px; top: 0px; display: block;">
</div>
</div>

スタイルは「position」プロパティで設定できる値「fixed」を設定して、画面のきまった位置に固定させる書き換えを行っています。
position: fixed; bottom: 0; left: 0;
を使って上部基準で固定して組み込めば完了です。

<body onload="init();" style="margin:0px;">
<div id="animation_container" style="position: fixed; bottom:0px; left:0px; background-color:rgba(255, 255, 255, 0.00); width:100%; height:667px">
<canvas id="canvas" width="100%" height="667" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 0.00);"></canvas>
<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:100%; height:667px; position: absolute; left: 0px; top: 0px; display: block;">
</div>
</div>

コチラがWEBページに広告を組み込んだスマホ表示に最適化したサンプルページです↓
★組み込みサンプルを⇒ひらく


さいごに

ブラウザ画面全体を使った仕込み表現はFlashの時代からあった仕組みで目新しくはなく、
時代が一回りして戻ってきたと考えられます。

しかし、利用者に対して予測を超える表現は「ユーザー体験」を阻害する可能性が高く注意が必要です。

組み込む際は広告訴求内容と、対象サービスページの親和性を注意さえすれば、好意的に受け入れられる可能性も否定できないと考えます。

次回も情報設計に関係した話題をお届け致します。
デジマースのネモトでした。