デザインシステムでアニメーションを扱う！後編：実装のガイドライン | アドビUX道場 #UXDojo

連載

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

前編『モーションの原則を記述する』に戻る。

モーションの原則は、大まかなガイドラインとして非常に役立つものの、デザインシステムにアニメーションを項目として含める大きなメリットである時間節約を享受するには、実際にそれをどのように実装するのかについての詳細な記載が必要です。「実装のガイドライン」の項目は、アニメーションの実装に関して「何を」「どのように」といった疑問に答えるための記述です（実際の項目名は様々ですが）。この項目の目標は、デザインシステムを使用する人が、よくできたデフォルトとして使用できるものを提供することです。そうすれば、アニメーションを扱うたびに様々な調整に時間をかけることなく、提供されるデフォルトを使用して制作を進められます。大幅な時間節約だけでなく、UIアニメーションに全体的な統一感を持たせる効果もあります。

実装のガイドライン

実装のガイドラインは、デザインシステムごとに、アプローチやカバーする範囲に差が見られる項目です。記載するトピックや詳細の総量は、デザインでアニメーションがどれほど重要な役割を果たすのか、そしてチームが必要としているのは何かに大きく依存します。たとえば、Photonの実装のガイドラインには、ひとつの再生時間とひとつのイージングカーブの記述しかありませんが、Material Designの場合は、再生時間とイージングがそれぞれ独立した項目になっているだけでなく、別途、実装の詳細な解説を記載したページが設けられています。

モーションの項目の量に正解はありません。特定のページ数や規則の数を満たそうとするよりも、チームが必要としている内容を網羅することが大切です。実装のガイドラインに含めるアニメーションの構成要素の候補としては、次のものが挙げられます。

これら3つの項目は、アニメーションを調整するための主要な手段です。これらの属性を使用することで、アニメーションの表現に大きな影響を与えられます。

それでは、それぞれの要素を詳しく見てみましょう。一般的に使用されているベストプラクティスや、独自の解釈を採用する余地がある箇所についても説明します。

再生時間

「再生時間」は、アニメーションがどのくらい持続すべきかを指定します。UIアニメーションの場合、この値は非常に短くなる傾向にあります。1秒に満たない僅かな時間で非常に多くの情報を伝えられるのは驚くべきことです。再生時間はアニメーションの重要な要素であるため、モーションガイドラインを持つすべてのデザインシステムに掲載されています。ただし、記述方法はさまざまです。

再生時間に関するベストプラクティスとして、多くのモーションガイドラインで取り上げられているものをいくつか紹介します。

こうした一般的なベストプラクティスはほぼすべてのガイドラインに含まれていますが、ガイドラインによって、再生時間の「短い」「長い」が実際に意味する値など、具体的な指示は時には大きく異なります。「短い」「長い」の差の説明の量も様々です。

デザインシステムの範囲を超えるものかもしれませんが、指定されている再生時間それぞれに「デザイントークン」を提供することを検討するのもよいでしょう。

Carbonのデザインシステムは、アニメーションの種類ごと、再生時間の範囲を簡単な表に纏めています。

Carbonの再生時間に関するイラストレーションと表。

Carbonはイラストと表を使って、インタラクションの種類ごとに再生時間の範囲を整理している

Material Designは、アニメーションの複雑さやアニーメーションが占める相対的な領域の広さに応じて推奨される再生時間をカテゴリ分けしています。Pluralsightのアプローチは一風変わっており、様々な再生速度に、デザイントークンとかわいらしい動物を組み合わせた表を提供しています。

カタツムリからチーターまで、アニメーションの再生時間を動物を使って説明しています。

Pluralsightのデザインシステムは、再生時間のオプションごとに、再生時間の値、動物、デザイントークンを表示している

イージングカーブの種類

イージングのガイドラインに関して、私が最も重要だと思うアドバイスは、CSSのデフォルトをただ使用するのではなく、独自のカスタムカーブを作成することです。これが、ブランドにマッチした一貫性のあるモーションを構築するための最も効果的な方法です。サラ・ドラズナーが言うように、「モーションの資産」を構築するのです。独自のイーズアウト、イーズイン、イーズインアウトの3つのカーブを持つだけで、しっかりとした基礎になるでしょう。必要になれば、いつでも他のカーブを追加できます。

イージングカーブをどこから着手してよいのか迷ったら、easings.netのサンプルを確認すると良いでしょう。このサイトは、見栄えの良いモーションを例示していて、利用しやすいようにグループに纏められています。CSSのデフォルトよりも表現豊かで柔軟性に優れています。

6種のイージングカーブそれぞれの、アニメーション速度の変化が異なる3つのバリエーション。

立方体ベジェ曲線で描かれたいくつかのイージング方程式

基本のイージング関数

3つの基本のイージングカーブを定義するようにお勧めしたのは、さまざまなアニメーションにおける主要なイージングの使われ方にほぼすべて対応することができるためです。

これらの3つのカーブで、ほぼすべてのアニメーションの要件に対応できます。

モーションの過程で加速するカーブ、終わりにかけて減速するカーブ、2つを組み合わせたカーブ。

ほとんどのモーションガイドラインに含まれる3つの主要ななカーブ

Spectrumにおいてはこの記事で説明した方法がそのまま使われ、3つのイージングカーブを作成し、それぞれにどの種のアニメーションに使用するべきかという勧告を記述しました。既存のアニメーションを検証し、また、いくつかのモーションを試してみたりしながら、これらのカーブにたどり着きました。

CarbonとPluralsightも似たアプローチを採用しています。3つのカーブをデザインしてそれらの使用方法を提案しているのに加え、その中の1つを迷った場合に使用するデフォルトに指定しています。

場合によっては、Photonのように、1つのカーブを定義して、それをすべてのアニメーションに使用すれば十分と感じることもあるでしょう。

Spectrumに定義されているイーズアウトのカーブ。

Spectrumの3つのカスタムイージングカーブの1つ

イージングカーブの定義と共に、デザイントークン、各種言語向けのコード (CSS、JS、iOS、Android)、AnimateやAfter Effectsのテンプレートなど、チームが使うツールに応じた補足情報を提供することも有効です。そうすることで、使いやすさが増すだけでなく、モーションガイドラインのデフォルトに沿った作業をスムーズに進められます。

イラストを使ってカーブを視覚的に表現したり、カーブのインタラクティブなサンプルを提供すると、イージングカーブの機能や見え方を素早く示すことができます。「一見は百聞にしかず」（見せながら説明すること）の効力を軽んじてはいけません。

イージングの優先度

3つの主要なカスタムカーブを定義したら、次の一歩となる作業のひとつはイージングの優先度を記述することです。これは、デザインメッセージの伝達方法としてモーションを使用しているブランドには特に効果があります。

デザイン要素のひとつとして、あるアニメーションを他のアニメーションよりも際立たせたることが必要な場合があるかもしれません。特に目立つアニメーションは、特定のポイントやインタラクションを強調する場合に有効です。そのため、イージングカーブを構造化しておいて、必要な時により印象的なカーブを選択できるようにするのは、優れたテクニックです。

利用開始の条件

ここまでで、モーションの原則と、再生時間とイージングの項目が整いました。デザインがモーションにあまり依存しないブランドの場合、既に必要な項目が揃っているかもしれません。

時間に迫られているのなら、再生時間とイージングのデフォルトさえ確立されていれば、モーションガイドラインを定めるメリットを発揮して、チームの時間を節約するには十分でしょう。

効果

使用する効果の名前の一覧やアニメーションのライブラリを提供することは、モーションガイドラインの使いやすさを増す可能性を持っています。もっとも、すべてのデザインシステムにこれらの項目が含まれているわけではありません。コンポーネントの一部としてアニメーションを扱う場合もありますし、それほどの詳細を必要としないプロジェクトもあります。

ひとつ警告しておくと、情報量が多ければ良いというわけではありません。大規模なアニメーションライブラリをデザインシステムに含めるのは見栄えが良いように感じられるかもしれませんが、記載する効果の数が増えれば、管理に費やす時間と労力をさらに増やすことになります。皆の時間の大きな無駄遣いを防ぐため、効果の数はできる限り少なく抑えることをお勧めします。

モーションガイドラインに効果のライブラリを提供する一般的な方法は2つあります。1つは、Lightningのデザインシステムが採用しているアプローチで、小さなアニメーション効果 (アニメーションの分子) のライブラリを提供する方法です。ライブラリ内の効果は、個別に使用したり、組み合わせてより複雑なアニメーションを作ったりできます。

小さなアニメーションのリスト。これらを組み合わせてより複雑な効果を作り出せる。

Lightningデザインシステムの名前が付けられたアニメーションのライブラリの一部

もう1つは、アウディの表示/非表示、変換、移動、スーパーインポーズの効果、Fluentのページの切り替え効果に見られるように、より包括的な目的に応じた効果を提供する方法です。

いずれの方法を選ぶにせよ、デザインの根拠やコードの実装の提供は有効です。

この記事で言及したもの以外にもモーションガイドラインを探しているのであれば、モーションなどのトピックで絞り込み検索ができるデザインシステムを集めたサイトAdele、それからstyleguides.ioは、一般に公開されているデザインシステムを検索するのに適した場所です。

それ以外の場所に記述する場合

デザインシステムの規模と形はさまざまです。多くのケースで、アニメーションガイドラインが独立した項目ではなかったり、コンポーネントに含まれていたりします。そうした場合の説明はこの記事では扱いませんが、「効果」を独立した項目にする代わりに、コンポーネントのページにアニメーション情報として含めるのが有益な場合もあることを伝えておきたいと思います。結局は、チームとデザインシステムにとって何が最適なのか次第で決まるのです。

また、アニメーションのパフォーマンスやアクセシビリティに関する考慮事項について、モーションの項目やコンポーネントのガイドラインに記述したり、あるいは専用の項目を設けるのも良い案かもしれません。パフォーマンスとアクセシビリティの目標は、デザイン作業のすべての側面に影響します。アニメーションも例外ではありません。

おわりに

この記事で、デザインシステムにモーションガイドラインを含めることがどれほど有益かを伝えられたことを願います。デザインシステムでアニメーションを扱うことで、過剰な時間をかけることなく、製品のモーションデザインに一貫性を持たせられるようになります。それと、ガイドラインの作成プロセスを明らかにする役には立ったでしょうか？

モーションガイドラインに取り組む際には、モーションガイドラインを一気に完成まで進めるのではなく、段階的に作成していくことをお勧めします。後から内容を追加することを念頭に初版のガイドラインを公開し、その後更新を重ねるほうが、ガイドラインを作成する人にとってずっと簡単ですし、実際に使用価値のあるガイドラインを作成できているか確認することもできます。

何かの内容が欠けていると分かっているものを共有するのは気が引けるかもしれませんが、初版のモーションガイドラインを公開した後にもう一度チームと対話し、公開したガイドラインがどの程度役に立っていて、どの問題が解消されていないのかを確認するのはとても大きな学びになるでしょう。この反復的なアプローチは、最も頻繁に使われるトピックを網羅して、チームのニーズに適応したガイドラインに近づく道です。使用価値が高く、無駄な手間を省くことができるデザインシステムを確立するのはチームにとって良いことです。

この記事はIncluding Animation In Your Design System（著者:Val Head）の抄訳です