GIFのパワーを引き出そう！達人に学ぶGIFアニメのつくり方とPhotoshopの使い方のヒント

Webは高度に視覚的な場所です。ソーシャルメディアのフィードをスクロールするだけで、目に様々な刺激が届くでしょう。しかし、個々のコンテンツに人々が注意を払う時間はごくわずかです。そんな中で、他のコンテンツよりもインパクトを与えたいと考えているデザイナーにとって、アニメーションが非常に効果的なツールになる場合があります。これがGIFが今日広く使用されている大きな理由のひとつです。GIFは、ほとんどの人が自分のデバイスで見ることのできる、短くて効果的なアニメーションを提供するための実にシンプルな媒体です。

といっても、シンプルなものをつくるのが常にシンプルだとは限りません。PhotoshopのようなツールがGIFアニメーションの作成を容易にしてくれるとして、それでも考慮するべきデザイン原則は数多く存在します。

Hoodzpahの共同設立者でプリンシパルデザイナーのエイミー・フードからの、GIFアニメーションのつくり方に関するベストプラクティスは次の通りです。「GIFをつくる際の私の一番のアドバイスは、『それをシンプルに保つこと』です。私は『少ないほど多い（less is more）』ではなく『多いほど多い（more is more）』の立場です。そのため、このアドバイスを忘れて、コンセプトを伝えるのには役立たない、どちらかといえば邪魔になるつまらない細部に多くの時間を浪費することが少なくありません。まず、伝えたいアイデア、動作、または動きをひとつ選びましょう。そして、明確で感情に訴える、可能な限り短くてパンチの効いたものをつくることに注力するべきです」

ストップモーションでデニス・ロッドマンのイラストが回転するGIFアニメーション。

エイミー・フードが作成したデニス・ロッドマンのGIFアニメーションは彼女のアプローチを表している

この他にもGIFアニメーションをつくる際に留意すべきヒント、テクニック、ガイドはたくさんあります。また、どんなビジョンを形にする場合であれ、Photoshopの使い方にもコツがあります。これから、トップデザイナー達からの、楽しくて機能的なGIFアニメーションをつくるためのアドバイスをさらに紹介します。

シンプルで短く

GIFアニメーションの優れた点のひとつとして、見た人に素早く印象付けられることが挙げられます。時間を浪費することなく注意を引くという観点からは、作成するGIFの長さの判断が重要になります。

この件についてのフードの考えは次の通りです。「3秒から6秒がスイートスポットだと思います。そのくらい短ければ、シンプルなコンセプトから外れずにいられます。それに、実際に必要なフレーム数は、必要だと思うフレーム数よりもずっと少ないものです」

技術的な理由からも、GIFアニメーションを短く保つのは理に適っています。Webやソーシャルメディアに頻繁に表示されることが予想されるためです。デザイナーでレタラーのキム・ヴーは、「ファイルが大きすぎて読み込みに時間がかかるという状況は避けたいところです。すぐに表示されて、見た瞬間に相手の気持ちをつかみ取れるのが理想的です」と話しています。

これを実現しつつ、伝えたいメッセージを込められるように、ヴーは自分のデザインのどの部分が特に強調されるべきなのかを注意深く検討していると言います。そして、色や大きさの変化など、どんなモーションがそのデザインに最適かを考えます。ヴーは、この作業をデザインプロセスの可能な限り早い段階で行うことを勧めます。

「静的なイラストレーションをデザインするときと、動きのあるものをデザインするときでは、取り組み方が全く異なるものです。ですから、『制作するアートワークがGIFかどうか、デザインを始める段階で考慮するのは有効』というのが私の考えです」とヴーは話します。「もし何かを動かすのであれば、独立したパーツが必要で、しかも一連のシーケンスを構成するための個々の部品をつくらなければなりません。初期にこの点を予測してからデザインを始めれば、後の作業にかかる時間や頭痛の種をかなり減らすことができるでしょう」

腕のイラストレーションが鏡に写ったように動くアニメーション。

キム・ヴーによるGIFアニメーション。シンプルなオブジェクトによる短いアニメーションは、デバイスや状況を選ばず容易に読み込み印象を残すGIFになる条件のひとつ

Bad Lucky Studioのオーナー兼デザイナーのイーサン・シルヴァも、同意見です。彼にとって、シンプルであることはクリエイティブと技術のどちらにとっても必須の要素です。

「動かす部品が少ないほど生き生きとした面白いGIFをつくれます。それにファイルサイズも小さく保てます。結局は、伝えたいメッセージは何かという話になりますが、その時は、目を引くような動きと、メッセージの整合性とのバランスを考慮することが重要です。時には、何か楽しいものをつくることだけが目的になる場合もあるでしょう。そんな時には遠慮する必要はありません」

ドーナツ型アラームクロックのイラストレーションが飛び跳ねて振動するアニメーション。

イーサン・シルヴァによるドーナツタイム

ループ、タイミング、色の使用

シルヴァにとって、ファイルサイズを小さくするために使用する色数を制限することはとても重要です。彼は２色か3色のGIFアニメーションをつくることが多いと言います。ヴーも使用する色が少ないほど良いとして、どこまで色を減らせるか試してみることを勧めています。「使用する色の数は、ファイルサイズを切り詰める際に大きな違いを生みます。通常の私のルールは、1MB以内に抑えることです」

PhotoshopからGIFを書き出す際のデフォルトの色数は256ですが、通常はずっと少ない数で済ませることができます。

Simon and Mooseの設立者でデザイナーのシモーネ・ワイルダーは、色も動きも控えめに使うべきだと主張します。主にレタラーとして働く彼女は、効果を最大化することを目的に、制作するGIFが可能な限りミニマルになるよう心がけています。

「私は自分の作品をできる限り加工されていないアナログな印象を与えるものにしたいと思っています。GIFでもその感覚が失われないように、常に注意しています。一般的に、私はスムーズな動きやスッキリとした見た目を追求したりはしません。代わりに、フレームごとに引っかかりを感じさせられる何かを見つけようとしています」

様式化された文字を使ったChicagoの文字が動くアニメーション。

シモーネ・ワイルダーによるシカゴは、文字に生命を与えるシンプルなアニメーション。

ワイルダーは、求めるアナログ的な見た目を確実に達成するために、ペンと紙でGIFのデザインを始めます。レタリングに関しては、トレーシングペーパーを使いオニオンスキンを作成するプロセスを行うことで、すべてが彼女のコンセプトに沿った見た目になるようにしています。そして、写真を撮ったりスキャンしてデータ化したものをPhotoshopに取り込みます。

「私のGIFは多くの場合に他のGIF作品とは違う毛色のものになります。私のレタリングに、ちょっとスパイスを足したものをつくるといった感じです。パスをトレースするアニメーションではなく、ただほんの少し振動するだけですが、それで私には十分です」

GIFの優れた点に、ループ再生が可能なことがあります。このテクニックを使うと、デザインがシンプルでアニメーションはごく短かったとしても、ファイルサイズを増やさずに注目を集めることが可能です。

この点について、ヴーは次のようにアドバイスします。「ループにしてつなぎ目を滑らかにしましょう。GIFアニメーションの始まりと終わりだけを考えるのではなく、終わりから始まりへの遷移がどのようなものになるかも考えます。ループする回数を制御することもできますが、ずっとループし続ける方が理に適っています。ひとたびWebに公開されたら、再生の開始や停止のタイミングをコントロールすることは実質的に不可能だからです」

マティーニグラスのカクテルの量が段階的に変わるイラストレーションを使ったアニメーション。

キム・ヴーの終わりのないカクテル。とてもシンプルで短いアニメーションがループして視覚に訴える

PhotoshopでGIFアニメーションをデザインするヒント

GIFアニメーション制作をするデザイナーによく使われるツールといえばPhotoshopです。GIF自体が本質的にシンプルだったとしても、スムーズに作業するためのテクニックやヒントはいくつかあります。インタビューの中で、彼らの一番のオススメを聞きました。

キム・ヴーはPhotoshopからのGIF書き出しの際に、色数やディザを使ってファイルサイズをコントロールしている。

キム・ヴーがPhotoshopからGIF書き出しを行う際の設定例

終わりに

GIFは用途の広いフォーマットで、どんなプロジェクトにとっても優れたアセットになり得ます。ヴーは、GIFアニメーションが、画像や動画では実現できない、とても特別で重要なデザイナーのニーズを満たしてくれると言います。

「静的な画像はあるひとつの焦点に合わせてデザインされます。動画は多くの焦点を与えてユーザーをジャーニーに導きます。ですが、それを見た人がどのくらいの時間、何に注目しているのかについて、どの程度の確信を持てるでしょうか？そこでGIFの出番です。GIFは、アイデアや特徴を強調したり、注意を引いて興味を維持するのに向いています。GIFアニメーションでは、それを目にした人に、何を見てそこから何を持ち帰って欲しいのかを、実際にコントロールできるのです」

この記事はThe Power of a GIF: Designers share their tips for designing impactful GIFs with Adobe Photoshop（著者: Patrick Faller）の抄訳です