もっと読む

アニメチーム ポートフォリオのススメ~構成とイラスト~

こんにちは!2DCGプラネットスタジオ アニメーションチームのKです。今回は、2Dアニメーション領域での就職を目指す方に向けて、「ポートフォリオの構成」と「イラスト作品」についてお話しします。…

続きを読む

もっと読む

2年目デザイナーが東京本社で修行!?感想レポ

こんにちは!2DCGプラネットスタジオ、デザイナーのオハシです。突然ですが、皆さんは「出張」経験されたことはありますか?なんと私オハシ、新卒2年目にして初の出張─本社で約2か月…

続きを読む

もっと読む

【初心者向け】現役プロに聞いたキャラクターデザインのコツ!

こんにちは。ブログ運営担当のARTチーム石川です。4月を迎え暖かい陽気が続いて過ごしやすい時期になりました。皆様いかがお過ごしでしょうか。私は花粉症がひどいのでティッシュが手放せない日々を送っ…

続きを読む

もっと読む

アニメチーム ポートフォリオのススメ~Spine~

こんにちは!2DCGプラネットスタジオ アニメチームのKです。今回は、2Dアニメーション領域での就職を目指す方に向けて「Spine」でのポートフォリオについてお話します。押さえてお…

続きを読む

もっと読む

アニメチーム ポートフォリオのススメ~書類選考と中途採用~

こんにちは!2DCGプラネットスタジオ アニメーションチームのKです。2Dアニメーション領域での就職を目指す方に向けての記事の第四弾です。ポートフォリオのススメシリーズの最終回…

続きを読む

もっと読む

VTuberモデルポートフォリオ「プラネちゃん」のご紹介

こんにちは!2DCGプラネットスタジオ アニメチームのKです。今回はプラネットスタジオのキャラクター「プラネちゃん」のVTuberモデルをご紹介します!プラネットスタジオで制作…

続きを読む

もっと読む

【初心者向け】デジタル線画のコツをご紹介!

こんにちは。ブログ運営担当ARTチームの石川です。蒸し暑い日が続いていますが皆様いかがお過ごしでしょうか。じめじめとした気候に体調など崩されないようにご注意ください。…

続きを読む

もっと読む

ARTチームのADとは~イラストレーターのキャリアアップについて聞いてみた~

こんにちは、ARTチームのアダチです!今回のテーマは「AD(アートディレクター)」です!イラストレーターとして経験を積むと、必ず一度は耳にする「AD」という役職。魅力的に感じる…

続きを読む

もっと読む

Live2D・Spineで作るアニメーションの12原則の話 ①概要

こんにちは。アニメチームのKです。今回は「アニメーションの12原則」と「Live2DやSpineなどのツールアニメーション」を繋げる知識についてご紹介します。ポートフォリオのススメシリ…

続きを読む

もっと読む

【初心者向け】ゲームの「UI」デザインとは?

はじめまして!ブログ運営担当・デザインチームの笈田です。皆さんは「UI」という言葉をご存知でしょうか?デザインのことを少し知っている方なら、もしかすると聞いたことのある言葉かと思います…

続きを読む

アニメチーム ポートフォリオのススメ~構成とイラスト~

2年目デザイナーが東京本社で修行!?感想レポ

【初心者向け】現役プロに聞いたキャラクターデザインのコツ!

アニメチーム ポートフォリオのススメ~Spine~

アニメチーム ポートフォリオのススメ~書類選考と中途採用~

VTuberモデルポートフォリオ「プラネちゃん」のご紹介

【初心者向け】デジタル線画のコツをご紹介!

ARTチームのADとは~イラストレーターのキャリアアップにつ...

Live2D・Spineで作るアニメーションの12原則の話 ...

【初心者向け】ゲームの「UI」デザインとは?

Live2D・Spineで作るアニメーションの12原則の話 ①概要

こんにちは。アニメチームのKです。

今回は「アニメーションの12原則」と「Live2DやSpineなどのツールアニメーション」を繋げる知識についてご紹介します。

ポートフォリオのススメシリーズの記事でもアニメーションの12原則は大切とお話しましたが、

実践として活用できる知識をお伝えしてまいりますのでお手元で是非試してみてください!

ポートフォリオのススメ-2Dアニメーション-シリーズはこちら

 

補足

「アニメーションの12原則」にはグラフを扱う際に関係のない要素も含まれています。

本記事ではアニメーションの12原則と、グラフアニメーションの前提知識を解説します。

第二回で具体的なアニメーションの12原則とグラフの作り方の解説を行い、

第三回ではグラフには関係ないものの、アニメーションを制作するうえで重要な残りの原則をご紹介していきます。

 

アニメーションの12原則とは?

アニメーションについて学び始めると必ずと言っていいほど見かける「アニメーションの12原則」

これはウォルト・ディズニー・スタジオのアニメーター2名によって提唱された、アニメーション制作における基本原則です。

その後、アニメーションの13の原則や、アニメーションの28の原則などにアップデートされたりしています。

<アニメーションの12原則>

  1. スクアッシュ&ストレッチ -Squash and Stretch
  2. 予備動作 -Anticipation
  3. 演出 -Staging
  4. ストレートアヘッド・ポーズトゥポーズ -Straight Ahead Action and Pose to Pose
  5. フォロースルー・オーバーラップ -Follow Through and Overlapping Action
  6. スローイン・スローアウト -Slow In and Slow Out
  7. 運動曲線 -Arc
  8. 副次アクション -Secondary Action
  9. タイミング -Timing
  10. 誇張 -Exaggeration
  11. 立体感のある絵 -Solid drawing
  12. アピール -Appeal

 

アニメーションの12原則は下記のサイト・書籍から引用しています。

【アニメーションの12の原則】 命を吹き込むアニメーションの基礎を学ぶ!

ディズニーアニメーション 生命を吹き込む魔法 ― The Illusion of Life ―

 

なぜアニメーションの12原則が基礎として重要視されるのか?

過去に公開したポートフォリオの記事でも、アニメーションの12原則が押さえられているかチェックしているとお話させていただきました。

実際にアニメーション制作の現場にいると、

アニメーションの12原則を学ぶよりも先に実際に手を動かして自然と出来るようになった…という方も結構いらっしゃいます。

それでもアニメーションの12原則は大切、という声があるのも事実。

 

アニメーション制作の現場では、一人で完結させるのではなく、

複数人で認識を揃えながら制作を行うケースが多いです。

そこで共通言語となってくれるのがアニメーションの12原則を学ぶメリットの1つなのだと思います。

これからアニメーション制作の知識を身に付けたい方はもちろん、

会社やチームとしてアニメーションを作りたい、という方は学んでおいて損のない知識になるかと思います!

 

Live2D・Spineとアニメーションの12原則の関係

Live2DやSpineでもアニメーションの12原則が活用できます。

ツールの特性上、グラフアニメーションを使用し再現していくため、

今回の記事ではアニメーションの12原則とグラフアニメーションを繋げるハウツーをご紹介。

グラフの形がアニメーションの動きとリンクするとどんどん楽しくなっていきますので、

是非読みながら試していただけたらと思います。

 

グラフアニメーションとは?

グラフアニメーションはカーブアニメーションとも呼びますが、

3DCGや2DCGでアニメーションを制作する際に用いられます。

一連のキーフレームをカーブで繋ぐことでタイミングをコントロールしつつ、シームレスなアニメーションを制作する事ができます。

「Live2Dのアニメーションモード」や「SpineのANIMATEモード(アニメ化)」画面で使用できる、

「グラフエディタ」を使用して作るアニメーションを本記事では解説していきます。

 

カーブの形と使い方

カーブの形と活用例をご紹介します!

カーブの形は3種類です。

ベジェ・リニア・ステップの3つの違いを知っておくと、作品に応じた使い分けが出来るようになります。

1例として棒人間にバイバイの動きをさせたモーションを、それぞれのカーブで再生したものを並べてみました。

ステップカーブは紙芝居の様に画像を切り替えたような見た目になりわかりやすいですね。

リニアとベジェはパッと見は似ているのですが、特に注目していただきたいのが降っている右腕の動きです。

右・左・右…と動きの向きが変わる際の滑らかさに大きな違いが出ているのが見て取れますでしょうか。

リニアとベジェもグラフの形状の違いがモーションに出ますので、それぞれの違いを解説していきます。

 

リニアカーブ

直線的なグラフが特徴的なのがリニアカーブです。

機械などロボットのような動きや、エフェクトなど無機物の動きに使用されることが多いカーブです。

ベジェカーブの動画と見比べて見ていただくと、特に動きの向きが変わる際の滑らかさが違うのが見て取れるかと思います。

リニアカーブは、キーとキーの間を「等速」で再生してくれるのが特徴です。

入り抜きで速度調整がかかるベジェとは異なり、同じ速度で動き続ける点が機械やエフェクトの表現に使いやすい所ですね。

もちろん、表現によってはリニア以外のカーブが適している場合もあります。

制作の際はカーブの形を変えてみたり、リファレンスを観察するなどで適したカーブを探してみてください。

 

ベジェカーブ

滑らかな波の形が特徴的なのがベジェカーブです。

生き物のアニメーションの制作では、ベジェカーブを使用する事がほとんどです。

アニメーションの12原則の中では「スローイン・スローアウト -Slow In and Slow Out」がまさにベジェカーブで表現する領域です。

動き出しはゆっくり、中ほどで早くなり、動き終わりもゆっくり止まる動きがキャラクターの動きを表現するのに適しています。

タイミング調整でタメツメもつけられるので、まずは生き物はベジェカーブで作る、を覚えてみてください。

 

ステップカーブ

階段状のグラフが特徴的なのがステップカーブです。

ステップカーブを使用すると、瞬時の素材切り替えや、合間のフレームを飛ばすことができます。

動きの速いもので、特に目に留まらないほどの速さを表現する際に重宝します。

ステップカーブを使った素材の切り替えは、適切なタイミングで行うと違和感なく自然なモーションに仕上げる事が出来ます。

素材を切り替えた方が効率的に制作できるときにも便利なカーブです。

 

まとめ

今回は「アニメーションの12原則」と「グラフアニメーション」を紐づける前提知識についてご紹介しました!

実制作だけでなく、複数人で制作する際の共通言語としても便利な点も伝わったかと思います。

次回はアニメーションの実例も合わせて実践的な内容をご紹介します。

続きはこちらの記事をご覧ください。

アニメーションの12原則シリーズ

Live2D・Spineで作るアニメーションの12原則の話 ②カーブを使いこなそう

Live2D・Spineのアニメーションの12原則の話 ③カーブだけじゃないアニメーションの魅力

 

一緒に働きませんか?

2DCGプラネットスタジオ アニメーションチームでは、現在仲間を募集中です!
募集要項や応募方法については、以下のリンクからご確認ください。

https://2d-studio.crdg.jp/lp/entry/

K

フリーランスとしてVtuberのLive2D制作を経験後、2023年にクリーク・アンド・リバー社に入社。ゲーム・Vtuber領域のディレクターとして制作・監修業務を行っている。

投稿者記事

  1. もっと読む

    Live2D・Spineで作るアニメーションの12原則の話 ②カーブを使いこなそう

    2026-03-05

  2. もっと読む

    Live2D・Spineのアニメーションの12原則の話 ③カーブだけじゃないアニメーションの魅力

    2026-03-05

  3. もっと読む

    アニメチームポートフォリオ 「いるるのお部屋」背景アニメーション

    2026-01-07

  4. もっと読む

    VTuberモデルポートフォリオ「プラネちゃん」のご紹介

    2026-01-07

関連記事

  1. もっと読む

    【初心者向け】モーション・エフェクト制作時に迷ったときの解決ポイント!

    2021-12-01

  2. もっと読む

    Live2D・Spineのアニメーションの12原則の話 ③カーブだけじゃないアニメーションの魅力

    2026-03-05

  3. もっと読む

    こんなに動く!! Live2Dを使用した作品をご紹介!

    2022-03-17

  4. もっと読む

    【入社エピソード】Live2Dとの運命の出会い!~建築業界からゲーム業界へ~

    2024-05-08

採用情報

ABOUT

2DCG PlaNetStudio
最高のクリエイティブ制作・クリエイターの キャリアデザインができるスタジオを目指しています。

運営:
2DCG PlaNetStudio

所属:
C&R Creative Studios

チーム別記事一覧

ページ上部へ戻る