seenry-motion

Seenry Motion

Motion は変化を説明するためにあります。何がどこから来たのか、入力によって何が起きたのか、インターフェースが現在どの状態にあるのかを伝えます。以下の手順を順番に踏んで、すべてのアニメーションを実装してください。手順 1 と 2 で、そもそもコードを書くかどうかが決まります。

判断を下し、1 行で明示してください。モーションの選択肢を並べてはいけません。別の仕組みを追加するのではなく、プロジェクトに既存のモーショントークンやコンポーネントを拡張してください。

実装の手順

1. そもそもアニメーションさせるべきですか？ 頻度を基準に判断してください。

ユーザーが目にする頻度	判断
1 日に 100 回以上（コマンドメニュー、キーボードショートカット、矢印キーでのリスト移動）	アニメーションなし。即時に反映します。
1 日に数十回（ホバー、タブ、トグル）	既存の状態変化のタイミングで、短い不透明度／色のフィードバックを返すか、何もしません。確定した状態を遅らせてはいけません。
ときどき（メニュー、ダイアログ、シート、トースト）	以下の表の標準的なモーションを使います。
まれに（オンボーディング、初めての成功、空の状態から内容が埋まる場面）	個性を出せる余地があります。

キーボード操作で発生するアクションは、アニメーションを待たせてはいけません。基準により不要と判断された場合は、その旨を伝え、状態を即時に変更してください。

2. 目的を 1 語で名付けてください。 フィードバック、方向性（どこから来たか、どこへ移動したか）、状態、連続性（唐突な切り替わりを避ける）、説明（マーケティングとオンボーディングのみ）、または楽しさ（まれな場面のみ）です。目的がなければ、アニメーションは不要です。ユーザーが読んでいるデータを、見た目のために動かしてはいけません。

3. 要件を満たす最小限のツールを選んでください。

要件	ツール
ホバー、押下、色、クラスまたは属性の切り替え	CSS トランジション
マウント時の表示、display: none の前の非表示、ネイティブの <dialog> と popover	CSS トランジション + @starting-style + allow-discrete
auto への高さ変更	interpolate-size: allow-keywords、またはグリッドの 0fr → 1fr トラック
ルートの変更、リスト → 詳細、インジケーターのモーフィング	View Transitions API
スクロール連動エフェクト	animation-timeline: view() / scroll()
プログラム制御、キャンセル可能、ライブラリ不要	Web Animations（element.animate）
速度を伴うスプリング、レイアウトアニメーション、ジェスチャー、React でのプレゼンス	Motion（motion.dev）
コンポーネント全体（トースト、ドロワー、コマンドメニュー、セレクト）	メンテナンスされているライブラリ。ライブラリを参照してください。

4. プロパティを選んでください。 translate、scale、rotate、opacity、clip-path、filter のみを使ってください。scale(0) から始めてはいけません。不透明度 0 で、0.95～0.97 から始めてください。ポップオーバーはトリガーを基準に拡大縮小します（トリガー側に transform-origin を設定します）。ダイアログは中心を基準に拡大縮小します。パーセント指定の移動（translate: 0 100%）では、要素自身のサイズ分だけ移動します。

5. イージングと時間、またはスプリングを選んでください。

モーション	時間	イージング
押下時のフィードバック	100–160ms	--ease-out
ツールチップ、小さなポップオーバー	120–200ms	--ease-out
メニュー、ドロップダウン、セレクト	150–250ms	--ease-out
ダイアログ	200–250ms	--ease-out
シート、ドロワー	350–500ms	--ease-drawer
画面内を移動する要素、モーフィング	250–400ms	--ease-in-out
ホバー時の色、背景、境界線	既存の状態トークン。Transitions キットでは 180ms	既存の状態変化のカーブ。キットでは cubic-bezier(.25,0,.06,1) を使用
進捗、マーキー、長押しで確定するフィル	処理にかかる時間	linear

--ease-out: cubic-bezier(0.23, 1, 0.32, 1)、--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1)、--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1)。インターフェースのモーションに ease-in を使ってはいけません。ユーザーが注目している瞬間を遅らせてしまうためです。プロダクト UI は 300ms 未満を基本としてください。シートの移動に時間をかける場合は、理由が必要です。直接操作や空間的な関係を保つ必要がない限り、退場は入場より約 20～30％速くします。ユーザーがドラッグ、フリックするものや、途中で逆方向に動かせるものには、スプリングを使ってください。Motion の {type: "spring", duration: 0.5, bounce: 0.2}（プロダクト UI では bounce を 0、遊び心のある UI では ≤0.3 にします）を使うか、レシピにある CSS の linear() スプリングを使ってください。 6. 中断と終了を計画する。 元に戻せるプロパティの変更には、現在の値を起点に再ターゲットできる CSS トランジションを優先してください。ジオメトリや動きの演出に WAAPI が必要な場合は、現在の描画状態を取得し、所有するアニメーションをキャンセルまたは再ターゲットして、古い完了処理が実行されないようにしてください。2 回目の入力があった場合は、古いリクエストの後ろに追加するのではなく、反転するか置き換えてください。新しい論理状態はすぐに公開し、終了中も表示を維持するために、別の表示状態を使うこともできます。

中断された変更を洗練する。 コンポーネントに適する場合は、以下のチェック項目を使ってください。これらは設計上のヒューリスティックであり、判定スコアを保証するものではありません。表示開始中や終了中に、50～150ms 間隔で繰り返し入力して試し、タイミングについて述べる際は実測値を記録してください。

• 連続性とセマンティクスを保つ。 関連するタブ、フィルター、ステータス状態は、1 つのグリッドセル（display:grid、grid-area:1/1）を共有し、不透明度や小さな平行移動で切り替えられます。非アクティブなコンテンツはフォーカス順序とアクセシビリティツリーから除外してください。マウントされているからといって、操作可能とは限りません。短い退出フェーズ（およそ 65～90ms）と、それに続く 120～160ms の表示開始は、出発点にはなりますが、必須のレシピではありません。現在のトランジションで可能な場合にのみ、マウント解除または非表示にしてください。古い完了処理によって新しい状態が非表示になってはなりません。明示的にキャンセルできる WAAPI や、ガード付きのネイティブダイアログの退出も、有効な代替手段です。
• 結果を分かりやすく保つ。 意図しない空白時間や、テキストが重なって読みにくくなる状態は避けてください。コンテンツに応じて、重ね合わせ、短いクロスフェード、即時置換を選択してください。テキストをアートワーク上で移動させるより、ラベル全体を端点でフェードさせるほうが安全な場合があります。動きが利用できない場合や、動きが軽減されている場合も、適切な静的な手がかりを保ってください。不透明度のしきい値を読みやすさの証明とせず、実際に読みやすいかを確認してください。
• 移動するものは 1 つだけにする。 タイトル、アバター、カバーを別の場所に移動させるときは、見える複製が描画されないようにしてください。移動先は、移動する要素が到着するまで非表示にし、その後で一時的な複製を取り除きます。アートワークと移動するシェルに重ねてテキストを確認してください。端点でクリップされないことだけでは、移動経路全体で読みやすいとは限りません。
• ラベルと結果を一致させる。 「支払い済みにする」が「支払い済み」に変わるようなラベルは、その結果と同じ確定済みアプリケーション状態に従います。必要に応じてラベルの占有領域を確保し、古いテキストやフォーカス可能なラベルの重複を防いでください。装飾を終えるためだけに、実際の成功状態の反映を遅らせてはいけません。
• シーケンスをキャンセル可能にする。 タイピングのデモ、段階的な表示、再生では、保留中のステップを同じ所有者で管理します。一時停止、反転、新しい入力があった場合は、古い処理をキャンセルし、表示中の動きを現在の状態から再ターゲットしてください。古いタイムアウトによって、一時停止中のシーケンスが再開されたり、新しいコンテンツが上書きされたりしてはなりません。
• 完了したアニメーションを解放する。 CSS または確定済みのスタイルで最終状態を設定し、必要に応じて有限の所有 WAAPI アニメーションを解放してください。fill:forwards によって後続の状態変更が上書きされ続けないようにしてください。操作が落ち着いた後、意図した読み込みインジケーターが処理の終了まで続く場合を除き、予期しないアニメーションが残っていないか確認してください。
• 各動きで関係性を伝える。 メニューはトリガーから、パネルは端から展開し、関連するコンテンツはナビゲーションに合わせて一貫して移動します。上記の時間範囲は出発点として使ってください。体感上の応答は即時に保ち、移動に時間がかかる場合はその理由を説明してください。固定の時間を品質の証明とせず、中断と動きの軽減をテストしてください。 9 に到達する。 モーション審査では、7 は正しいものの一般的で、8 は明らかにプレミアムな品質、9 は Apple や Linear のレベルで際立っています。ラウンドが 7～8 で停滞する理由は、いつも同じです。実行回数を費やす前に、すべて対処してください。
• 一度に 1 つのコンポーネントを扱います。 --labels "<Row>" を使って各コンポーネントを単独で審査し、9 を獲得するまで調整して、それぞれの最良バージョンを保管します。カタログ全体の評価は最も弱い行に左右されるため、多数の行を一度に修正しても評価は上がりません。また、審査員が提案した変更でも、行の評価が下がれば元に戻します。
• 見出しとなる修正だけでなく、すべての修正を適用します。 繰り返し指摘される細かな項目（ホバー、押下、閉じるコントロールのフィードバック）が、ラウンドを重ねても states を 7 にとどめます。--prev <last motion.json> は、評価が上がらなかった基準と、再度修正を求められたインタラクションを一覧表示します。check.mjs はこれを自動的に渡します。
• 修正後に問題が再発するなら、構造上の問題です。 タイミングを調整しても、交差する経路は直せません。共有要素は状態間で相対的な配置を保ちます。詳細ビューでもタイトルがカバーの下にあれば、どちらも相手を通り抜けません。
• 空のフレームを作りません。 撮影されるすべての時点（30～320ms）で、変化する領域に実際のコンテンツが表示されます。シェルは拡大するにつれて中身を保ち、ストリーミング回答は最初の言葉から表示されます。空の回答ボックスや、待機したあとに消えるスケルトンを表示しないでください。
• 各コンポーネントに、作り込んだアイデアを 1 つ取り入れます。 その場にとどまる要素は遷移後もその場に保ち、新しい要素は原因となる動きから生まれます。フェード、4px の移動、ラベルの切り替えだけでは、評価は 7 です。
• フローに合った閉じ方にします。 直接展開するカードやトグル式のサーフェスでは、コントロールが戻る操作に変わっても、操作の起点を維持します。確認ダイアログは、意味のある操作、安全なキャンセル経路、適切な Escape の動作、フォーカスの復帰で評価します。空間的なルールを満たすためだけに、重複する閉じるボタンや X ボタンを要求したり、キャンセルをランチャーに移動したりしないでください。適切な場合は、ナビゲーションフローに Back を使います。特定のアイコンがあるかではなく、実際の終了方法とその状態を評価します。メニューやポップオーバーに閉じるボタンは不要です。選択、外側のクリック、Escape で閉じます。ボタンから変形するメニューは、ボタンに折りたたまれて戻ります。サーフェスが領域全体（展開されたカードやアルバムなど）を置き換える場合は、ヘッダーの右上に Close を配置します。古い起点の位置にコントロールを固定して、残った空間に浮いたり、サーフェスからはみ出したりしないようにしてください。
• 1 回の実行結果だけでは評価を決めません。 審査を 1 回実行した結果（それ自体が 3 回の中央値）でも、コードを変更していないのに 1 ポイント変動します。別々の 2 回の実行でどちらも 9 に達した場合にのみ 9 とし、バージョンは同じ回数の実行結果で比較してください。

7. 動きを減らす設定と入力判定も合わせて提供します。 prefers-reduced-motion: reduce では、動き、視差、ぼかし、ループを取り除き、理解を助ける短い不透明度の変化は残します。通常のコントロールのホバー時は静止させ、位置、拡大縮小、レイアウトではなく、色合いやリングを変えます。ホバーのフィードバックは @media (hover: hover) and (pointer: fine) で制御します。明示的に求められたポインター追従型のマテリアルデモは独立したインタラクションであり、デフォルトのホバー処理ではありません。動きが実行されない場合に備えて、アニメーションする状態変化にはすべて静的な手がかり（ラベル、アイコン、色）も用意します。

レシピ

押下時のフィードバック、メニューとポップオーバー、ツールチップ、ダイアログ、シート、トースト、アコーディオン、段階的な表示、タブインジケーター、ページ遷移と共有要素の遷移、スクロールに応じた表示、アイコンの切り替え、数値の変化、長押しで確定、ドラッグして閉じる（速度投影とラバーバンド効果を含む）、クロスフェードマスキング、テーマの切り替え、初回レンダリングの抑制については、レシピを参照してください。ネイティブ CSS のレシピは、パッケージのテストによって Chromium で動作確認されています。

実行可能なアセット

変更内容	適切な参照先
アクションメニューまたは短いステータスラベル	元のアクションメニュー、ステータス切り替え、プロダクトの遷移。メニューを開閉時にアニメーションさせる場合は、閉じるフェーズが終わるまでメニューの表示面を維持してください。閉じるときに条件付きでアンマウントすると、そのフェーズが省略されます。ステータスの遷移では、確保したスロット内でテキストを移動させてください。単なるテキストの置き換えやドットの色の変更だけでは不十分です。実際のアクションはアプリケーション側で処理します。
インフローの開示表示または形状の変化	元の展開カード、ジオメトリーヘルパー、表示面のパターン。フォーカスを維持し、現在の形状を基準に遷移先を調整してください。
フォーカスされたモーダルタスク	元のモーダル表示面と表示面のパターン。トップレイヤーとフォーカスの動作にはネイティブのダイアログを使用してください。閉じる前に退出アニメーションが完了するようにし、逆方向への切り替えで保留中の閉じる処理をキャンセルしてください。
変化する数値またはアイコン	数値の遷移とアダプター。小さな整数のカウントには、桁ごとの意味を再構築するよりも、元のカウントポップヘルパーを使用してください。アクセシブルな実際の値は1つにし、すべての桁を隠して通常の<strong>にaria-labelを設定する方法は避けてください。桁の遷移には、各桁の動きが必要です。単位は固定してください。
ライブ音声の入力または出力	元の音声プレゼンスは、アプリケーション側で管理する状態と正規化された音声レベルを受け取ります。コントロールと通知はDOM内に残してください。生成されたデモ用信号は、マイクの動作を示すものではありません。
ロード中またはプロセスの状態表示	元のシグナルフィールド、境界トレース、ローディングパターン。アニメーション時間は進捗ではありません。
デコード中の画像または表現力のある素材	元の画像の表示、反射性のあるソリッドとリムの表示面、ポインターの傾き、表示面のエフェクト、表現力のあるエフェクト。置き換え画像の読み込み中も、有用なコンテンツを表示してください。反射と傾きは、素材に目的がある場合にのみ使用してください。
新しいインタラクティブコンポーネントの設計（概要、状態グラフ、モーションスコア、入力コントラクト、チェックリスト）	インタラクション設計
トーストまたはバナーのスタック	フィードバックパターンと元の通知リデューサー。退出アニメーションの前に、アクティブな状態からオーバーフローを取り除いてください。3件のスタックに4件目のイベントが発生するケースをテストしてください。
まれに発生するマイルストーンの達成	元の確認バースト。まずアプリケーションの状態に成功を記録し、その後で有限の装飾アニメーションを再生してください。アニメーションが消えた後も、確定した結果が表示され続ける必要があります。
選択中のタブまたは順序付きのページ遷移	共有ハイライトには元の選択表示面、関連するビューには方向性のあるステージを使用してください。選択状態、パネル、ルート、履歴はアプリケーション側で管理します。その他の構造にはナビゲーションパターンを使用してください。
スクロールまたは連携するシステム	スクロールの振り付け、実例のスコア、システムの振り付け、モーションインデックス。

この変更に必要なガイドとヘルパーだけを選択してください。同梱されている元のアセットは再利用可能な出発点であり、名前が指定されたソースコンポーネントの自動的な代替品でも、そのコンポーネントに忠実であることの証明でもありません。サードパーティーのランタイムをコピーする場合は、ライセンスを維持してください。元のSeenryアセットには、リポジトリのApache-2.0ライセンスが適用されます。

使用を避けるもの

避けるもの	代わりに使うもの
1 日 100 回以上使われる操作、またはキーボード操作のアニメーション	即時の変更
transition: all	プロパティを明示する
scale(0) からの表示	scale: 0.96 + opacity: 0
UI での ease-in	--ease-out
意図的な表示にデフォルトの ease／ease-out を使う	上記のカスタム曲線
理由なく 300ms を超えるプロダクト UI のモーション	150–250ms
中心から拡大するポップオーバー	トリガーを基点とする transform-origin
再実行される操作で制御できないキーフレーム	再ターゲット可能なトランジション、または明示的にキャンセル可能な WAAPI
width、height、top、left、margin のアニメーション	トランスフォーム。高さにはグリッドトラックまたは interpolate-size
通常のコントロールをホバー時に移動または拡大する	細かい操作が可能なホバーポインターの場合に限った、静的な色合いまたはリングの変化。拡大によるフィードバックは押下時に使う
動きを抑える設定でのバリエーションがない	不透明度のみ、または即時
長いリストの各項目を順番に表示する	30–50ms のスタッガーを合計約 300ms 以内に収める、またはスタッガーを使わない
状態変化を示す唯一の手段としてのモーション	静的な手がかりも加える
transition-duration の中に duration easing を含むトークン（宣言全体が無効になり、状態変化がすべて即時になる）	duration リストには単純な時間を指定する。計算済みスタイルで transitionDuration が 0s ではないことを確認する
フィルター可能な項目で [hidden] 属性より優先される display ルール	レイアウトルールに :not([hidden]) を使う。非表示の項目が描画されず、Tab キーでフォーカスもできないことを確認する
変形中のサーフェスに別の形状を重ね、色を変化させる	展開しながら自身の塗りつぶし色が変化する単一のサーフェス

出力

コードを記述し、その後、数行で次の内容を報告してください。判定結果（頻度と目的、またはアニメーションしない理由）、使用要素（ツール、プロパティ、時間、曲線またはスプリング）、確認した項目（通常速度、DevTools Animations での 10% 速度、素早い再実行、反転、キーボード、動きを抑える設定、スマートフォン）。

観察された動作を調査する

提供されたリファレンスを再現する場合は、再生を通常の速度および適切な中間フレームで確認してください。最終状態だけを見てはいけません。モーション調査では、録画、Seenry MCP、制作者の調査、情報源の制約について説明しています。調査が必要な場合にのみ読み込んでください。静止画像からは、タイミング、中断、キーボード操作の挙動を判断できません。再生映像がない場合は、提案する処理を実装して、ローカルでテストしてください。

録画フェーズの確認： ソースのチェックポイントを、実行中のブラウザーアニメーションに合わせてください。状態をジャンプさせて確認できるのは最終状態であり、タイミングではありません。モーションの再構築を参照してください。

検証

まず、ブラウザーが不要で、1 秒もかからずに完了する静的スキャンを実行します。node ../seenry/scripts/motion_scan.mjs <project>。トークンにない再生時間、遅延、カーブ、ブラウザー既定のイージングと線形イージング、transition: all、レイアウトプロパティのトランジション、20ms を超えるスタガーの間隔、reduced-motion 分岐の欠落を検出し、それぞれに最も近いトークンを示します。違反項目と、正当な理由を説明できない警告を修正したら、インタラクション検証チェックリストを使って、変更した動作を検証します。小さな修正では、影響を受ける状態と回帰チェックが必要です。サイト全体のベンチマークを新たに実施する必要はありません。通常速度の再生と、参考になるスローモーションのフレームを確認し、ドキュメントのはみ出しだけでなく、テキストやコントロールが内部に収まっているかも確認します。反転時には、最終的な論理状態とアクセシブルな状態を確認し、固定されたコンテナだけでなく、実際に動いているレイヤーを調べます。

同階層の seenry スキルランタイムと、許可されたモデルへのアクセスが利用できる場合は、このスキルのインストール先ディレクトリを基準に ../seenry/scripts/motion_judge.mjs の場所を解決し、Node でページに対して実行します。呼び出し元の作業ディレクトリがスキルのディレクトリだとは限りません。ランタイムがない場合は、そのチェックを実施できないと報告します。ウェブのエビデンスでは、合格基準は、宣言されたすべてのモーション基準とレビュー済みのすべてのインタラクション行で 9 以上、違反なし、かつキャプチャした各インタラクションラベルに対応する行があることです。基準やラベルの網羅性が欠けている場合は未検証です。全体のスコアが高くても、弱い行を平均で補うことはできません。レポートにはキャプチャした範囲が明記され、未テストのコンポーネントは保証されません。ネイティブ動画のレガシー判定は、別の契約に従います。結果を参考に、該当するインタラクションを調べます。この判定は、機能チェックやレンダリングチェックとは分けて扱います。判定ツールが利用できない場合や録画がない場合は、合格ではなく未検証です。関連するキーボード操作、狭い幅、reduced-motion の状態を試します。ジェスチャーについては、利用できる場合はタッチエミュレーションと実機のスマートフォンを使い、実際に何をテストしたか報告します。

動作の仕組みをさらに詳しく知るには、モーション設計、インタラクションの構造、プロダクトのトランジション、スクロールの演出、サーフェス効果、数値のトランジションを参照してください。インターフェース全体の方向性と素材には、seenry を使用します。