モーション感度の低減されたモーションを使用した設計

CSSは最近、特定のユーザー設定とユーザーの現在の環境の品質を認識できる機能を追加しました。 これらの新機能の1つ、特にモーションを減らすメディア機能は、Web上でより包括的なモーションを設計するのに特に役立ちます。

数年前、私はモーション感度のためのより安全なWebアニメーションの設計と、Web上で安全なモーションを設計するために当時持っていた限られたオプションについての記事を書きました。 トリガーとなる可能性のあるモーションエフェクトの種類や、コンテキストとユーザーの期待の重要性など、元の記事以降、いくつかの点は同じです。 しかし、変更されたのは、prefers-reduced-motionメディア機能の存在とサポートです。 それは、包括的でアクセスしやすいように作品のモーションを設計する方法に大きな違いをもたらします。

なぜモーションを減らすのですか？

2013年にiOS7がリリースされたことで、デジタルデザインの世界全体で、画面上の動きが、たとえそれがインターフェースの一部であったとしても、動きに敏感な人々に物理的な影響を与える可能性があることがわかりました。 それ以来、主要なモバイルおよびデスクトップオペレーティングシステムは、オペレーティングシステムで遭遇する動きの量を減らすための機能を追加しました。

「あなたのインタラクティブ性が私を病気にしている」や「前庭障害のアクセシビリティ」などの記事は、特にモーションに関するデザインの選択が、モーションに敏感な人に物理的な影響を与える可能性があることを直接物語っています。 これらの運動過敏症の根本的な原因は、個人によって大きく異なります。 前庭障害に根ざしている人もいれば、片頭痛やその他の要因に起因している人もいます。 トリガーとなるものは、人によって、または場合によっては日によっても異なります。 その引き金となる動きの結果として個人が経験する身体的症状は、わずかなめまいや頭痛から吐き気またはそれ以上の範囲に及ぶ可能性があります。

私たちが作品のアニメーションを中心に行うデザインの選択は、私たちの作品が動きに敏感な人々にどのように影響するかに直接影響します。 どのような種類の動きが潜在的にトリガーされているか、そしてデザインの選択でそれらをどのように軽減できるかを知ることは、視聴者にとって安全で意図しない害を引き起こさないエクスペリエンスをデザインするのに役立ちます。 アニメーションは依然としてUXの取り組みにプラスの影響を与える可能性がありますが、他のデザインツールを責任を持って使用しようとするのと同じように、アニメーションを責任を持って使用するかどうかは私たち次第です。

Web上での動きの減少を好む

モーションを減らす優先メディア機能は、強力なブラウザサポートを備えています。 現在のバージョンのEdge、Firefox、Chrome、Safari、Opera、iOS Safari、およびAndroidブラウザとChrome forAndroidでサポートされています。 現在のサポートのレベルにより、本番環境で絶対に使用できるものになっています。 また、誰かのブラウザがこの機能をサポートしていない場合、悪いことは何も起こりません。それは無視され、以前と同じように続行されます。

開発側では、CSSまたはJavaScriptで他のメディアクエリを使用してモーションの削減が要求されているかどうかを確認するのと同じ方法で、prefers-reduced-motionをテストできます。

CSSでは、次のようになります。

 @media (prefers-reduced-motion: reduce) { /* reduced behaviour */ }

そしてJavaScriptで：

 let motionQuery = matchMedia('(prefers-reduced-motion)'); const handleReduceMotionChanged = () => { if (motionQuery.matches) //reduced behaviour; } motionQuery.addListener(handleReduceMotionChanged); handleReduceMotionChanged()

どちらの方法でアクセスする場合でも、このメディアクエリは、no-preference（false）またはreduce（true）の2つの値のいずれかを返します。 取得したら、これらの値を使用して、ブラウザに表示する内容を通知できます。

返される可能性のある2つの値のうち、意図的に設定されていると確信できるのは、 reduce (true)値だけです。 好みがない（false）は、問題の人がすべてのタイプの動きに問題がないことを意味する場合があります。または、その好みがまだ設定されていないことを意味する場合があります。 これにより、問題の人がすべてのレベルの動きにオプトインすることを優先しない（false）の値と同等のアプローチは信頼できなくなります。 このため、 reduce (true)の値が返されたときに、トリガーとなる可能性のあるモーションエフェクトを減らすのがより良いアプローチです。

たとえば、ここでは、モーションの削減が要求されたときに、ループするバウンスアニメーションがフェードインアニメーションに置き換えられます。

 /* A constant bouncing motion effect applied to the title */ h2 { animation: bouncing 1.5s linear infinite alternate; } /* Replace it with a safer effect when prefers-reduced-motion returns true */ @media (prefers-reduced-motion) { h2 { animation: fade 0.5s ease-in both; }

ユーザーの視点から見た動きの減少

ほとんどの主要なオペレーティングシステムでは、システム設定で好みを設定できます。 設定の正確な表現と場所はさまざまですが、iOS、OSX、Windows、およびAndroidオペレーティングシステムで設定できます。

実際には、縮小モーションメディア機能を優先します

モーションを減らすメディア機能をどのように使用するかを決定するのは、製品とコンテンツのコンテキストに最適なソリューションを作成するためのスペースがある場所です。 ほとんどのWebプロジェクトでは、最初にサイトでトリガーとなる可能性のあるモーションエフェクトを特定してから、prefers-reduced-motionメディア機能を使用してそのエフェクトの縮小バージョンを提供する必要があります。

各ステップをさらに詳しく見ていきましょう。

潜在的にトリガーとなるモーションの特定

トリガーとなる可能性のあるモーションを見つけるには、サイトまたは製品の一般的なユーザーフローを調べ、使用されているモーションエフェクトを詳しく調べます。大きな動きのあるインタラクションはありますか？ 大きなズーム、回転効果、視差効果はありますか？ これらのタイプのアニメーション効果はすべて、動きに敏感な人にとっては問題になる可能性が非常に高くなります。 対照的に、色あせ、不透明度の変化、スケールの小さな変化などのアニメーション効果は、問題になる可能性はほとんどありません。 疑わしい場合は、問題の効果を「減らす」リストに追加して、注意を怠っても問題はありません。

Webコンテンツアクセシビリティガイドラインは、「コンテンツの意味に不可欠ではない、動きの錯覚を生み出す動き」の縮小版を提供することを推奨しています。 特に画面上の動きに敏感であると考えていない場合は、いくつかの例を見ると便利だと思います。 以前の記事でモーションをトリガーする可能性のある例を取り上げていますが、Webkitブログのこの投稿にもいくつかあります。 サイトがモーションに大きく依存していない限り、ここで焦点を当てるエフェクトのリストはかなり短くなる可能性があります。

縮小モーションバージョンを作成する

次に、これらの潜在的にトリガーとなる効果に対して最も適切な低減されたモーション条件を決定する必要があります。 アニメーションを簡単に調整して、不透明度フェードやクロスフェードなどの非モーション効果を使用してモーションリクエストを減らすことができますか？ モーションを一時停止するか、モーションを減らすためにエフェクトを完全に削除すると、コンテンツの意味が保持されますか？

問題のモーションの役割は、最も適切な縮小バージョンを決定する上で重要な要素になります。 意図せずにコンテンツを削除したり、全体的なエクスペリエンスを低下させたりすることは望ましくありません。 ここに、あなたが見つけた潜在的に誘発する効果のためにうまくいくかもしれないもののいくつかの例があります：

大きなページ遷移

大きなページ遷移効果は、モーションモードを減らすためのクロスフェード効果に置き換えることができます。 同じことが通常、異なる状態またはビュー間で遷移する大きなズームまたは回転遷移にも当てはまります。

アニメーションイラスト

一方、アニメーションイラストは、主に個性やブランディング効果を目的としている場合は、動きを抑えるために静的バージョンに置き換えるのが最適な場合があります。 静的バージョンがまだ意味のあるものであることを確認する必要があります。最も意味のある配置は、必ずしもアニメーションの最初または最後であるとは限りません。 動きを減らすためにオンデマンドでアニメーションイラストを再生する機能を追加すると、準備ができたときにアニメーションを再生できるようになるため、便利な場合もあります。

ここでも、アニメーションGIFや自動再生ビデオの動きを考慮することを忘れないでください。 これらには、トリガーとなる可能性のあるモーションが含まれている可能性があり、含まれている場合は縮小バージョンが必要になります。

視差効果

視差効果と誇張された滑らかなスクロール効果は、動きに敏感な人には普遍的にトリガーされるため、動きを減らすには、これらを大幅に減らすか、完全に削除する必要があります。 （これに関する私の研究で私が話をしたすべての人は、特に彼らにとって問題であるとして視差を呼びました。）スムーズなスクロール効果は、EricBaileyによってここで説明されているデフォルトのブラウザアンカーリンクの動作に置き換えることができます。 動きを減らすために視差効果を削除するのが理想的な解決策ですが、視差を削除しても、必要なコンテンツがすべて表示され、使用できることを確認してください。

ほとんどの場合、トリガーとなる可能性のある効果をより安全な効果に置き換えてモーションを減らすことが、コンテンツの意図と使いやすさを可能な限り維持するための最良の方法です。 幸いなことに、効果を減らしたものに置き換えるのも非常に簡単です。

モーションを減らす例

たとえば、自分のサイトを通過したときに、このヘッダーアニメーションをトリガーする可能性があるとしてフラグを立てたとします。 モーションは、モーションの錯覚を作成するのに十分な大きさであるため、トリガーとなる可能性が高く、複数のモーション方向も問題になる可能性があります。 これは間違いなく、自分のサイトをレビューするときに縮小バージョンが必要なエフェクトのリストに追加したものです。

すべての植物の写真には、アニメーションの終了状態に同じスタイルが適用されており、デフォルトでドキュメントフロー内のどこにあるかを本質的に配置しています。

 .active .plant1, .active .plant2, .active .plant3 { transform: translateY(0); opacity:1; }

そして、それぞれには、開始する本来の位置の少し上または下に移動するためのポジショニングを伴う開始状態があります。 アニメーションを実現するために定義されたトランジションとともに：

 .plant1 { transform: translateY(-100%); transition: $dur $ease-both; } .plant2 { transform: translateY(120%); transition: $dur $dur/6 $ease-both; } .plant3 { transform: translateY(-100%); transition: $dur $dur/3 $ease-both; }

テキストアニメーションは同じように機能しますが、垂直方向の翻訳ではなく、各単語の水平方向の翻訳が使用されます。

次のようにアニメーションの開始状態を変更することで、モーションの縮小が要求されたときに変換位置を遷移する代わりに、アニメーションを遷移不透明度に変更できます。

 @media (prefers-reduced-motion: reduce) { .plant1, .plant2, .plant3 { transform: translateX(0); opacity:0; } }

これで、prefers-reduced-motionメディア機能がtrueに戻ると、各植物の写真アニメーションの開始状態は、不透明度0の終了状態にすでに配置されているように設定されます。これは、同じ遷移プロパティを使用できることを意味します。同じイージング、デュレーション、オフセット—ただし、変換による位置ではなく、不透明度がアニメーション化されます。

これを行うために、アニメーションの継続時間、イージング、または遅延を変更する必要がなかったことに注意してください。 アニメーションプロパティを入れ替えても、同じアニメーションの詳細を使用することで、モーションを減らすのに十分でした。 この特定の例はCSSで作成されましたが、アニメーションプロパティの交換は、JavaScriptを使用する場合や、アニメーションライブラリを使用する場合と同じように簡単です。

野生での減少した動きの例

このアプローチが実際に動作しているのはviljamisdesign.comで見ることができます。これは、Apple.com以外の最初のサイトの1つであり、モーションを減らして作業していることに気づきました。 モーションを減らしてサイトにアクセスすると、回転するスターフィールドアニメーションが停止し、見出しの大きな動きが削除されます。 しかし、さまざまなホバー効果のようなアニメーションはすべてまだそこにあります。 これにより、UXのアフォーダンスとデザインの詳細が損なわれることなく、動きの低減を要求した人にとってより安全なエクスペリエンスが実現します。 （参照用にモーションの削減を有効にした場合と無効にした場合の両方のViljamisdesign.comのビデオを次に示します：https：//vimeo.com/399979166/1bd41d1919）

Airpods Proページもモーション設定の減少に対応しますが、使用されるコンテンツとエフェクトのために非常に異なる方法で応答します。 大きなズーム動作と視差スタイルの効果がたくさんあるため、ページ上のほとんどすべてのモーションがトリガーになる可能性があります。 モーションの削減が要求されると、すべての視差と大きなモーションエフェクトが削除されますが、アニメーションを一時停止または削除するだけではありません。 モーションを減らして表示されるバージョンは、フルモーションエクスペリエンスと同じコンテンツと意味を維持するように注意して設計されています。 （これは、参考のために選択されたモーションの減少がある場合とない場合の両方のAirpods Proサイトのビデオです。）

モーションの多いエクスペリエンスのためにカスタムトグルを追加する

ほとんどの「タスクベース」のサイトには、トリガーとなる可能性があり、縮小バージョンが必要なアニメーションがほんの一握りしかない可能性が高いことを前述しました。 しかし、Web上にあるWebサイトの種類はこれらだけではありません。 ストーリーテリングやエクスペリエンスの作成を目的としたサイトなど、大量のモーションを伴うプロジェクトは、わずかに異なるアプローチの恩恵を受ける可能性があります。

このようなプロジェクトの場合、使用されるモーションのほとんどすべてが潜在的にトリガーされる可能性があるため、トリガーとなる可能性のあるモーションのリストを作成し、それぞれの代替案を減らすことは困難です。 さらに、モーションはコンテンツとその意味の大部分を占めています。 これらのタイプのサイトの縮小モーションモードを設計するには、よりグローバルなアプローチと、モーションが縮小されてもコンテンツの意味が維持されるようにするためのより多くの努力が必要になります。

これらの高度にアニメーション化されたエクスペリエンスサイトでは、目に見えるカスタムモーショントグルを提供することは含めると便利です。 これにより、モーションの減少設定についてまだ知らない人や、その時点でモーション感度を経験している人が、エクスペリエンスをすばやく調整できるようになります。 モーショントグルは、モーションに敏感な人々が病気にならない方法でコンテンツに参加する方法を提供します。 これは、サイトを完全に回避するよりも、関係するすべての人にとって間違いなく優れています。

コンテキストは重要な要素です

ここでは、コンテキストも大きな役割を果たしていることを忘れないでください。 予期しない大量の動きに驚かされることは誰も望んでいません。 高度にインタラクティブなストーリーテリング体験として請求されたサイトにアクセスしている場合は、銀行のWebサイトにアクセスしているときとはまったく異なる期待を抱くでしょう。 これらのサイトはどちらも確かに大量のアニメーションを備えている可能性がありますが、銀行のサイトでは予想外の驚きです。

カスタムモーショントグルの構築

カスタムトグルのアイデアは、2015年の記事で述べたものですが、今日でははるかに実行可能なオプションです。 今日のWebでは、簡単に作成でき、ほんの数年前よりもスマートなトグルを作成することもできます。

Marcy Suttonは、このCodePenで最新のカスタムモーショントグルがどのように機能するかを示す優れた例を示しています。 （この例は、アクセス可能なWebアプリの作成に関する彼女のコースの一部であり、これもチェックする価値があります。）彼女の例では、アニメーションが1つしかないため、トグルを使用してすべてのモーションを削除しますが、このアプローチを使用すると、モーションを減らすことができます。同じロジックに従って、アプリケーション全体またはサイト全体に影響を与えます。

このアプローチの重要な特徴は、マーシーがそれを最新のWebテクノロジーといかにうまく結び付けているか、つまり、動きの低減とローカルストレージを好むことです。 このアプローチを使用する場合、誰かがモーションの削減を要求してサイトにアクセスすると、手動でトグルをアクティブにすることなく、モーションの削減バージョンを自動的に取得します。 また、誰かがトグルを呼び出して動きを減らすと、その設定はローカルストレージを介して保存されるため、訪問するたびにこの選択を繰り返す必要はありません。

どうぶつの森の公式サイトは、カスタムの縮小モーショントグルとprefers-reduced-motionメディア機能を組み合わせた素晴らしい実例です。 これは、動きの減少を処理する私のお気に入りの例の1つです。 サイトとコンテンツの全体的な感触を忠実に保ちながら、潜在的にトリガーとなる動きを減らす方法について彼らが行ったデザインの選択は素晴らしいものです。 彼らがどのようにそれをやってのけたかについて、私はこのブログ投稿でもっと書いた。 同様のアプローチからオーディエンスが恩恵を受ける可能性のあるサイトはたくさんあります。

モーショントグルを使用する他の方法

設定または設定パネルがすでにある場合は、モーションの削減を要求するためのトグルを追加することは、Twitterがそのサイトで行うようにこれらの設定に追加する価値のあることかもしれません。 この場合、サイトにアクセスしたときにすぐに大量のモーションが表示されることはなく、すでに設定パネルがあるため、設定設定の一部としてトグルを実装するのが適切です。 Twitterのトグルは、優先モーションクエリを介したOSレベルの設定も尊重し、ユーザーがOSレベルで設定した内容に基づいてオンまたはオフにプリセットされます。 OS設定を尊重するようにモーショントグルを設計することは、トグルが表示される場所に関係なく、OS設定を適切に実装するための賢明なアプローチです。

コンテキストトグルは、サイト全体に表示される特定のアニメーションイラストやその他のコンテンツ領域の動きを減らすために使用できるもう1つのアプローチです。 グリッドのダークサイドの記事では、各アニメーションフィギュアにコンテキストトグルボタンを追加して、読者が見たいときにアニメーションを再生できるようにすることでこれをうまく行っていますが、読んでいる間はアニメーションが際限なくループすることはありません。

それらの同じ線に沿って、Dave Rupertは、動きの減少が要求されたときに、アニメーションGIFの代わりに静的要素を表示するために、動きの減少を画像要素と組み合わせる手法を共有しました。 Chris Coyierはさらに一歩進んで、同じアプローチに基づいて、これらのアニメーションGIFの再生トグルを提示することを提案しました。 SteveFaulknerのgifデアニメーターの例も有用なアプローチである可能性があります。

これらすべて、または同様のものは、Web上でトリガーとなる可能性のあるモーションを軽減するための優れたオプションになる可能性があります。 これらの例を2つの理由で取り上げます。 1つ目は、モーションバリエーションを減らしてアプローチする方法がいくつかあり、コンテンツに最適なアプローチを見つけるための柔軟性が高いことを示すことです。 そして第二に、時間が経ち、より多くの人々がモーションオプションを減らしたサイトを構築するにつれて、より革新的なソリューションがコミュニティで共有されるようになります。

プロジェクトのコンテキストに適した方法でトグルと設定を追加するための創造的な方法はたくさんあります。 設定パネルやダークモードなどの設定オプションを含むWebサイトが増えているのは興味深いことです。 動きを減らすためのオプションを含めることは、自然な次のステップになる可能性があります。

使用すればするほど、すべての人にとってより良いものになります

私たち、つまりWeb用のものを設計および構築する人々にとって、動きの少ないメディア機能を利用して、私たちの仕事をより包括的にすることが重要だと思います。 モーションの好みを尊重するための措置を講じることで、より多くの人がWebをより安全に使用できるようになりますが、それは良いことです。 私たちは、責任を持って包括的でありながら、ウェブ上の動きで表現力と創造性を発揮することができます。

しかし、意識レベルはまだ私たちが知っておく必要があるものです。 モーションを減らす必要があるかもしれないすべての人が、OS設定のオプションを知っているわけではありません。 現在、ブラウザのコンテンツを利用しているWebサイトが非常に少ないため、ブラウザのコンテンツにも影響を与える可能性があることを知っている人はさらに少ないでしょう。 動きの少ないメディア機能を活用し、高品質の動きの少ないメディア機能を提供すればするほど、それを必要とする人々にとって、その機能はより意味のあるものになります。