実践で学んだモーションコーディング5つの要点

仕事でいくつかの種類のモーション(動き/アニメーション)が必要なサイトのコーディングを担当した。デザイナーからも指示とフィードバックをもらいつつ、実装を進めながら自分なりに学んだ原則がいくつかあった。

モーションを作るときに心がけたいコツ、押さえておきたい考え方のポイントのようなものだ。以下の5つにまとめてみた。

1. 動きや演出のためだけに不必要にユーザーを待たせない 

世界観の演出や、凝ったもの・印象的なものにしたいがために、情報表示までの時間(duration)や動きに少し間を持たせたくなることがある。しかし、いち早く必要な情報を表示して欲しい人もいる。演出でユーザーの目を惹きつけ、個性を出し差別化を図るのもいいが、必要以上に「待つ」という感覚を与えてしまうほどアニメーションは長くしない方がいいだろう。

3秒待って画面に何も表示されないと離脱してしまうユーザーが多いという「3秒ルール」の概念もたまに聞く。今はそれ以上が求められるともいわれている。昨今のwebの世界での高速化・軽量化の流れからしても「待たせない」ことは重要だろう。もちろんこれは制作コンテンツの特性と照らし合わせて検討することなので、ケースバイケースだろう。

2. CPUに処理をさせず、GPU処理を意識して使う

1とも関連するが、javaScriptCSSによるアニメーションを多用すると、スクロールの挙動や動きそのものがカクカクするなどし、動きや処理が重くなることがある。コンピュータに搭載されるCPUCentral Processing Unit)で極力処理をさせず、グラフィックなどの並列処理が得意なGPUGraphics Processing Unit)にアニメーション関連の処理をさせるように心がけたい。いわゆるハードウェア・アクセラレーションと呼ばれる手法だ。

CSSでアニメーションをさせる場合は、透明度はopacity、移動はtranslate、拡大・縮小はscale、回転はrorate、3D系はtranslate3Dscale3drotate3dなどのプロパティや関数を使うことでGPU処理にでき、動きも滑らかになる。

そのほかのCSSを用いたアニメーション表現も、backface-visibility: hidden;transform: translate3d(0, 0, 0);などを併用することでGPU処理が適用できる。これでカクつきが解消されることも結構あるので、知っておいて損はないだろう。ブラウザの検証ツールで検証・確認しながらこうした処理を実装していく。

3. モーションの流れや順番を意識して処理を書く

作っている側としては単体の動きを作ることに集中してしまい、それができたときに「よし、できた。もうこれでOK」となることもある。しかし、モーションコーディングにはさらに続きがある。画面全体やその周辺要素との関連性、親和性とともに、動きやエフェクトがユーザーに対し、総合的にどういった印象を与えるかまで全体俯瞰で突き詰めて見た方がよいだろう。

見出しや文章段落をフェードで次々出現させる場合は、上から順番につっかえを感じさせないタイミングで出現させて読ませる。メインビジュアルが表示されたあとに何らかのモーションを起動させる場合は一つ一つの処理完了後に動かす。複数の動きを同時に動かした際に単純に目で負えなくなっていないかなど、見る人にストレスや違和感を与えないようにしたい。

4. 動きに統一感を持たせ、バラバラとした散漫な演出にしない

これもモノによるとは思うが、上下左右あらゆる方向から要素を出現させるなどバラバラした動きの演出をすると、ユーザーはそれだけで見づらいと感じてしまうだろう。方向性や時間間隔、またフェード効果やイージング(easing)など、動き全体の統一感を意識した上で作成したい。

こうしたことも心地よいとユーザーに感じさせるモーションにつながっていくのだろう。

5. 不自然な動きは極力避け、自然現象に近い滑らかな動きを作る

実際の現実世界で起きている物理現象に反するようなモーションやアニメーションに対して、人は違和感を覚えるとされる。不自然な加速・減速や物体が急に消える、ずっと一定速度で動くといった現象は現実世界ではあまり目にすることがない。

逆に、私たちの住む世界には空気抵抗や摩擦、加速度などが存在している。そういった要素を表現に取り入れられるようにしていくことで自ずと表現の幅も広がるはずだ。中でもイージング(easingは、CSSJavaScriptでも割と容易に動きの演出や表現に取り入れられるため、使い所や特性をきっちりと押さえておきたい。

最後に

モーションコーディングにおける具体的なテクニックというより、考え方の指針のようなものなので少し抽象的な説明になってしまった。ただ、モーション表現にはいろいろな要素や考え方が詰まっていて、学ぶことが多くおもしろい領域だと感じる。

また、ゲームや動画の世界はアニメーションやモーションが発達していて、とても参考になる。ときには真似してみたくなるようなユーザーインターフェイスやグラフィックス表現も多い。

いろいろなものから表現のエッセンスを取り入れたり、インスピレーションを受けたりしつつ、自分自身のコーディング/プログラミング力を磨いて表現力を高めていきたい。