こんにちは、システムチームのKです。
今回はフロントエンドの話をと思います。
アニメーションは便利…だけど
フェードイン、フェードアウト、スライドイン…etc
アニメーションをつけるだけでホームページを少しリッチにみせることができます。
例えばフェードインは
CSSなら数行です。
.hogehoge{
animation: Fadein .3s linear;
}
@keyframes Fadein{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
たったのこれだけで実装できるので、
低コストでクオリティを上げる方法として重宝します。
ここで問題なのは、
手軽である分、アニメーション頼りになり、
多用してクオリティを落としてしまうことです。
学生時代、プレゼン資料にアニメーションをつけすぎてボロボロに怒られた
パワーポイントのアニメーションは便利ですよね。
プレゼン経験がある方なら経験があると思いますが、
一行一行何か文章や要素を表示する度にアニメーションをつけてる人もいるんじゃないでしょうか？
僕もその愚かな学生だったので、
プレゼンの授業でボロボロに怒られました。
「プレゼンの内容が入ってこない」と。
WEBサイトにおいてアニメーションは脇役であるべき
私たちが作っているのはアニメではありません。
プレゼン資料同様、
主役は文字コンテンツです。
アニメーションはそれを補助する役割であるべきです。
そんなことはない。
ものすごいアニメーションをたくさん使っているサイトはある。
と思うかもしれませんが、
おそらくそういうサイトのほとんどは、
サイトにアクセスして最初に”ものすごいアニメーション”が
表示されるのではないでしょうか？
そういったアニメーションには、
サイトに訪れたユーザのハートをキャッチする
明確な目的があります。
アニメーションを多用しているサイトでも、
ひっきりなしに文字がぴょんぴょん跳ねていたり、
画像がくるくる回っていることはないはずです。
ちゃんと文字コンテンツがユーザの頭に入るよう工夫されています。
だけども中途半端に作ってはいけない
行き当たりばったりで作ったアニメーションは違和感があるのですが、
違和感の正体はたいてい、現実味がないことです。
ここで言う現実味は物理法則を指します。
例えば車がブレーキをかけて止まるアニメーションなのに、
制動距離もなくいきなり止まったり、
明らかに硬いボールなのに、
ゴムまりのようにバウンドしたり、
絶対に現実では見ない現象ですよね。
現実味がないから違和感が生まれます。
この辺りは非常に有名なアニメーションの原則があるので
こちらを紹介します。
■アニメーションの12の原則
https://liclog.net/12-principal-of-animation/
ディズニー・アニメーション創設時期のアニメーターが提唱した原則です。
映像としてのアニメーションとWEBサイトで使うアニメーションは異なりますが、
この原則はWEB制作でも適用できます。
この原則にのっとってアニメーションを作る場合、意識しないといけないのは、
アニメーションの順序とイージングです。
前者は
CSStransitionだけでは限界があるので、
CSSanimationを使い、アニメーションをコントロールしましょう。
■CSSアニメーション 入門
https://qiita.com/soarflat/items/4a302e0cafa21477707f
後者は下記を活用するといいでしょう。
■イージングチートシート
https://easings.net/ja
まとめ
・むやみやたらにアニメーションを付けない
肝心の文字コンテンツが頭に入らなくなります。
・アニメーションは順序とイージングをつけリアリティにこだわる
物理法則を無視したアニメーションは違和感が出ます。
・こだわりすぎて、他の仕事をおろそかにしないように←これ大事
アニメーションはこだわろうと思えばどれだけでもこだわれます。（アニメーションだけではないですが…）
以上、こだわりすぎて失敗したことが何度もあるKでした。
