[{"data":1,"prerenderedAt":25},["ShallowReactive",2],{"blog-ja-gif-compression-dimensions-colors-frame-rate-guide":3},{"slug":4,"locale":5,"title":6,"description":7,"date":8,"author":9,"tags":10,"keywords":15,"h1":16,"readingTime":17,"html":18,"recommendedTools":19,"faqs":24},"gif-compression-dimensions-colors-frame-rate-guide","ja","GIF圧縮：サイズ・色数・フレーム数の選び方","GIFの縮小、減色、フレーム削減、切り抜きの違いを解説。設定ごとの影響と、出力後の細部・動き・短い表示・ループの確認点をまとめます。","2026-09-14","DocCrunch Team",[11,12,13,14],"GIF圧縮","GIFサイズ","GIF色数","GIFフレーム数",[11,12,13,14],"GIF圧縮では、サイズ・色数・滑らかさのどれを先に調整する？",5,"\u003Cp>容量を減らしたGIFが、鮮明なまま動きだけカクカクすることがあります。逆に、動きは滑らかでもグラデーションに帯が出る場合があります。どちらも圧縮による変化ですが、失われた情報は異なります。\u003C\u002Fp>\n\u003Cp>GIFは連続する画像と各画像の表示時間を保存します。そのため、単なる画質設定ではなく、サイズ、色数、フレーム数を別々に考える必要があります。\u003C\u002Fp>\n\u003Ch2>主な調整方法を区別する\u003C\u002Fh2>\n\u003Cp>まず、減らしてよい情報を判断します。\u003C\u002Fp>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>調整\u003C\u002Fth>\n\u003Cth>主に変わるもの\u003C\u002Fth>\n\u003Cth>影響する部分\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>サイズ縮小\u003C\u002Ftd>\n\u003Ctd>各フレームのピクセル幅と高さ\u003C\u002Ftd>\n\u003Ctd>小さい文字、細線、細部\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>減色\u003C\u002Ftd>\n\u003Ctd>使用する色数\u003C\u002Ftd>\n\u003Ctd>グラデーション、影、色の変化\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>フレーム削減\u003C\u002Ftd>\n\u003Ctd>動きの中間画像\u003C\u002Ftd>\n\u003Ctd>滑らかさ、一瞬だけ表示される内容\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>切り抜き\u003C\u002Ftd>\n\u003Ctd>残す表示範囲\u003C\u002Ftd>\n\u003Ctd>構図、動く被写体の欠け\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Cp>組み合わせることもできますが、最初からすべて行う必要はありません。小さく表示するならサイズから、細かな動きが重要ならフレーム削減は慎重に判断します。\u003C\u002Fp>\n\u003Cp>\u003Ca href=\"\u002Fja\u002Fgif-compress\u002F\">DocCrunch GIF圧縮\u003C\u002Fa>には高画質、バランス、最小の3段階と、独立した縮小率設定があります。現在、高画質とバランスは全フレームを残し、最小は中間フレームも減らします。\u003C\u002Fp>\n\u003Ch2>サイズが大きすぎる場合は寸法を先に調整する\u003C\u002Fh2>\n\u003Cp>1000×600を500×300に等比縮小すると、各フレームのピクセル数は4分の1になります。ただし、容量まで4分の1になるとは限りません。内容、色、符号化方式にも左右されます。\u003C\u002Fp>\n\u003Cp>実際の表示サイズで判断してください。小さい文字が読めなくなったり、細線、カーソル、アイコンが見づらくなったりすることがあります。\u003C\u002Fp>\n\u003Cp>DocCrunchには元のサイズ、75%、50%、33%の選択肢があります。まず控えめに縮小し、全編を再生して確認します。すでに用途に合う寸法なら、さらに縮めることが最善とは限りません。\u003C\u002Fp>\n\u003Ch2>減色は鮮やかさだけを変えるわけではない\u003C\u002Fh2>\n\u003Cp>GIFはパレットで色を扱い、色数に制約があります。基本は\u003Ca href=\"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FGlossary\u002FGIF\">MDNのGIF解説\u003C\u002Fa>でも確認できます。\u003C\u002Fp>\n\u003Cp>変化はグラデーション、影、微妙な色差から現れがちです。滑らかな変化が帯状になり、近い色が一つにまとまることがあります。単に色が薄くなるのではなく、階調が失われる場合があります。\u003C\u002Fp>\n\u003Cp>単色の図形、簡単なアイコン、複雑な写真では減色への耐性が違います。DocCrunchの3段階は現在256色、180色、96色です。次を確認しましょう。\u003C\u002Fp>\n\u003Cul>\n\u003Cli>グラデーションに目立つ帯が出ていないか。\u003C\u002Fli>\n\u003Cli>影が大きな単色の塊になっていないか。\u003C\u002Fli>\n\u003Cli>小さい文字と背景を区別できるか。\u003C\u002Fli>\n\u003Cli>再生中に細部がちらつかないか。\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>静止画より、動かしたときに気づきやすい変化もあります。\u003C\u002Fp>\n\u003Ch2>フレーム削減は単なる再生速度の変更ではない\u003C\u002Fh2>\n\u003Cp>再生時間は、残した画像数だけでなく各画像の表示時間でも決まります。中間画像を減らし、その分ほかの画像を長く表示すれば、おおよそのテンポを保ちながら動きの段階を減らせます。ただし位置の変化は急になります。\u003C\u002Fp>\n\u003Cp>DocCrunchの最小設定はフレームを間引き、対応する表示時間を合算します。主に減らすのは動きの中間情報であり、単純な早送りではありません。\u003C\u002Fp>\n\u003Cp>ゆっくりした単純な動きなら許容できても、速い動き、カーソル操作、短い通知には注意が必要です。1〜2フレームしか出ない内容は不明瞭になったり、残らなかったりする可能性があります。\u003C\u002Fp>\n\u003Cp>操作説明では、追加の容量削減より動作が完全に伝わることが重要です。最初の1枚が鮮明でも十分ではありません。\u003C\u002Fp>\n\u003Ch2>切り抜きは最初のフレームだけで決めない\u003C\u002Fh2>\n\u003Cp>周囲に固定の空白や不要部分があるなら、\u003Ca href=\"\u002Fja\u002Fgif-crop\u002F\">GIF切り抜き\u003C\u002Fa>を検討できます。\u003C\u002Fp>\n\u003Cp>切り抜きで減るのは各フレームの範囲であり、再生時間ではありません。全編を見て、被写体が最も遠くまで動いた位置でも枠内に収まるか確認します。\u003C\u002Fp>\n\u003Cp>冒頭で空いている場所に、後から文字、開いたメニュー、動く物体が現れることがあります。最初の1枚だけを基準に狭めると、その情報が欠けます。\u003C\u002Fp>\n\u003Cp>先に残す範囲を決め、その後で最終寸法を選びましょう。追加の圧縮には\u003Ca href=\"\u002Fja\u002Fgif-compress\u002F\">GIF専用の圧縮ツール\u003C\u002Fa>を使い、静止画専用ツールに渡さないようにします。\u003C\u002Fp>\n\u003Ch2>ダウンロード後は全編を再生して確認する\u003C\u002Fh2>\n\u003Cp>サムネイルだけでなく、少なくとも一巡は再生し、次を確かめます。\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>内容：\u003C\u002Fstrong> 文字、通知、動く被写体が欠けていないか。\u003C\u002Fli>\n\u003Cli>\u003Cstrong>画質：\u003C\u002Fstrong> 小文字、細線、階調、影が実用的か。\u003C\u002Fli>\n\u003Cli>\u003Cstrong>動き：\u003C\u002Fstrong> 跳びが大きすぎず、短い停止を読めるか。\u003C\u002Fli>\n\u003Cli>\u003Cstrong>再生：\u003C\u002Fstrong> 速度、ループ、終了位置が用途に合うか。\u003C\u002Fli>\n\u003Cli>\u003Cstrong>納品条件：\u003C\u002Fstrong> 寸法と容量が制限内か。\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>元の再生回数が有限のGIFは、繰り返しを個別に確認してください。DocCrunchは現在、再符号化したGIFを無限ループに設定するため、元の回数が残るとは限りません。\u003C\u002Fp>\n\u003Cp>処理はブラウザー内でローカルに行われますが、確認は必要です。原本を残し、そこから設定違いを作る方が、圧縮済みファイルを何度も加工するより比較しやすくなります。\u003C\u002Fp>\n\u003Cp>すべてのGIFに最適な設定はありません。必要な寸法、重要な色変化、減らせる動きを分けて考え、容量制限と内容の完全性を両立させましょう。\u003C\u002Fp>\n",[20,22],{"slug":21},"gif-compress",{"slug":23},"gif-crop",[],1789443211949]