1.  > 
  2.  > 
  3.  > 
  4. UXを向上させるアニメーションの使い方
  • このエントリーをはてなブックマークに追加
BIZ TECH 公式ブログ

UXを向上させるアニメーションの使い方

画像: Barthelemy Chalvet

元記事: How to Use Animation to Improve UX
原著者: Nick Babich
この記事は原著者の許諾を得て翻訳・掲載しています。

アニメーションなどの動くビジュアルデザインはストーリーを伝えることができます。長いものではなく、短いものです。しかしビジュアルデザインのゴールはユーザーを楽しませることではありません。ユーザーが訪れたWebサイトで何ができるのか、どうやってアプリを使うのかなどを最も効率的に伝えることがビジュアルデザインのゴールなのです。このアイデアついてZurbがはっきりとコメントをしています。

私たちは画面をデザインしているのではありません。ユーザーがどのように画面から内容を見るのかをデザインしているのです。

アニメーションはさまざまな状況や規模で、美しさや機能を取り入れるために使われています。行動に影響を与え、状況を伝達し、ユーザーの注意を促したり、さらにはユーザーのアクションの結果をわかりやすくするのです。

読み込み時間を工夫しましょう

読み込み時間が退屈なものである必要はありません。読み込み中などの待ち時間はできるだけユーザーを満足させるものにしましょう。単純に読み込み中だということを表示する右下のようなアニメーションのかわりに左下のようなアニメーションを使うのが効果的です。ほとんどのWebサイトやアプリでは、読み込み中にスケルトンスクリーンと見出しのアニメーションを一緒に使うことでユーザーを取り逃がさないようにできます。

スケルトンスクリーンが画面を構成する要素を即座に補完しています。
引用元: tandemseven

スムーズに画面を遷移させましょう

画面の移り変わりをわかりやすく表現することにもアニメーションは使われます。どこからどこに移動したかがユーザーにとってわかりやすくなるのです。

ハードカットの画面遷移(アニメーションなし)とアニメーション付きの画面遷移でどれくらい印象が違うのかAdrian Zumbrunnen氏がわかりやすい例を示しています。

ハードカット

急に画面がかわり、不自然な画面遷移になってしまっています。
引用元: smashingmagazine

アニメーション付き

アニメーションによってHOMEからCONTACTに移動したことがわかやすくなっています。
引用元: smashingmagazine

各要素の関連性を表現しましょう

アニメーションは操作性を向上させ、よりリアルにします。

例えば、左下のように再生ボタンがスムーズに再生メニューに変わり、またスムーズにアイコンに戻るようなアニメーションを付けましょう。ユーザーにアイコンが持つ機能を伝えることができ、さらには「驚き」を与えることができます。右下の再生マークがポーズマークに切り替わるアニメーションは2つの要素が関連していて、2つが同時に存在できないということ強調しています。

再生ボタンが再生メニューに変わるときの動きは、視線をセンターに運ぶ役割もあります。
引用元: Material Design

プラスボタンを押すを他のアクションボタンが展開する例もあります。下ではプラスボタンを押すとプラスが鉛筆に変化します。鉛筆に変わることで、展開されるアクションボタンが何かを作ったり書いたりするためのボタンだということを表現しています。このような小さな変化によってユーザーが要素の役割を予想しやすくしています。

引用元: Material Design

エラーをわかりやすく表現しましょう

例えばフォーム画面のエラーにアニメーションを加えることによって格段に操作性が上がります。入力されたデータがもし適切でなければ、首を振るようなアニメーションがあると、ユーザーは即座に何が起こったのかを理解することができます。

引用元: Michaël Villar

結果をフィードバックしましょう

ユーザーのアクションによってどういう結果になったのか、アニメーションを使えばわかりやすくユーザーに伝えることができます。「言う」のではなく「見せる」ようにしましょう。

下の例では、ユーザーが支払いをクリックすると、一瞬の読み込みマークのあとですぐにチェックマークが出現しています。チェックマークのアニメーションによってユーザーは、支払いが完了したことを理解し、その簡単さが強調されています。

引用元: Michaël Villar

まとめ

アニメーションは適切に使われてはじめてパワフルな効果を発揮します。適切かどうかよく考えることはとても重要です。アニメーションをデザインを構成する一つの要素として考え、一番最初から取りいれましょう。デザインはただの視覚的なプレゼンテーションではないのです。Steve Jobs氏はこう言っています。

「どのように見えるか、感じるかではありません。デザインはどのように動くかです。」

Thank you!

ノンプログラマーの方、現場のビジネスマンの方に有益なソフトウェア・技術情報をお届けしています。 記事リクエストはbiztech@attracie.comにお寄せください。