もっと読む

【就活生向け】新卒入社デザイナーに聞く「ゲーム業界のポートフォリオ制作」ポイント

はじめまして!ブログ運用担当、アートチームの石原です。就活って日々の授業に始まり、エントリーシートの制作にポートフォリオ制作や面接とやることが多くて悩みが尽きないですよね。…

続きを読む

もっと読む

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

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

続きを読む

もっと読む

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

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

続きを読む

もっと読む

【Spine】2Dアニメーションを2.5次元にする方法

はじめまして! 2DCGプラネットスタジオ アニメーションチームの馬場です。  皆様Spineというものをご存じでしょうか?Spineとはイラストを素材にアニメーションを作るソフト…

続きを読む

もっと読む

【現役UIデザイナーが語る!】UIデザイナーになる前となった後

今回は「UIデザイナーになる前と、なった後で変わったこと」をテーマに、現場で活躍しているメンバーにインタビューしました。UIという言葉は聞いたことがあるけれど、「実際にはどんな仕事をし…

続きを読む

もっと読む

アニメーション ポートフォリオのススメ~Spine~

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

続きを読む

もっと読む

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

こんにちは!2DCGプラネットスタジオ アニメチームのKです。今回は「背景イラストのLive2Dアニメーション」作品をご紹介します!オリジナルキャラクター「星奈いるる」をテーマにしたお…

続きを読む

もっと読む

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

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

続きを読む

もっと読む

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

アニメチームのKです!今回はアニメーションの12原則とグラフアニメーションの話の第二回。前回は前提知識のご紹介をさせていただきました。Live2D・Spineのアニメー…

続きを読む

もっと読む

アニメーション ポートフォリオのススメ~構成とイラスト~

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

続きを読む

【就活生向け】新卒入社デザイナーに聞く「ゲーム業界のポートフ...

アニメーション ポートフォリオのススメ~書類選考と中途採用~...

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

【Spine】2Dアニメーションを2.5次元にする方法

【現役UIデザイナーが語る!】UIデザイナーになる前となった...

アニメーション ポートフォリオのススメ~Spine~

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

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

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

アニメーション ポートフォリオのススメ~構成とイラスト~

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

 

はじめまして。
クリーク・アンド・リバー社2DCGプラネットスタジオ
アニメーションチームの吉村です。

私は主にアニメーション、2Dエフェクトの制作を行っております。
お仕事では基本的にご依頼元からの指示書通りに制作していきますが、
プロジェクトによっては、自身で考えてアニメーションの一部となるモーションまたはエフェクト制作を行う必要があります。

そこで今回は私がモーション・エフェクト制作などで
行き詰った時やアイデアが欲しいと思った時に利用するサイトをご紹介させていただきます。

 

皆様はモーションやエフェクト制作に挑戦しようと思ったとき、または制作する上で、

・色々エフェクトがあるけれど、どの制作方法を使えば良いか迷う・わからない
・そもそも始めたばかりでどのような表現ができるのかわからない

といったようなことはありませんか?
そんな時におススメなのが、モーション周期表になります!

MOTION PERIODIC TABLE

https://foxcodex.html.xdomain.jp/index.html

モーション周期表とは?

https://foxcodex.html.xdomain.jp/About.html

モーション周期表とはモーショングラフィックスにおける基本要素を
元素記号表のようにルールをもとに並べられたものとなります。

このモーション周期表では、数多くあるエフェクトの中から基礎となる動きや表現が可視化されているので大変わかりやすく、
エフェクトをクリックするとどのように使用するのか作例と共に解説もされてあるので非常に重宝しております。

実例

実際に円が広がって消えるモーションを作りたい!
と思ったときにモーション周期表の中から似たようなものを探してみると、Line Weight(線幅)というのがあります。

Line Weight (線幅)
https://foxcodex.html.xdomain.jp/LineWeight.html

ページを開いてみると応用の一番上に探しているイメージ通りの円が広がって消えるモーションがありますね。

書いてある通りScale(拡縮)を合わせることで理想のモーションが制作できそうです。

Scale(拡縮)
https://foxcodex.html.xdomain.jp/Scale.html

これらをもとに実際にモーションを作ってみましょう!

  1. サイトに書いてある通り、線幅で太くなっていく円を作り、
  2. これに拡縮(Scale)を加えて、
  3. さらに良い感じになるように終わる時の線幅や色を変えるなど調整して完成です。

このように、作りたいモーションのイメージから似たようなエフェクトを探して組み合わせることで簡単に制作することができます。

After effectsの操作方法なども記載されており、各エフェクトでの作例も豊富ですのでモーション初心者の方でもこのサイトを見ながらなら制作に取り掛かりやすくなるかと思います。

 

いかがでしたでしょうか?
このモーション周期表はAfter effectsを使用したサイトとなっておりますが、
アニメーションツールで有名なLive2Dやspine、モーションやエフェクト、3Dなどで使用されるUnityなどでのアニメーション制作でも大変役に立つものですので、
アニメーションやエフェクトに興味がある方への制作を始める後押しや、クリエイターの皆様の制作の手助けになれれば幸いです!

関連記事

  1. もっと読む

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

    2026-03-05

  2. もっと読む

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

    2026-03-05

  3. もっと読む

    【Spine】2Dアニメーションを2.5次元にする方法

    2022-05-17

  4. もっと読む

    アニメーション ポートフォリオのススメ~Spine~

    2025-10-21

採用情報

ABOUT

C&R Creative Studiosに所属するPlanet Design Studio(プラネットデザインスタジオ)です。
最高のクリエイティブ制作・クリエイターの キャリアデザインができるスタジオを目指しています。

運営:
Planet Design Studio

所属:
C&R Creative Studios

ページ上部へ戻る