意味のあるデザインを！自然なアニメーションの作り方

本稿は、Babich.bizのブログ記事を了解を得て日本語翻訳し掲載した記事になります。

本記事は、ソフトウェアデベロッパーのNick Babich氏によって投稿されました。

モーションによってモバイルアプリに命を吹き込む

10年前、アニメーションやモーションを使用したユーザーインターフェースは効率の悪いものとされていました。派手なサイトに飛び跳ねるポップアップ、点滅するボタンなどを連想させるものでした。

しかしここ数年でそれらの考え方は大きく変化しました。iPhoneやモバイルアプリが導入され、デザイナーの多くは動的なアニメーションの将来性について経験を積んてきました。アニメーションは時が経つとともにインターフェイスの重要な要素になり、デザイナーに全く新しい次元を与えています。

最新のインターフェイスはもはやただの静止画の連続ではありません。アニメーションを使用すると、時間という次元を製品に加えることでソフトウェアと人の間のギャップを埋めることができます。

最高に直感的で楽しい体験はいつもモーションデザインに細かい描写を入れます。

この記事ではユーザー体験をより生き生きと楽しくするために、どこに美しさを追加できるかといういくつかの例を提示します。

読み込みの時間を楽しいものにする

刺激的なオープニングアニメーションがあると、アプリを開くたびにユーザーの気持ちを盛り上げることができます。

しかし、それ以上の役割を果たす場合もあります。下の例のアニメーションは単に楽しいというだけのものではなく、ユーザーの目に影響を与えて集中するべき場所をコントロールしています。

ユーザーがUberアプリを起動すると、マップ上のピンに変化するドロップに目が行きます。

新規ユーザーにとって外観的な魅力のあるコンテンツ

ユーザーは初めてアプリに触れたときに、何をしたのかを知り理解しなければなりません。

スムーズな画面遷移と優れたアニメーションは、新規のユーザーをどのようにアプリに引き込むかということにすさまじく影響があります。

以下の例でのオンボーディングは創造性と個性が満載です。ビジュアルデザインとマイクロコピーが際立っており、新しいユーザーがアプリを体感することができます。

Ramotionによるアニメーション

対話型TIPSの組み入れ

アニメーションは、アプリ内の各機能についての対話式ショートストーリーを作ることができます。これによってユーザーは次にどうするべきか明確に理解できるようになります。

Ramotionによるアニメーション

視覚的なオリエンテーション

デザインにアニメーションを追加する最適の場所は、変化の瞬間です。状態変化が起こるとき、ユーザーは新しい場面が前のものとどう関係しているかを理解する必要があります。

静的なデザインでは状態と状態の間の前後関係を把握することができません。

接続とコンテンツの関係が成立するのは、アニメーションが機能的にも様式的にも役立ったときです。アニメーション化されたトランジションは異なるUI間の中継となり、ユーザーを導くのに役立ちます。

アニメーションはインターフェイス内でユーザーが現在の位置を確認するのに役立ちます。ユーザーは要素の動きに従って、2つの状態がお互いにどのように関係しているのかということを理解することができます。

Anton Aheichankaによるアニメーション

要素間の関係を説明する

よいデザインのトランジションは、アプリに触れたときにユーザーの目を必要な場所に正確に誘導します。アニメーションは目的の対象に応じて適切な要素を強調します。

再生ボタンを一時停止ボタンに変換することで2つのアクションがリンクされています。ひとつを押すともう片方のアクションが表示されるようになっています。

Anish Chandranによるアニメーション

空間認識

アニメーションはユーザーが空間インターフェイスのメンタルマップを作成するのに役立ちます。自分がどこから来て、どこに行くのかということをはっきりすることができます。

アニメーションはインターフェイス内で自分の位置を確認し、適切な場所にたどり着くのに役立ちます。

明確なフィードバック

アニメーションはユーザーが実行しているアクションを強化するために使用できます。

アニメーションのフィードバックは、ユーザーが操作した結果成功したかどうか及びその理由を示すのに役立ちます。

問題のある状態を示す

エラー状態のデザインを考えるときには、ユーザーにはっきりと分かるようにすることが大事です。

パスワード入力エラー時の揺れのアニメーションは、明確なフィードバックのよい例です。人間がお互いにフィードバックを与える、首を横に振るという方法と直接関係します。

アニメーション化されたフィードバックは、要素の複数のレイヤーが連携してユーザーの行動に反応するときにより効果的です。

ユーザーの不安をなくす

アニメーションはユーザーが自分の行動の結果を見るのに役立ちます。「言うのではなく見せる」という原則に従い、アニメーション化されたフィードバックを使うことで何が達成されたかを示すことができます。

下のStripeの例では、ユーザーが「Pay」をクリックするとアプリが成功の状態を表示させる前にスピナーが一時的に表示されます。チェックマークのアニメーションによってユーザーは支払いという大事な行為を簡単に行い、またその詳細を確認することができます。

ロジックについての注記

ロジックはすべてのアニメーションの重要な要素のひとつです。

環境にロジックを確実に与える必要があります。複雑さを少なくすることを余儀なくされる小さなスクリーンを適切に扱う方法を考えることが特に大事です。

アニメーションを論理的にかつ目的に合わせてください。あまりにも予測できない作用の過剰なアニメーションは製品のUXを破壊するおそれがあります。

下の例のようなアニメーションは技術的には問題なく実行されていますが、かえって紛らわしいインターフェイスになっています。写真をスワイプするとその人物の詳細ビューに移行するという動作は予測がしにくいからです。

人々はすでに実世界や他のアプリから特定のジェスチャーが何をするかどうかについて多くの先入観を持っています。

つまり、要素を一貫性のない方法で動作させると悪いUXが作成されます。

最後に

アニメーションは美しさと機能を結びつけるために幅広い規模と状況で使用されます。しかしアニメーションを作成する際には事前に計画的に考えておく必要があります。

それは、「アニメーションはアプリをクールにするものではなく、ユーザーが期待した体験をもたらすもの」です。

また、TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートで学びたい場合はご参加ください。