slow-in-out-mastery について
slow-in-out-masteryは、アニメーターやモーションデザイナー向けのクリエイティブスキル資料です。UI、キャラクターアニメーション、モーショングラフィックス、ゲームでの加速と減速の表現を解説します。
主な機能
- 01イーズイン、イーズアウト、複合イージング
- 02リニアとカスタムベジェ曲線
- 03バウンス、エラスティック、バックの変化
- 04状況に応じたイージング選択の指針
- 05UI、アニメーション、ゲームへの応用
活用シーン
- 01ページの登場と退出に使うイージングの選択
- 02キャラクターの動きに重量感を加える
- 03段階的に現れるテキスト演出の作成
- 04カメラ移動やキャラクター操作の調整
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/slow-in-out-masteryを入力して読み込まれたか確認します。
詳細
スローイン／スローアウトを極める
物理の原則
現実世界の物体は、一定の速度では動きません。静止状態から加速し、停止に向けて減速します。スローイン／スローアウト（イーズイン／イーズアウトとも呼ばれます）は、この基本的な事実を表現します。これがないと、アニメーションは機械的に見えます。これを使うと、動きに生命感が生まれます。
基本理論
スローアウト（イーズアウト）：動きの開始時に絵を密集させます。物体は開始位置から徐々に加速して離れていきます。
スローイン（イーズイン）：動きの終わりに絵を密集させます。物体は最終位置に向けて徐々に減速します。
リニアモーション：位置間の間隔が均等です。自然界ではあまり見られませんが、機械的な要素やスタイル上の選択として役立ちます。
間隔の原則
伝統的なアニメーターは、絵の間隔を調整して動きを制御していました。
- 狭い間隔＝動きが遅い（絵が近い）
- 広い間隔＝動きが速い（絵が遠い）
デジタルアニメーターは、イージングカーブを使って動きを制御します。イージングカーブは、時間とともに値がどのように変化するかを表す数学関数です。
よく使われるイージング関数
- イーズアウト：開始は速く、終わりは遅い（UI アニメーションの 70％）
- イーズイン：開始は遅く、終わりは速い（退出、離脱）
- イーズインアウト：開始と終わりが遅い（優雅で、意図的な印象）
- リニア：一定の速度（機械的、ループ向き）
- カスタムベジェ：特定の印象を生み出すための精密な制御
他の原則との相互作用
タイミングはイージングによって変わります：同じ継続時間でも、イージングが異なれば印象が変わります。同じ継続時間なら、イーズアウトはイーズインより速く感じられます。
予備動作にはイーズインがよく使われます：素早い動作の前に、予備動作が加速します。
フォロースルーにはイーズアウトを使います：動きの収束とともに減速し、静止します。
スクワッシュ／ストレッチの強さはイージングに従います：速い動きのときは変形を大きくし、遅い動きのときは小さくします。
分野ごとの活用例
UI／モーションデザイン
- ページ遷移：表示時にはイーズアウトを使い（素早く現れて落ち着く）、退出時にはイーズインを使います
- モーダル：スケールアップにイーズアウトを使うと、親しみやすく、唐突さのない表示になります
- ボタン：押下時のフィードバックにイーズアウトを使います（即座に反応し、滑らかに落ち着きます）
- 読み込み：プログレスバーにはリニア（予測しやすい）、スピナーにはイージング（自然な印象）を使います
- ホバー状態：開始には素早いイーズアウトを使い、滑らかな印象にはイーズインアウトを使います
キャラクターアニメーション
- ジャンプ：地面からはスローアウト（加速）、頂点に向かってはスローイン（減速）を使い、中間は速くします
- 首の動き：静止状態からはスローアウトを使い、新しい方向に向かうときはスローインを使います
- まばたき：閉じるときは速く（ほぼリニア）、開くときはスローアウトを使います（まぶたが引っ張られるような動き）
- 重心移動：重さを感じさせるには、強めのイージングを使います
モーショングラフィックス
- テキストの表示：時間差をつけたイーズアウトによって、次々と現れる動きを作ります
- ロゴアニメーション：細かく調整したカーブでブランドの個性を表現します
- データビジュアライゼーション：増加にはイーズアウトを、減少にはイーズインを使います
ゲームの操作感
- カメラの動き：映画のような印象にはイーズインアウトを、素早い反応にはクイックなイーズアウトを使います
- キャラクター操作：イージングカーブによって、動きがどれだけ「きびきび」または「ふわふわ」と感じられるかが決まります
- インパクト効果：鋭いイーズインでパンチのある印象を生み出します
よくある間違い
- すべてをリニアにする：動きが機械的で無機質に感じられます
- イージングを使いすぎる：柔らかすぎる動きは、もたついて反応が鈍く感じられます
- イージングの方向を間違える：表示時のイーズインはためらっているように見え、退出時のイーズアウトは要素が去りたがっていないように見えます
- 文脈を無視する：遊び心のある UI には弾むようなカーブが必要ですが、プロ向けの UI には控えめなイージングが必要です
バウンスとエラスティックの拡張
基本的なイージングに加えて、次のようなものがあります。
- バウンス：振動が徐々に小さくなるオーバーシュート（遊び心があり、エネルギッシュ）
- エラスティック：揺れを伴うオーバーシュート（伸縮性があり、漫画的）
- バック：動く前に少し引き戻す動き（予備動作を加えます）
80／20 の法則
ほとんどの UI 作業では、アニメーションの 80％でイーズアウトを使います（ユーザーの操作に反応する要素）。イーズアウトは反応の良さを伝えます。「操作を受け取り、動いています」という印象です。イーズインは、要素の退出や強調を弱めるときに使います。
実装のヒューリスティック
要素の表示や応答には、デフォルトでイーズアウト（開始は速く、終了は遅く）を使用します。終了時にはイーズインを使用します（ユーザーによってトリガーされない）自動アニメーションにはイーズインアウトを使用します。ブランドの個性に合わせてカーブの強さを調整します。ダイナミックなブランドには大胆なカーブを、落ち着いたブランドには控えめなカーブを使用します。