株式会社グローバルゲート公式ブログ
イージングを取り入れてWebデザインのアニメーションをもっと魅力的に
はじめまして、株式会社グローバルゲートのWebデザイナーのモーリーです。
近年のWebデザインは文字や画像を並べてレイアウトするだけではなく、動的な要素、つまりアニメーションも欠かせないものとなっています。
ブラウザの対応が進んだおかげで各種Javascriptのライブラリを使ったり数行のCSSを書くだけで簡単にWebサイトに動きを付けることができるようになりましたが、単に要素を動かすだけでは本当に魅力あるWebサイトをつくることはできません。
何も考えずにアニメーション効果を導入しても、魅力どころかわずらわしく目障りなものとなってしまうおそれがあります。
アニメーションを効果的に導入するポイントはいくつかありますが、今回はイージングについてご紹介したいと思います。
イージングとは
日本語で言えば「緩急」、実行されているアニメーションの速度を微調整することを言います。
現実世界でも物が動くときは等速ではありません。はじめはゆっくりと、段々と速くなって最高速に達します。
Webデザインで使用するアニメーションも緩急を付けることで一気に魅力的なものとなります。物理の計算式を参考にする場合もありますが、あえてありえない動きを再現したり大げさな緩急を付けることで、見ていて楽しい目が離せないWebサイトに仕上げることができます。
イージングの導入方法
近年のブラウザはほとんどがイージング用のプロパティをサポートしていますので、簡単なCSSプロパティを書くだけでイージングを適用したアニメーションを実行させることができます。
transitionの場合
transition-timing-functionというプロパティで指定することができます。
.selector {
transition-timing-function: ease/linear/ease-in/ease-out/ease-in-out/cubic-bezier;
}
また、ショートハンドを使って指定することも可能です。
.selector {
transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
animationの場合
animation-timing-functionというプロパティで指定することができます。
.selector {
animation-timing-function: ease/linear/ease-in/ease-out/ease-in-out/cubic-bezier;
}
transitionと同様に、ショートハンドを使って指定することも可能です。
.selector {
animation: animationName 1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
}
イージングの有無による実際の例
イージングの有無がどれだけ印象を変えるのかは実際に見比べるのが一番だと思いますので、簡単なアニメーションのサンプルを用意しました。
スライドショー
多くのサイトで使われているカルーセル型のスライドショーも、イージングを適用することで印象を大きく変えることができます。
大きく減速するeaseOut（easeOutExpo）を適用するとスピード感が出てシャープな印象を与えることができます。
速度を落とし減速を控えめにすることで上品になります。
Webサイトでどういった印象を与えたいかによって調整します。
ローディング
丸が回転するだけのローディングも、イージングを適用するだけで同じrotateでも全く違う動きのように見えます。
（ローディングとして使う場合は等速でも違和感がありませんね）
スライドイン
今回は見本なので無限ループで画像が出入りしますが、スクロールしたら要素が右や左からアニメーションを伴って出現するという動きでよく使います。
シンプルな右から左への動きも、イージングだけで一気にモダンな印象になります。
拡大・縮小
このアニメーションはマウスオーバー時に適用することが多いでしょう。拡大・縮小という動きも、イージングを適用することで迫力のある構成にすることができます。
今回はアニメーションには欠かせない、使いこなすことで大きく印象を変えるイージングについてご紹介しました。
株式会社グローバルゲートでは「Webサイトを通じてどのような印象を与えたいか」までを考え、様々な業種のお客様に向けてWebサイト制作を行っております。
東亰・大阪（近畿一円）のお客様なら無料で訪問致しますのでお気軽にお問い合わせください。
【関連記事】
