アニメーション

アニメーションは、階層や空間的な方向に対する感覚の強調を支援します。このドキュメントは、アニメーションを追加する際の原則について説明します。

原則

Top ↑

原点

  • アニメーションは、インターフェース要素の固定を支援します。例えばメニューは、メニューを開くボタンから拡大することができます。
  • アニメーションは、場所の概念の付与を支援します。例えばサイドバーが横からスライドインしてくると、メニューが画面の横に隠れているイメージを与えます。
  • アニメーションは、実世界の素材を操作しているようにデザインしてください。ユーザーインターフェースの対象とする要素がリアルな素材でできていると想像してください。画面上に表示されていないのであれば、どこにあるのか考えてみてください。この疑問を説明するためにアニメーションを使用します。

Top ↑

スピード

  • ユーザーのインタラクションを、アニメーションで邪魔しないでください。アニメーションは素早く、常に 0.2 秒以下で完了してください。
  • ユーザーのインタラクションを、アニメーションの完了を待たせないでください。
  • アニメーションは効率的でなければなりません。可能なら transform CSS プロパティを使用してください。要素は GPU でレンダーされスムーズになります。
  • アニメーションが遅く、非効率な場合は、使用しないでください。

Top ↑

シンプル

  • 素材がゴムでなければ、バウンドしないでください。
  • 回転したり、折りたたまれたり、曲がりながら動いたりしないでください。シンプルさを保ってください。

Top ↑

一貫性

一貫性のあるアニメーションを作成するため、要素がどのような動きをするか、物理的なルールを設定する必要があります。すべてのアニメーションがこのルールに従えば、ユーザーは一貫性や関連性を感じ、動きを予想できます。アニメーションはユーザーの期待に合わせなければなりません。合わせられないのであれば、それは恐らく作業に対する正しいアニメーションではありません。

タスクに対してすでにアニメーションが存在していれば再利用してください。

Top ↑

アクセシビリティへの考慮

  • アニメーションの使用には注意を払ってください。視覚効果によって前庭障害を起こすユーザーに配慮してください。
  • 現在、アダプティブ技術にコンテンツを報告中の要素をアニメーションしないでください (例: 更新を受信している aria-live リージョン)。変更中のリージョンをパースするアダプティブ技術が混乱します。
  • ユーザーの操作を引き金としないアニメーションは避けてください。
  • 可能であれば常に、アニメーションは OS レベルの「Reduce Motion (視覚効果を減らす)」設定を意識してください。これは prefers-reduced-motion メディアクエリを活用することで実現できます。Gutenberg にはこのための @reduce-motion mixin があり、CSS animate プロパティを含むルールと一緒に使用できます。

Top ↑

再利用アニメーションのカタログ

汎用的な Animate コンポーネントを使用すると、インターフェースの異なる部分をアニメーションできます。利用可能なアニメーションの詳細については コンポーネントのドキュメント を参照してください。

原文

最終更新日: