最近では、オンラインでアニメーションGIFを見ない日はありません。フラッシュカード風の短いアニメーションや、音のない短いループ動画などです。いえ、この文章は1999年に書かれたものではありません。複数の静止画をつなぎ合わせて作られるシンプルなアニメーションであるアニメーションGIFは、ここ12年で、本格的なストリーミングHDデジタルビデオや洗練されたFlash作品に取って代わられ、静かに廃れていきました。
しかし今、予期せず、そしてどこか謎めいた形で、それらは復活を遂げました。特にTumblrには、こうした簡潔なビジュアルスニペットが溢れており、巧妙でコミカルなものも少なくありません。絶妙な組み合わせのものはバイラルになりやすく、最終的には世界中の何百万人もの人々に見られることもあります。20年以上も前のファイル形式としては、なかなかのものです。
グラフィックスインターチェンジとは何ですか?
GIF（Graphics Interchange Formatの略）は1987年にCompuServe社によって開発されましたが、この1音節の頭字語の発音をめぐっては、常に激しい議論が繰り広げられてきました。私はこの議論に一切触れようとも思いません。「G」の発音を支持する人も、「 J」の発音を支持する人もほぼ同じくらい多いようです。しかし、どのように発音しようと、GIF技術によってオンラインサービス企業はダウンロード可能なカラー画像を提供することが可能になりました。これは当時としては驚くべき成果でした。
このフォーマットには、プログラマーや新興のWebデザインコミュニティからすぐに支持を得た2つの機能がありました。1つは画像圧縮機能で、ファイルサイズ全体を削減し、もう1つは1つのファイルに複数の画像（またはフレーム）を保存できる機能です。アニメーションのプラットフォームとしての利用は当初想定されていませんでしたが、1989年の改訂版（通称GIF89a）により、これらのフレームを時間差で表示できるようになり、フレームごとのアニメーションが可能になりました。1990年代半ばには、Netscapeブラウザがこのフォーマットをサポートしたことで、クリエイターはアニメーションのループ回数を指定できるようになりました。
こうしてアニメーションGIFが氾濫し、どんなにつまらないものでも、少なくとも1つのアニメーションGIFがなければ、まともなウェブサイトとはみなされなくなりました。それ以来、PNG（Portable Network Graphics）形式などの競合形式があるにもかかわらず、 アニメーション能力の限界が大きな要因となり、 安定した信頼性の高いGIFは生き残りました。
当然のことながら、アニメーションGIFはインターネットの商業化において重要な役割を果たしました。デジタル広告の黎明期には、当時の低解像度ディスプレイを反映して、広告ブロックは非常に小さかったのです。注目を集め、マーケティングメッセージを最大限に伝えるために、広告主はアニメーションGIFに頼りました。短いスライドショーで商品を表示し、メッセージを伝え、最後に驚きの価格を提示し、それを何度も繰り返し表示していました。
時が経つにつれ、GIFフォーマットは広告スペースをFlashに譲り渡しましたが、ここ数年で少し逆転の兆しが見えてきました。MacBook AirやiOSデバイスをお使いの場合、目にするアニメーション広告はおそらく古き良きGIF（HTML 5ではない場合）でしょう。
GIFの制限
長年にわたり驚異的な成功を収めてきたGIF形式ですが、時代遅れになりつつあります。GIF画像は最大256色に制限されており、1995年頃の一般的な8ビットモニターでは問題ありませんでした。しかし、例えば現代のApple Cinemaディスプレイでは、その表現力は笑止千万です。パレットは可変で、ソース画像やアニメーションフレームの色に合わせてカスタマイズできますが、GIFの色表現は、JPEGなどのより現代的な画像形式で慣れ親しんできた1680万色のパレットと比べると見劣りします。
GIFファイルはLZW（Lempel-Ziv-Welch）と呼ばれる圧縮技術を使用しています。これはロスレスアルゴリズムですが、アニメーションや動画の再生には適していません。ドキュメントのピクセルサイズが大きいほど、色数が多くなり、フレームレートが速いほど、ファイルサイズは大きくなります。10秒の動画クリップをMP4形式で保存すると2MBになるかもしれませんが、同じ動画クリップをGIFに変換すると20MBを超えてしまいます。
その結果、GIFアニメーションは短く簡潔なものになりがちで、ファイルサイズを抑えるためにフレームレートを低く抑え、カラーパレットを制限しています。音声がないと、アニメーションGIFは無声映画のデジタル版となってしまいます。
これらの制限により、興味深い GIF を作成するのが難しくなることは確かですが、それが GIF の永続的な魅力に貢献している可能性もあります。
GIFを作成する
アニメーションGIFを作成できるアプリは数多くありますが、ここではAdobeのコンシューマー向け画像エディターであるPhotoshop Elements 11を使って基本的な使い方を説明します。Photoshop Elements 11を使えば、ファイルをアニメーションGIFとして書き出すことができます。基本的には、各フレームを異なるレイヤーに配置し、書き出す際にレイヤーがアニメーションとしてまとめられます。
回転する花のグラフィックを作成する手順は次のとおりです。
ステップ1： Photoshop Elementsを開き、起動画面でフォトエディターを選択します。「ファイル」→「新規空白ファイル」を選択します。新規ドキュメントの名前を「アニメーション」にし、ドキュメントのサイズを指定します。GIFは比較的小さい方が最適なので、幅と高さをそれぞれ640×360ピクセルと入力します。「背景コンテンツ」を「透明」に設定し、「OK」をクリックします。ドキュメントが開いたら、「エキスパート」（上部）をクリックし、右下の「レイヤー」ボタンをクリックしてドキュメントのレイヤーを確認します。
ステップ2：レイヤー -> 新規塗りつぶしレイヤー -> 単色を選択します。レイヤー名を「緑の背景」にして「OK」をクリックします。次に、明るい色を選択します。私の例では、緑のシェード（H: 110、S: 40、B: 70）を選択しました。
ステップ 3:カスタム シェイプツールを選択すると、ウィンドウの下部にツール オプションが表示されます。まず、ツール オプションの右上にあるぐらぐらしたシェイプをクリックして、カスタム シェイプ (U) を選択します。次に、現在定義されているシェイプをクリックして、他の利用可能なシェイプを表示します。このポップアップ パネルの上部には、他のシェイプにアクセスできるポップアップ メニューが表示されます。このメニューから「自然」を選択し、 「Flower 24」を選択します。次に、Shift キーを押したまま、キャンバス上でカーソルを右上から斜め下にドラッグします。Shift キーを押したままにすると、オブジェクトの元の高さと幅の比率が維持されます。オブジェクトをドキュメントとほぼ同じ高さになるように引き伸ばし、シェイプ選択メニューの右下にあるカラー スウォッチ ポップアップ メニューから新しい色を選択します。この例では、「パステル イエローグリーン」を選択しました。最後に、オブジェクトを中央に配置する必要があります。移動ツール (V)を選択します。選択すると、下部に位置合わせオプションが表示されます。「選択」->「すべて選択」を選択し、 「中央」と「中央」の両方をクリックします。
ステップ4：テキストツールを選択します。選択するとすぐに、ドキュメントウィンドウの下部にテキストオプションが表示されます。Helvetica Neue Ultralightなどの軽量フォント（30pt、白、中央揃え）を選択します。次に、ドキュメントの中央をクリックし、「SPRING」と入力します。境界ボックスの緑色のチェックマークをクリックして、テキスト入力を確定します。すると、ウィンドウの下部に配置オプションが表示されます。「選択」→「すべて」を選択し、 「中央」と「中央」の両方の配置アイコンをクリックして、テキストを完全に中央に配置します。次に、このレイヤーをロックして、誤って変更しないようにします。レイヤーで、テキストレイヤーをクリックして選択し（必要であれば）、上部の南京錠アイコンをクリックしてロックします。
次へ: 最終ステップ
ステップ5：次の2つのフレームは、この最初のレイヤーセットをベースに作成します。「レイヤー」でShiftキーを押しながら各レイヤーをクリックします。3つのレイヤーすべてを選択した状態で、「レイヤー」→「レイヤーの複製」を選択します。「セットの複製」ウィンドウが表示されるので、「OK」をクリックして続行します。この手順をもう一度繰り返します。テキスト、太陽の形、背景色のコピーが3つ作成されているはずです。
ステップ6：移動ツールを選択し、花をクリックします。バウンディングボックスの下部に小さな円が表示されるので、それをクリックします。ドキュメントウィンドウの下部に変形オプションが表示されます。「角度」で「20」と入力して、図形を20度回転させます。バウンディングボックスの緑色のチェックマークをクリックして、変更を適用します。
ステップ7：レイヤーで、一番上の3つのレイヤーの目のアイコンをクリックしてオフにします。真ん中の花も同様に回転させて、今度は10度だけ回転させます。回転が完了したら、一番上の3つのレイヤーを再びオンにします。
ステップ8：各花を背景と結合して、3つの異なるフレームを作成します。（この時点でファイルを保存しておくと、何か問題が発生した場合に元に戻すことができます。）Shiftキーを押しながら上の3つのレイヤーをクリックして選択し、「レイヤー」→「レイヤーを結合」を選択します。次に、中央と下のレイヤーセットについても、同じ手順を繰り返します。
ステップ9：いよいよGIF画像を作成しましょう！「ファイル」→「Web用に保存」を選択します。保存ウィンドウの右端にオプションが表示されます。「プリセット」ポップアップメニューから「GIF 32 No Dither」を選択し、 「アニメーション」チェックボックスをクリックします。右下にはアニメーションオプションが表示されます。「ループ」は「無限」に設定し、「フレーム遅延」は0.2のままにしておきます。「保存」をクリックし、新しいGIF画像をデスクトップに保存します。
ステップ 10:デスクトップに移動し、開いているブラウザ ウィンドウに GIF をドラッグ アンド ドロップして、実際に動作するかどうかを確認します。
手順に慣れたら、フレーム数を増やしてよりスムーズなアニメーションを実現するGIFを作成できます。繰り返しになりますが、フレーム数を増やすと「Web用に保存」ページでのフレーム遅延が短縮され、フレームレートが向上することを覚えておいてください。
虫の目
Photoshop Elements で別の種類の GIF を作成するために使用できる別のテクニックを紹介します。
ステップ1： Photoshop Elementsでお気に入りのペットの写真を開きます。写真が開いたら、「エキスパート」（上部）をクリックし、「レイヤー」（右下）ボタンをクリックしてドキュメントのレイヤーを表示します。
ステップ2：レイヤーパネルで「背景」をクリックし、 「レイヤー」→「新規」→「背景からレイヤー」を選択します。 「フレーム1」と名前を付けて「OK」をクリックします。次に、そのレイヤーを選択し、「レイヤー」→「レイヤーを複製」を選択します。ポップアップウィンドウが開き、レイヤーの名前を入力するので、「フレーム2」とします。
ステップ3：新しいレイヤーをクリックして選択し（必要であれば）、フィルター -> 変形 -> ゆがみを選択します。左上にツールセットが表示されます。膨張ツール（6番目のアイコン）を選択し、右端でブラシサイズを写真の目のサイズに最も近いサイズに設定します。次に、カーソルを友人の目の瞳孔に慎重にクリックして、目のサイズをわずかに大きくします。ツールがすぐに膨張してしまうことがあります。その場合は、「編集」 -> 「元に戻す」を選択し、マウスクリックを速くして再試行してください。完了したら、「OK」を押します。
ステップ4：メインインターフェースに戻ったら、フレーム2をクリックして選択し、「レイヤー」→「レイヤーを複製」を選択します。フレーム3という名前を付け、「フィルター」→「変形」→「ゆがみ」を選択し、「膨張」ツールを使って目のサイズをさらに拡大します。完了したら「OK」をクリックします。
ステップ5：アニメーションがループするときに目が大きくなったり小さくなったりするように見えるようにするには、フレーム3とフレーム1の間にフレームを配置する必要があります。フレーム2というレイヤーをクリックし、「レイヤー」→「レイヤーを複製」を選択します。今回はレイヤー名を「フレーム4」にして「OK」をクリックします。レイヤーパネルでフレーム4をクリックして、フレーム3の上にドラッグします。
ステップ6：いよいよGIFファイルをエクスポートします。まず、メモリエラーやパフォーマンスの低下を防ぐため、ファイルのサイズを変更する必要があります。「画像」->「サイズを変更」->「画像サイズ」を選択します。「画像の再サンプル」チェックボックスをオンにし（必要な場合）、上下左右ともに最大ピクセルサイズを600ピクセルに設定します。「OK」をクリックしてファイルのサイズを変更し、「ファイル」->「Web用に保存」を選択します。「Web用に保存」ウィンドウの右端に、エクスポートオプションが表示されます。「プリセット」ポップアップメニューから「GIF 128 ディザ」を選択し、 「アニメーション」チェックボックスをオンにしてシンプルにしましょう。右下には、アニメーションオプションが表示されます。「ループ」は「無限」に設定し、「フレーム遅延」を0.1に上げましょう。「保存」をクリックし、新しいGIFファイルをデスクトップに保存します。
ステップ 7:デスクトップに移動し、開いているブラウザ ウィンドウに GIF をドラッグ アンド ドロップして、実際に動作するか確認します。
プロセスに慣れたら、よりスムーズなアニメーションのためにフレームを追加したこのような GIF を作成し、「Web 用に保存」ページでフレームの遅延を減らしてフレーム レートを上げることができます。
