ウェブデザイン技能検定2級のアニメーションはGIFアニメがいいと思う

ウェブデザイン技能検定対策勉強中の太田アベル(@LandscapeSketch)です。

今日は2級試験のアニメーションバナーについて考えています。

2級の過去問題では、アニメーションバナー作成の出題が必ずありました。テキストではFlashを使っていますが、ぼくはPhotoShopでのGIFアニメをおすすめします。

Flashは先細りの技術

いままでウェブでのアニメーションといえばAdobe Flash、と言われてきましたが、最近は急激に事情が変わっています。

というのも、まずiOSがFlashをまったくサポートしない(動かす手段がない)こと、JavaScriptによるアニメーションがどんどん充実していることが挙げられます。

プラグインのインストールという手間のあるFlashより、最新のブラウザならどれでも動くJSアニメーションの支持率が高まっているのです。Flashの活躍する場面は急激に減っているといえるでしょう。

このさき再び隆盛する可能性は極めて低いとしか言えません。(Adobe Airでアプリケーション化するという手段があるしても、開発者離れは激しい)

ウェブデザイン技能検定の2級実技ではFlashもしくはGIFアニメの提出が求められます。

公式テキストではFlashの操作を解説していますが、がんばって覚えてもFlashはこの先使わない可能性が高いです。まだGIFアニメのほうが有用だと思います。

PhotoShopは非常に簡単にGIFアニメが作れますので解説。

PhotoShopでGIFアニメーションの作成

それではPhotoShopで作ってみましょう。
使用するバージョンはPhotoShop CC (2015)です。CS6でも同じ操作で行えました。

まず新規作成で必要な大きさ(ここでは800x40px)の画像を作ります。
image

そこに背景や必要な画像をドロップして、大きさを合わせます。
image

テキストツールに持ち替え、どこかをクリックし必要な文字を入力します。
文字の色は見やすい色に変えましょう。
image

タイムラインツールを表示させます。「ウィンドウ」メニューから「タイムライン」をクリック。
image

下段にタイムラインパネルが表示されます。
image

中央の「ビデオタイムラインを作成」をクリックします。
image

各オブジェクトにタイムラインが設定されます。(紫の部分)
この長さを変えることでフレーム数が変えられます。
image

それぞれのレイヤのタイムライン終端をドラッグし、上のゲージで「2.00f」へ合わせます。
下記のような長さになるはずです。
image

次にテキストレイヤのタイムラインを右クリックし、「モーション」メニューを出します。「モーションなし」となっている部分をドロップダウンし、「パン」を選択します。
image

image

タイムラインのメインカーソルが先頭になっていることを確認し、テキストレイヤを移動ツールで下にひっぱって、枠の外へ出します。文字が見えなくなりました。
image

image

つぎにタイムラインのメインカーソルを最後に持っていき、今度はテキストレイヤを移動したい部分まで移動します。
image

image

これでアニメーションの設定は完了!カンタンですね!

再生ボタンを押して動きを確かめましょう。
image

次に書き出しです。

ファイルメニューから「書き出し」、「Web用に保存」をクリック。
image

書き出しウィンドウが現れます。GIFを選択、インターレース形式にチェック、色は256色に。以上の点を確認して「書き出し」をクリック。所定のフォルダに書き出します。(クリックで拡大)
image

完成したGIFアニメーション

こんな感じのアニメーションGIFができあがりました!
banner2

GIF形式はかなり古いブラウザも対応していますから、ブラウザもOSも問わない安定した技術です。

ただ長いフレーム数では非常に容量が大きくなり、Flashのようなインタラクティブ性がないという欠点はあります。適宜使い分けるようにしましょう。