リンク歓迎

AnimeEffectsで動くピクトグラムのGIFを作る方法を画像で解説

AnimeEffectsで動くピクトグラムのGIFを作る方法を画像で解説

執筆者:

ToolCluster

カテゴリ:

この記事では、PowerPoint でピクトグラムのパーツを作成し、AnimeEffects でボーンを入れて動かし、GIF として書き出します。例は、左腕を左右に振る青い人物です。自サイトや社内サイトで目立つようなアイコンを制作したり、言葉で説明できない複雑な動きを動画よりも簡単に制作して、自分の考えを共有することにも活用できます。

操作画面は AnimeEffects と Microsoft PowerPoint® です。商標の扱いは末尾の注記。画面は元の操作のままです。いまの版ではメニューの言い回しが違うことがあります。

手を振る青いピクトグラムの完成形を、左腕の往復を基準に示した図です。ボーンで肘を曲げて振り、GIFとしてループさせる動きを説明しています。画像では、腕を上げた姿勢と横へ伸ばした姿勢のあいだを繰り返しています。
完成形。左腕を振り、GIF でループする

この記事の要点一覧

見たいこと要点
もと絵左腕・上半身・下半身・背景を別 PNG にする
導入公式の zip を解凍して起動する。いまの配布は FFmpeg 同梱
プロジェクト初期リソースに左腕を選び、残りをリソースウィンドウから足す
並べる移動・回転・拡縮で人の形にし、開始姿勢を置く
ボーン付け根・ひじ・手首に点を打ち、影響範囲を決めて曲げる
往復0 秒と 1 秒に姿勢、2 秒は開始のコピー。最大フレーム 120
GIF指定の形式で出力。パレットを最適化する
書き出し失敗FFmpeg 公式から zip を取り、exe の隣の tools へ置く

もと絵をパーツに分けて PNG にする

動かす絵は、最初から一枚絵にしないで、曲がる単位で分けます。この例では ①左腕、②上半身、③下半身、④背景の四つです。背景はふちなしの白い四角形です。

この記事は PowerPoint で描いています。ペイントソフトなら何でもよく、使い慣れたもので構いません。

ピクトグラムの部品を、左腕・下半身・上半身・背景の四枚を基準に示した図です。曲がる単位でPNGを分けることを説明しています。画像では、斜めの左腕、脚、頭付きの上半身、白い四角の背景が2×2に並んでいます。
左腕、下半身、上半身、背景を別々に描く

描いたら、それぞれを PNG で保存します。PowerPoint では、選んだ図形の上で右クリックして図として保存です。

⚠️ よくある落とし穴

上半身と下半身は複数の図形でできています。一つだけ選んで保存すると、頭だけ、脚の一本だけ、になります。下の GIF のように、範囲選択してから図として保存してください。

PowerPointで複数の図形をPNGにする手順を、範囲選択と図として保存を基準に示した図です。上半身のようにブロックが分かれた部品の保存を説明しています。画像では、青い上半身を囲んでから保存する操作を追っています。
複数の図形は、範囲選択してから「図として保存」
保存した四つのPNGを、ファイル名と部品の対応を基準に示した図です。AnimeEffectsへ渡す素材が揃った状態を説明しています。画像では、背景.png、下半身.png、左腕.png、上半身.pngが並んでいます。
左腕.png、上半身.png、下半身.png、背景.png

ファイル名はこのあとの画面と揃えています。左腕.png、上半身.png、下半身.png、背景.png です。

AnimeEffects を入れる

AnimeEffects は 2D の画像にボーンを入れて動かすアプリです。公式の Windows zip はインストール不要で、解凍したフォルダの AnimeEffects.exe を起動します。Mac と Linux の zip もあります。この記事の画面は Windows です。

入手先は GitHub の Releases です。案内は Downloads にあります。

GIF や動画の書き出しには FFmpeg が要ります。しかし、今の公式 zip には FFmpeg が入っているので安心してください。書き出しが通れば、別途ダウンロードは不要です。通らないときは、末尾の手順で公式サイトから置くことが必要です。

FFmpeg の導入に移動

プロジェクトを開き、パーツを足す

AnimeEffects.exe を起動します。最初はキャンバスが空です。

AnimeEffectsの起動直後を、空のキャンバスとドックの配置を基準に示した図です。プロジェクトを作る前の初期画面を説明しています。画像では、中央のキャンバスが暗く、タイムラインとプロジェクトドックが空です。
起動直後。キャンバスはまだ空

メニューのファイルからプロジェクトの新規作成を選びます。初期リソースに、さっき作った 左腕.png を指定します。キャンバスサイズを指定するにチェックを入れ、幅と高さをそれぞれ 1024 にします。

新規プロジェクトのダイアログを、初期リソースとキャンバスサイズの指定を基準に示した図です。左腕.pngを最初の素材にし1024四方で始めることを説明しています。画像では、キャンバスサイズ指定にチェックがあり幅と高さが1024です。
初期リソースに左腕.png、キャンバスは 1024×1024

OK すると、左腕だけがキャンバスに乗った状態になります。

新規作成直後のキャンバスを、初期リソースだけが乗った状態を基準に示した図です。左腕以外のパーツはまだ読み込んでいないことを説明しています。画像では、白い点線の枠の中央に、斜めの青い左腕が一つだけあります。
新規プロジェクト直後。左腕だけが乗っている

残りのパーツは、ウィンドウからリソースウィンドウを開き、リソースを追加するで足します。上半身、下半身、背景を同じ手順で入れてください。

リソースの追加手順を、ウィンドウメニューとリソースウィンドウを基準に示した図です。残りのPNGをプロジェクトへ読み込む入口を説明しています。画像では、リソースウィンドウが選ばれ、リソースを追加するが開いています。
ウィンドウ → リソースウィンドウ → リソースを追加する
リソースウィンドウの追加前後を、ファイル一覧の増減を基準に示した図です。左腕のあとに上半身・下半身・背景を足すことを説明しています。画像では、左が一ファイル、右に四つのPNGが矢印でつながっています。
左腕のあとに、上半身・下半身・背景を足す
パーツを足した直後のキャンバスを、重なりとターゲット一覧を基準に示した図です。位置と大きさはまだ整えていないことを説明しています。画像では、青い人物が白い枠の中にあり、一覧にtopnodeが並んでいます。
パーツはまだ重なったまま。次で位置を整える

パーツを並べて、開始の姿勢にする

左上のツール類から移動、回転、拡縮を選びます。左下のターゲットドックで操作するパーツを切り替え、キャンバス上で人の形に並べます。大きさもここで合わせます。

並べ替えの操作を、移動回転拡縮ツールとターゲットドックの選択を基準に示した図です。パーツごとに行を切り替えて動かすことを説明しています。画像では、移動ツールが赤枠で、左腕とtopnodeの行が示されています。
「移動、回転、拡縮」を選び、ターゲットドックでパーツを切り替える
パーツを人の形に並べる操作を、キャンバス上の移動と拡縮を基準に示した図です。開始姿勢の前に位置と大きさを合わせることを説明しています。画像では、青い人物が白い枠の中で、ばらばらから人型へ組み立てられます。
パーツを人の形に並べ、大きさを合わせる
💡 ヒント

左腕以外の名前が topnode のままでも、このやり方では問題ありません。行を選んで動かせば足ります。

並べ終わったら、同じツールで開始の姿勢にします。手の振り始めです。タイムラインは 0 秒のままにしておきます。

開始の姿勢を、タイムライン0秒での腕の位置を基準に示した図です。振り始めのキーとして置く形を説明しています。画像では、一方の腕が頭の上まで上がり、他方が斜め下へ開いた青い人物で、選択枠が付いています。
0 秒の開始姿勢。振り始めの腕

左腕にボーンを入れて曲げる

冒頭の GIF では、左腕が肘で曲がっています。一枚の PNG のまま動かしているのではなく、ボーンで画素を引っ張っています。

ターゲットドックで左腕を有効にし、ツール類からボーンを構築するを選びます。その下のボーンを追加するで、絵の中の付け根、ひじ、手首をクリックして点を打ちます。

ボーンを入れる準備を、左腕の選択とボーン構築ツールを基準に示した図です。一枚のPNGの中で肘を曲げる入口を説明しています。画像では、ターゲットの左腕が赤枠で、ボーンを構築すると追加ボタンが並んでいます。
左腕を選び、「ボーンを構築する」→「ボーンを追加する」
ボーンの点を打つ操作を、付け根・ひじ・手首の順を基準に示した図です。左腕の折れ位置を決めることを説明しています。画像では、青い左腕の上に点が肩から肘、手先へと増え、その間にピンクの線が伸びていきます。
付け根、ひじ、手首の順に点を打つ

点を打っただけでは、どの画素が付いていくかが決まっていません。影響範囲を操作する（ボーンを追加するの右のほう）で、線と点から範囲を広げます。広げすぎると胴まで曲がるので、腕の画素だけに収めてください。

ボーンの影響範囲を、点と線から広がる領域を基準に示した図です。腕の画素だけを引っ張り胴を巻き込まないことを説明しています。画像では、左腕のまわりだけに円状の範囲が広がり、胴の側へは範囲が出ていません。
影響範囲を広げ、曲げたい画素だけをボーンが引っ張る

範囲が決まったら、ツール類のボーンのポーズをつけるを選び、その下のボーンを移動するで手首の点を動かします。肘が折れ、冒頭の振りに近い形になります。

肘を曲げる操作を、ボーンのポーズと手首の移動を基準に示した図です。付け根は残し、先だけを振る形を説明しています。画像では、ポーズと移動のボタンが赤枠で、前腕が内側へ折れた青い腕と、曲がりの赤い矢印があります。
「ボーンのポーズをつける」で手首を動かし、肘を曲げる

往復の姿勢を打ち、長さを決める

この例の手振りは、画面から見て左 → 右 → 左です。ターゲットドックの進行バーを 1.0 秒まで進め、開始と同じ要領で、腕を反対側へ伸ばした姿勢を作ります。

1秒の中間姿勢を、反対側へ伸ばした腕とボーンの線を基準に示した図です。往復の折り返しに置くキーを説明しています。画像では、肩・肘・手首の点が残った左腕が、画面の右斜め上へ伸びた青い人物になっています。
1.0 秒。反対側へ腕を伸ばした姿勢

終わりの姿勢は開始と同じなので、コピーできます。ターゲットドックの「時間と姿勢」のポイントを、一番上のひし形を除いて範囲選択し、コピーして 2.0 秒の下へ貼ります。ずれたら、もう一度範囲選択してまとめて動かしてください。

開始姿勢のコピーを、一番上のひし形を除く範囲選択を基準に示した図です。2秒へ貼って往復の終点を作ることを説明しています。画像では、0秒の列に除外と範囲選択可の赤注記が付き、1秒の列は選択から外しています。
一番上のひし形以外を範囲選択してコピーし、2.0 秒へ

貼った直後は腕が伸びたままのことがあります。開始の姿勢と見比べて、ボーンのポーズをもう一度曲げてください。

クリップの長さは、プロジェクトの最大フレームで決めます。この例では 120 です。タイムライン上の往復は 0 秒・1 秒・2 秒です。

クリップ長の設定を、プロジェクトメニューと最大フレームのダイアログを基準に示した図です。この例でフレーム数を120にすることを説明しています。画像では、最大フレームから開いた入力欄の数値が120です。
プロジェクト → 最大フレームを 120 にする

右下のループさせるを入れてから再生するで確認します。違和感があれば、キーの位置かボーンの曲げを直します。

プレビューの操作を、タイムライン右の再生ボタンとループボタンを基準に示した図です。書き出す前に往復を画面で確かめることを説明しています。画像では、三角の再生と円矢印のループが赤の文字で示されています。
ループを入れてから再生する
完成プレビューを、ループ再生中の青い人物の手振りを基準に示した図です。冒頭のGIFと同じ動きになっているかを説明しています。画像では、腕を上げた姿勢と横へ伸ばした姿勢がキャンバスの上で切り替わります。
ループ再生。冒頭の GIF と同じ動き

GIF として書き出す

ファイル → 指定の形式で出力 → GIF アニメーションを選び、保存場所を指定します。そのあと出力ダイアログが開きます。その際、「パレットを最適化する」という項目があるので“オン”にすることをオススメします。

GIF書き出しの設定を、出力メニューと出力ダイアログを基準に示した図です。512四方とパレット最適化を入れることを説明しています。画像では、GIFアニメーションが選ばれ、パレットを最適化するがチェック済みです。
ファイル → 指定の形式で出力 → GIF。パレットを最適化する

この例では幅と高さ 512、開始フレーム 0、終了フレーム 120 です。

⚠️ よくある落とし穴

パレットを最適化するにチェックを入れてください。入れないと、青と白の境にノイズが出ることがあります。境がはっきりした塗りほど目立ちます。

OK で生成が始まります。できた GIF が冒頭と同じ動きなら、完成です。書き出しだけ失敗するときは、次の節です。

GIF 書き出しに失敗したとき

同梱の FFmpeg で書き出せないときは、公式サイトからビルド済みを取り、AnimeEffects.exe の隣へ置きます。ページの形は、いまも下の画面と同じです。

FFmpeg – Download を開き、画像のとおり進めてください。

FFmpeg公式の入手ページを、Windows向け実行ファイルのリンクを基準に示した図です。ソースではなくビルド済みを辿る入口を説明しています。画像では、WindowsボタンとWindows builds by BtbNが赤枠で、マウスで触れるとクリックの注記があります。
ffmpeg.org。Windows に触れて、Windows builds by BtbN をクリック

Windows にマウスを載せ、Windows builds by BtbN をクリックします。一覧から、自分の PC に合う zip を選びます。この例では赤い線のものです（shared が付いていない zip）。画面のファイル名や日付はそのときのビルドなので、同じものを探す必要はありません。

BtbNのWindows用zipを、Assets一覧の選び方を基準に示した図です。sharedが付いていないgplのzipを取ることを説明しています。画像では、win64-gpl.zipの行の下に赤い線が引いてあります。
shared が付いていない win64-gpl.zip（赤い線の種類）

ffmpeg から始まる zip を解凍すると、中に bin フォルダがあります。中身を、AnimeEffects.exe と同じ階層の tools フォルダへコピーします。フォルダが無ければ作ります。

FFmpegを置く場所を、AnimeEffects.exeの隣のtoolsフォルダを基準に示した図です。書き出しに失敗したときの予備の配置を説明しています。画像では、toolsの中にffmpeg.exe、ffplay.exe、ffprobe.exeが追加されています。
bin の中身を、exe の隣の tools へコピーする

ffmpeg.exe が入っていれば足ります。ffplay.exe と ffprobe.exe も一緒にコピーして構いません。

AnimeEffects は AnimeEffectsDevs が公開しているソフトウェアです。Microsoft PowerPoint® は Microsoft Corporation の商標です。FFmpeg は FFmpeg プロジェクトの名称です。本ページの画面は、製品の操作を説明するためのものです。当サイトはこれらの権利者と提携しておらず、承認も受けていません。

コメント

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

投稿をさらに読み込む