東京のwebデザインスタジオが運営するデザイン・web制作・ビジネスブログ東京のwebデザインスタジオmono.のブログです。webデザインのナレッジや事例、ツール紹介、ビジネスに関するコラム、時々写真などを掲載しています。Ishibashi戦略設計やブランディング、デザイン表現を強みとしたWebデザイナー/ディレクター。数社の制作会社に勤めたのち、現在は"mono."の屋号でフリーのweb制作者として活動中。Contactinfo@mo-no.design結局どれを使えばいい?イージングの使い分け2023.02.19デザインイージングとは、アニメーションにおけるオブジェクトの動き方を伝えたい印象に近づけるために一定の速度で動かすのか、途中で加速させるのか、どうやって加速させるのか、など動かし方をコントロールする設定です。簡単にでもアニメーションに触れた経験がある方なら多くの方が耳にしたことはある概念だと思いますが、様々な種類があり、結局どれを使ったら良いのか分からない、感覚的に判断してしまっている、と言う方もいらっしゃるのではないでしょうか。お恥ずかしながら私もその節があったので、表現的な視点から見た時にそれぞれのイージングにはどのような特徴があり、どのように使い分けたら良いのかについて色々と調べてみました。Indexはじめにイージングの基本はこの4種類LinearEaseInEaseOutEaseInOut特徴的なイージングBackBounce特徴を強調するオプションまとめはじめにはじめに主要なイージングの種類を一覧にまとめてみました。大別すると主要な4種類(Linear、EaseIn、EaseOut、EaseInOut)と、少し動きが特殊なBack、Bounce系(Bounce、Elastic、Flash)などのイージングが存在して、Ease系のイージングには更にその特徴を際立たせるためのオプションのようなもの(Sine、Quadなど)が存在するというイメージです。ここに分類できない、更に特殊なものもありますが、この記事では割愛します。これらについて、もう少し細かい特徴や使い方を解説していきます。イージングの基本はこの4種類イージングの中でも主要な種類が4つあります。一部特殊なものもありますが、大体のイージングはこの4種類とそれらの派生系となることが多いです。Linear常に加速度が一定で緩急のないイージングです。単調で機械的な印象になりやすいので、アニメーションを印象的に見せたい場面ではあまり見かけませんがその無個性さを活かして取り入れられるケースがあります。一定の速度で要素を回転させたい時や、ベルトコンベアのように常に要素を自動スクロールさせておく場合など。そこまで注目させない要素へのループアニメーションなどで見かけやすい印象です。EaseInゆるやかスタートして中盤〜後半にかけて加速されるイージングです。例えるなら人や車が走り始める時などがこれに近い動きでしょうか。自然な印象を与えやすいメリットがある一方で変化が分かりやすい状態になるまでに時間がかかるデメリットがあるので、人の操作と関係のない場面で要素を動かしたい時などに用いられやすい印象です。一方で、webサイトやアプリなどで、何かを操作した時のイージングとしては反応が確認できるまでの時間が長くなるので向かない場合が多いです。EaseInは勢いのあるままアニメーションが終わるので現実世界でいうと動いたまま視界の外に消えていったり何かにぶつかって物体が急停止する時の見え方に近く、印象としては激しめのイメージを与えやすいです。EaseOutEaseInとは逆で初速が速く徐々に減速していくイージングです。現実のものに例えるなら何かが爆発した時のような動きに近いかと思います。web等で使う時は、ボタンをホバーやクリックした時など、人の操作へのリアクションとして採用すると、ボタンを押してから反応を感じられるまでの間隔が短くなりストレスを感じづらく相性が良いです。逆に爆発した時と例えたようにユーザーの操作とは関係なく始まるアニメーションで使うとユーザーを驚かせてしまう場合があるので、そう言った場合はEaseInやEaseInOutの方が適している場合が多いです。EaseInOut動きとしてはEaseInとEaseOutの特徴を合わせたような感じで、ゆっくりと加速して中盤に向けて最高速になり、最後はまだゆっくり減速した後にきゅっと止まるようなイージングです。初速がゆっくりなので、使用シチュエーションとしてはEaseInと同様にユーザーの操作と関係のないアニメーションに適しています。EaseInOutは最後減速してからアニメーションが終わる特徴があり、無理なく走り終える時など自然な止まり方になるので、アニメーションとしてもEaseInと比べて優しめな印象に見えます。特徴的なイージングそのほか、Back、Bounceなど少し特殊な動きをするイージングもあります。特徴的な動きなので、使い方によってはややうるさい印象にもなってしまいやすいのですが、ポップな世界観やリアルさを感じられる表現をしたい時などに上手く活用することで演出の質感を向上できる場合があります。Backアニメーションの開始時に始点からマイナス方向に動いて一度助走のような動きを付けてから終点に向かい始めたり、逆に終点を一度通り過ぎてから少し引き返すような動きをするイージングです。助走だけ付けてその後は終点に到達した時に静止するBackInや普通にスタートして最後だけ一度通り過ぎてから戻ってくるBackOutなども存在します。動き始めや動き終わりが自然に見え、リアルな物体のような印象を与える表現になる場合があります。助走をつけたり行きすぎて戻ってくるというのは生物的な動きに近いかもしれませんね。BounceBounceは床にボールが落下した時のように、一度終点まで到達した後にオブジェクトが反発しながら徐々に収束していく動きです。Back同様にリアルな動きに見せられますが、どちらかといえば物体的な動きの印象が強いかもしれません。そのほかにも近い特性を持ったElastic(バネなどのようにより激しい反発運動がある)やFlash(視点と終点を何度も往復することで光の点滅のような、デジタルな印象を与える)などさまざまイージングがあります。特徴を強調するオプションEaseInSine、EaseOutCubicのようにイージング名の末尾にもう一つ単語が付いているイージングがあります。イージングの緩急の特徴をより際立たせるオプションのようなイメージです。これはいくつかの性質に分類することができ、それぞれ加速の仕方などの特徴があるので正確な比較ではないのですが、感覚としては以下の順で右に行くほど激しくなる印象です。EXPOSine無印(EaseInOut)QuadCubicQuartQuintCircEXPOSineなどはかなり穏やかな印象なので、落ち着いた世界観などに。逆にEXPOやCircなどは元気の良い世界観の時に使うとマッチしやすいと思います。ボタンのホバーなどもEaseOutSineなどを用いるとすぐ反応を感じられるというメリットを残しつつ、アニメーションの勢いは抑えられるのでより優しく心地よい印象になりやすいです。まとめいかがだったでしょうか?それぞれのイージングが持つ特徴や使用場面を理解すると、アニメーションを考える際により適切な選択が取りやすくなるし、こういったことを頭に入れた上で普段からwebサイトや動画などを観てみるとまた新しい気付きがあるかもしれませんね。本当にこだわって作られたイージングはより細かく使い分けられていて一つのオブジェクトに対しても複数のイージングが組み合わされていたりします。ホバー要素なんかは元に戻る動作は注目させたいわけではないのでマウスオンよりマウスアウトの方がゆっくりにする傾向があったり。(下線などのアニメーションなんかは残り続けるとかえってうるさいのでマウスアウト後すぐ元に戻るケースもありますが。)こういった知識も活かして、より奥深い演出を作っていけるようになりたいと思います。このブログは東京のwebデザインスタジオmono.が運営しています。webサイト制作にあたりお見積やご相談などお気軽にお問い合わせくださいませ。Booksセンスは知識から始まる駆け出しの頃に読んで以来のバイブルです。「センス」ってここまで言語化出来るのかと思いました。この本を読んでからデザインや企画のアイデア出しがしやすくなりました。人によって定義のぶれやすいブランディングについて、言語化から実践するための方法までが一冊にまとまっています。老舗デザイン事務所DRAFT代表の宮田識さんの著書。ブランディングデザインに携わる多くの人の参考になる一冊だと思います。センスは知識から始まる駆け出しの頃に読んで以来のバイブルです。「センス」ってここまで言語化出来るのかと思いました。この本を読んでからデザインや企画のアイデア出しがしやすくなりました。ノンデザイナーズデザインブックレイアウトの法則についてまとめられた不朽の名著。この本で紹介されている4原則を知っているとレイアウトがぐっと見やすくなります。MDNデザイナーズファイル2022今を代表するデザイナーや制作会社がまとめられた本です。グラフィック系がメインですが、web制作会社もノミネートされています。以前に文字のジャンプ率の記事を書きました。こちらの記事はメインビジュアルなどを参考に、情緒的に見せ...2022.11.04ディレクションプロジェクトの成功はヒアリングで9割決まるちょっとブログっぽいタイトルにしてみました。GPTでSEOについて聞いてみた。色んな方の発信を見ていてこれはすごそう...!と感じていたの...2022.11.25コラム過去を知れば未来がわかる?多くの文化が辿る5つの時代web、アプリ、グラフィック、エディトリアル、プロダクト、建築、、デザインの世界だけでもこれまで数...2023.02.01デザインwebデザインギャラリー掲載事例まとめ(2023/5/23更新)これまでにmono.あるいは私の個人名義で手掛けた、webデザインギャラリーにご紹介いただいた事例...。