今日の問い
その動きは、何が変わったかを説明していますか。
30秒でつかむ
Motionは装飾ではなく、変化の関係を伝える手段です。 Feedbackは、操作を受け付けたか、 何が起きたか、次に何ができるかを返します。
ただし、動きは負担にもなります。 目的、開始条件、代替表現、停止方法を一組で設計します。
30秒図解 · LESSON 24
流れ図
動きは、変化の理由を伝える
操作から結果までを時間軸で設計し、動きを減らす場合は同じ意味を静的に伝えます。
- 01操作
- 02即時反応
- 03状態変化
- 04完了
CLUE · 見抜く手掛かり
動きを消しても、静的な代替で意味が残るか
TRAP · ありがちな罠
注目を集めるためだけに動かす
原則
まず、動きの目的を一文で書きます。 状態変化をつなぐ、操作結果を示す、 注意を必要な場所へ導く、のどれかです。 説明できない動きは、いったん外します。
フィードバックは重要度に合わせます。 ボタンを押した反応はその場で返し、 保存結果は対象の近くに表示します。 データ消失につながる警告だけを強く割り込みます。 毎回大きな通知を出すと、重要差が消えます。
動きの開始から終了まで、状態を切り分けます。 操作受付、処理中、完了、次の操作です。 アニメーション終了だけに成功を依存させず、 文字や状態属性でも結果を伝えます。
W3Cの達成基準2.3.3は、
操作で始まる不要なMotion animationを、
無効化できるよう求めるAAA基準です。
Media Queries Level 5の
prefers-reduced-motionは、
利用者が不要な動きを減らしたい設定を検出します。
Reduced Motionは、全部を消す指定ではありません。 位置や拡大の動きを即時表示や短いフェードへ置き換え、 同じ情報と操作結果を保ちます。 通常版と軽減版を同じ受入条件で試します。
WCAG 2.2達成基準2.3.3を、操作で始まる不要な動きの無効化へどう適用するかを説明する非規範の解説文書。
良い例と惜しい例
予約変更後のフィードバック
時間を進め、各時点で利用者へ返す状態を確認してください。
操作受付
ボタンを処理中へ変え、重複送信を防ぎます。
進行状況: 1 / 3、操作受付、0ms。ボタンを処理中へ変え、重複送信を防ぎます。
AIへの指示例
目的: 予約変更の操作受付、処理中、完了を伝えるMotionとFeedbackを実装する
制約: 結果をアニメーションだけで伝えない。prefers-reduced-motion: reduceでは位置、拡大、視差の不要な動きを除く
参照: visual-system.md、tokens.json、ui-states.md
受入条件: 通常版と軽減版の両方で操作受付、処理中、完了、次の操作が分かり、キーボード操作でも同じ結果になる
確認問題
セルフチェック
1. 予約変更の成功を、カードが大きく跳ねる動きだけで示しています。最もよい修正はどれですか。
最終制作へ反映する
Phase 4のvisual-system.mdとtokens.json
視覚階層、余白、文字、色、部品に、Motionの目的、時間、Feedback、Reduced Motion代替を加え、Phase 4の視覚システムを完成させる。
Acceptance criteria
- 主要画面が共通の階層、余白、文字、色、部品、トークン規則で実装されている
- 主要な状態変化に目的とフィードバックがあり、Reduced Motionでも情報と操作結果が保たれる
- 通常幅、狭い幅、200%文字拡大、キーボード、Reduced Motionで主要フローを確認した記録がある
今日のまとめ
- Motionは、状態変化の関係を説明するために使う
- Feedbackは、現在の事実と次の操作を適切な強さで返す
- Reduced Motionでも、同じ情報と操作結果を保つ