BiNDクラウドでもGIFアニメを活用しよう

GIFアニメが見直されている

GIFアニメ自体は、登場から20年以上も経っている「枯れた」技術といっていい。一時期は見かけることが少なくなったものの、ここ数年でまた見直されてきている。

理由はいくつかあり、例えばファイルサイズが軽量であること、モバイルデバイスをはじめほとんどのデバイスで表示できること、動画ファイルのようにローディング時間が発生せずすぐに見られることなどが挙げられる。

さらに最近はフラットデザインがWEB表現のトレンドになっており、色を絞ったシンプルなページ構成が好まれる。そうしたシンプルなデザインのサイトの中に、ワンポイントとして動きのある要素を入れるとぐっと引きつけられる。そんな理由で、ページのワンポイントとしてGIFアニメパーツを使うことが増えているのだ。

BiNDクラウドでGIFアニメが使える？

もちろん、BiNDクラウドで作ったサイトにGIFアニメを入れることは可能だ。あらかじめ別のソフトで作ったGIF画像は何の問題もなく貼り込めるし、さらにいえば、GIFアニメ作りにBiNDクラウド内で使える画像編集ソフト「SiGN PRO」の機能を利用することもできる。

SiGN PRO自体はGIFアニメを作成する機能は備えていないが、SiGNでパーツを作って画像ファイルに書き出して、さらにSiGN PRO上で形を変えたりエフェクトを加えたりした後にまた書き出して…、と繰り返していく。そうして出来上がった複数の画像を、GIF画像を生成してくれるWEBサービスなどを利用してGIFファイルに変換すればいいのだ。

SIGN PROは、［ファイル］→［画像ファイルとして保存］を選べば、画像ファイルをローカルに保存できる。

冒頭のGIFアニメも、SIGN上で円形のシェイプを少しずつ変形させて画像に書き出し、WEBサービスでGIFファイル化したものだ。

手軽にGIFアニメを作る方法もいろいろある

ここまで読んで「方法はわかったけれど結構面倒じゃないか？」、そんな風に思う人もいるだろう。では、下のようなGIFアニメはいかがだろうか。



これもSiGNで作ったものだが、シェイプを変形させるよりも手順ははるかに簡単だ。文字を1文字ずつ書いて、画像として書き出しただけ。簡単なわりに案外効果的な演出ではないだろうか。SiGN PROではさまざまなフォントが選べるので、文字の形によって印象もガラリと変えられる。

SiGNでは欧文フォントだけでなく日本語フォントも複数用意されており、マシンにインストールされていなくても利用できる。

また、簡単操作でできるGIFアニメとしてはこんなものもある。



写真を読み込んで、エフェクトで色相を変えたものだ。やはりSiGN PROにはいくつもの画像エフェクトが用意されているので、そのパラメーターをちょっとずつ変えて書き出せば面白い演出が出来上がる。

書き出した画像をGIFにするには？

複数枚の画像からGIFアニメを作るツールはいろいろあるが、ソフトをマシンにインストールしなくてもWebサイト上で処理してくれるものもある。

例えば、「アニメーションGIFを作ろう!」というWebサービスはわかりやすいインターフェイスで、各フレームの秒数設定なども柔軟にできるのでオススメだ。SiGN PROから書き出した画像を1つずつ割り当てて、秒数を決めてから、［アニメーションGIF作成］ボタンを押せば生成が完了する。あとはそのファイルをいったん自分のマシンに保存して、BiNDクラウド上に配置すればいい。

Webサイト「アニメーションGIFを作ろう!」

最後に一言。冒頭にも述べたとおり、GIFアニメは「ワンポイント」で使うのが効果的だ。あちこちがチカチカ動くようなページは見ていて疲れてしまうので、使いどころを工夫して効果的に活用しよう。