UIデザインへのアプローチ Part 2: インタラクションとアニメーション（UXデザイン入門シリーズ）| アドビUX道場 #UXDojo

連載

エクスペリエンスデザインの基礎知識

『UIデザインへのアプローチ Part 1』では、一貫性と拡張性のあるインターフェイスのデザインの重要性と、そのための体系的なアプローチの確立について説明しました。

スクリーン向けのデザインと印刷向けのデザインの主要な違いの1つに、スクリーンの場合は、動きのあるメディアに対してデザインしているという点が挙げられます。これは、インタラクションデザインとグラフィックデザインの主要な差です。この記事では、インタラクションとアニメーションのデザインに焦点を当てて説明します。

インタラクションデザイナーは、ページ同士やページ内の要素同士がどのように関係しているのかを考慮します。静的なページの組み合わせをデザインしているのではなありません。これは大きな相違ですが、一連のページをデザインすることだけが役割であり、以降は「技術的な担当者に手渡してページを縫い合わせてもらう」と考えている一部のグラフィックデザイナーは、よく見過ごす違いです。

絶え間なく現れる「デザイナーはコーディングしなければならない」という厄介な問題を浮上させることを承知の上で、デザイナーがデザイン対象である媒体の機能を理解することは非常に重要です。本当に記憶に残る体験をデザインするには、アニメーションの原理の理解は欠かせません。幸いにも、Adobe XDのようなツールは、インタラクティブな体験をデザインするために取り組まなければならなかった多大なコードを肩代わりしてくれます。

本質的に動的なメディアであるスクリーン向けにデザインする場合、デザインしているものとユーザーがどのようにインタラクションするかを考えることはとても重要です。スクリーン間のトランジションをどうするか、UIコンポーネント内で有用なフィードバックを提供できるかを検討するべきです。その際、マクロインタラクション (ページレベル) とマイクロインタラクション (オブジェクトレベル) の両方の視点から考慮する必要があります。

スクリーン間のトランジション

『デザインフェーズの初期作業 Part 1: ユーザーの進路を整える（UXデザイン入門シリーズ）』では、ユーザーストーリーを使って、大まかまユーザーの進路をプランし始められることを説明しました。UIデザインの段階になったら、AスクリーンからBスクリーン、そしてCスクリーンへと、ユーザーがどのように移動するかに着目する必要があります。

以前であれば、デバイスの制限により、アニメーションをほとんど、または全く使用せずスクリーン間を単純に移動していたことでしょう。しかし、特にモバイルデバイスの処理能力が高まるにつれ、より没入型の体験をデザインできる機会が増えました。

もちろん、新しい性能も制限の中で使用する必要はありますが、最新のハードウェアは、心地よいインタラクションをデザインする機会を与えてくれています。これが、ここ数年、アニメーションに対する関心が高まっている所以です。デザイナーとしては、利用可能な手法に目を向けるべきです。そして手法の進化に合わせて、デザインも進化させなければなりません。

下から上へのフェードイン、左から右へのスワイプ、そしてスケールインなど、スクリーン間の移動にはさまざまな方法がある。

スクリーン間のトランジションをデザインする際には、次のような数々の要因を考慮する必要があります。

AスクリーンからBスクリーン、そしてCスクリーンへの遷移をデザインする際に、選択した内容 (トリガー、トランジション、タイミング) によってナラティブが変わります。その選択は、十分に時間を使って考えましょう。どのような旅路においても当てはまるように、楽しめるものであれば、より円滑な進行が期待できます。

デザインしているコンテンツの種類も、この決定には影響を与えます。あるケースでは、ユーザーに移行をゆっくりと体験させるため、トランジションやタイミングを使ってペースを遅めに調整するかもしれません。あるいは、トランジションの速度を上げて、即座に移動したい場合もあるかもしれません。

アップルが初めてiBooksを公開したとき、電子ブックを読む際のトランジション「ページめくり」効果のために、読者のペースが落ちていました。「ページめくり」は初めて目にしたときには楽しい効果でも、本を読み進めるにつれ繰り返して目にした後には、大きな不満の要因になりました。ページをめくるたびに発生するほんの僅かの時間が積み重なって、いらいらする体験を生み出していたのです。

スクリーン間のトランジションをデザインする際、基盤となる機能性を見失わないことが重要です。つまるところ、ユーザーに不満を覚えさせることではなく、満足させることが目標なのです。

もちろん、アニメーションは楽しいものですが、機能性を犠牲にするようでは意味がありません。ソフィー・パクストンは、まさにこのトピックについて「Your UI isn’t a Disney Movie」という素晴らしい記事を書いています。この記事では、理由のないアニメーションやアニメーションを過度に使用したインターフェイスは、注意を怠ると、ユーザーの不満の原因となることが説明されています。十分に読む価値のある記事です。

オブジェクトとのインタラクション

マクロインタラクション（ページレベル）が定義されたら、マイクロインタラクション（オブジェクレベル）に目を向けてみましょう。

ユーザーのページ間の移動を容易にするために、積み重なるあらゆる要因を考慮する必要があるのと同じように、ページ内のオブジェクトとのインタラクションを容易にするために注意を払うことも重要です。対象となるオブジェクトは、ボタンやフォームフィールドかもしれません。慎重に作られたアニメーションは、ユーザーにフィードバックを提供することができます。

視覚的なフィードバックの提供は、ユーザーインターフェイスのデザインにおいて非常に重要です。ユーザーのアクションが認識されたという信号を送れば、ユーザーを安心させることができます。実世界では、照明のスイッチを押すと、カチッという音が聞こえるとともに、灯りがついたり消えたりすることで、フィードバックを得られます。このフィードバックによって、何が起きているのかを確認できます。

実世界の経験をスクリーンの世界にも適用することで、ユーザーインターフェイスのデザインを改善できます。しっかりとデザインされたユーザーインターフェイスは、ユーザーのアクションに応答すべきです。アクションが期待どおりの効果を持つことを知らせて、安心感を与えましょう。ここで重要な役割を果たすのがアニメーションです。

アイデアを求めているのであれば、「UI Movement」というサイトがお勧め。ユーザーインターフェイス要素に適用されたアニメーションの例が集められている

「UI Movement」といったサイトはインスピレーションの宝庫です。ユーザーインターフェイスに適用されている効果的なアニメーションの例がいくつもまとめられています。重要なのは、フィードバックを提供する方法とその状況を考慮することです。

上に挙げたシナリオは氷山の一角です。ユーザーがページ要素とのインタラクションを求められている場所であればどこであれ、アニメーションを使用して有用なフィードバックを提供できる可能性があります。もちろん、前述のようにユーザーインターフェイスはディスニー映画ではないため、使い過ぎてはいけません。

最後に、アニメーションはすべての人に適切なものではなく、ユーザーによっては問題を起こすこともあります。前庭障害を患うユーザーの場合、モーションによってめまいや吐き気が生じることがあります。アニメーションを使用する際にはアクセシビリティを考慮することも重要です。

ユーザーに選択肢を与えるのも1つの考えです。CodePen World’s Fairのように、ユーザーにアニメーションの使用を警告したり、アニメーション付きまたは無しのサイトに移動する選択肢を提供するサイトもあります。こういった配慮は素晴らしいことだと思います。アクセシビリティに乾杯です！

おわりに

ユーザーインターフェイスをデザインする際は、体系を整えてから始めると作業を進めやすくなります。何を構築するにせよ、事前に考慮された一貫性を持つものができるからです。特に、デザイン見直しの一環として既存画面を再考している場合は、インターフェイスインベントリから着手すると、手直しの必要がある箇所を特定しやすくなります。時間の経過とともに、一貫性が無くなるのは当然のことです。この手段は、そうした状況を特定するのに理想的です。

インターフェイスを作成する段階に到達したら、デザインシステムを確立する時間を作りましょう。これは、デザインの一貫性を確保できるだけでなく、チームの考えをひとつにします。プロジェクトに参加するフリーランサーにも、必要なあらゆるガイダンスがまとめられた資料として提供できます。

最後に、インタラクションとアニメーションのデザインを大事にしましょう。画面デザインを進める過程で、デザインとユーザーがどのように関わるかを考えることが大切です。結局のところ、動的に変わる媒体にデザインしているわけですから、その特性を味方につけましょう。

上述の内容をすべて試してみることで、時が経過しても通用する、しっかりとしたユーザーインターフェイスへのアプローチの基礎を得ることができるでしょう。

お勧めの読み物

オフラインやオンラインにかかわらず、デザインに役立つ優れた読み物がたくさんあります。その中からいくつかを推薦します。

アラ・コールマトヴァの書籍の中で私が強くお勧めするのは、『Design Systems』です。効果的なデザインシステムを構築することが、素晴らしいデジタル製品を作成するチームにいかに役立つかが論じられています。

ブラッド・フロストは、インターフェイスインベントリを実施するプロセスについて詳細に著述しています。また、効果的なインターフェイスデザインシステムの作成に焦点を当てた『Atomic Design』という素晴らしい本を書いています。フロストは洞察に秀でており、同氏のブログをブックマークすることを強くお勧めしています。

インタラクションやアニメーションのデザインに関する学習に関心がある方は、ヴァル・ヘッドの「Animation and UX Resources」を参照すると良いでしょう。

Web向けのアニメーションに関する知識を探している方は、ドノヴァン・ハッチンソンの「CSS Animation」コースを受講すると良いでしょう。素晴らしい内容であり、同時に、ハッチンソンの指導スタイルは比類ないものです。

この記事はThe Fundamentals of UI Design, Part 2: Interactions and Animations（著者:Christopher Murphy）の抄訳です