WEB制作の中心で「アニメーション開発が得意」と叫びたい ～実用編～

前回のあらすじ。

デュエルをスタンバイした。

 

 

どうも神田です。2週連続になります！

今回は実用編です。

基礎編での次回予告は一切関係ないです（ネタ！書かずにはいられないッ！）

まだ読んでない人はこちら

【WEB制作の中心で「アニメーション開発が得意」と叫びたい　～基礎編～】

 

まずは前回のおさらいから。

 

良いアニメーション

・デザインのテイストを生かせている
・適切に注目を集める演出を出来ている

 

悪いアニメーション

・デザインの良さを潰してしまっている
・主張が強く視点がぶれる

 

はい。こんな感じでしたね。

 

実装するときのパターン

WEBサイトにおけるアニメーションを実装する箇所というのはざっくりこんな時です。

・ホバーアニメーション（主にボタン）
・パララックスアニメーション（スクロール時が多い、たまにマウス移動時）
・表示切り替えアニメーション（モーダルやメニューなど新規で表示する時）
・ループアニメーション

 

それぞれにおいて気を付けるポイントが違ってくるので順番に解説していきます。

 

ホバーアニメーション

皆さんのおなじみ。ホバーアニメーションです。

主にボタンやテキストリンクに実装すると思います。

 

一つ目のポイントは「クリック範囲を動かさない！」です！

理由は単純。

これからクリックしてもらうのにボタンがズレたらマウスがあった場所がクリック範囲じゃなくなってしまう場合があります。

多少なら「上にずれる」、「押下したように高さが縮む」などはアクセントとして良いかもしれませんが過剰なのはアウトです。

 

二つ目のポイントは「変化しているのが簡単に分かるアニメーションにする」です！

ユーザーとしてはマウスを動かして変化がある場所は「おっ、ここは押せるんだな！」と認識します。

さりげなさすぎると押せるコンテンツだと判断してもらえません。

よく見かける「色が反転する」や「透明度が下がる」というのは理にかなっていますね。

その他には相対的に変化を認識させる方法として「その他のものを全て変化させる」などもあります。

 

See the Pen
animation relative by kaoru kanda (@monomode-kanda)
on CodePen.

 

パララックスアニメーション

お手軽にサイトをリッチに。パララックスアニメーションです。

パララックスアニメーションは色々な種類があります。

背景がズレて動くもの、スクロールに応じてコンテンツを動かすものなど…

今回はスクロール時に可視範囲に入ってきた要素を表示する場合を想定して話をしていきます。

 

無難 鉄板アニメーションはこんな感じ。まあありがちなやーつですね。

（今回はサンプルのためclickイベントで動くようにしていますが、実践ではIntersectionObserverを使うと良いでしょう。）

 

See the Pen
animation simple by kaoru kanda (@monomode-kanda)
on CodePen.

 

サンプルは下から上へとふわっと浮き上がる動きですが、いくらでもアレンジできる部分です。

今回のようなパララックスアニメーションは頻繁にアニメーションが発火します。

ここで注意点としては「統一感を出す。」ということです。

スクロールしたときに下から、右から、斜めから…などばらばらだと、どこに注目すればいいか分からなくなってしまうため、前回説明した視線誘導がうまくいきません。

注目してほしい箇所のみ動きを少し大げさにする、方向を変えてみるなどアクセントを加える程度にしておきましょう。

 

表示切り替えアニメーション

ユーザーのアクションを重視。表示切り替えアニメーションです。

表示切り替えアニメーションはモーダルやタブ切り替え、ハンバーガーメニュー、スライダーなど…今まで非表示だったものを表示させたり、表示させている中身を変更したりするアニメーションです。

UI/UXを損ねないためにすると機能によってある程度の動き方は決まってきてしまうと思います。

そのため、気を付ける必要があるのはスピード感です。

スムーズにコンテンツを何度も切り替えて読み進めたいのに切り替えのたびにアニメーションに時間がかかると億劫ですよね。

場合によってはあえてアニメーションは付けないでパッと切り替わるというのもアリですね。

逆に頻繁に切り替えるコンテンツではない場合は演出に力を入れて気持ち長めのアニメーションを付けてもいいと思います。

 

ループアニメーション

陰で支える演出家。ループアニメーションです。

ループアニメーションはユーザーのアクションに関係なく常に、もしくは一定の周期で動くアニメーションです。

こんなやつですね。

 

See the Pen
animation loop by kaoru kanda (@monomode-kanda)
on CodePen.

 

常時動いているこの手のアニメーションは主張しすぎてはダメです。

必要以上に注意を引き付けてしまうと見てほしいコンテンツに集中できなくなってしまいます。

気づかない人も出てくるくらいのさりげなさが望ましいですね。

さりげなくともユーザーの潜在意識は必ず感じ取ります。

サンプルのような回転するタイプの場合は目が回る可能性もありますのでなおさらスピードを落としましょう。

 

せっかく実装したアニメーションには気づいてほしいがために大げさに動かしたりすることもあるかと思います。

しかしそれではユーザーが不快に思うことに繋がりかねません。

アニメーションは主役ではないということを意識しましょう！

 

まとめ

結局のところ、根っこの部分は一緒なので同じことを角度を変えて言い直してるって感じですね。

とりあえず、うごかせばいいってもんじゃない！ってことが分かってもらえたらOKです！

 

先日ラクス様主催の『UI/UXのトレンドLT会』に参加しました。

作業しながら聞いてたのですが、「UI/UXはユーザーとの会話」とおっしゃっていた発表者の方がいました。

まさにその通り…と思いましたね…

アニメーションもユーザーエクスペリエンスの一環です。

ユーザーと会話するつもりで取り組んでみてください。

 

書きたいことがまだまだ残ってますので時間おいてからまた続編を出します！

 

次回予告

ﾃﾞ ﾚ ﾚ ﾚｰ

すべてに決着をつけるため出撃するディレクターとデザイナー。

すべてに決着をつけるため満身創痍でバグを狩るエンジニア。

すべてに決着をつけるため父IEと対峙するEdge。

そして現実から逃避する。

さらば、すべてのヒョウジクズレリオン。

次回、応用と小ネタとか（仮）。

さーて、納品までサービス、サービスゥ！