※記事内に広告を含みます
皆さん、本日も閲覧ありがとうございます。
山本電卓と申します。
イラスト・漫画制作ソフトCLIP STUDIO PAINT（クリップスタジオペイント）では、アニメーション制作も可能です。
今回はその中でも簡単なGIFアニメの基本的な作り方を紹介させていただきますのでよろしくお願いいたします
( ｀・∀・´)ﾉ！
▼イラスト・簡単な漫画なら【CLIP STUDIO PAINT PRO】
CLIP STUDIO PAINT PRO
▼本格的な漫画・アニメーション制作なら【CLIP STUDIO PAINT EX】
CLIP STUDIO PAINT EX
GIFアニメ基礎知識
GIFアニメとは
GIFアニメとは短いアニメーションを繰り返しループ再生するデータファイルの一種です。
※「GIF」のみや「アニメーションGIF」といった言い方もされます。
※設定によってループ再生しないようにすることもできます。
通常のアニメーションと同様に複数の静止画を連続で映し出すことで絵が動いているように見せるわけです。
「アニメーション」との違いはカテゴリーが「画像」であることです。
そのため、JPEGやPNGなどの画像データと同じ箇所に貼り付けることができます。
クリスタとGIFアニメ
冒頭で述べたように、クリスタではアニメーションの制作・書き出しが可能です。
1枚ずつ静止画を制作し、「タイムライン」と呼ばれるアニメーション制作用のパレットに配置していきます。
この1枚の静止画を配置する箇所を「フレーム」と呼び、1秒間に表示させるフレームの数を表す数値を「フレームレート」と呼びます。
このフレームレートの数値が高い（表示フレームが多い）ほど滑らかな動きのアニメーションになるわけですね。
そのため、フレームレートの単位は「fps（フレーム・パー・セカンド）」となるわけです。
※「パー」＝「分数の横線」、「セカンド」＝「秒」
一般的なアニメでは24 fpsが多いようですが、GIFアニメなどのシンプルなアニメーションでしたら8 fpsでも十分な動きになります。
上記で紹介した剣のGIFアニメも8 fpsです。
そしてこの「フレーム」なのですが、クリスタEXでは無制限なのに対し、クリスタPRO・DEBUTでは24フレームまでの制限があります。
とは言え、8 fpsでしたら3秒のアニメーションを制作できるので短いGIFアニメを制作するのであればPROでも問題ありません。
24フレーム以下の短いアニメーションを「うごくイラスト（うごイラ）」と呼ぶこともあります。
CLIP STUDIO PAINT（クリスタ）で超シンプルなGIFアニメの制作方法
今回は以下の3枚の絵を使って瞬きをするアニメーションをリピートさせるシンプルなGIFアニメを制作していきたいと思います。
※これはあくまで制作方法の一例であり、必ずしもこの手順を守る必要はありません。
クリスタで「うごくイラスト」キャンバスを新規作成
CLIP STUDIO PAINT画面上部から「ファイル」→「新規」と選択しますと新規作成ウィンドウが開きます。
※［Ctrl（Command）］+［N］でも同じ操作ができます。
↓
上部の「作品の用途」は「イラスト」を選択し、任意のキャンバスサイズを設定しましょう。
※GIFは基本的に印刷しませんので「解像度」は最低値の「72」で十分でしょう。
後述しますが、GIFアニメとして書き出しする際のサイズの最大値が新規作成するキャンバスのサイズになりますので、比較的大きめに設定することをおすすめします。
参考記事
クリスタで絵を描く！新規作成「イラスト」の設定項目の意味を説明します！！
そして下部の「うごくイラストを作る」にチェックを入れましょう。
「セルの枚数」と「フレームレート」の項目が表示されます。
「セルの枚数」とはいわゆる「フレームの合計数」です。
こちらと「フレームレート」の数値によってアニメーション全体の再生時間が決まります。
※画像では「セルの枚数」が「16」で「フレームレート（1秒間のフレーム数）」が「8」ですので再生時間が「2.0秒」と表示されています。
とは言え、「セルの枚数」と「フレームレート」は後から変更可能ですので気楽に設定してもらっても大丈夫です。
「OK」を押すとキャンバスが作成されます。
「作品の用途」には「アニメーション」もありますが、短いGIFアニメでしたら「イラスト」の「うごくイラスト」で十分です。
クリスタでのうごくイラストキャンバスとレイヤーの関係を知ろう！
クリスタでうごくイラストのキャンバスを作成しますと以下のような表示になります。
こちらは「イラスト」のキャンバスですのでキャンバス全体がGIFアニメとして映し出されます。
※「アニメーション」キャンバスの場合は「基準サイズ」というガイド線内の内容が表示されます。
タイムラインパレットが開いていない場合は画面下部にある「上向きの≫」をタッチすることで開くことができます。
※CLIP STUDIO PAINT画面上部から「ウィンドウ」→「タイムライン」と選択することでも開くことができます。
レイヤーパレットには「アニメーションフォルダー」に「セルの枚数」で設定した数と同じラスターレイヤーが入っており、タイムラインパレットの各フレームの数字と連動しています。
GIFアニメ（うごくイラス）を制作していこう！
アニメーションの静止画（絵）を入れたいフレームの数値と連動しているレイヤーにて絵を描いていきましょう。
例えば「1」のレイヤーに絵を描くとタイムラインパレットの1フレーム目にその絵が表示されるようになります。
制作中は定期的に「（上書き）保存」をしておきましょう。
フレームとの連動は「レイヤーフォルダー」でも可能！
キャンバス作成したてではラスターレイヤーがフレームに連動されていますが、連動されているラスターレイヤーを削除し、レイヤーフォルダーを作成して名前を連動させたいフレームの数字に変えることでレイヤーフォルダーとフレームを連動させることができます。
レイヤーフォルダーを連動させることで、1つのフレームに当てはめる絵を複数レイヤーで制作可能になります。
連続した動きになるように絵を続けて描いていこう！
1フレーム目の絵が描けましたら続けて2フレーム目、3フレーム目とアニメーションになるように絵を描いていきましょう。
●「オニオンスキン」機能を活用しよう！
タイムラインパレット上部にある「オニオンスキン有効化」アイコンをタッチすることでアニオンスキン有効のON・OFFを切り替えることができます。
※CLIP STUDIO PAINT画面上部から「アニメーション」→「アニメーションセル表示」→「アニオンスキンを有効化」と選択することでも同じ操作ができます。
オニオンスキンを有効化しますと、前後のフレームの絵を薄く表示させることができます。
これによって自然なアニメーションになるような絵を描きやすくするための目安にすることができます。
※オニオンスキンで表示されるのは同じアニメーションフォルダー内の絵だけです。
※↑画像は2枚目の制作途中。3枚目はまだ未制作のため、1枚目のフレームの絵だけオニオンスキンで表示されています。
●「コピー移動」も便利
同じ絵を描くのが面倒で、1つ前の絵のレイヤーを再利用したい場合はクリスタの「コピー移動」を利用しましょう。
レイヤーパレットにて［Alt（Option）］を押しながらレイヤーをドラッグ移動させることでそのレイヤーをコピーすることができ、さらに「アニメーションフォルダー」内でしたら、レイヤー名もコピー元の次のフレーム数に自動で変換してくれます。
※コピー前に同じフレーム名のレイヤーを削除しておきましょう。
※CLIP STUDIO PAINT画面上部から「レイヤー」→「レイヤーを複製」と選択しても同じ操作が行えます。
コピー後に付くはずだったレイヤー名と同じ名前のレイヤーが既に存在する場合や、
（「1」のレイヤーを「3」の位置にコピー移動するなど）1つ以上レイヤーを越えた位置にコピー移動しますとフレームに合うレイヤー名にならない場合がありますのでその時はコピー移動後に当てはめたいフレームの数字に名前を変更しましょう。
クリスタ環境設定「レイヤー・コマ」カテゴリーにある「複製時のレイヤー名」で「変更しない」に設定していますと、コピーをしてもレイヤー・フォルダーの名前が自動変換されませんので注意しましょう。
同じ絵（セル）を入れたい場合はフレーム上で指定しよう
今回制作する瞬きのGIFアニメの場合、目の絵が「開→中間→閉→中間→開」という順番で表示させる必要があります。
そのため4フレーム目には2フレーム目と同じ絵を、5フレーム目には1フレーム目と同じ絵を配置させたいわけです。
そんな時はタイムラインパレットで絵を入れたいフレームを選択している状態で右クリック（タブレット・スマホ版では長押し）をしましょう。
すると以下のウィンドウが開ます。
ここには左側に現在アニメーションフォルダーにある絵（レイヤー・フォルダー）の名前が、下部の枠には選択したフレームに当てはめられている絵（レイヤー）の名前が表示されています。
このウィンドウにて左側から指定したい絵（レイヤー・フォルダー）の名前を選択することで選択中のフレームに指定した絵（レイヤー・フォルダー）が配置されます。
※下部の枠に絵（レイヤー・フォルダー）の名前を直接入力することもできます。
この手順で他のフレームにも絵（レイヤー・フォルダー）を当てはめていきましょう。
配置したい絵（レイヤー・フォルダー）を複製し、そのレイヤー名を配置したいフレームの数値に変更することでも似た作業はできます。
その場合、レイヤーの数が増えてしまうわけですが…。
変動しない背景はアニメーションフォルダー外に描こう！
背景など、どのフレームにも共通して表示させ、特に動きも入れないものはアニメーションフォルダー外の位置にレイヤーを作成して描いていきましょう。
タイムラインパレットでもアニメーションフォルダーとは別の段になります。
アニメーションを再生して確認しよう
クリスタのタイムラインパレット上部には「再生・停止」や「次のフレームへ」などの操作ボタンがありますので「再生」を押して動きを確認しましょう。
（再生はリピート再生になります。「停止」を押すか、別の操作を行うまで再生を繰り返します。）
おかしい箇所が見つかれば修正を行います。
今回の場合、瞬きをする間隔が早く、連続で瞬きしているような動きになってしまったので各絵のフレーム数を増やして1枚の絵の表示時間を調整しました。
今回の場合は「中間」の絵は一瞬映ればいいので1フレーム分のままにし、「開」と「閉」の表示時間が長くなるように表示フレームを増やしました。
今回の場合は分かりやすく1フレームに1枚の絵を入れていますが、フレームの右端をドラッグすることで1枚の絵に対するフレームの幅を増やすこともできます。
その結果、以下のような動きになりました。
（フレームレートは「8」です）
終わるフレームの位置を指定しよう
今回のGIFアニメの静止画は3枚、使用フレームは合計10になりましたですので、そのままではフレームが余ってしまいます。
しかし、タイムラインパレットの「アニメーションの終わりの位置」はドラッグ移動が可能ですので、10フレーム目の後ろに「アニメーションの終わりの位置」を持っていきましょう。
※ちなみに左側の青ラインがアニメーションの始まりの位置です。
「11」～「16」までの白紙のラスターレイヤーは不要であれば削除してレイヤーパレットをスッキリさせましょう。
逆に、フレームが足りない場合は「アニメーションの終わりの位置」を右側にドラッグ移動させて表示フレーム数を増やすこともできます。
ただし、今回の「うごくイラスト」の場合、最大のフレーム数は24になります。
クリスタでアニメーション（GIF）の設定を変更する方法
キャンバスサイズの変更
今回紹介しているGIFアニメのキャンバスは「イラスト」のキャンバスですので通常の絵を描く時と同じように
CLIP STUDIO PAINT画面上部から「編集」→「キャンバスサイズを変更」と選択することで開く設定ウィンドウにてキャンバスサイズの変更が可能です。
フレームレートの変更
アニメーションを再生して少し遅い、もしくは早いと感じた場合はフレームレートを変更しましょう。
CLIP STUDIO PAINT画面上部から「アニメーション」→「タイムライン」→「フレームレートを変更」と選択しますとフレームレートを変更できる設定ウィンドウを開くことができます。
↓
アニメーションのスピードを速くしたい（滑らかな動きにしたい）場合は数値を大きく、遅くしたい場合は数値を小さくしましょう。
※フレームレートは1秒間のフレーム数を表す数値ですのでフレームレートを変更するとアニメーション全体の再生時間も変更されます。
●フレームレート「4」
●フレームレート「15」
クリスタで制作したアニメーションをGIFとして書き出ししよう！
アニメーションが制作できましたら、この制作データ（.clip）をGIFアニメ（.gif）に書き出しを行います。
CLIP STUDIO PAINT画面上部から「ファイル」→「アニメーション書き出し」→「アニメーションGIF」と選択しましょう。
次にファイル名を入力して「保存」を選択しましょう。
（パソコン版の場合は保存先のフォルダも選択します）
すると「アニメーションGIF出力設定」ウィンドウが開きますので制作したいGIFの内容に設定していきます。
「アニメーションGIF出力設定」の項目の意味
●「幅」「高さ」
GIFの縦・横のサイズを設定します。単位は「px」です。
ここで入力できる最大値が制作時のキャンバスサイズになります。
※初期状態で制作時のキャンバスサイズとは異なった数値が入力されていることが多いです。
●「出力範囲」
GIFアニメとして再生させるフレームの範囲を設定します。
基本的には初期状態から入力されている「1」から最後のフレームの数値まででいいでしょう。
●「フレームレート」
キャンバス作成時や制作途中でも変更できるフレームレートですが、こちらでも変更できます。
ただし、最大値は制作時に設定したフレームレートになりますので、制作時と同じか下の数値しか設定できません。
制作途中でフレームレートを変更した場合や前回書き出しを行ったフレームレートと異なる場合、初期状態では制作時に設定したフレームレートとは異なる数値になっている場合がありますので注意しましょう。
●「ループ回数」
書き出ししたGIFアニメのループ再生に関する設定で、「無限」と「指定回数」から選択できます。
「無限」にしますと無限ループ再生になり、
「指定回数」にしますとループする回数を「1（回）」～「1000（回）」の間で指定することができます。
●「再生時間」
こちらは設定を行えません。確認用です。
「出力範囲」と「フレームレート」の設定によって算出された再生時間と使用フレーム（画像）数が表記されています。
●「ディザリング」
チェックを入れますと、通常よりキレイな色表示のGIFで書き出しできますが、その分容量は大きくなります。
●「背景を透過」（Ver.2.1～）
※こちらはVer.2.1.0にて追加された項目です。
チェックを入れますと制作キャンバスにて（背景を非表示にするなどで）透過部分がある場合に書き出ししたGIFの背景が透過されます。
※ただし、この設定によってGIFの容量が増えることもあれば減ることもあり、仕様がはっきりしていません。
今回の場合、通常が「約35 KB」に対し、透過表示にすると「約283 KB」になりました。
↓
背景を透過させることで、例えばLINEに載せた場合は以下のように動くスタンプみたいな表示になりますね。
「KO」を押して書き出し実行
「アニメーションGIF出力設定」の入力が終わりましたら「OK」を押して書き出しを実行しましょう。
制作内容によっては実行に時間がかかる場合があります。
GIFの書き出しが完了しますと画面上に書き出したGIFの容量が表示されたウィンドウが表示されますので内容を確認して「OK」を押しましょう。
タブレット・スマホ版クリスタで、アプリ内に保存された場合は以下の画面になりますのでここでも「OK」を選択しましょう。
書き出ししたGIFの容量はクリスタが実際に書き出しを実行するまでどのくらいになるかが分かりません。
（これはイラストや漫画も同じことですが）
シンプルな絵でレイヤーの枚数が少ない場合でも200KBを超えたりする場合もありますので容量が決まる要素は現状把握できていません。
（個人的な感覚ではアンチエイリアスやぼやけ部分など、細かい色の変化で表示する色の数が多いほど容量が大きくなる印象です。）
これでGIFアニメの制作は完了です◎
CLIP STUDIO PAINT（クリスタ）で制作したGIFアニメを再生してみよう
クリスタでのGIFアニメ制作・書き出しが完了しましたら、GIFデータを開いて再生してみましょう。
※GIFは画像データと同様にダブルクリックや選択→「開く」などで開くことができます。
アニメーションの再生やループに問題がなければSNSなどで画像を添付する方法と同じ手順で公開することもできますね◎
タブレット・スマホ版クリスタの場合
タブレット・スマホ版でGIFアニメを制作・書き出しを行った場合、クリスタのアプリ内に保存される場合があります。
その場合にはまずクリスタの制作画面から「ファイル」を選択します。
そして次のメニューから「ファイル操作・共有」と選択しますと制作データ（.clip）だけでなく書き出ししたデータも表示される一覧が開きます。
この画面にて書き出しデータにチェックを入れて右上のメニュー「≡」→「書き出し」と選択しますと保存画面が開き、デバイスのストレージ内にコピー保存することができます。
↓
これでSNSなどでもGIFアニメを貼り付けることができるようになりますね◎
CLIP STUDIO PAINT（クリスタ）のGIFアニメ制作に関する情報
GIFアニメでは白色に注意…！
GIFアニメに白背景など白色を使用しますと、制作画面では問題ないのにGIFとして書き出しすると白色部分が暗くなる場合があります。
※厳密には画面全体の色が少し暗くなっています。
完全な解決策になるわけではありませんが、いくつか対処法を紹介した記事がありますのでご確認ください。
GIFアニメでは半透明を表示できない…！
クリスタのGIF書き出し時には（完全な）透明部分の表示設定ができましたが、GIFアニメでは半透明を表示できません。
そのため、制作時に半透明部分のある描画を行ったとしてもGIFとして書き出ししますとくっきりとした表示になってしまいますので注意しましょう。
まずは簡単なGIFアニメから作ってみよう！
クリスタにはアニメーション制作だけでも多くの機能が搭載されているのですが、かなりの量になりますので今回は最低限の知識でできるGIFアニメの作り方を紹介させていただきました。
制作経験を積み重ねていくと徐々に手順や知識も増えていくと思いますのでGIFアニメ制作に興味のある方はぜひお試しください◎
それではここまで閲覧ありがとうございました！
お疲れ様でした！！
▼イラスト・簡単な漫画なら【CLIP STUDIO PAINT PRO】
CLIP STUDIO PAINT PRO▼本格的な漫画・アニメーション制作なら【CLIP STUDIO PAINT EX】
CLIP STUDIO PAINT EX▼動画視聴型お絵描き講座【Palmie（パルミー）】
