「快適」を生みだすインタラクションデザイン「イージング」とは？ ～ UIデザインを学ぶ

こんにちは。PIVOTコラム編集部です。

私が専門としているインタラクションデザインは、ユーザーの快適性を求めるデジタルデザインの１つの領域です。今回はその中でも、「イージング」の付け方について、どんな効果があるのかという点も含めて書きたいと思います。

イージングとは、UIの動き方の加減のことです。
これを調整することによって、UIの使い心地を大きく向上させることができます。自然な物の動きに近い動かし方をデザインに取り入れることで、ユーザーに違和感のない体験を提供できます。

イージングの付け所と効果は、

以下の3種に大きく分けられると考えています。

① クリック、タップなど押した時の変化→押し心地、触り心地の向上
② ページ上に表示された際に再生するフェードイン→視線誘導を目的とするもの
③ 恒常的に再生されるループアニメーション→世界観を伝える、待ち時間の感覚を短縮

３種のイージングについてもう少し深くまとめていきます。

１つ目は、ユーザの操作に対して反応を返してあげるものです。
このイージングは、ユーザーの操作に反応する動きのほとんどに適しています。Webページでのマウスホバーアニメーションなどもこの分類に含めて良いでしょう。ユーザの操作に反応し、変化した部分がわかりやすくなる効果や、スムーズな操作性を感じさせることができます。

このような動きに適しているイージングは、初動が早く、最終の状態に近いものにすぐに達するようなイージングです。ユーザの操作に大きく反応し、余韻がゆっくりと残るものが心地よさを与えられます。

具体的に言うと、easeOutExpoのようなイージング関数を使用するのが良い。とにかく、操作の後で起こるインタラクションは「キリよく変わる」ことが重要です。その理由としては、そのような動きがもっとも物理的な物の動きに近いためです。

例えば、おはじきを指で弾いた時、おはじきは指で押された瞬間に遅延なく最大限加速し、その後緩やかに減速していきます。このような動きを再現する方法として「キリよく変わる」イージングを目指すのがUIデザインにおいて最良となると考えます。

２つ目は、要素がウィンドウに表示された際に再生されるような箇所で使われる、視線誘導を促すようなものです。

このイージングは、ページロード時のアニメーションや、ページスクロールのアニメーションに適しているでしょう。アプリやWebサービスなどよりも、広告的なWebページで使われることが多いです。

静止状態ではつくれない、動いているものへの誘目性を利用したデザインを作ることができます。効果としては、感性的な部分だけではなく機能的な品質に寄与することもあります。

雑然とものが置かれている倉庫のような環境でも、ガタガタ揺れている木箱があったら真っ先にそこが気になってしまうように、ユーザのアテンションを得る＋興味を持たせて次のアクションを促すことができます。

ここに適したイージングは、付与させたい雰囲気で柔軟に対応する方が良いでしょう。軽快な印象を持たせたい場合は、動きの早く短いイージングでテンポよく見せ、上品な印象の場合は滑らかでゆったりとしたイージングが良いでしょう。

しかし、気をつけるべき点はやはり、物理法則に適した動き方にすることです。この部分も、間接的にユーザーの操作に紐づいたものなので、ここでも「キリよく変わる」ようなイージングが良いと思います。

加えて、スクロールイベントに合わせて画像をディストーションさせながら表示したり、DOM※要素の形を変形させたり、擬似的に遠近感を持たせて３D的な演出を考えたりしましょう。
※ Document Object Modelの略。HTMLやXML文書を操作するためのAPI。

操作に関係なく急に加速して動いたり、遠近感を無視するような動きをすると、ユーザーが操作する際に違和感のあるデザインとなってしまいます。

具体例として、「The Shift」の企業ページでは、ページのファーストビューやスクロール時のテキストのフェードインにアニメーションをふんだんに取り入れ、高級感とクリエイティブ性を演出しています。

３つ目は、１と２に分類されない、延々と背景的に再生されるインタラクションというよりアニメーション的なものです。
主にスタイリング面で使用されますが、ローディングアニメーションなど、ユーザーに待機時間を強制させるタイミングの動きにも適しています。

この部分についてはランダム性を持った、予測がしにくい動きを使用するとユーザーが待っている時間を退屈せずに済むでしょう。
不思議な動きや魅力的な動きは、単純に人の興味を惹くので、LPのFVに使用するのも一つの手だと考えられます。

具体例として、「SSMarket」の企業ページでは、ページのFVに背景として、幾何学的なパターンのアニメーションを表示し、ページ自体のインパクトを強化。印象に残るWebページになるような演出がされています。

デザインに動きを持たせられるのは、デジタルでのUIデザインの大きな特徴・利点ですが、乱用すればそれだけ情報量は増えてしまい、混沌としたページ・サービスとなってしまいます。
あくまでもユーザーの利便性を重視しながら、効果的な箇所でインタラクションを使用することをオススメします！