意味のあるデザインを！自然なアニメーションの作り方
アプリを利用する上で大事なのは使うストレスが無いかどうか。心地よく使ってもらうためにアニメーションは有効です。いくつか海外のアプリを事例として紹介しながら、自然なアニメーションを取り入れる方法について紹介しています。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
本稿は、Babich.bizのブログ記事を了解を得て日本語翻訳し掲載した記事になります。
本記事は、ソフトウェアデベロッパーのNick Babich氏によって投稿されました。
モーションによってモバイルアプリに命を吹き込む
10年前、アニメーションやモーションを使用したユーザーインターフェースは効率の悪いものとされていました。派手なサイトに飛び跳ねるポップアップ、点滅するボタンなどを連想させるものでした。
しかしここ数年でそれらの考え方は大きく変化しました。iPhoneやモバイルアプリが導入され、デザイナーの多くは動的なアニメーションの将来性について経験を積んてきました。アニメーションは時が経つとともにインターフェイスの重要な要素になり、デザイナーに全く新しい次元を与えています。
最新のインターフェイスはもはやただの静止画の連続ではありません。アニメーションを使用すると、時間という次元を製品に加えることでソフトウェアと人の間のギャップを埋めることができます。
最高に直感的で楽しい体験はいつもモーションデザインに細かい描写を入れます。
この記事ではユーザー体験をより生き生きと楽しくするために、どこに美しさを追加できるかといういくつかの例を提示します。
読み込みの時間を楽しいものにする
刺激的なオープニングアニメーションがあると、アプリを開くたびにユーザーの気持ちを盛り上げることができます。
しかし、それ以上の役割を果たす場合もあります。下の例のアニメーションは単に楽しいというだけのものではなく、ユーザーの目に影響を与えて集中するべき場所をコントロールしています。
ユーザーがUberアプリを起動すると、マップ上のピンに変化するドロップに目が行きます。
[PR] UI/UXデザインで挫折しない学習方法を動画で公開中
新規ユーザーにとって外観的な魅力のあるコンテンツ
ユーザーは初めてアプリに触れたときに、何をしたのかを知り理解しなければなりません。
スムーズな画面遷移と優れたアニメーションは、新規のユーザーをどのようにアプリに引き込むかということにすさまじく影響があります。
以下の例でのオンボーディングは創造性と個性が満載です。ビジュアルデザインとマイクロコピーが際立っており、新しいユーザーがアプリを体感することができます。
Ramotionによるアニメーション
対話型TIPSの組み入れ
アニメーションは、アプリ内の各機能についての対話式ショートストーリーを作ることができます。これによってユーザーは次にどうするべきか明確に理解できるようになります。
Ramotionによるアニメーション
視覚的なオリエンテーション
デザインにアニメーションを追加する最適の場所は、変化の瞬間です。状態変化が起こるとき、ユーザーは新しい場面が前のものとどう関係しているかを理解する必要があります。
静的なデザインでは状態と状態の間の前後関係を把握することができません。
接続とコンテンツの関係が成立するのは、アニメーションが機能的にも様式的にも役立ったときです。アニメーション化されたトランジションは異なるUI間の中継となり、ユーザーを導くのに役立ちます。
アニメーションはインターフェイス内でユーザーが現在の位置を確認するのに役立ちます。ユーザーは要素の動きに従って、2つの状態がお互いにどのように関係しているのかということを理解することができます。
Anton Aheichankaによるアニメーション
要素間の関係を説明する
よいデザインのトランジションは、アプリに触れたときにユーザーの目を必要な場所に正確に誘導します。アニメーションは目的の対象に応じて適切な要素を強調します。
再生ボタンを一時停止ボタンに変換することで2つのアクションがリンクされています。ひとつを押すともう片方のアクションが表示されるようになっています。
Anish Chandranによるアニメーション
空間認識
アニメーションはユーザーが空間インターフェイスのメンタルマップを作成するのに役立ちます。自分がどこから来て、どこに行くのかということをはっきりすることができます。
アニメーションはインターフェイス内で自分の位置を確認し、適切な場所にたどり着くのに役立ちます。
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
明確なフィードバック
アニメーションはユーザーが実行しているアクションを強化するために使用できます。
アニメーションのフィードバックは、ユーザーが操作した結果成功したかどうか及びその理由を示すのに役立ちます。
問題のある状態を示す
エラー状態のデザインを考えるときには、ユーザーにはっきりと分かるようにすることが大事です。
パスワード入力エラー時の揺れのアニメーションは、明確なフィードバックのよい例です。人間がお互いにフィードバックを与える、首を横に振るという方法と直接関係します。
アニメーション化されたフィードバックは、要素の複数のレイヤーが連携してユーザーの行動に反応するときにより効果的です。
ユーザーの不安をなくす
アニメーションはユーザーが自分の行動の結果を見るのに役立ちます。「言うのではなく見せる」という原則に従い、アニメーション化されたフィードバックを使うことで何が達成されたかを示すことができます。
下のStripeの例では、ユーザーが「Pay」をクリックするとアプリが成功の状態を表示させる前にスピナーが一時的に表示されます。チェックマークのアニメーションによってユーザーは支払いという大事な行為を簡単に行い、またその詳細を確認することができます。
ロジックについての注記
ロジックはすべてのアニメーションの重要な要素のひとつです。
環境にロジックを確実に与える必要があります。複雑さを少なくすることを余儀なくされる小さなスクリーンを適切に扱う方法を考えることが特に大事です。
アニメーションを論理的にかつ目的に合わせてください。あまりにも予測できない作用の過剰なアニメーションは製品のUXを破壊するおそれがあります。
下の例のようなアニメーションは技術的には問題なく実行されていますが、かえって紛らわしいインターフェイスになっています。写真をスワイプするとその人物の詳細ビューに移行するという動作は予測がしにくいからです。
人々はすでに実世界や他のアプリから特定のジェスチャーが何をするかどうかについて多くの先入観を持っています。
つまり、要素を一貫性のない方法で動作させると悪いUXが作成されます。
最後に
アニメーションは美しさと機能を結びつけるために幅広い規模と状況で使用されます。しかしアニメーションを作成する際には事前に計画的に考えておく必要があります。
それは、「アニメーションはアプリをクールにするものではなく、ユーザーが期待した体験をもたらすもの」です。
また、TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートで学びたい場合はご参加ください。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
