solid-drawing-mastery について
solid-drawing-masteryは、キャラクターアニメーション、モーションデザイン、UI、ゲームの制作者向けのスキルです。形、ボリューム、遠近法、重さを保ち、空間に根ざした動きを目指します。
主な機能
- 01動きの中で体積と比率を維持
- 02遠近法と短縮表現を解説
- 03質量、バランス、空間の奥行きを扱う
- 04UIとモーションデザインへの立体感の応用
- 05立体表現の崩れを確認する方法
活用シーン
- 01キャラクターのターン時の形を確認
- 02UIカードの反転に空間感を加える
- 03カメラ移動中の奥行きを維持
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ dylantarre/ animation-principles --skill solid-drawing-masteryインストール後、Claude Code で/solid-drawing-masteryを入力して読み込まれたか確認します。
詳細
ソリッドな描画の極意
立体感の原則
ソリッドな描画とは、三次元の形状、重さ、ボリュームの錯覚を生み出すことです。従来のアニメーションでは、解剖学、遠近法、形状を理解することを意味していました。デジタルモーションでは、トランスフォームや動きが、2Dシェイプを平面的に操作したものではなく、物理空間に根ざしたものに感じられるようにすることを意味します。
基本理論
記号よりも形状:アニメーションを始めたばかりの人は、頭を円、腕を線で表すなど、記号を描きます。熟練したアニメーターは、空間に存在する重さと立体感を持つボリューム、つまり形状を描きます。
構造の一貫性:オブジェクトは、動きの間も一貫したボリュームと比率を保つ必要があります。キャラクターの頭は、振り向いても大きくなるべきではありません。ボックスが歪んで台形になるべきでもありません。
三次元の課題
アニメーションは時間の中に存在しますが、空間の中にも存在します。ソリッドな描画は、次の点を確かなものにします。
- ボリュームの一貫性:オブジェクトが意図せず大きくなったり、小さくなったりしません
- 遠近法の正確さ:回転が立体的なルールに従います
- 重量感:形状が、空間を占める質量を持っているように感じられます
- 構造の完全性:オブジェクトがつぶれたり、不自然に歪んだりしません
立体感を生み出す要素
構造:表面の下にあるもの、つまり骨格や構造を理解すること
遠近法:適切な短縮法、消失点、空間的な関係
ボリューム:2Dで表現する間も、3Dの質量を維持すること
重量配分:質量が空間の中でどのように移動し、落ち着くか
ライティングの一貫性:形状を際立たせる影とハイライト
他の原則との関係
スクワッシュとストレッチではボリュームを維持する必要があります:質量を変えずに変形させるという、ソリッドな描画における基本的な制約です。
アークは3D空間に存在します:軌道は画面空間だけでなく、立体空間としても自然でなければなりません。
フォロースルーは物理法則を尊重します:二次的な要素は、平面的なグラフィックではなく、3Dの形状として動きます。
ステージングでは奥行きを考慮します:ソリッドな描画により、空間的な関係を明確に表現できます。
分野別の活用
UI/モーションデザイン
- 3Dトランスフォーム:回転は遠近法と消失点を考慮する必要があります
- 奥行きレイヤー:Z空間の関係は動きの間も一貫して保たれます
- スケールアニメーション:オブジェクトは任意の原点ではなく、論理的な中心点を基準に拡大・縮小します
- カードの反転:平面的なX軸スケールではなく、遠近法に沿って回転させます
- 影:3D空間でのオブジェクトの位置に合わせて、一貫して移動します
キャラクターアニメーション
- ターンアラウンド:あらゆる角度でモデルの一貫性を保ちます
- 短縮法:カメラに近づく手足を正しく処理します
- 重量感のある演技:キャラクターが質量を持っているように感じられます
- 立体的なポーズ:物理的に成立しうる、バランスと重量感のあるポーズです
モーショングラフィックス
- 3Dオブジェクトアニメーション:適切なライティング、遠近法、オクルージョン
- アイソメトリックデザイン:一貫した投影ルールを維持します
- 擬似3D効果:空間的に自然に感じられる視差と奥行き
- ロゴの立体化:平面的なロゴに一貫した立体表現を加えます
ゲームデザイン
- スプライトアニメーション:2D表現で暗示される3D形状
- カメラの動き:カメラが移動する間も空間的な関係を維持します
- 環境アニメーション:ゲーム空間に存在するオブジェクトを説得力のある形で表現します
よくある間違い
- スケールの不一致:意図せずオブジェクトのサイズが変化する
- 平面的な回転:遠近法に沿った回転ではなく、X軸スケールを使う
- 構造の崩れ:動きの間に形状が不自然に歪む
- 重量感の矛盾:重いオブジェクトが軽そうに振る舞う、またはその逆
- 空間的な不連続性:オブジェクトが空間的に成立しない関係で存在する
構造から考えるアプローチ
アニメーションさせるオブジェクトについて、次の点を理解します。
- 基本形状は何か(球、円柱、ボックス、またはそれらの組み合わせ)
- 重心はどこにあるか
- 3D空間の中でどのように存在しているか
- 動きの間に構造がどのように変化するか
この考え方により、立体感が不自然になるのを防げます。
デジタルにおける立体感の手法
変形の原点:オブジェクトの論理的な重心に合ったピボットポイントを設定します パース変形:2D の近似ではなく、真の 3D 変形を使用します Z インデックスの管理:アニメーション全体で一貫した奥行きのレイヤーを保ちます 影のアニメーション:オブジェクトの位置に合わせて影を移動・拡大縮小します 視差の速度:動きによって一貫した奥行きの知覚を保ちます
接線の罠
接線には注意が必要です。これは、エッジが意図せず重なり合い、奥行きの知覚を損なう現象です。動きのある場面では、アニメーション全体を通じて、重なり合う要素の空間的な間隔を明確に保つ必要があります。
実装の指針
アニメーションを付ける前に、オブジェクトの 3D 形状と原点を定義します。アニメーション中は定期的に、これが空間に存在する立体物として感じられるかを確認します。2D の簡易的な手法で近似する前に、真の 3D 変形で回転をテストします。動きが「平坦」または「不自然」に感じられる場合は、スケールの不整合、パースの崩れ、重さのない動きなど、立体描画の原則に反していないか確認します。