squash-stretch-mastery について
スクワッシュ&ストレッチを解説するデザインスキルです。Disneyのアニメーション原則を用いて力を表し、物体に生命感を与える方法を、モーションデザイナーやアニメーター向けに説明します。体積や素材、UI・キャラクター・ロゴ・ゲームでの応用を扱います。
主な機能
- 01変形中の体積を保つ
- 02素材の弾性に応じて変形を調整
- 03タイミングやフォロースルーと連携
- 04UI・キャラクター・ロゴ・ゲームに応用
- 05よくある変形の誤りを回避
活用シーン
- 01ボタンを押す動きを作成
- 02キャラクターのジャンプや衝撃を表現
- 03ロゴに動きを加える
- 04素材やトーンに合わせて変形を調整
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ dylantarre/ animation-principles --skill squash-stretch-masteryインストール後、Claude Code で/squash-stretch-masteryを入力して読み込まれたか確認します。
詳細
スカッシュ&ストレッチを極める
基本原則
スカッシュ&ストレッチは、アニメーションの根本的な課題である、硬い物体に生命感を与えることを解決するため、ディズニーの12の原則の中で最も重要だと考えられています。1930年代にディズニーで生み出され、実際の肉やゴムが、体積を一定に保ちながら力によって変形する様子を観察したことから発展しました。
基本理論
体積の維持:物体がつぶれるときは、横に広がる必要があります。伸びるときは、細くなる必要があります。この制約がリアリティを生みます。これに反すると、物体が変形するのではなく、膨らんだり縮んだりしているように見えます。
力の可視化:スカッシュ&ストレッチによって、目に見えない力を可視化できます。ボールが衝撃でつぶれる様子から、床の抵抗が伝わります。キャラクターが跳躍の途中で伸びる様子から、速度と勢いが伝わります。
弾性の幅
すべての物体が同じように変形するわけではありません。
- 弾性が高いもの:ゴムボール、カートゥーンのキャラクター、ゼリー(極端に変形)
- 弾性が中程度のもの:人間の顔、布、筋肉(わずかに変形)
- 弾性が低いもの:木、金属、骨(変形はごくわずかですが、発生します)
「硬い」物体でも、1~2%の変形を加えると効果があります。生気のない、機械的な印象を防げます。
ほかの原則との組み合わせ
タイミングがスカッシュ&ストレッチを強調します:衝撃が速いほど大きくつぶし、ゆっくり浮遊する動きには穏やかな伸びを使います。変形の量は速度に合わせる必要があります。
予備動作にはストレッチを使います:ジャンプのために力をためるキャラクターは、動き出す前に少し伸びることがよくあります。
フォロースルーで動きを続けます:着地後、スカッシュが髪や衣服、肉などの二次要素に波及します。
分野別の応用
UI/モーションデザイン
- ボタンの押下:タップ時にわずかにつぶす(高さの95~98%)
- リスト項目:境界を越えて引っ張られたときに少し伸ばす(ラバーバンドスクロール)
- 通知:表示時につぶし、バウンドして静止させる
キャラクターアニメーション
- 表情:笑顔では頬をつぶし、驚いたときは伸ばす
- 歩行サイクル:接地時に胴体を縮め、通過時に伸ばす
- 感情の表現:ショックには極端な伸び、落胆にはスカッシュを使う
ロゴアニメーション
- 跳ねるロゴ:誇張したスカッシュで遊び心のある個性を生み出す
- さりげない呼吸:微細なスカッシュ&ストレッチで、静止したロゴに生命感を与える
ゲームフィール
- ジャンプの軌道:上昇時に伸ばし、着地時につぶす
- 被弾時のリアクション:ノックバックの前に短くつぶし、衝撃を伝える
- 収集アイテム:穏やかなスカッシュ&ストレッチでリズミカルに脈動させる
よくある間違い
- 体積を崩す:物体が変形するのではなく、膨らんだり縮んだりして見えます
- 均一に変形させる:実際の物体は、力が加わる場所ほど大きく変形します
- 適用しすぎる:控えめな表現では、カートゥーンのような50%ではなく、1~5%が適しています
- 極端な変形を静止させる:変形には緩急をつけ、急に切り替えてはいけません
実装の目安
勢いのある動きには10%、控えめな仕上げには2~3%の変形から始めます。素材やトーンに合わせて調整してください。迷ったら、控えめにするのが効果的です。スカッシュ&ストレッチは、意識して気づかれるのではなく、感覚として伝わるべきです。