モーション時間ガイド

このツールでできること

• モーション時間ガイドでは、InstantからVery slowまで、UIモーション時間の5段階と用途を固定表で確認できます。
• 関連する観点として モーション時間ガイド、motion duration、CSS を確認し、結果をコピーして別の作業に使えます。

使い方

1. クリック直後の反応や押下感には、Instantの行を確認します。
2. hoverや小さな状態変化には、Fast 100-200msを候補にします。
3. 画面内の通常遷移は、Normal 200-300msの行を基準にします。
4. 強調演出やゆっくり見せる場面では、SlowとVery slowを慎重に使い分けます。

入力例・出力例

よくある利用シーン

• hover、press、toast、modalなどのアニメーション時間を用途別に分けたいとき。
• デザイントークンに duration-fast / normal / slow を登録する前に範囲を確認したいとき。
• 500msを超える演出が操作感を損なわないかレビューしたいとき。
• easingを選ぶ前に、まずモーションの時間帯だけを揃えたいとき。

結果確認のポイント

• 生成したCSSや設定値を実際のコンポーネントに入れ、レスポンシブ表示も確認してください。
• モーション時間ガイド、motion duration、CSSの観点で、入力内容と出力内容がずれていないか見直してください。
• コピーした結果を利用先に貼り付けたあと、改行や記号が変わっていないかも確認してください。

注意点

• ブラウザ差や既存CSSとの競合があるため、公開前に対象環境で確認してください。
• 結果を公開・送信する前に、用途に合う形式かを必ず確認してください。

データの扱い / プライバシー

• モーション時間ガイドの主要な処理はブラウザ内で実行されます。
• 入力内容を保存するアカウント機能はなく、ページを閉じると作業内容は手元のブラウザから離れます。
• 本番の秘密情報や個人情報を扱う場合は、入力前に必要性を確認してください。

よくある質問

関連ツール