mcpField
T
taste-motion

taste-motion

github.com/madebymustafaデザイン・UI20054 回インストール11 週間前に更新
リポジトリ

taste-motion について

taste-motionは、UIのモーション設計に一貫したルールを適用するためのスキルです。時間、イージング、アニメーションの制約、演出、動きを抑える設定を定めています。

主な機能

  1. 01固定の時間とイージングトークン
  2. 02transformとopacityのアニメーション指針
  3. 03登場演出と操作時のルール
  4. 04スクロールとレイアウト遷移の規則
  5. 05動きを抑える設定の要件
  6. 06モーション品質チェックリスト

活用シーン

  1. 01UIアニメーションのルール策定
  2. 02ページのモーション設計の確認
  3. 03動きを抑える設定への対応

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/madebymustafa/design-taste --skill taste-motion

インストール後、Claude Code で/taste-motionを入力して読み込まれたか確認します。

詳細

taste-motion

モーションの役割はインターフェースの動きを説明することであり、装飾することではありません。すべてのアニメーションは、「何が起きたのか」「どこにあるのか」「次に何をすればよいのか」に答える必要があります。

1. 時間のスケール（固定トークン）

トークン時間用途
--dur-fast100–150msホバー、押下状態、フォーカスリング
--dur-base200–300ms小さな出現、状態変化（切り替え、開閉）
--dur-slow400–600msセクションの表示、ページ単位の遷移、ダイアログを開くとき
--dur-hero600–900ms唯一のヒーロー登場シーケンス

100ms未満は瞬きのように感じられます（ただし、brutalist packs で意図的に使われるような瞬時の動きは除きます）。900msを超えると、動きの遅いウェブサイトのように感じられます。

2. イージングトークン（固定）

  • 標準（UIの状態）： cubic-bezier(0.4, 0, 0.2, 1) — 素早く始まり、穏やかに終わります。ホバーや切り替えのデフォルトです。
  • 強調（登場／表示）： cubic-bezier(0.22, 1, 0.36, 1) — 長く穏やかな余韻を残します。上質な印象になります。
  • 終了： cubic-bezier(0.4, 0, 1, 1) またはそれより速くします。終了は登場よりきびきびさせます。
  • スプリング／オーバーシュート（遊び心のあるパックのみ）： cubic-bezier(0.34, 1.56, 0.64, 1) — 要素ごとに最大1回までとし、ループでは使いません。
  • 万能な設定として ease-in-out を使わないでください。マーキー／プログレス以外では linear を使わないでください。

3. アニメーションさせるもの（させないもの）

アニメーションさせるもの： transform と opacity。それだけです。60fpsを確保できます。

アニメーションさせないもの： width／height（レイアウトが乱れるため、transform: scale を使います）、margin、top／left（transform を使います）、大きなサイズの box-shadow（あらかじめぼかした疑似要素を使います）、大きな面の filter: blur。

4. 振り付け（登場）

  • セクションごとに1つの場面： スクロール時に表示する場合、セクションの要素は2～3段階（見出し → 本文 → CTA）で登場させます。各段階の間隔は60～120msとし、時間とイージングは同じにします。段階的な表示で階層を表現します。
  • 表示時の移動距離は20px以下（translateY 8–16px）にして、opacity と組み合わせます。移動距離が大きいと、PowerPointのように見えます。
  • スケールを使った登場は 0.96→1 以下にし、ダイアログ／ポップオーバーに限ります。セクション全体には使いません。
  • ヒーロー： 合計600～900msのシーケンスを1つだけ設定し、各要素は1回だけ登場させます。ループする浮遊動作や、繰り返す波の動きは使いません。
  • ループの許容範囲： ページごとに許可されるループは、環境ステータスのインジケーター（ライブドット、ローダー、スピナー）の1種類だけです。それ以外をループさせるのはエラーです。

5. マイクロインタラクション（ホバー、押下、フォーカス）

  • ホバー：100～150ms、標準のイージング、プロパティの変更は1つだけ（背景色のトーン、境界線、translateY −1 to −3px）。色、位置、影を同時に変えないでください。
  • 押下：ホバーの逆（下方向に移動し、影をなくす）、80～120ms。
  • フォーカス表示：2pxのリング、コントラスト比3:1、outline-offset: 2px、100msのフェードでアニメーション表示します。代替手段なしで outline: none を設定しないでください。
  • 無効状態：ホバー状態を一切設定しません。要素は操作できないように見せる必要があります（不透明度0.4～0.5、ポインター表示の変化なし）。
  • 読み込み時／状態変更時のトランジションは、状態が視認できる場合にのみ設定します。知覚できないトランジションはデッドコードです。

6. スクロールとレイアウト

  • スクロールトリガー： IntersectionObserver（または対応環境ではCSSの animation-timeline）を使います。各要素を1回だけ表示し、その後は再表示しません。スクロールするたびに再アニメーションする要素は作りません。
  • スティッキー： ナビゲーションとセクションラベルには使えます。スティッキーとアニメーションの組み合わせはパフォーマンス上のリスクがあるため、アニメーションは避けてください。
  • ビュー遷移／ページ遷移： 300～500msとし、効果がある箇所（リスト → 詳細）では共有要素を移動させます。prefers-reduced-motion が設定されている場合は完全に無効にします。
  • レイアウト遷移： FLIP パターン（transformベース）を使い、再レイアウトを伴うアニメーションは使いません。

7. モーションの軽減（必須）

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
  • CSSの条件に一致する場合、デフォルトでモーションは完全になしとします。視差効果、自動スクロールするカルーセル、マーキーは使いません。
  • 出現のみをアニメーションさせます。動きを加えずにコンテンツを表示します（1フレームかけて不透明度を0→1にします）。

8. チェックリスト（該当した場合はページを不合格とします…）

  • ループやローダー以外で、1 つの要素が約 1.5 秒を超えてアニメーションする。
  • 1 つのビューポート内に、ループする要素が 2 つ以上ある。
  • width、height、margin、top のいずれかをアニメーションさせている。
  • 表示時の移動距離が 20px を超えている。
  • グローバルなイージングとして ease-in-out を使用している。
  • ページ上のすべての要素が読み込み時にアニメーションする（バウンス登場の祭典）。
  • prefers-reduced-motion への対応がまったくない。

アニメーションを一文で説明できないなら、削除してください。

コメント

Markdown 対応