クリスタのGIFアニメで白色が暗くなる原因と解決策!!

※記事内に広告を含みます

皆さん、本日も閲覧ありがとうます。
山本電卓と申します。

イラスト・漫画制作ソフトCLIP STUDIO PAINT(クリップスタジオペイント)ではアニメーションGIFも制作することができます。

しかし、いざアニメーションGIFを書き出しすると白色部分が少し暗くなった表示になることがあります。

クリスタGIFアニメの減色


今回はアニメーションGIFで白色が暗くなる原因とその解決方法を紹介させていただきますのでよろしくお願いいたします
( `・∀・´)ノ!

こちらの記事はクリスタ公式ページの記述の他に、私自身の経験・検証を基に書かせていただいてます。

そのため不確定要素もあり、この記事で紹介した方法でも色がうまく表示されない可能性もありますのでご了承願います。


▼イラスト・簡単な漫画なら【CLIP STUDIO PAINT PRO】

CLIP STUDIO PAINT PRO

▼本格的な漫画・アニメーション制作なら【CLIP STUDIO PAINT EX】

CLIP STUDIO PAINT EX

参考記事:クリスタを購入する3つの方法と手順紹介!!

CLIP STUDIO PAINT(クリスタ)でGIFアニメの白色が暗くなる原因

クリスタでGIFアニメの白色が暗くなる原因は色の数!

アニメーションGIFでは、クリスタで制作する際に256色より多い色を使用しますと書き出したGIFデータに減色が発生し、白色部分だけでなく、全体の色味が暗くなるといった仕様があります。
(白色が気付きやすいというわけですね)

これはクリスタの仕様ではなく、GIFというデータファイルの仕様になります。
GIFで表現できる色の最大数が256色なのです。


このことはクリスタ公式のQ&Aページでも記載があります。

MEMO

「減色」とはデジタルデータ内で使用されている色の数を減らすことを指します。

使用する色が増える原因は「ぼやけ」にもある!

上記の原因を聞いた方の中には「256色も使っていない!」と思う方もいるかと思います。

しかしキャンバス上に「ぼやけ部分」があると細かい色の変化も全て数に入れられてしまい、使用する色の数が256色より多いと判断されてしまうわけです。

ぼやけが発生する原因は様々で、
例えば線のフチをぼやけさせる「アンチエイリアス」がONになっているペンで線画を描画している場合や

クリスタのアンチエイリアス


筆ツールなどの「ぼやけ」や「グラデーション」が出るツールで描画している場合、

クリスタの筆ツール


「変形」などの劣化が起こる編集を行うといったものがあります。

※線が劣化しないベクターレイヤーの場合は「変形」などの編集を行っても大丈夫です。

クリスタ変形による画像の劣化


これらの内容を含む制作を行いますと、少ない色数でもアニメーションGIFの色味が暗くなる原因になってしまうのです。

「キーフレーム」によってぼやけが発生する場合もある

クリスタのアニメーション制作では「キーフレーム」機能を利用することができ、1枚のレイヤーで「位置」や「拡大率」などを変更して表現することができます。

クリスタのキーフレーム

クリスタユーザーガイド「キーフレーム」

元の画像にぼやけがなくても、このキーフレーム機能を利用することでぼやけが発生する場合があります。

制作している「基準サイズ(キャンバスサイズ)」もGIFアニメの色に影響が出る?

※こちらは私自身が体験したことに基づいており、クリスタ本来の仕様と合致しない可能性がありますのでご了承ください。


手元のクリスタで確認したところ、3、4色の色のみで、ぼやけ部分もないアニメーションGIFを制作・書き出しした場合でも白色部分が暗くなったり、他の色も変な色になってしまう時がありました。

そこでそのアニメーションGIFと他のアニメーションGIFとの違いを検証した結果、そのアニメーションGIFだけ「基準サイズ」が小さいということが分かりました。

クリスタアニメーションキャンバスの基準サイズ
MEMO

「基準サイズ」とはクリスタでアニメーション制作用のキャンバスで設定・表示できるものです。

クリスタキャンバスの新規作成「基準サイズ」


アニメーションを書き出しした際はこの「基準サイズ」内の内容が表示されます。

クリスタアニメーションキャンバスの基準サイズ


「基準サイズ」を他のアニメーションGIFと同じサイズにしますと色もちゃんと表示されるようになったのです。

クリスタ公式サイトにそういった記述は見たことがないのですが、制作時の基準サイズにもアニメーションGIFの色表示に影響が出ていると考えられます。

ポイント

クリスタではイラスト用のキャンバスにて「うごくイラストを作る」にチェックを入れることでも短いアニメーションを制作することができます。

クリスタキャンバスの新規作成「うごくイラストを作る」


この場合「基準サイズ」は表示されませんので、「基準サイズ」=「キャンバスサイズ」ということになります。

※「基準サイズ」が表示されるアニメーション用のキャンバスでのキャンバスサイズ変更はアニメーションGIFの色味の変化に関係ないようです。

GIFアニメの書き出しサイズも色に影響が出る?

※こちらは私自身が体験したことに基づいており、クリスタ本来の仕様と合致しない可能性がありますのでご了承ください。


手元のクリスタで確認したところ、色の数も少ない、ぼやけもない、キャンバスも大きいサイズでアニメーションGIFを制作・書き出ししたにも関わらず、それでも白色部分が暗くなってしまう時がありました。

クリスタのアニメーションGIFでは書き出し時にファイルサイズを設定することができるのですが、今回はこの数値を変更して書き出してみました。

クリスタのアニメーションGIF出力設定


すると「基準サイズ(キャンバスサイズ)」と「書き出しサイズ」が割り切れる数値の時には問題なく色が表示されることが分かったのです。

こちらもクリスタ公式サイトにそういった記述は見たことがないのですが、書き出し時のファイルサイズもアニメーションGIFの色表示に影響が出ていると考えられます。

CLIP STUDIO PAINT(クリスタ)のGIFアニメにキレイな白色を表示させる方法

クリスタのGIFアニメは「ぼやけ」が出ないように制作しよう!

「アンチエイリアス」をOFFにしたペンで線画を描こう!

クリスタでアニメーションGIFを制作する際の線画は「アンチエイリアス」が「無し」になっているペンで描画しましょう。

クリスタペンツールのアンチエイリアス設定
クリスタのアンチエイリアス「なし」「あり」


また、線画を黒色で描画する場合はレイヤープロパティにて線画用のレイヤーの表現色を「モノクロ」にしますと黒色か白色の2色しか表示されなくなりますのでこちらを利用するのもいいでしょう。

クリスタのレイヤープロパティ(表現色)

「塗りつぶし」や「アニメ塗り」で制作しよう!

クリスタでアニメーションGIFに「ぼやけ」や「グラデーション」を使用しますと白色が暗くなるのは仕様ですので、これを防ぐには別の描画方法を利用する必要があります。

つまり「塗りつぶし」や色の境目がくっきりしている「アニメ塗り」ですね。

塗りつぶしとアニメ塗り

「変形」など劣化の原因となる編集は使わないようにしよう!

クリスタのベクターレイヤー以外は「変形」などの編集を行うたびに描画部分が劣化していき、絵のフチなどがぼやけてきてしまいます。

ですのでなるべく描画済みの絵は編集を加えないようにしましょう。

やむなく編集を追加しなければならない場合は編集後に細部を確認し、ぼやけ部分があれば上から塗る・削るなどしてぼやけ部分をなくしましょう。

キーフレームは使わないようにしよう!

キーフレームは1枚のレイヤーだけで動きを表現できるので便利な機能なのですが、アニメーションGIFで色が暗くならないようにするためには利用しない方がいいでしょう。

同じ絵を利用したい場合はコピーしたものを編集して1枚ずつフレームに入れてアニメーションを表現しましょう。

クリスタのGIFアニメで減色が起きない制作内容
MEMO

2、3色程度の絵ですと、キーフレームにて「位置」「不透明度」のみの変化でしたらぼやけが発生しない場合もあるのですが、基本的には控えた方がいいでしょう。

クリスタのGIFアニメは「大きめの基準サイズ(キャンバス)」で制作し、割り切れるサイズで書き出ししよう!

『制作している「基準サイズ(キャンバスサイズ)」もGIFアニメの色に影響が出る?』の項目で述べたように、基準サイズ(キャンバスサイズ)もアニメーションGIFの色に影響が出る場合がありますので大きめの基準サイズ(キャンバスサイズで制作しましょう。

手元のクリスタで確認したところ、72 dpiの場合で1辺1500 px 以上あると問題なく書き出しできました。

クリスタアニメーションキャンバス「幅」「高さ」


また、書き出し時には基準サイズ(キャンバスサイズ)に対して割り切れるファイルサイズに設定しましょう。

1辺1500 px の基準サイズ(キャンバスサイズ)なら500 pxにするなどですね。

クリスタのアニメーションGIF出力設定(500px)


上記の条件から、書き出ししたいサイズから基準サイズ(キャンバスサイズ)を逆算する方がよいかもしれませんね。

MEMO

書き出し時のサイズに関しては、1辺1500 px の基準サイズ(キャンバスサイズ)に対して550 px で書き出しすると白色部分が暗くなるのですが、450 px や600 px にすると白色部分が暗くならないなど、未だ不確定要素があるように感じます。


割り切れるサイズにしても色が暗くなる場合は書き出しのサイズを色々変更することで暗くならないサイズが見つかるかもしれません。

それでもGIFアニメの色が暗くなる場合

ぼやけ部分がないか確認してみる

クリスタでのアニメーションGIFの制作過程において、自分の意図しない所でぼやけが発生している場合があります。

使用しているフレーム(レイヤー)の端の一部分など、少しでもぼやけ部分がないか確認してみてください。

サイズを変更してみる

制作データの基準サイズ(キャンバスサイズ)や書き出し時のファイルサイズを大きめに変更してみてください。

このサイズ変更によって色の変化が起きなくなる場合があります。

すでに絵を描画済みの状態で基準サイズ(キャンバスサイズ)を大きくしますと余白部分も大きくなってしまいますので難しいとは思いますが…。

また、余白を埋めるために描画部分を拡大しますとその変形作業によってぼやけが発生しますのでそちらも注意してください。

MEMO

CLIP STUDIO PAINT画面上部から「編集」→「画像解像度を変更」と選択し、「ピクセル数を固定」のチェックを外した状態で「解像度」を大きくしますとキャンバスと描画部分をぼやけを発生させずに一緒にサイズ変更することも可能です。

※「幅」「高さ」「倍率」でサイズ変更すると変形と同じでぼやけが発生してしまいます。

クリスタの「画像解像度を変更」(ピクセル数を固定なし)


ただし、アニメーション用キャンバスの場合は「基準サイズ(フレーム)」の表示をなくさないと実行できず、アニメーションGIFの表示範囲も基準サイズからキャンバスサイズに変わってしまいますので注意しましょう。

クリスタアニメーションキャンバス時の「画像解像度を変更」の注意ウィンドウ

レイヤーを一部非表示にして仮の書き出しをしてみる

アニメーションGIFの制作データの内、一部のレイヤーを非表示にして仮に書き出しすることで色が暗くなる原因のレイヤーを絞り出すことができます。

任意のレイヤーを非表示にして書き出ししたアニメーションGIFの色が暗くならなければ、その非表示にしたレイヤーにぼやけ部分があるなどの原因があることが分かります。

原因となるレイヤーを編集し直せば色が暗くなることなくアニメーションGIFを書き出しすることができる可能性があります。

【補足】「ぼやけ」や「グラデーション」を使いたい場合は白色を使わない方法もあり

「白色をキレイに表示させたい」という本来の解決策にはなりませんが、クリスタでアニメーションGIFを制作する際にどうしても「ぼやけ」や「グラデーション」といった表現やキーフレームを使いたい場合は白色を使わずに塗るのも1つの方法だと思います。

ただし、減色が発生することで(白色ほどは目立たなくても)全体的な色味が少し暗くはなりますのでそこはご了承ください。

色が暗くなるGIFと暗くならないGIFの比較

それでは私が制作したアニメーションGIFで白色が暗くなってしまったものと、条件を満たしてキレイに白色が表示されたものとを比較してみましょう。


●白色が暗くなったアニメーションGIF

アニメーションGIF(減色あり)


●白色がキレイに表示されたアニメーションGIF

アニメーションGIF(減色なし)


「白色がキレイに表示されたアニメーションGIF」の白背景がキレイに表示され、この記事の背景との境目が見えなくなっているのが分かるかと思います。

CLIP STUDIO PAINT(クリスタ)の仕様を理解してGIFアニメ制作を楽しもう!

最初、アニメーションGIFの白色部分が暗くなる原因を検索したところ、「256色以内」という条件が出てきたのでこれで解決できると思ったらうまくいかず、自分なりに色々検証してみた結論が今回の記事で紹介した内容になります。

あくまで私個人が検証した結果ですので冒頭でも述べた通り、この記事で紹介した条件を満たしても色が暗くなってしまう可能性もあるのですが、問題解決の糸口になればなと思います。

こういったクリスタの仕様を理解した上でアニメーションGIFの制作を楽しんでいただければ幸甚です。


それではここまで閲覧ありがとうございました!
お疲れ様でした!!


▼イラスト・簡単な漫画なら【CLIP STUDIO PAINT PRO】

CLIP STUDIO PAINT PRO

▼本格的な漫画・アニメーション制作なら【CLIP STUDIO PAINT EX】

CLIP STUDIO PAINT EX

参考記事:クリスタを購入する3つの方法と手順紹介!!


▼動画視聴型お絵描き講座【Palmie(パルミー)

パルミー

▶パルミーについて詳しく見る