follow-through-overlapping について
アニメーションやモーションデザインにおけるフォロースルーとオーバーラッピングを解説するガイドです。階層、物理的特性、タイミングのずれが、キャラクターや UI、文字の動きに与える影響を説明します。
主な機能
- 01フォロースルーとオーバーラッピングの概念
- 02動く部位のドラッグ階層
- 03ドラッグに影響する物理要因
- 04タイミングのずれと収束カーブ
- 05アニメーションやUIでの活用
活用シーン
- 01キャラクターの付属部位に自然な動きを追加
- 02慣性スクロールやスプリングUIの設計
- 03ロゴや文字のアニメーションに時間差を設定
- 04硬い動きや同時停止の原因を特定
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/follow-through-overlappingを入力して読み込まれたか確認します。
詳細
フォロースルーとオーバーラッピングアクションの習得
慣性の原則
すべてが一度に止まることはありません。キャラクターが止まっても、髪は動き続けます。車がブレーキをかけると、乗客は前に傾きます。フォロースルーとオーバーラッピングアクションは、システムの各部が力に対して異なる速度で反応する様子を表します。この原則によって、アニメーションに物理的な説得力が生まれます。
基本理論：関連する2つの概念
フォロースルー：本体が止まった後も、慣性によって付属部分が動き続け、その後に落ち着きます。動きが終わる際の挙動です。
オーバーラッピングアクション：動作中、各部が異なる速度で動きます。止まるときだけではありません。頭が動き始めても髪が同時に動き始めるのではなく、遅れて動き、やがて追いつきます。タイミングが継続的にずれることです。
遅れの階層
動きの起点から遠い部分ほど、大きく遅れて動きます。
- 起点（腰、胴体）：最初に動き、最初に止まります
- 一次の伸展部分（四肢、頭）：少し遅れて動きます
- 二次の伸展部分（手、顔のパーツ）：さらに遅れて動きます
- 三次の要素（指、髪、布）：最も大きく遅れて動きます
各階層が前の階層に続くことで、動きの波が連鎖して生まれます。
遅れに影響する物理的特性
- 質量：重い要素ほどフォロースルーが大きくなります
- 柔軟性：柔らかい素材ほどオーバーラッピングアクションが目立ちます
- 空気抵抗：平らで幅の広い表面ほど、より大きく遅れて動きます
- 接続点：接続が緩いほど、ずれが大きくなります
他の原則との関係
タイミングがフォロースルーの持続時間を決めます：急停止ではフォロースルーが長くなり、ゆっくり止まる場合は緩やかに落ち着きます。
アークがフォロースルーの軌道を決めます：付属部分は直線ではなく、曲線を描いて揺れます。
セカンダリーアクションはフォロースルーであることがよくあります：注意をそらさずに動きを豊かにする補助的な動作です。
落ち着く際にスクワッシュ／ストレッチが現れます：フォロースルーが終わるとき、オブジェクトはわずかに圧縮されます。
分野ごとの活用例
UI／モーションデザイン
- リストのスクロール：指を離した後も慣性で動き続ける
- カードの積み重ね：タイミングをずらして順番に落ち着く
- モーダルの閉じる動作：前景の後から背景の要素が落ち着く
- プルして更新：弾力のある行き過ぎと戻り
- 通知バッジ：数が変わるとバウンドして落ち着く
キャラクターアニメーション
- 髪や布のシミュレーション：常にオーバーラッピングアクションが発生する
- 尾の動き：大きく遅れながら胴体の軌道を追う
- 顔のパーツ：頬やあごが頭の回転に遅れて動く
- 歩行サイクル：腕の振りと脚のタイミングにずれをつける
- ジャンプの着地：胴体が縮んだ後、付属部分が追いつく
ロゴとタイポグラフィ
- 単語の表示：文字がタイミングをずらして現れ、落ち着く
- ロゴの組み立て：各要素がフォロースルーを伴いながら順番に配置される
- キネティックタイポグラフィ：フレーズの内部でタイミングをずらして動く
物理ベースのUI
- ドラッグ＆ドロップ：オブジェクトが離した位置を少し通り越して動き続ける
- 弾力のある境界：コンテンツが指について動いた後、元に戻る
- スプリングアニメーション：自然な行き過ぎと収まり
よくある間違い
- すべてが同時に止まる：ロボットのような、機械的な印象になります
- フォロースルーが大きすぎる：要素がばらばらで、浮いているように感じられます
- 階層がない：すべてのパーツが同じ遅れで動きます
- 直線的に落ち着く：フォロースルーは急に止めず、徐々に減速させます
段階的なずらし方
説得力のあるオーバーラッピングアクションにするには、階層が1つ下がるごとに、二次的な要素を2～4フレーム（24fpsの場合）ずらします。起点は1フレーム目に動き、一次の要素は2～3フレーム目、二次の要素は4～6フレーム目、三次の要素は6～10フレーム目に動きます。
落ち着きのカーブ
フォロースルーは決して静止状態へ急に切り替わってはいけません。わずかに行き過ぎるイーズアウトのカーブを使います。
- 最初は静止位置を素早く通り越す
- その後、静止位置に向かってゆっくり戻る
- 反対方向に、ごく小さく行き過ぎる場合もある
- 最後は静止状態へ滑らかに移行する
実装のヒューリスティック
独立して動く可能性のある要素をすべて特定します。質量、柔軟性、起点からの距離に応じて、それぞれに遅れの値を割り当てます。遅れに比例してタイミングをずらします。動作の終わりに収束する揺れを加えます。動きが硬く感じられる場合は、オーバーラッピングアクションを増やす必要があるでしょう。