2d-character-rig-animation

2D キャラクターリグアニメーション

キャラクターデザインが完成し、承認済みのモデルシート／参考シートがそろった後に、このスキルを使用します。デザインを再利用可能な演技システムに変換し、各パーツのつながりを保ち、モデルから外れないポーズを実現し、表情の状態を明確に伝え、さまざまなショットやランタイムでアニメーションを再現できるようにします。

リグには、SVG、レイヤー化されたベクターアート、ラスターの切り抜き、ボーンとメッシュで構成されたパペット、またはそれらのハイブリッドを使用できます。ランタイムの API は異なりますが、制作上の取り決めは変わりません。

対象範囲

このスキルが担当するもの：

• パーツの分解、描画順、階層構造、ピボット、コントロール、制約；
• バインド／レストポーズと座標の規約；
• 剛体切り抜きと変形メッシュの選択；
• 再利用可能な全身ポーズ、表情の状態、口形素、ジェスチャー、サイクル；
• 承認済みキャラクターを使った演技と振り付け；
• 決定論的なアニメーションの受け渡しと、リグ固有の QA；
• リグアセットの権利、肖像の使用制限、来歴、納品時の注意事項。

このスキルが担当しないもの：

• キャラクターのビジュアルアイデンティティ、衣装の一貫性、参考画像の生成方針；
• 3D アーマチュア、ボリューム変形、DCC 固有のリギング；
• モーションキャプチャーデータの収録、クリーンアップ、リターゲティング；
• 音声演技、リップシンクプロバイダーの選定、最終コンポジット；
• リグの不具合を隠すための承認済みキャラクターの再デザイン。

エビデンスの扱い

• 文書化された事実： SVG／W3C、ブラウザー、アクセシビリティ、またはその他の権威ある技術文書に記載された動作。
• 制作上のヒューリスティック： デザインやランタイムに合わせて調整が必要な、アニメーションやリギングの実践方法。
• 実測による観察： 実際のリグのプレビュー、フレームサンプル、レンダー、または納品用クロップから測定した動作。

技術資料は2026-07-12に確認しました。トランスフォーム、クリッピング、メッシュ変形、IK、エクスポートの動作はランタイムによって異なり、変更される可能性があります。リグのアーキテクチャを確定する前に、選定したレンダラーとバージョンで動作を検証してください。

リグの取り決めを確定する

次のものを収集または作成します。

• 承認済みの三面図／モデルシートとキャラクターバイブル；
• 正確な納品物、アスペクト比、解像度、fps、尺、ランタイム候補；
• 必要な視点、動作、感情の幅、台詞の言語、小道具、インタラクション；
• リグに剛体パーツ、変形メッシュ、差し替えパーツ、またはハイブリッドのどれを使うか；
• 手足の曲げ、リーチ、スクワッシュ／ストレッチ、頭部の回転、遠近法の誇張の最大範囲；
• ボディと顔のコントロール一覧；
• 命名、座標、単位、ピボット、トランスフォームの順序に関する規則；
• 原画、演者の肖像、小道具、ブランドの権利；
• 決定論的なタイムライン形式とレンダラーへの受け渡し方法；
• 承認用ポーズとテスト動作。

承認済みのデザインを、目立った損傷なしに分離または変形できない場合は、具体的な制作上の制約を示してデザイン工程に差し戻します。解剖、衣装、ロゴの配置、障害の表現、特徴的な要素を、黙って変更してはいけません。

動きの役割に応じてアートを分解する

独立した動き、オクルージョン、変形、差し替え、取り付けに必要な箇所でキャラクターを分割します。パーツが少なすぎると演技の幅が制限されます。多すぎると継ぎ目や描画順の問題、保守コストが増えます。

典型的な役割：

character-root
+- shadow
+- rear-accessories
+- pelvis
|  +- torso-chain
|  |  +- chest
|  |  |  +- neck
|  |  |  |  `- head
|  |  |  +- arm-left
|  |  |  `- arm-right
|  |  `- clothing-overlap
|  +- leg-left
|  `- leg-right
+- front-accessories
`- fx-and-contact-guides

顔には、眉、まぶた、瞳、口の差し替え／変形、頬、必要に応じて頭部の回転に対応する要素のために、入れ子のコントロールを設定できます。

制作上のヒューリスティック：

• 自然な関節、縫い目、髪の房、衣服のレイヤー、硬質アクセサリーで分割します。
• 回転時に隙間ができないよう、見える輪郭よりも外側に重なりを持たせます。
• 想定する再生サイズで、シルエットがきれいに保たれるようにします。
• 左右の名前はキャラクター自身の視点に基づけ、その規約を文書化します。
• ランタイムが対応する場合は、描画順とトランスフォーム階層を分けます。
• エクスポート後も維持できる安定した ASCII の ID を使い、レイヤー番号だけに基づく名前は避けます。

座標系と SVG の構造

ドキュメントに記載された事実： SVG ではビューポートとユーザー座標系を定義します。viewBox は指定された矩形をビューポートにマッピングし、要素やグループにはトランスフォームを適用できます。ネストされたグループのトランスフォームは階層を通じて合成されます。

SVG リグでは、次の点に注意してください。

• 意図を明確にしたルート viewBox を 1 つ設定し、キャラクターのスケールと原点を記録します。
• 各回転グループを、制作時に設定したピボットを中心に配置します。
• デザインツール由来の説明のないトランスフォームと、実行時のトランスフォームを混在させないようにします。
• 編集可能なピボットや階層を損なわないトランスフォームだけをフラット化します。
• 最適化の際は、クリッピングパス、マスク、グラデーション、ID、参照を保持します。
• 1 つのドキュメントで複数のキャラクターインスタンスを共有する可能性がある場合は、ID のスコープを限定します。
• デザインツールのプレビューだけでなく、書き出した SVG もテストします。

ローカルトランスフォームが既知の、中立的なルートポーズを使用します。実行環境でトランスフォームの原点を推測できる場合でも、ピボットはリグマニフェストに数値で保存してください。ブラウザーや書き出し時の動作は異なる場合があります。

剛体パーツ、差し替えパーツ、変形パーツを選ぶ

剛体のカットアウトパーツ

グラフィック、メカニカル、紙人形、またはリミテッドアニメーションのスタイルに最適です。関節を中心に、パーツ全体を回転・移動・拡大縮小します。重ね描きやオクルージョンレイヤーで継ぎ目を目立たなくします。

差し替えパーツ

手の形、口のポーズ、目の形、パースの異なる向き、プロップなど、個別の形状に最適です。相互に排他的なグループと遷移ルールを定義します。実際の中割りデザインが存在しない限り、差し替えはトゥイーンではありません。

メッシュまたはパスの変形

剛体パーツを曲げると、肘、胴体、布、尻尾、顔などに明らかな破綻が生じる箇所に最適です。制御の影響範囲と制限を定義し、極端なポーズをテストします。変形は局所的に保ちます。影響範囲が広すぎると、ゴムのような印象になり、ボリュームが失われます。

ハイブリッド

前腕は剛体、手は差し替え、胴体は変形、口は差し替え、髪はレイヤー状のチェーンにするなど、ハイブリッドが適していることもよくあります。キャラクター全体を 1 つの手法に当てはめるのではなく、視覚上の要件に応じて選びます。

階層とコントロールを構築する

各コントロールには、次の情報が必要です。

• 安定した ID と、人が読める名前。
• 親と、任意のビジュアルパーツとのバインド。
• ローカルピボットと静止トランスフォーム。
• 許容される移動、回転、拡大縮小、または差し替えの値。
• ハードリミットとソフトリミット。
• 推奨方向とニュートラル値。
• 描画順または表示状態への影響。
• テストポーズと既知の例外。

FK と IK の計画

親から子へ回転を伝え、アークをアーティストが制御したい場合は、前方運動学（FK）を使用します。対象は、背骨、頭、尻尾、髪、ゆったりとしたジェスチャーなどです。端点を固定する必要がある場合は、逆運動学（IK）を使用します。対象は、床についた足、机に置いた手、プロップを握る手などです。ハイブリッドの腕や脚のリグでモードを切り替える場合は、四肢が不自然に跳ねないよう、明示的なマッチ手順を設けてください。

IK の要件：

• ターゲットと、曲げ方向／ポール方向。
• チェーンの長さと到達範囲の制限。
• 完全に伸びきる直前のソフトな挙動。
• ストレッチのポリシー。
• ターゲットに到達できない場合のフォールバック。
• FK／IK のマッチポーズと、切り替えのキーフレーム。

特異点で、ソルバーが任意の肘や膝の方向を選ぶ状態にしてはいけません。

制作の語彙としてのポーズライブラリ

技術的な極端な状態だけでなく、演技の意図を表すポーズを作成します。

• ニュートラル／デフォルトと、呼吸を表すアイドル。
• 注目／傾聴。
• 肯定、否定、不確か、驚き、集中、およびキャラクター固有の感情状態。
• 手を開く／閉じる、指さす、提示する、持つ、手を伸ばす、接触するポーズ。
• 歩行が必要な場合は、歩行／走行／接地／パッシング／上昇／下降のキー。
• 座る、かがむ、振り向く、入る、退出する、プロップ固有のポーズ。
• 各関節と変形領域の安全性／極端な状態のテスト。

各ポーズの記録には、ボディコントロール、顔の状態、手／プロップの状態、ビューのバリエーション、静止に適しているかどうか、承認済みの遷移を含めます。ポーズライブラリで作業を効率化できるのは、キャラクター固有の演技を保てる場合に限られます。汎用的な絵文字風ポーズは、演技システムではありません。

顔のリグと会話状態

次の要素には個別のコントロールを用意します。

• 目線の方向と寄り目の度合い
• 上まぶた／下まぶたと目を閉じる動き
• 眉と左右差
• 口の開閉、口角、幅、丸み、および必要に応じた顎
• 頬、鼻、耳、アクセサリーの動き（任意）
• 頭の向きを変えるための差し替えパーツ

ビジームの数は、スタイル、言語、ショットサイズ、スケジュールに合わせます。汎用的な一覧を一律に指定しないでください。最終解像度で見た目が似ている音素はまとめつつ、明瞭さに必要な閉鎖形と特徴的な形は残します。セットが実際にテスト済みの言語を記録してください。

セリフの演出：

• 口の形は、任意のフレームごとのサイクルではなく、タイミングを合わせた発話に従わせます。
• 両唇音で必要な完全な閉鎖を保ちます。
• 先行または遅延させるのは、意図的なスタイル上の判断としてのみ行います。
• まばたき、視線、眉、頭の動き、ジェスチャーは、ノイズではなく演技として加えます。
• 音節ごとにすべてのコントロールを変化させないでください。
• カットが速くても、読み取りやすい顔のポーズを保ちます。

自動文字起こしだけから感情や性格を推測しないでください。承認済みの演技指示を使用します。

コントロールではなく演技をアニメーションする

各ビートを次の要素で計画します。

• 目的と感情の変化
• セリフ／動作のタイミング
• 主なポーズとシルエット
• 予備動作
• 主動作と接触
• 落ち着き、オーバーラップ、保持
• 視線と手の意図
• カメラ／クロップとの関係

アニメーション制作の経験則：

• 手足を磨き込む前に、動作線とシルエットをポージングします。
• 重心／ルートを、体重移動と接触に合わせて一貫して動かします。
• 耳、髪、衣服、尻尾などの二次的な連動要素は、制御された遅れを伴って主動作に追従させます。
• スタイルが意図的に機械的でない限り、有機的な関節には弧を描く動きを用います。
• 静止も活用します。具体的なポーズを維持するほうが、アイドル動作を絶えず続けるより伝わりやすい場合があります。
• スカッシュ／ストレッチは、造形と素材が許す範囲でのみ適用します。スタイルで明示されていない限り、意図したボリュームを保ちます。

サイクルと接触

サイクルでは、最初と最後のフレームの厳密な整合性、接地フェーズ、ルートの移動、定位置での動きか移動を伴う動きかを定義します。

歩行サイクルの QA：

• 接地中、足は地面に対して固定されたままにします。
• ルートの移動量を歩幅に合わせます。
• 膝と肘は、意図した曲がる方向を保ちます。
• 手足の長さが突然変化しないようにします。
• 胴体／腰の逆方向の動きで体重を支えます。
• 最初と最後のフレームによって重複フレームの引っかかりが生じないようにします。
• アクセサリーが切り替わりなくループするようにします。

オブジェクトとの接触では、どのシステムがアタッチメントを管理するかを決めます。オフセットが意図的で文書化されている場合を除き、プロップを手にペアレント化しながら、独立してアニメーションしないでください。

決定論的なタイムラインの受け渡し

アニメーションは、時刻を指定して取得できる明示的な状態として納品します。レンダラーは、フレームを逆順または順不同で要求する場合があります。

推奨するショット記録：

{
  "shot_id": "explain-step-two",
  "fps": 30,
  "start_frame": 0,
  "end_frame": 179,
  "rig_version": "presenter-rig-03",
  "view": "three-quarter-right",
  "tracks": {
    "root.position": [[0, [0, 0]], [72, [8, -3]], [179, [0, 0]]],
    "arm_right.rotation": [[42, 4], [64, 28], [110, 28], [142, 6]],
    "mouth.pose": [[51, "M"], [55, "AH"], [60, "rest"]]
  }
}

これはスキーマの例であり、リポジトリの必須要件ではありません。

受け渡しのルール：

• フレーム番号または厳密な有理数によるタイミングを一貫して使用します。
• 度数法かラジアンか、および座標の向きを明記します。
• セグメントごとに補間／イージングを記録します。
• 最終レンダリングでは、シードを指定しないランダムなまばたき／アイドルのタイミングを避けます。
• 表示状態や差し替えの変更を明示します。
• 同じフレームから同じ状態が生成されることを、すべてのソルバーで保証します。
• 前方向、後方向、最初、最後、および単独のフレームをテストします。

アスペクト比とクロップのバリエーション

ひとつの演技を、すべてのキャンバスにそのまま縮尺変更して適用しないでください。

• 手、視線の目標、プロップ、キャプション、接地箇所を保護しながら、ルートとカメラ／クロップを調整します。
• 腕を大きく広げたポーズが縦長フレームからはみ出る場合は、代替ジェスチャーを作成します。
• パースのある向きの変化を平面化したり反転したりせず、承認済みの視点バリエーションを使用します。
• 衣装、障害、文字、傷跡、プロップのデザイン上、反転が禁止されている場合は、キャラクターの左右の連続性を保ちます。
• 最終的な実再生サイズで、シルエットと顔の読み取りやすさを確認します。

リグのQA

ショット制作の前に、標準的なテスト一式でリグをテストします。

1. バインドポーズ／レストポーズの往復；
2. ジョイントの可動限界と、チェーン全体の伸縮；
3. 適切な場合は、左右反転／対称ポーズ；
4. 手と足の接地；
5. FK／IK のマッチングと切り替え；
6. 顔の状態とビズィームの全シート；
7. まばたき／視線の可動限界；
8. 歩行／待機／アクションループの境界；
9. 正面、側面、承認済みのターンバリエーション；
10. すべての納品用クロップと、クリーンレンダーの再実行。

不具合を分類します。

• 継ぎ目／隙間： 重なりやピボットによって背景が見えてしまいます。
• ポップ： トランスフォーム、差し替え、描画順、ソルバーにフレーム単位の不連続が生じます。
• スライド： 接地した状態であるはずの接地点がずれていきます。
• 潰れ： 変形によって意図したボリュームやシルエットが失われます。
• 反転： 肘／膝やパスが予期せず反対側に移ります。
• ドリフト： プロポーション、顔の造形、またはプロップの配置が承認済みの許容範囲を外れます。
• オクルージョンエラー： 前後に表示されるべきレイヤーが間違っています。
• ループの引っかかり： 境界のフレームが重複している、または一致していません。

フレーム、コントロール値、原因、修正内容、再テストの結果を記録します。根本原因がリグにある場合は、ショットごとに修正しないでください。

アクセシビリティと安全性

文書化された事実： WCAG 2.2 SC 2.3.1 では、一般的な点滅または赤色点滅のしきい値を下回る場合を除き、1 秒間に 3 回を超える点滅を制限しています。まばたき、目を閉じる動作、通常のポーズ変更は、それだけで点滅に該当するわけではありませんが、高コントラストの画面全体にわたるまぶた、背景、FX、発光の変化は該当することがあります。

反復する揺れ、急速なズーム、回転、画面の広い範囲にわたる動きについても確認してください。インタラクティブなキャラクターの表示面は、該当する場合、動きを抑える設定や操作に対応する必要があります。事前に収録した出力には、より穏やかなバージョンを別途レンダリングする必要がある場合があります。

SVG の ID や ARIA ラベルを付けても、リグ内部のすべてのパーツが支援技術にとって意味のあるものになるわけではありません。インタラクティブな納品では、適切なコンテナー階層で、キャラクター／アクションのセマンティクスを公開し、必要に応じて純粋に装飾的な実装パーツを非表示にします。動画では、字幕、トランスクリプト、視覚のみで伝えられる重要な動作の説明を用意してください。

権利、同意、来歴

以下を個別に管理します。

• キャラクター／IP の権利者と許可された用途；
• 原画制作者、リギング担当者、アニメーション担当者；
• 演者の肖像、音声、または動作を参考にすることへの同意；
• 派生アセット、ブラシ、フォント、ロゴ、プロップ；
• ランタイム／ライブラリのライセンス；
• 変更および承認の履歴。

リグのライセンスはキャラクターの権利を付与するものではなく、キャラクターの権利が演者の肖像や音声の権利まで自動的に付与するわけでもありません。納品記録に帰属表示と制限事項を残してください。ブランドのマスコット、ライセンスキャラクター、実在人物の肖像、未成年者、文化的配慮が必要なデザイン、合成による複製については、適切な承認を得るためにエスカレーションしてください。

納品パッケージ

以下を納品します。

• 編集可能なソースアートとランタイム対応アセット；
• 階層、ピボット、制限、ビューのバリエーション、コントロール定義を含むリグのマニフェスト；
• バインドポーズ／レストポーズ、および承認済みのモデル／ターンアラウンドのリファレンス；
• ポーズ、ジェスチャー、サイクル、顔、ビズィームのライブラリ；
• タイミング規約を含むアニメーショントラックまたはショットデータ；
• ランタイム／バージョン／エクスポートに関する注記；
• リグのテストレンダーとQAレポート；
• 権利／来歴の記録と必要な通知；
• 既知の制限、禁止ポーズ、修正ガイド。

例1：四足マスコットのループセット

これは完全な例であり、必須の定型ではありません。

目的： ブラウザーキャンペーン向けに、待機、歩行、座る、警戒、尻尾を振る動きを備えた、再利用可能なフラットベクターの犬のマスコットを作成します。

制約： 承認済みの側面ビューと斜め前ビュー。出力は30 fps。脚にメッシュ変形を使用しません。尻尾には3セグメントのチェーンを使用できます。首輪のロゴは決して反転してはなりません。ループは1:1と9:16の両方で動作する必要があります。

リグの計画： 骨盤をルートにします。胴体／胸／頭はFKチェーンにします。手前と奥の脚はそれぞれ分け、二ボーンコントロールと足のターゲットを設定します。尻尾は3つのグループ、耳はチェーンにします。目の差し替えを用意し、口は閉じた状態／開いた状態／パンティングの状態を作ります。首輪／ロゴは、固定された描画順で分けます。

アニメーションの計画： 足の接地ターゲットと一致するルートの移動を使った、4ポーズ構成の歩行にします。待機では、胸のわずかな呼吸と、タイミングをずらした耳／尻尾の余韻を使います。警戒ポーズでは、頭と耳を先行させ、その後に胸を動かします。座る動きはキーで作成したアクションとし、IKの崩れで表現しません。

QA： 接地フレームを重ねて確認します。尻尾と胴体の衝突をテストします。手前と奥の脚の描画順を確認します。ループの最初と最後の状態をチェックします。すべてのビューで首輪のロゴの向きを検証します。フレームを単独で書き出し、逆順で確認します。

期待される結果： 安定したシルエット、足の滑りがないこと、腰や肩に隙間がないこと、モバイルサイズでも状態が判別できること、速度範囲を文書化した再利用可能なループが得られます。

よくある失敗： 奥側の脚が手前に交差する、尻尾に継ぎ目ができる、ルートの移動が歩幅と合わない、目の差し替えで急な変化が起きる、別ビューでロゴが反転する。

バリエーション： ペーパーカット風にする場合は、関節ピンを意図的に見せます。見た目の方向性が承認された後にのみ、隠れた重なり用の絵を削除します。

例2：座って説明するプレゼンター

これは完全な例であり、必須の定型ではありません。

目的： セリフ、2つの指差しジェスチャー、タブレットへの接触を含む45秒の技術解説向けに、座ったプレゼンターをアニメーション化し、16:9／9:16で出力します。

制約： 承認済みの斜め前ビュー。上半身を優先します。ナレーションのタイムスタンプは正確に合わせます。6言語へのローカライズを計画します。手はタブレットと図に接触する必要があります。落ち着いたエンタープライズ調にします。

リグの計画： 骨盤／ルートと、胴体コントロールを3つ設定します。首／頭、視線ターゲット、独立したまぶた／眉、テスト済みの言語に適したビジームセットを用意します。マッチコントロール付きのFK／IKアーム、差し替え用の手、タブレットのアタッチメントターゲット、限定的な下半身コントロール、前腕の描画順切り替えを設定します。

演技の計画： まず聞いているポーズを作ります。最初の指差しに先立ち、視線を向けてから手を動かします。指先を図に固定したまま、胴体を落ち着かせます。明確な中間ポーズを経由して戻します。対比を示すセリフでは、左右非対称の眉と視線を使います。最後は開いた手で要約するポーズを保ちます。ローカライズしたセリフでは演技の拍を再利用しますが、演技全体を無造作に時間伸縮させるのではなく、口と選択したジェスチャーのタイミングを調整します。

QA： アームのリーチとIKの曲がり、手とタブレットの接続、口の閉じ具合と口角、両目の寄り具合、眉のクリッピング、描画順の切り替え、キャプションとの重なり、縦型用ジェスチャーへの差し替え、フレーム精度を保った再レンダリングを確認します。

期待される結果： キャラクターがコントロールを順に切り替えるのではなく、考えながら説明しているように見えます。接触は安定し、ローカライズ時にはリグを作り直すことなく、セリフのタイミングを変更できます。

よくある失敗： 伸ばしきる直前に肘が反転する、タブレット上で手が滑る、音節ごとに頭が動く、対象言語に適さないビジームを使ってしまう、縦型の切り抜きで指差す手が隠れる。

バリエーション： 再利用可能な変形よりも厳密な再現性を優先する場合は、2つの主要なジェスチャーを、承認済みのポーズ間で切り替える手と腕の作画に置き換え、顔のリグは維持します。

参考資料

2026-07-12 に確認した公式および信頼できる情報源：

• W3C SVG 2、座標系、変換、viewBox：https://www.w3.org/TR/SVG2/coords.html
• MDN SVG チュートリアルおよび transform リファレンス：https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial および https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/transform
• MDN viewBox：https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/viewBox
• W3C WCAG 2.2、3回の閃光または閾値以下：https://www.w3.org/WAI/WCAG22/Understanding/three-flashes-or-below-threshold.html
• W3C WCAG 2.2、インタラクションによるアニメーション：https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html
• Adobe、アニメーションの原則の概要：https://www.adobe.com/creativecloud/animation/discover/principles-of-animation.html
• ScreenSkills、アニメーション制作の職種とスキル：https://www.screenskills.com/job-profiles/browse/animation/