お絵かき図鑑
お絵かき図鑑

【モーショングラフィックス】Trangramの使い方。オンラインで簡単にアニメ制作

更新日:2025.05.02
Trangramの使い方アイキャッチ

イラストや図形に動きを加えて、アニメーション映像にしたい。

アニメーションやモーショングラフィックスを簡単に作れるアプリはないかな?

今回は、Webブラウザから使える無料アプリ、「Trangram」の使い方を紹介します。

業界最大手のお絵かき学習サイト!今なら無料お試し実施中

充実の講師・講座数!様々なプロのテクニックをものにして描ける自分になろう!
自宅で好きな時間に自分のペースで学習できるので空いた時間に学べる!
まずは7日間の無料お試しで体験しよう!

詳細はこちら >

業界最大手のお絵かき学習サイト!今なら無料お試し実施中

充実の講師・講座数!様々なプロのテクニックをものにして描ける自分になろう!
自宅で好きな時間に自分のペースで学習できるので空いた時間に学べる!
まずは7日間の無料お試しで体験しよう!

詳細はこちら >

「Trangram」でモーショングラフィックス 基本的な使い方

Trangramはどんなアプリ?

Trangramは、Webブラウザ上で動作する無料アプリです。

描いた絵や図形を動かす機能に特化しており、モーショングラフィックスの作品が簡単に作れます。

イラストを動かしたい方や動的なデザイン作品を作りたい方は、ぜひ試してみてください。

キャンバス画面の使い方

画面の見方 Trangramのキャンバス画面を表示しています。

メニューバー

画面上部のメニューバーからは、プロジェクトの読み込みや出力ができます。

整列や反転、レイヤーなどの汎用的な機能も、メニューバーの中に配置されています。

ツールバー

画面左にはツールバーがあります。

ツールバー内からツールを選択して、図形などのシェイプやテキストをキャンバスに作成していきます。

シェイプ詳細

画面右には、選択しているシェイプの詳細が表示されます。

シェイプの位置・サイズ・不透明度・合成モードなどを設定できます。

タイムライン

画面下には、タイムラインがあります。

タイムラインの欄は、シェイプをアニメーションさせる際に使用します。

シェイプを作る

ツールバー(オブジェクトビュー)

ツールバー(オブジェクトビュー)

ツールバーの中には、ドローツール(フリーハンド)・ラインツール・図形ツール・テキストツールなどが格納されています。

作りたいシェイプに合わせてツールを使い分けていきましょう。

ツールバーには二つのモードがあり、一番上にあるスイッチで切り替えられます。

現在はオブジェクトビューが表示されており、シェイプの全体の形を作るのに適しているモードです。

ツールバー(パスビュー)

ツールバー(パスビュー)

一番上のスイッチを切り替えると、パスビューのモードになります。

パスビューは、シェイプの細部を調整するのに適しているモードです。

パスビューに切り替えると、ベクターツール・回転ツール・スケールツールが新しく使えるようになります。

ベクターツールを使うと、図形の各頂点や曲線の傾きをコントロールできます。

シェイプを編集する

シェイプを編集する シェイプの枠線の大きさや不透明度、合成モードなどを調整したいときは、画面右にあるシェイプ詳細から入力をします。

Transform

サイズ・位置・角度・深度(シェイプの手前/奥)を調整できます。

Geometry

シェイプの形が数値で格納されています。

別のシェイプに変化するアニメーションを作る際に、Geometryを使用します。

Corner

シェイプを角丸にしたときのタイプを設定できます。

Stroke

シェイプの枠線のサイズや色を指定できます。

「Dash」に数値を入力すると、枠線が破線になります。

Shadow

シェイプの落ち影を設定できます。

Transparency

シェイプの合成モードと不透明度を設定できます。

アニメーションを作る

最初のキーフレームを作る

最初のキーフレーム

キャンバスにシェイプを作成すると、自動的にキーフレーム(青いダイヤマーク)が登録されます。

キーフレームには、シェイプの位置や形などの情報が記録されています。

現在は「0s」にスライダーがセットされているので、アニメーション開始時の時点で解説図のシェイプになる、ということを示しています。

次のキーフレームを作る

次のキーフレーム

タイムラインの青いスライダーを動かして、フレームを進めましょう。

その後、キャンバスのシェイプの形を変化させます。

シェイプの形を変化させると、キーフレームが自動的に登録されます。

現在は「1s」にスライダーがセットされているので、アニメーション1秒の時点で解説図のシェイプになる、ということを示しています。

間は自動的に補間される

間は自動的に補間される

タイムラインの再生ボタンを押すと、ボールが右に移動しながら縦長に伸びていくアニメーションが表示されます。

二つのキーフレームの間は、位置や大きさが自動的に補間されます。

プロジェクトを出力する

プロジェクトを出力する

プロジェクトが完成したら、ファイルを出力しましょう。

画面左上のメニューボタンを押して、「Export」を選択します。

出力できるファイル形式は、以下の通りです。

  • TG(Project)
  • SVG
  • GIF
  • MP4
  • JPG
  • PNG
  • WebM
  • WebP

後でプロジェクトを編集したい場合は、Trangramのプロジェクト形式の「TG」形式で出力します。

メニューボタンにある「Import」から、TG形式のファイルを読み込めます。

また、Trangramのアカウントを作成して、クラウドにバックアップすることも可能です。

動画で出力したい場合は、「MP4」や「GIF」形式を選択しましょう。

「Trangram」でモーショングラフィックス 応用的な使い方

複数のシェイプを組み合わせ、新しいシェイプを作る

シェイプを整列する手順

シェイプの整列 複数のシェイプを組み合わせて、新たにシェイプを作ることもできます。

今回は、二つのシェイプを重ねて中心を切り抜きたいので、位置をきれいに揃える必要があります。

画面上部の「Align」から、水平方向の中央揃えを選択します。

シェイプを整列した結果

シェイプを整列した結果 整列を実行すると、二つのシェイプが中央揃いになりました。

ブール演算の手順

ブール演算の手順

画面上部の「Boolean Operations」で、シェイプの組み合わせを行います。

切り抜きをしたいので、「Subtract」を選択します。

ブール演算の結果

ブール演算の結果

二つのシェイプが重なっている部分が切り抜かれました。

続いて、シェイプの上部の4つの頂点を選択して、丸いポインタをドラッグします。

角を丸くする

角を丸くする

シェイプ上の丸いポインタをドラッグすると、頂点を角丸にできます。

角を丸くして、ハート形を作っています。

別のシェイプにアニメーションする

二つのシェイプを作る

二つのシェイプを作る 円のシェイプを星のシェイプに変化させるアニメーションを作ります。

シェイプBのデータをコピーする

変形後シェイプのデータをコピーする

まずは「Align」で、二つのシェイプの位置を揃えます。

続いて、星のシェイプを選択して、「Geometry」内にある「Copy Data」をします。

シェイプAにデータをペーストする

変形させたいシェイプにデータをセットする この後の手順では、星のシェイプは使わないので非表示にしておきます。

円のシェイプを選択して、タイムラインからフレームを進めます。

その後、「Geometry」内にある「Data」の欄に、先ほど星のシェイプからコピーした値をペーストします。

データをペーストした結果

データをペーストした結果

ペーストを実行すると、円のシェイプは星のシェイプに変化し、キーフレームも自動的に登録されます。

これで、開始時の地点で円のシェイプ、1秒後の地点で星のシェイプになるアニメーションができました。

シェイプの色を変える

シェイプの色を変える

星のシェイプに変化させながら、色も変化させてみます。

二つ目のキーフレームを選択している状態で、「Fill Color」から色を変更します。

形・色が変化するアニメーションになる

形・色が変化するアニメーションになる 円から星のシェイプに、黄色から水色に、徐々に変化するアニメーションができました。

シェイプをトラッキングさせる

トラッキングの軌道を作る

トラッキングの軌道のシェイプを作る

あるシェイプを別のシェイプに沿って、移動させるアニメーションを作る手順です。

軌道のシェイプを作った後、画面上部から「Add Tracker」を選択します。

軌道とシェイプを関連づける

軌道とシェイプを関連づける

軌道に沿って移動させるシェイプを新しく作ります。

シェイプを作成後、タイムライン上の「Parent Link」から、軌道のシェイプ欄にある「Tracker」へ、ドラッグ&ドロップの操作をします。

軌道に沿ってシェイプがアニメーションする

軌道に沿ってシェイプがアニメーションする

円のシェイプがラインに沿って動くアニメーションができました。

ライン以外にも、図形のシェイプの輪郭に沿ってトラッキングさせることも可能です。

クリスタでチャレンジ!厚塗り風イラスト講座

厚塗りのエッセンスを取り入れた「厚塗り風」イラストの製作工程を実演を交えて解説します。
厚塗りイラストに興味がある方、情報量の多い絵を描きたい方にオススメ!

詳細はこちら >

クリスタでチャレンジ!厚塗り風イラスト講座

厚塗りのエッセンスを取り入れた「厚塗り風」イラストの製作工程を実演を交えて解説します。
厚塗りイラストに興味がある方、情報量の多い絵を描きたい方にオススメ!

詳細はこちら >

まとめ

Webブラウザから無料で使えるアプリ、「Trangram」の紹介でした。

Trangramは、図形やイラストを簡単に動かすことができ、映像作品の制作に適しているアプリです。

モーショングラフィックスを作りたいとお考えの方は、Trangramをぜひ試してみてください。

関連講座
関連講座

お絵描きのスタートはここから!超・初心者向けのイラスト入門講座!

なぞり描きお手本つき!
線の引き方練習から、最終目標のバストアップ(胸から上)の絵の描き方まで、分かりやすく解説♪
今なら無料お試し実施中!!

詳細はこちら >

魅力的な男性ボディの描き方を学んでみよう!

男性の身体を魅力的に描く・塗るコツを解説!
今なら無料お試し実施中!!

詳細はこちら >

200講座が見放題!本気でイラスト学ぶならパルミー!

プロのイラストレーター陣が動画で解説
長期プランならプロによる添削&豪華特典付き!
\ 7日間の無料お試し実施中 /

詳細はこちら >

魅力的な男性ボディの描き方を学んでみよう!

男性の身体を魅力的に描く・塗るコツを解説!
今なら無料お試し実施中!!

詳細はこちら >
記事の先頭に
もどる
記事の先頭にもどる

×

Oekakizukan header 400x104