Motion Atlas は、アニメーション名を当てるためではなく、目的に合うUIモーションを選ぶための辞典です。
検索語、お気に入り、履歴、比較対象はブラウザ内で処理します。プロジェクト内容や検索語はサーバーに送りません。
基本の流れ
- 普通の言葉で検索する。「ふわっと」「押した感じ」「エラーで震える」「読み込み中」などで探します。
- 目的で絞り込む。カテゴリ、動きの種類、発火条件、強さ、モバイル適性、負荷で絞ります。
- Replayで確認する。カードは静止状態を基本にし、確認したいカードや詳細だけを再生します。
- 詳細を読んでからコピーする。用途、非推奨用途、悪い依頼例、良い依頼例、代替表示、コードヒントを確認します。
- 2件比較する。似た動きの用途、発火条件、モバイル適性、負荷、依頼文の違いを比較します。
カードの見方
各カードには、ライブデモ領域、英日ラベル、カテゴリ、動きの種類、発火条件、要約、強さ、モバイル適性、負荷、詳細、比較、お気に入り、依頼文コピー、再生ボタンがあります。
動きを減らす設定
OSの reduced motion 設定を検知し、ツール内トグルでも切り替えできます。有効時は shake、pulse、spinner、skeleton shimmer など刺激や負荷のある動きを抑えます。
保証しないこと
Motion Atlas は制作判断の補助です。アクセシビリティ診断、ブラウザ挙動保証、完成コード集ではありません。実装後は実画面で確認してください。