mcpField
P
problem-diagnosis

problem-diagnosis

github.com/dylantarreクリエイティブ・メディア132494 回インストール43 週間前に更新
リポジトリ

problem-diagnosis について

12のアニメーション原則を使って動きの問題を診断するスキルです。デザイナーや開発者が症状と原因を整理し、一度に一つずつ変更を試せます。

主な機能

  1. 01症状から原則を特定する診断枠組み
  2. 02よくある動きの問題と修正案
  3. 03段階的な診断とテスト手順
  4. 04タイミングや誇張の調整案

活用シーン

  1. 01浮遊感のある動きの改善
  2. 02硬い動きを自然にする
  3. 03伝わりにくいアニメーションの明確化
  4. 04速すぎる、遅すぎる動きの調整

インストール

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

$npx skills add https://github.com/dylantarre/animation-principles --skill problem-diagnosis

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

詳細

問題の診断

症状を診察する医師のように考えましょう。何かがおかしいと感じます。あなたの仕事は、どの原則が具体的に破られているのかを特定し、解決策を処方することです。体系的な診断は、手当たり次第の修正に勝ります。

基本的な考え方

アニメーションに違和感があるときは、こう問いかけましょう。どの原則が、どのように破られているのか?

「見た目がよくない」だけでは、具体的な対処につながりません。12の原則を診断用チェックリストとして使いましょう。アニメーションの問題はすべて、いずれかの原則に関する問題です。どの原則かを見つければ、解決策が明らかになります。

診断フレームワーク

症状:「ふわふわしている」または「重さがない」

考えられる原因:

  • スローイン/スローアウトがない(物体は重力に従って加速する必要があります)
  • ジャンプ前の予備動作が不十分
  • 着地時の衝撃にスクワッシュがない
  • タイミングが均一すぎる(すべてが同じ速度)
  • 重さを表す副次的な動きがない(髪や衣服が重力に反応していない)

修正方法:

  1. 動きの開始時にイーズインを加える
  2. 衝撃が起きる箇所にスクワッシュのフレームを加える
  3. 停止後に揺れが収まる動きを入れる
  4. 質量に応じてタイミングに変化をつける
症状:「硬い」または「ロボットのよう」

考えられる原因:

  • 軌道がない(曲線ではなく線形補間を使っている)
  • オーバーラッピングアクションがない(すべてのパーツが同時に動く)
  • 左右対称の動き(左側と右側がまったく同じ動きをしている)
  • セカンダリーアクションがない
  • タイミングが均一すぎる

修正方法:

  1. すべての動きの軌道にカーブを加える
  2. つながっている身体のパーツのタイミングをずらす
  3. ポーズの左右対称性を崩す
  4. 呼吸や重心移動を加える
  5. 細かな動きを取り入れる
症状:「わかりにくい」または「読み取りにくい」

考えられる原因:

  • ステージングが不十分(要素が重なってわかりにくい)
  • シルエットが弱い
  • 予備動作が不十分(動作が突然始まる)
  • 誇張が足りない
  • 注目を集める箇所が競合している

修正方法:

  1. 重要な動作の間は背景を簡素にする
  2. ポーズを調整し、シルエットを明確にする
  3. 予備動作のタイミングを長くする
  4. 誇張を20%増やす
  5. 主要な動作の最中はセカンダリーアクションを減らす
症状:「退屈」または「生気がない」

考えられる原因:

  • キャラクターのポーズに魅力がない
  • タイミングにメリハリがない(速い動きと遅い動きがない)
  • 予備動作と動作後の見せ場の構成が欠けている
  • 誇張が足りない
  • セカンダリーアクションや質感がない

修正方法:

  1. ポーズに個性を加える
  2. タイミングにメリハリをつける(速い動きはより速く、遅い動きはより遅く)
  3. 明確な予備動作を加える
  4. 重要なポーズの誇張を強める
  5. 副次的な動きを重ねる
症状:「意図せずカートゥーン調になっている」

考えられる原因:

  • スクワッシュとストレッチが過剰
  • タイミングの誇張が強すぎる
  • 物理法則からの逸脱が極端すぎる
  • フォロースルーが弾みすぎる

修正方法:

  1. スクワッシュとストレッチを10~20%の範囲に抑える
  2. 極端な動きを滑らかにするため、フレームを増やす
  3. 現実的に動きが収まる時間を設けて、地に足のついた動きにする
  4. フォロースルーの遅れを抑える
症状:「速すぎる」/「遅すぎる」

考えられる原因:

  • 意図に対してフレーム数が合っていない
  • イーズインまたはイーズアウトがない
  • 重要なポーズを十分な時間維持していない
  • 予備動作と見せ場のバランスが悪い

修正方法:

  1. フレーム数を調整する(中割りを追加/削除する)
  2. イージングカーブを確認する
  3. 重要なポーズをさらに2~4フレーム維持する
  4. 予備動作と動作のタイミングのバランスを取り直す

診断プロセス

  1. 症状を特定する — 何が問題なのか、平易な言葉で表現します
  2. 問題を切り分ける — シーン全体の問題か、特定の瞬間の問題かを確認します
  3. 原則を体系的に確認する:
    • タイミングと間隔は適切か?
    • スクワッシュとストレッチは適切か?
    • 予備動作とフォロースルーは適切か?
    • 軌道は適切か?
    • ステージングは適切か?
    • 誇張の度合いは適切か?
    • セカンダリーアクションは適切か?
  4. 仮説を検証する — 変更を一つ加えて、評価します
  5. 繰り返す — 改善しなければ、次に可能性の高い原則を試します

黄金律

一度に一つだけ修正します。 アニメーションの問題には複数の原因があることがよくありますが、すべてを一度に変更すると、何が効果的だったのか学べなくなります。診断し、原則を一つだけ改善して、評価し、繰り返しましょう。

コメント