アニメーションとモーション

車、ボート、飛行機に乗って突然世界を感じたことがありますか？ 回る？片頭痛で携帯電話やタブレットで アニメーションが 「楽しさ」のために生まれた突然病気になった？あるいは、これまでずっと どんな動きにも敏感？これらは さまざまなタイプの 前庭障害を訴えます

40 歳までに、成人の 35% 以上が 前庭機能不全。 これにより、一時的なめまい、片頭痛によるめまい、 永久的な前庭障害になる。

多くの人は、めまいを引き起こすだけでなく、動いたり、まばたきしたり、スクロールしたりします。 気が散るコンテンツ。次の権限があるユーザー: ADHD その他の注意欠陥障害は、 ウェブサイトまたはアプリにアクセスした理由を忘れて あります。

このモジュールでは、Google Chat で個人や企業の あらゆる動作によって引き起こされる疾患です

コンテンツの点滅と移動

アニメーションやモーションを作成する際には、要素の動きが大きすぎるかどうかを検討する必要があります。たとえば、光に敏感なてんかんがある人では、色が暗から光にちらつくことや、画面上でのすばやい動きにより、発作を引き起こすことがあります。てんかん患者の 3% が光過敏症を患っていると推定されており、女性や若年層に多く見られます。

WCAG のフラッシュに関するガイドラインでは、以下を非推奨としています。

• 1 秒間に 3 回以上点滅している
• 下で点滅 一般的なフラッシュと赤色のフラッシュのしきい値を確認します。

この点滅により、せいぜいウェブページが 病気になります。

極端な動きの場合は、 感光性てんかん分析ツール（PEAT）。 PEAT は、画面上のコンテンツ、動画、アニメーションであるかどうかを識別するための無料ツールです。 発作を引き起こす可能性が高まります。すべてのコンテンツを PEAT による評価が必要なわけではありません。 点滅したり、明暗が急激に遷移したりするコンテンツ 念のため、背景色を評価する必要があります。

アニメーションとモーションについては、画面上のコンテンツやアクションを理解するうえで要素の動きが不可欠かどうかも検討する必要があります。それが必須でない場合は、作成または設計している要素からすべての動き（マイクロムーブメントも含む）を削除することを検討してください。

要素の動きが必須ではないが、 または、別のムーブメントのムーブメントを削除することはできません。 できます。その場合は、WCAG の モーションに関するガイドライン。 このガイドラインでは、ユーザーがコンテンツを一時停止、停止、または 次の動作を隠す動作: 必須ではない動作、点滅、スクロールする要素の 自動的に開始され、5 秒以上再生され、他のページの一部である あります。

動きを一時停止、停止、非表示にする

一時停止、停止、非表示を追加する メカニズムを実装して、問題のある可能性がある機能をユーザーが 追加できますこれは、画面レベルまたは要素レベルで行うことができます。

たとえば、デジタル商品に多くのアニメーションが含まれているとします。 アクセス可能な JavaScript の切り替えの追加を検討してください。 ユーザーが自分のエクスペリエンスを管理できるようにします。ボタンを 「モーションオフ」その画面とそれ以外のすべてのアニメーションが固定されます。

メディアクエリを使用する

アニメーションを厳選するだけでなく、ユーザーにオプションを 一時停止、停止、動きの非表示、アニメーションの無限ループを回避するため、 動きに焦点を当てたメディアクエリの追加も検討してくださいこれによりユーザーは 画面に表示される内容の選択肢が増えます

@prefers-reduced-motion

カラー モジュールの色に焦点を当てたメディアクエリと同様に、@prefers-reduced-motion メディアクエリでは、アニメーションに関するユーザーの OS の設定を確認します。

ユーザーは、動きを軽減するために表示設定を行うことができます。これらの設定は OS によって異なり、肯定的または否定的に捉えられます。 @prefers-reduced-motion を使用して、サイトを設計できます。 これらが優先されます

macOS と Android では、動きを軽減するためにユーザーがこの設定をオンにします。macOS の場合、 [設定] > [モーションを軽減する] を設定できます。ユーザー補助 >ディスプレイ。 Android の設定は [アニメーションを無効化] です。Windows では、設定は枠で囲まれています。 [ShowAnimation] はデフォルトでオンになっています。ユーザーは この設定をオフにすると、動きが抑えられます。

次のサンプル セットに示すように、無限ループで再生するのではなく、すべてのアニメーションを 5 秒以内に停止するようにコーディングすることもできます。

運動促進のためのプログレッシブ エンハンスメント

デザイナーやデベロッパーには、デフォルトの動きの状態や表示する動きの量など、多くの選択肢があります。最後の動きの例をもう一度見てみましょう。

画面上のコンテンツを理解するためにアニメーションが不要であると判断したとします。その場合は、デフォルトの状態をフル モーション バージョンではなく削減モーション アニメーションに設定することもできます。ユーザーが特にアニメーションを要求しない限り、アニメーションはオフになります。

健康状態の人にとってどの程度の運動が問題を引き起こすかは予測できません 発作、前庭、その他の視覚障害少しの動きでも めまいや視力低下などを引き起こすことがあります。したがって、 以下の例では、デフォルトでアニメーションなしに設定されています。

階層化されたメディアクエリ

複数のメディアクエリを使用して、ユーザーの選択肢をさらに増やすことができます。では、 @prefers-color-scheme、@prefers-contrast、@prefers-reduced-motion を使用 考えています

ユーザーに選択を許可する

Google のデジタル サービスにアニメーションを組み込んで楽しませるのも楽しいですが、 これらのデザインの影響を受ける方がいらっしゃることを覚えておいてください。 動きに対する感度は、わずかな不快感から 病気や発作などが発症する可能性もあります。

ユーザーが最も適した方法を判断できるように、さまざまなツールを使用できます どの程度の動きによるか当てるのではなく、たとえば、 切り替えボタンで、サイトまたはウェブアプリ内のアニメーションをオンまたはオフに切り替えます。検討事項 切り替えボタンはデフォルトでオフになっています。

理解度をチェックする

モーションとアニメーションのユーザー補助機能に関する知識をテストします。