mcpField
U
universal-tool

universal-tool

github.com/dylantarreデザイン・UI132488 回インストール43 週間前に更新
リポジトリ

universal-tool について

ツールやフレームワークを問わず、ディズニーのアニメーション12原則を適用するためのデザインスキルです。UIやエフェクトの動き、タイミング、イージングの指針を示します。

主な機能

  1. 01アニメーション12原則の解説
  2. 02スクワッシュ＆ストレッチと予備動作
  3. 03タイミングとイージングの指針
  4. 04UIとエフェクトの動きに関する推奨
  5. 05公開前のアニメーションチェックリスト

活用シーン

  1. 01UIトランジションやフィードバックの設計
  2. 02パーティクルやエフェクトの動きの計画
  3. 03公開前のアニメーション確認

インストール

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

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

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

詳細

万能なアニメーションの原則

使用するツールやフレームワークにかかわらず、ディズニーのアニメーション12原則をすべて適用してください。

1. スクワッシュ＆ストレッチ

コンセプト：オブジェクトは動くときに変形し、体積を維持します。

実装：

  • 一方の軸を縮めるときは、もう一方の軸を伸ばします
  • scaleX * scaleY ≈ constant
  • 衝突、加速、減速の際に適用します

値：80%まで縮め、120%まで伸ばします

2. アンティシペーション

コンセプト：動作に備え、観客の注意を引きます。

実装：

  • 本動作の前に、反対方向へ動かします
  • 予備動作に全体の所要時間の約20%を使います
  • 動作が速いほど、予備動作を小さくします

パターン：予備動作 → 動作 → 収束

3. ステージング

コンセプト：重要なものに視聴者の注意を向けます。

実装：

  • 背景要素をぼかす、またはフェードさせます
  • 焦点となる要素を拡大します
  • コントラスト（色、サイズ、動き）を使います
  • 一度に見せる動作は明確に1つにします

4. ストレート・アヘッド／ポーズ・トゥ・ポーズ

ストレート・アヘッド：フレームごとに順番にアニメーションします。流動的で有機的な動きに適しています。

ポーズ・トゥ・ポーズ：キーとなるポーズを定義してから、その間を補完します。正確で計画的な動きに適しています。

推奨：UIにはポーズ・トゥ・ポーズ、パーティクルやエフェクトにはストレート・アヘッドを使います。

5. フォロースルーとオーバーラッピング・アクション

コンセプト：パーツごとに異なる速度で動きます。

実装：

  • 子要素のタイミングをずらします
  • 二次要素に2～5フレームの遅延を加えます
  • 軽くて柔軟なパーツは後から引きずられるように動かします
  • 要素ごとに異なるカーブのイージングを使います

6. スローインとスローアウト

コンセプト：自然な動きは加速し、減速します。

実装：

  • ほとんどの動きにはイーズイン・イーズアウトを使います
  • 登場時はイーズアウトを使います（穏やかに到着します）
  • 退出時はイーズインを使います（自然に去ります）
  • 機械的な動きに限り、リニアを使います

一般的なカーブ：cubic-bezier(0.42, 0, 0.58, 1)

7. アーク

コンセプト：自然な動きは曲線の軌道をたどります。

実装：

  • 有機的な要素を直線で動かさないようにします
  • モーションパスや複数ポイントのキーフレームを使います
  • 投げられた物体には放物線の軌道を使います
  • 揺れる動きには振り子の軌道を使います

8. 二次動作

コンセプト：補助的な動作が主動作を引き立てます。

実装：

  • 主動作を補完する、さりげない動きを加えます
  • 例：髪の揺れ、影の動き、パーティクルエフェクト
  • 主動作から注意をそらさないようにします
  • 主動作より少し遅らせます

9. タイミング

コンセプト：速度によって、重さ、雰囲気、個性が伝わります。

所要時間印象用途
50-150msきびきびした動きマイクロインタラクション
150-300ms反応のよい動きボタンのフィードバック
300-500ms滑らかな動きページ遷移
500-800ms意図的な動きモーダルの表示
1000ms以上劇的な動きヒーローアニメーション

10. 誇張

コンセプト：わかりやすさを高めるため、現実的な範囲を超えて動きを強調します。

実装：

  • 動きを、控えめな場合より20～50%大きくします
  • オーバーシュートしてから収束させます
  • 誇張するほど、カートゥーン調になります
  • UIでは、控えめに誇張します（5～15%のオーバーシュート）

11. 立体感のある描画

コンセプト：3D空間で体積と重さを保ちます。

実装：

  • 3つの次元すべてを考慮します
  • パースを一貫させます
  • 変形中も体積を保ちます
  • 要素を地面に定着させるために影を使います

12. アピール

コンセプト：見ていて心地よく、魅力的なものにします。

実装：

  • 鋭い角度よりも滑らかなカーブを使います
  • タイミングのパターンを一貫させます
  • 視覚的なフィードバックを明確にします
  • 操作に対する反応を心地よいものにします
  • 予測しやすさと楽しさのバランスを取ります

万能なタイミングの参考

Micro-interaction: 100-200ms
Standard feedback: 200-300ms
Content transition: 300-400ms
Page transition: 400-600ms

万能なイージングの参考

Enter screen: ease-out (decelerate)
Leave screen: ease-in (accelerate)
On-screen movement: ease-in-out
Bounce/overshoot: spring physics or elastic

チェックリスト

アニメーションをリリースする前に確認します：

  • イージングが設定されていますか（リニアではありませんか）？
  • 動作に合ったタイミングですか？
  • 自然な場合、軌道がアークに沿っていますか？
  • 重要な動作に予備動作がありますか？
  • 二次要素にわずかな遅延がありますか？
  • 焦点となる要素が明確ですか？
  • 心地よい動きになっていますか？

コメント

Markdown 対応