Webサイトのスクロールの慣性

Webサイトをパソコンで閲覧する場合でも、スマホでもタブレットでも、スクロールの動作感覚というものは概ね共通しています。

ある程度の「慣性」が働いているのです。

ここで言う「慣性」とは「動いているものが動き続けようとする性質」のこと。

スマホの上の指の動きが止まっても、スクロールが即座に止まるのではなく、ちょっとの間動き続けます。

また、スマホ上の指の動きのスピードが速いほどスクロールのスピードが上がりますが、スピードが上がるだけでなく指の動きを止めた時に止まるまでの移動距離が長くなります。

スピードを出している車がブレーキを踏んで完全に止まるまでの距離が、スピードを出せば出すほど長くなるのと似ていますね。

つまり、こういった慣性は自然の動きに即したものであり、実際にモノを動かしているのと似た感覚をユーザーは味わっているわけです。

さて、開発中のサイト上にさまざまなアニメーションを実装していくと、慣性が働いているような自然の動きにならないことがあります。

この動画は、スクロールの動きを止めていないにもかかわらず、何かモノにつっかえたように一瞬スクロールの動きが止まってしまう例です。

複雑なアニメーションを取り入れることで、こういった不自然な動きが生じてしまう可能性があるのですが、弊社ではこういった動きを最終的には絶対に排除した状態で納品することを心がけています。

自然な動きに逆らってしまった場合

「何かバグが起きてしまっているのでは?」

「何かおかしな操作をしてしまったのでは?」

とユーザーにあらぬ疑念を持たれてしまう原因となるからです。

最終的に、こういった不自然な動作を排除して納品をさせていただいたサイトがこちらです。

弊社の制作するアニメーションでは、自然界に存在する動きというものを重要視します。

完全に自然界のものと同じにすることは不可能ですが、できる限り自然の動きに寄せるべくさまざまな工夫を技術担当者は常日頃考え続けています。