mcpField
U
universal-timing

universal-timing

github.com/dylantarreクリエイティブ・メディア132480 回インストール43 週間前に更新
リポジトリ

universal-timing について

ディズニーの原則をもとに、さまざまな長さのアニメーションのタイミングを決めるデザインスキルです。比率やイージング、状況に応じた時間の選び方を示します。

主な機能

  1. 01長さに応じたタイミング指針
  2. 02予備動作とフォロースルーの比率
  3. 03スタッガー間隔の推奨
  4. 04時間別のイージング指針
  5. 05状況に応じた時間設定ルール

活用シーン

  1. 01短い動きと長い動きの時間設定
  2. 02連続要素のスタッガー間隔の選択
  3. 03重要度を伝える動きの調整

インストール

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

$npx skills add https://github.com/dylantarre/animation-principles --skill universal-timing

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

詳細

普遍的なタイミングの原則

アニメーションの真理のなかには、再生時間を超えて通用するものがあります。これらの原則は、50msでも5000msでも機能します。習得すれば、どんなスケールでも適切なタイミングを判断できるようになります。

ディズニーの原則 — 普遍的な適用

常に当てはまること

スクワッシュ＆ストレッチ：比例してスケールさせます。100msでは5％、2000msでは30％です。決してなくさず、常に比例させます。

予備動作：比率は一定です。予備動作は、全体の再生時間に関係なく、主動作の20～30％です。

演出：焦点はひとつに絞ります。瞬間的な動きでも、映画のような演出でも、主な注意を引くものはひとつだけにします。

ストレート・アヘッド／ポーズ・トゥ・ポーズ：複雑さは再生時間に合わせます。短い場合はストレート・アヘッド、長い場合はポーズ・トゥ・ポーズです。

後追いの動き：どんな再生時間でも取り入れます。100msでも、わずかなオーバーシュートを加えられます。スケールは再生時間に合わせます。

スローイン／スローアウト：必ずイージングを使います。どんな再生時間でも、等速の動きは機械的に見えます。

弧を描く動き：自然な軌道をスケールさせます。短いアニメーションでは控えめなカーブ、長いアニメーションでは大きく弧を描きます。

副次的な動き：主動作を支え、決して競合させません。50msでも5000msでも同じです。

タイミング：再生時間が知覚を決めます。同じ動きでも、速度が違えば異なる印象になります。

誇張：再生時間と重要度に合わせます。再生時間が長いほど、より誇張できます。

立体感のある描写：変形の整合性を保ちます。速度に関係なく、一貫性が重要です。

魅力：目指すべきものです。どんな再生時間でも、アニメーションは妨げになるのではなく、体験を高めるものであるべきです。

普遍的な比率

アニメーションタイミングの黄金比
Anticipation : Action : Follow-through
    20%      :   50%  :     30%

Example at 500ms:
  Anticipation: 100ms
  Main action: 250ms
  Follow-through: 150ms
段階的なずらしの比率
Optimal stagger delay: 10-20% of item duration

Item duration: 300ms
Stagger delay: 30-60ms between items
再生時間に対するイージングの強さ
Duration < 150ms: ease-out only (no time for ease-in)
Duration 150-400ms: ease-out or custom
Duration 400ms+: full ease-in-out possible

どんな場面でも使えるイージング

/* Universal ease-out - works at any duration */
transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);

/* Universal natural motion */
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

/* Universal bounce - scale amplitude with duration */
transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);

普遍的な法則

  1. 移動距離が短いほど、再生時間も短くする — 動きは距離に比例して感じられるべきです。

  2. 大きな要素ほどゆっくり動かす — 重さの印象には、より長い時間が必要です。

  3. 素早く登場させ、より素早く退出させる — ユーザーが気にするのは、去るものより現れるものです。

  4. 状況に応じて許容度は変わる — 初回訪問では、繰り返しの利用より長いアニメーションが許容されます。

  5. 注意力には限りがある — 再生時間にかかわらず、注意を引く要素は慎重に選びます。

  6. 物理法則は直感の手がかりになる — どんな速度でも、現実世界での予想に合わせます。

  7. イージングは必須です — どんな再生時間でも、等速の動きは不自然に見えます。

  8. 極端な条件でもテストします — 速度を2倍、0.5倍にしても機能すれば、堅牢です。

再生時間の選択フレームワーク

What should the user feel?
├── Instant (< 100ms)
│   └── Confirmation, responsiveness
├── Quick (100-300ms)
│   └── Efficiency, polish
├── Standard (300-500ms)
│   └── Clarity, communication
├── Deliberate (500-1000ms)
│   └── Importance, attention
└── Dramatic (> 1000ms)
    └── Story, emotion, memory

重要なポイント

再生時間はデザイン上の判断です。重要度を伝え、注意を導き、感情を形作ります。ディズニーの原則はツールであり、タイミングはそれを使いこなす方法です。原則を習得したうえで、状況に応じて再生時間を決めましょう。

コメント

Markdown 対応