GIFとは
実習日：2025年6月21日
- 読み方：「ジフ」(ギフではない！)
- 拡張子：「.gif」
- 何ができる?：複数の画像を順番に表示することで、簡易的なアニメーション（GIFアニメーション）を作成できる。
- どんな風に使われる?：ループ再生や透過（透明）表現が可能で、WebやSNSで広く使われています。
WEB動画とGIFアニメーションの違い
- WEB動画：高画質・音声付きで本格的な動画コンテンツに向いている。
- GIFアニメーション：シンプルで短いアニメーション表現や、環境を選ばずに自動再生したい場合に適している。
- 用途や伝えたい内容によって使い分けるのが効果的。
| 項目 | WEB動画（動画ファイル） | GIFアニメーション |
|---|---|---|
| ファイル形式 | MP4, WebM, MOVなど | GIF（.gif） |
| 色表現 | フルカラー（1670万色以上） | 最大256色 |
| 音声 | 音声あり | 音声なし |
| 再生方法 | 再生ボタン操作が必要な 場合が多い | 自動再生・ループ再生 |
| ファイルサイズ | 長尺は重くなることも | 短尺なら軽量 |
| 利用シーン | 詳細な説明・ストーリー性・プロモーション | 短いアニメ・バナー・SNS投稿 |
アニメーションGIFを作成する方法
基本的な作成方法
トゥイーン機能の活用方法
ファイルの書き出し設定
- 書式：GIF
- ループオプション：無限
- ファイルサイズ ：72dpi
実際に作成したGIFアニメーション
作品① まばたきする似顔絵
- 使用ツール：Photoshop
- 作成時間 ：30分
- 容量 ：35.1KB
- サイズ ：531×523px
意識した事
- 少ない差分でも、動きがある事が明確に伝わるよう意識しました。
- 人の顔の中で、1番印象の大きい「目」のパーツに動きを出しました。
- 目の動きと連動して、「星」の色を変え、星のまたたきと、目のまばたきが連動する印象となるよう意識しました。
作品② 白玉大集合
- 使用ツール：Photoshop
- 作成時間 ：90分
- 容量 ：1.79MB
- サイズ ：1,536×1,152px
意識した事
- トゥイーン機能を使って白玉達を右から左に平行移動しました。
- 簡易的なアニメーションを想定して、白玉がどら焼きの中に集合するという構成で作成しました。
- 必要に応じて、より軽量化する事に対応できるよう、背景には動きを出さず、背景を削除して、透過データとしても使えるようなアニメーションにしました。
感想
- 凝った事をやろうとすると、premiere Proのような動画編集ソフトを使った方が速そうだけど、デザインに対して簡易的に動きを出したい場合であれば、データ容量の軽いGIFアニメーションの方が良いシーンもあるだろうなと感じた。
- クライアントの目的や条件に適応しながら、ソフトの使い分けをできるようになるのが大切なのではないかと思った。
- GIFアニメーション自体は作るのがすごく楽しくて、時間を忘れてしまいそうになるので、なおのこと目的を見失わない事と、所要時間から逆算して最適化を考えながら作業する事を肝に銘じたいと感じた。
