problem-diagnosis について
12のアニメーション原則を使って動きの問題を診断するスキルです。デザイナーや開発者が症状と原因を整理し、一度に一つずつ変更を試せます。
主な機能
- 01症状から原則を特定する診断枠組み
- 02よくある動きの問題と修正案
- 03段階的な診断とテスト手順
- 04タイミングや誇張の調整案
活用シーン
- 01浮遊感のある動きの改善
- 02硬い動きを自然にする
- 03伝わりにくいアニメーションの明確化
- 04速すぎる、遅すぎる動きの調整
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ dylantarre/ animation-principles --skill problem-diagnosisインストール後、Claude Code で/problem-diagnosisを入力して読み込まれたか確認します。
詳細
問題の診断
症状を診察する医師のように考えましょう。何かがおかしいと感じます。あなたの仕事は、どの原則が具体的に破られているのかを特定し、解決策を処方することです。体系的な診断は、手当たり次第の修正に勝ります。
基本的な考え方
アニメーションに違和感があるときは、こう問いかけましょう。どの原則が、どのように破られているのか?
「見た目がよくない」だけでは、具体的な対処につながりません。12の原則を診断用チェックリストとして使いましょう。アニメーションの問題はすべて、いずれかの原則に関する問題です。どの原則かを見つければ、解決策が明らかになります。
診断フレームワーク
症状:「ふわふわしている」または「重さがない」
考えられる原因:
- スローイン/スローアウトがない(物体は重力に従って加速する必要があります)
- ジャンプ前の予備動作が不十分
- 着地時の衝撃にスクワッシュがない
- タイミングが均一すぎる(すべてが同じ速度)
- 重さを表す副次的な動きがない(髪や衣服が重力に反応していない)
修正方法:
- 動きの開始時にイーズインを加える
- 衝撃が起きる箇所にスクワッシュのフレームを加える
- 停止後に揺れが収まる動きを入れる
- 質量に応じてタイミングに変化をつける
症状:「硬い」または「ロボットのよう」
考えられる原因:
- 軌道がない(曲線ではなく線形補間を使っている)
- オーバーラッピングアクションがない(すべてのパーツが同時に動く)
- 左右対称の動き(左側と右側がまったく同じ動きをしている)
- セカンダリーアクションがない
- タイミングが均一すぎる
修正方法:
- すべての動きの軌道にカーブを加える
- つながっている身体のパーツのタイミングをずらす
- ポーズの左右対称性を崩す
- 呼吸や重心移動を加える
- 細かな動きを取り入れる
症状:「わかりにくい」または「読み取りにくい」
考えられる原因:
- ステージングが不十分(要素が重なってわかりにくい)
- シルエットが弱い
- 予備動作が不十分(動作が突然始まる)
- 誇張が足りない
- 注目を集める箇所が競合している
修正方法:
- 重要な動作の間は背景を簡素にする
- ポーズを調整し、シルエットを明確にする
- 予備動作のタイミングを長くする
- 誇張を20%増やす
- 主要な動作の最中はセカンダリーアクションを減らす
症状:「退屈」または「生気がない」
考えられる原因:
- キャラクターのポーズに魅力がない
- タイミングにメリハリがない(速い動きと遅い動きがない)
- 予備動作と動作後の見せ場の構成が欠けている
- 誇張が足りない
- セカンダリーアクションや質感がない
修正方法:
- ポーズに個性を加える
- タイミングにメリハリをつける(速い動きはより速く、遅い動きはより遅く)
- 明確な予備動作を加える
- 重要なポーズの誇張を強める
- 副次的な動きを重ねる
症状:「意図せずカートゥーン調になっている」
考えられる原因:
- スクワッシュとストレッチが過剰
- タイミングの誇張が強すぎる
- 物理法則からの逸脱が極端すぎる
- フォロースルーが弾みすぎる
修正方法:
- スクワッシュとストレッチを10~20%の範囲に抑える
- 極端な動きを滑らかにするため、フレームを増やす
- 現実的に動きが収まる時間を設けて、地に足のついた動きにする
- フォロースルーの遅れを抑える
症状:「速すぎる」/「遅すぎる」
考えられる原因:
- 意図に対してフレーム数が合っていない
- イーズインまたはイーズアウトがない
- 重要なポーズを十分な時間維持していない
- 予備動作と見せ場のバランスが悪い
修正方法:
- フレーム数を調整する(中割りを追加/削除する)
- イージングカーブを確認する
- 重要なポーズをさらに2~4フレーム維持する
- 予備動作と動作のタイミングのバランスを取り直す
診断プロセス
- 症状を特定する — 何が問題なのか、平易な言葉で表現します
- 問題を切り分ける — シーン全体の問題か、特定の瞬間の問題かを確認します
- 原則を体系的に確認する:
- タイミングと間隔は適切か?
- スクワッシュとストレッチは適切か?
- 予備動作とフォロースルーは適切か?
- 軌道は適切か?
- ステージングは適切か?
- 誇張の度合いは適切か?
- セカンダリーアクションは適切か?
- 仮説を検証する — 変更を一つ加えて、評価します
- 繰り返す — 改善しなければ、次に可能性の高い原則を試します
黄金律
一度に一つだけ修正します。 アニメーションの問題には複数の原因があることがよくありますが、すべてを一度に変更すると、何が効果的だったのか学べなくなります。診断し、原則を一つだけ改善して、評価し、繰り返しましょう。
コメント
Markdown 対応