モーションを活かしたWEBデザイン－効果的な使い方や作成時のポイントをご紹介

Webサイトで文章や画像、アイコンなどが続くと、ユーザーの読む気が削がれ、離脱率が上がる場合があります。
離脱率低下のためにサイトに動きをつけようとすると、スライダーやハンバーガーメニューなどに目が行きがちですが、画面上でのやり取り、アプリケーションの使用方法などを説明するために動きを加えることもあります。
これを「モーションデザイン」と言います。
今回は今どきのUI/UXには必須なモーションデザインについて、さらには効果的な使い方やポイントなども解説します。

モーションデザインとは

モーションデザインとは「モーションを想像して具現化すること」を言います。

Webサイトでの「モーションを想像して具現化する」とは、例えば以下のことを指します。

• メニューボタンクリック時に垂れ幕を広げるようにメニューが表示される
• ボタンをクリックしたときにボタンが弾かれたように動く
• アイコンが規則的に点滅する

これらはユーザーがページを直感的に操作できるように設定されているものであり、その根底にあるのはユーザビリティ（ユーザーの利便性）を第一に考えることです。

ではモーションデザインを取り入れることが、ユーザビリティとどんな関係にあるのか、もう少し詳しく見ていきたいと思います。

ユーザビリティとモーションデザインの関係

モーションデザインがユーザビリティ向上に良い理由は、「ユーザーのアクションに対して即応性があるから」です。

例えばInstagramではユーザーがスクリーンショットを撮るとシェアを促すよう通知されますが、これはユーザーのアクションに対してフィードバックを返すことに該当します。

フィードバックをもらったユーザーは、次にどのアクションをとるかを思案しやすくなるので、結果的にユーザビリティの向上になるというわけです。

では、どの要素にモーションデザインを適用させるのが良いのでしょうか。

ボタンなどのユーザーがクリックする要素

モーションデザインを適用させるべき要素のひとつが、ボタンなどのユーザーがクリックする要素です。

ユーザーのボタンクリック時にボタンが凹む、または点滅するような動きを見せることで「ユーザーからの指示を受け取りましたよ」というレスポンスを返すことになるのです。

ユーザーへのフィードバックが必要な要素

もうひとつのモーションデザインを適用させるべき要素は、先に述べたダウンロードプロセス画面のような、ユーザーへのフィードバックが必要な要素です。

例えば以下の要素が該当します。

• ショッピングサイトでユーザーがカートへ商品を追加した際、ポップを表示する
• ダウンロード完了後にチェックマークが表示され、画面とボタンの色が変化する

ユーザーへのフィードバックとしてのモーションデザインは、ユーザーの次の操作を助ける役割もあるので、ユーザビリティ向上になるというわけです。

モーションデザインの実例

ではここからは、モーションデザインが使われているサイトを5つピックアップしてご紹介します。

Webサイト制作時にモーションデザインを取り入れる際の参考にしてみてください。

Googleマップ

Googleマップではある地点を検索した後、その地点へズームインしてユーザーのマップ閲覧を補助します。
また、別地点を検索するとその地点へ流れるように画面が遷移するので、ユーザーは検索した場所同士の空間的関係を把握できます。

Twitter

Twitterの公式アプリでは「いいね！」のアイコンをタップすることでモーションが表れます。
また、ポップアップ式に表れる通知やタイムラインを読みやすくするために画面が下に動くなど、積極的にモーションデザインを取り入れ、直感的な操作がしやすくなっています。

宇多田ヒカル公式サイト

歌手の宇多田ヒカルさんの公式サイトの特設ページでは、新アルバムがYoutubeやSpotifyでどれだけ再生されたかをリアルタイムで計測し、それを表示しています。
背景には地球のモーションデザインが用意されていて、ファン同士でつながっているように演出されています。

Satellites

Satellitesはオランダのクリエイティブチーム、JUSTが制作したWebサイトであり、地球の周囲に浮かぶ衛星やロケットのデブリ（宇宙ゴミ）をモーションデザインで表現しています。
通信機を三角形、様々な破片を多角形、ロケットの機体を四角形で表現し、様々なデブリが地球の周囲に漂っているという「宇宙のゴミ問題」を可視化しています。

Exoplanet Explorer

Exoplanet Explorerは2017年11月までに発見された惑星のリストから、ユーザーが見たい惑星をモーションデザインで表現しているWebサイトです。
NASAから提供されたデータを使って各惑星を表現しているので、視覚的に情報を閲覧できます。

モーションデザインを取り入れる際のポイントと注意点

ここからはモーションデザインを取り入れる際のポイントと注意点を解説します。

モーションデザインを取り入れる際のポイント

モーションデザインを取り入れる際は、ユーザビリティを第一に考えることが大切です。

そのためユーザーの混乱を招きやすい複雑な動きではなく、シンプルな動きをさせるようにし、その動きがユーザーにどのような意味をもたらすかを考えて導入することが大切です。

以下はモーションデザインを取り入れる際のポイントです。

アニメーションの持続時間

ユーザーに変更を知らせつつ待ち時間がない長さでアニメーションを使用します。

アニメーションの最適速度は2～5ミリ秒なので、1ミリ秒より短いアニメーションはあまりにも瞬間的で、1秒以上の長いアニメーションはユーザーにとって退屈なだけです。

また、Googleによるとモバイル端末では2～3ミリ秒の持続時間、タブレットでは4～5ミリ秒ほどです。

イージング

イージングはオブジェクトの動きを自然に見せるためのものであり、オブジェクトにある程度の加速と減速を取り入れます。

直線的な動きと加速曲線

オブジェクトが直線的に一定の速度で移動すると不自然なので、アニメーション直線を使用し、使いどころはオブジェクトの色などが変更されたときに限定します。

また一定の加速度でオブジェクトが曲線を描いて移動する加速曲線はシステム通知やカード型インターフェースで使用します。

おもにオブジェクトが画面から飛び出す動きに使用します。

減速曲線と標準曲線

減速曲線は画面上にオブジェクトが出現する場合に使用され、最初にオブジェクトが大きく移動し、最後は停止するという動きを見せます。

また標準曲線はインターフェース用のアニメーションで使用されがちで、左右非対称のアニメーション曲線を組み合わせます。

同一インタラクション

同一インタラクションは全オブジェクトが特定のルールに従うことであり、例えば上から下方向へユーザーの目が移動するように促すことなどをさします。

追従インタラクション

追従インタラクションは中心となるオブジェクトが全ユーザーの注意を惹き、それにほかのオブジェクトが追従することを言います。

コンテンツの階層と順序を表現し、メインコンテンツに注目を集めるために使用されます。

モーションデザインを取り入れる際の注意点

ここからはモーションデザイン導入時の注意点を解説します。

動きをリアルにする

モーションデザインの動きはユーザーにとって不自然でないようにし、システムからのフィードバックがまるで対話しているかのように自然に感じられなければいけません。

そのためには例えばアニメーションの速度を一定にせず、最初は速くそこから速度を落とすなどの動きを付けるよう心掛けてみてください。

Googleのガイドラインを参考にする

Googleのマテリアルデザインガイドラインを参考にすることで、モーションデザインに一貫性を持たせやすくなります。

まとめ

Webサイトにモーションデザインを導入することで、ユーザーの操作に沿ったページ案内ができ、ユーザビリティ向上へとつなげられます。

モーションデザインはスマートフォンのような小さい画面でも直感的な操作を可能とする反面、デザインが表現される際の動きなどに統一感を持たせないと、ユーザビリティが低下します。

モーションデザインでも第一に必要なのはユーザビリティですので、デザインが表現される動きやその方向性、速度に一貫性を持たせることを心掛けてください。