ウェブデザイン技能検定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）の画像を作ります。

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

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

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

 

次に書き出しです。

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

 

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

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

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

 

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

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