ボテキン木の芽相部屋バナー

木の芽月舍の運営者によるブログ

GIFアニメの点滅速度

GIFアニメは簡単に作れてアイキャッチにもなるのでwebではお馴染みです
パラパラ漫画の要領で、よくバナーなどで点滅しているアレですね
最低でも、画像が二枚あれば出来てしまいますし、
小さくても非常に有効でつい目が引き寄せられます
<GIFアニメの作り方>
Photoshopがあれば簡単に作れます
1.作りたい画像をレイヤーで作りたい枚数を用意する(RGB)。
2.プルダウンメニュー「ウィンドウ」のアニメーションを選択
3.アニメーションフレームが出るので、
4.レイヤーウィンドウの目玉マークを付けたり消したりして調節し、アニメを作っていきます
5.出来上がったら、アニメーションフレームで各コマの秒数などを調整、
6.アニメーションが繰り返される回数を決めます。1回、3回、無限(繰り返し)など
7.アニメーションフレームの右上の▼で「アニメーションを最適化」
8.Webおよびデバイス用に保存→GIF形式で保存(ファイル名は○○○_play.gifとしておく)

ただし簡単なGIFアニメも、目立つからと言ってページ内で多用すると、
どれも動いてうるさくなり、打ち消しあって目立たなくなってしまいます
コマの秒数も速すぎるとチカチカして見づらくなってしまいます
真っ先に目に入って来て視線を外せなくなる目立つ存在だけに、
強制的に見せられてイライラすることも多いのではないでしょうか

これより本題です
例えば一番簡単な2コマの点滅GIFアニメがあるとします

見る人にストレスを与えない点滅速度ってどうなんでしょう?

ズバリ、私は「車のウィンカーの点滅速度」を目安にしています
何故かというと・・・
車のウィンカーってずっと点滅しているくせに、長く見続けていてもさほど疲れないと気づいたのです

車のウィンカーの点滅速度は各メーカー各社で多少ばらつきはあるものの、
『毎分 60 回以上 120 回以下の一定の周期で点滅するものであること』と定められています
この速度は、人が「少し緊張感を感じる状態」にある脈拍数と同じくらいなのだそうです
これ以上早いとあおられているような気がして焦って不安になりますし
これ以上遅いと緩くなって散漫になってしまいます

これをコマ数に換算すると、1コマ約0.7〜0.85秒となります

ちなみに0.7秒とはこんな感じです↓

kikuhanabi_play.gif

この点滅のタイプ、どこかで見たことあるぞと思ったら、
これは、昔のクリスマスツリーに付いてた電球のイルミネーション
「チ ッ カ チ ッ カ ・ パ ッ カ パ ッ カ ・ ・ ・」
スローテンポといえなくもない、この微妙な間
アニメーションを作っている工程では、0.7秒はかなり長く感じると思いますが
これが、繰り返し見せられてもイライラしない標準値なのかも知れません

ただし、画像の動きや色などでも左右されると思うので、
最終的には繰り返し再生しながら、しばらく眺めて判断するのが良いでしょう

サイトを作る側は、くれぐれも閲覧する人の立場になって
ストレスのないWeb社会を築けるように心がけましょう〜



Copyright (C)Harue Takamori All rights reserved.