1 画像を選ぶ
コマの つまみを持ってドラッグすれば並べ替えられます。各コマの矢印でも動かせます。ここでの並びが、そのまま再生される順番になります。
GIFの表示時間は0.01秒単位です。指定したフレームレートを保つため、隣り合うコマの表示時間が0.01秒異なる場合があります。
2 GIFの設定
色数 色数が少ないほどファイルは小さく、縞は出やすくなります。
ディザリング ロゴ、線画、スクリーンショットでは切ってください。
画像を追加するとプレビューが出ます
- コマ数
- —
- 再生時間
- —
- 1コマの大きさ
- —
- 再生
- —
3 GIFを作る
# GIF作成 — 画像からアニメーションGIFへ 何枚かの画像を、ひとつのアニメーションにします。 > JPG・PNG・WebP・AVIFの画像からアニメーションGIFを作ります。無料で、処理はすべてブラウザの中。順番も速さも大きさも自分で決められます。アップロードは一切なく、オフラインでも動きます。 これはhttps://abox.tools/ja/gif-maker/にあるブラウザー用の対話型ツールです。ファイルはそのブラウザーを実行する端末上で処理します。意図した共有や任意の通信機能はページ内で説明します。以下は文章による説明です。利用するにはアドレスを開いてください。 ## 画像は**ブラウザー内で処理**されます。処理のためのアップロードはありません。 すべてのコマは、お使いのブラウザが描き、色を減らし、圧縮します。仕上がったGIFもこの端末のメモリの中で組み立てられます。仮にここの何かが送ろうとしたところで、このページの向こう側に画像を受け取るサーバーが存在しません。 - ✗ アップロードなし - ✗ 登録なし - ✓ オフラインで動作 - ✓ ソース公開 - ✓ ファイルは端末から出ない ## 画像からGIFを作る手順 1. **画像を選びます。** フォルダを選択欄にドラッグするか、ファイルを手で選んでください。ブラウザがディスクから直接読み、その間に何かがどこかへ送られることはありません。 2. **再生する順に並べます。** つまみを持ってドラッグするか、矢印を使ってください。「名前順に並べ替え」は数字を数字として数えるので、`frame_2`は`frame_10`より前に来ます。 3. **1コマあたりの表示時間を決めます。** 1枚0.5秒ならスライドショー、20分の1秒ならアニメーションです。全コマにまとめて同じ時間を与えることも、1枚だけ長めに残すこともできます。 4. **大きさと、色の選び方を決めます。** GIFは面積とコマ数のぶんだけ大きくなり、それを引き戻す画質スライダーはありません。だから、いちばん効く設定は大きさです。1コマ256色がいちばんきれいで、これが既定値です。共通のパレットを使うほうが小さく、ちらつきも出ません。 5. **GIFを作ってダウンロードします。** 組み立てはお手元のハードウェアで行われるので、かかる時間は順番待ちではなく端末次第です。仕上がったアニメーションは、保存する前にページの上で再生されます。 ## 詳しい解説 [画像からアニメーションGIFを作る方法](https://abox.tools/ja/guides/make-a-gif-from-images/): 何枚かの画像を1本のアニメーションGIFにします。GIFが実際どこまで速く動けるのか、パレットの設定は何を変えるのか、そしてファイルを本当に小さくする3つのこと。 ## 箱の中のほかのツール - [GIF分解](https://abox.tools/ja/split-gif/): すべてのコマを、1枚ずつPNGで。 - [GIF解析](https://abox.tools/ja/gif-analyzer/): コマ、表示時間、パレット、そしてバイトの行き先。 - [動画圧縮ツール](https://abox.tools/ja/compress-video/): 容量の上限を指定すると、設定を計算し、結果を実測します。 - [MP4変換ツール](https://abox.tools/ja/convert-to-mp4/): 録画、取り込み、カメラの動画をH.264とAACのMP4に。使える部分はコピーし、必要な部分だけ再エンコードします。 ## よくある質問 ### 画像はどこかにアップロードされますか？ いいえ。画像を読み、描き、色を減らし、圧縮するのはお使いのブラウザで、場所もお手元のハードウェアです。この道具にサーバー側はなく、ページの`Content-Security-Policy`には接続してよいアドレスがすべて書かれていて、そのどれもこのサイトのものではありません。回線を抜いても、GIF作りはそのまま続きます。 ### どの画像形式を使えますか？ お使いのブラウザが展開できる静止画形式ならどれでもです。実際にはJPG、PNG、WebP、GIF、AVIF、そしてApple製の端末ではHEICになります。ここで別に一覧を持って更新し続ける必要はありません。展開はブラウザの仕事で、こちらの仕事ではないからです。 ### GIFがこんなに大きいのはなぜですか？ GIFがすべてのコマを丸ごとの画素として保存するからです。動き補償はなく、「前と同じで位置だけずれた」という保存の仕方もなく、画質のつまみもありません。大きさはおおよそ面積かけるコマ数で、これを下げる手は3つしかありません。 \ \ 小さくすること。寸法を半分にすればファイルは4分の1になります。コマを減らすか、1枚あたりを長く表示すること。そして64色や32色まで落とし、ディザリングを切ること。平らな絵ならこれは思ったほど損をせず、写真ならかなり損をします。それでも収まらないなら、正直なところ、あなたが作ろうとしているのは動画です。同じものをMP4にすれば、おそらく10分の1で済みます。 ### GIFはどこまで速く動かせますか？ 数字が示すほど速くはなりません。この形式は各コマの表示時間を100分の1秒単位で持ちますが、ブラウザは1990年代から2以下の値を0.1秒に引き上げています。当時の回る地球儀のために書かれ、そのまま残った規則です。ですから0.01秒と指定しても毎秒100コマにはならず、毎秒10コマになります。この道具が0.02秒より短い値を用意していないのはそのためで、0.05秒、つまり毎秒20コマあたりが、求めて意味のある上限です。 ### パレットの設定は何を変えますか？ GIFの1コマが持てる色は最大256色で、その256色は誰かが選ばなければなりません。 \ \ **コマごとに最適な色**は、1枚ごとに別々に256色を選びます。いちばんくっきり見え、互いに関係のない写真を並べる場合はこれが正解です。**GIF全体でひとつのパレット**は、全コマからまとめてひとつの表を作ります。ファイルは小さくなり、同じ場面のコマの間でパレットが揺れて起きるちらつきもなくなります。コマが寄せ集めではなく連続したものなら、こちらを選んでください。 ### 背景の透過を残せますか？ 画像に透過があるなら残せます。「透過」を「透過部分を残す」に切り替えてください。ただし先に知っておくことがあります。GIFの透過は1ビットで、画素は見えないか完全に塗られているかのどちらかしかありません。そのため、アンチエイリアスのかかった縁も、柔らかい影も、薄れていくものも、すべて硬い縁になります。アニメーションを置く先の背景色がわかっているなら、その色に重ねてしまうほうがきれいに見えます。 ### 使える画像の枚数に上限はありますか？ 道具に組み込まれた上限はありません。実際の頭打ちは端末のメモリと、出てくるファイルの大きさに対するあなたの忍耐です。画像は1枚ずつ読まれるので100コマでも問題ありませんが、640ピクセルで100コマとなれば、それはそれで非常に大きなGIFになります。上の「GIFがこんなに大きいのはなぜですか？」もご覧ください。 ### 無料ですか。アカウントは必要ですか？ 無料です。アカウントも、ログインも、試用期間もありません。出力に透かしも入りません。このサイトには広告があり、それが費用を賄っています。広告に画像の情報が渡されることはありません。 ### オフラインでも動きますか？ 動きます。ページを一度読み込んでから通信を切っても、そのまま使えます。何もアップロードされていないことを示す、いちばん簡単な方法でもあります。処理のために画像をどこかへ送っている道具なら、線を抜いた瞬間に止まるからです。 ## この主張を確かめる方法 - **処理はこのブラウザー内で行います。** 入力と結果はブラウザー内で処理し、処理コードはそれらを処理用にアップロードしません。Content-Security-Policyは資源と接続先を制限しますが、許可済みの相手はリクエストを受け取れます。内容は検査せず、何も送られないことを単独で証明しません。具体的な操作の要求とソースを比較するか、切断中にローカル操作を完了してください。 - **符号化はこのリポジトリの4ファイルです。** GIFには色の量子化とLZW圧縮が要りますが、ブラウザはそのどちらも持っていません。そこで両方をここに書き出しています。`src/quantize.js`と`src/lzw.js`、入れ物は`src/gif.js`です。1つ作るために何かを取りに行くことはなく、初回に落ちてくるエンジンもありません。 - **Googleが読み込むものと、渡されないもの。** 広告と計測のスクリプトはGoogleから来ています。そのどちらにも、画像に関する情報は渡されません。ファイルも、サムネイルも、名前も、サイズも、枚数もです。画像を読み、展開し、描き、圧縮するコードはすべてこのオリジンから配信され、リポジトリに載っています。 - **寄付ボタンが読み込むものと、渡されないもの。** ヘッダーの「Buy me a coffee」ボタンは、cdnjs.buymeacoffee.comのスクリプトが描き、書体はGoogle Fontsから読み込みます。それはリンク以上のものではありません。訪問を報告することもなく、あなたや画像について渡されるものもありません。押さないかぎり何も起こらず、押した先は他人のサイトです。 - **オフラインで動きます。** 通信を切っても、このページのどの部分もそのまま動きます。これがいちばん単純な証明です。GIFにするために画像を送っている道具なら、線を抜いた瞬間に止まるからです。 **自分で確かめてください。**以上のどれも、鵜呑みにする必要はありません。このページは、リポジトリにあるテンプレートと設定から、誰でも読んで実行できるビルドスクリプトが生成しています。その結果は`dist`ブランチに置いてあるので、配信されているものと、ソースをビルドした結果とを差分で比べられます。 https://github.com/A-Box-of-Tools/website まず読むとよいのは、Content-Security-Policyについては`config/site.toml`、各コマを落とし込むパレットは`src/quantize.js`、圧縮とその書き出し先は`src/lzw.js`と`src/gif.js`です。どれにもネットワークに触れられる行は一行もありません。
画像からGIFを作る手順
- 画像を選びます。フォルダを選択欄にドラッグするか、ファイルを手で選んでください。ブラウザがディスクから直接読み、その間に何かがどこかへ送られることはありません。
- 再生する順に並べます。つまみを持ってドラッグするか、矢印を使ってください。「名前順に並べ替え」は数字を数字として数えるので、
frame_2はframe_10より前に来ます。 - 1コマあたりの表示時間を決めます。1枚0.5秒ならスライドショー、20分の1秒ならアニメーションです。全コマにまとめて同じ時間を与えることも、1枚だけ長めに残すこともできます。
- 大きさと、色の選び方を決めます。GIFは面積とコマ数のぶんだけ大きくなり、それを引き戻す画質スライダーはありません。だから、いちばん効く設定は大きさです。1コマ256色がいちばんきれいで、これが既定値です。共通のパレットを使うほうが小さく、ちらつきも出ません。
- GIFを作ってダウンロードします。組み立てはお手元のハードウェアで行われるので、かかる時間は順番待ちではなく端末次第です。仕上がったアニメーションは、保存する前にページの上で再生されます。
詳しい解説
画像からアニメーションGIFを作る方法 何枚かの画像を1本のアニメーションGIFにします。GIFが実際どこまで速く動けるのか、パレットの設定は何を変えるのか、そしてファイルを本当に小さくする3つのこと。
箱の中のほかのツール
よくある質問
画像はどこかにアップロードされますか？
いいえ。画像を読み、描き、色を減らし、圧縮するのはお使いのブラウザで、場所もお手元のハードウェアです。この道具にサーバー側はなく、ページのContent-Security-Policyには接続してよいアドレスがすべて書かれていて、そのどれもこのサイトのものではありません。回線を抜いても、GIF作りはそのまま続きます。
どの画像形式を使えますか？
お使いのブラウザが展開できる静止画形式ならどれでもです。実際にはJPG、PNG、WebP、GIF、AVIF、そしてApple製の端末ではHEICになります。ここで別に一覧を持って更新し続ける必要はありません。展開はブラウザの仕事で、こちらの仕事ではないからです。
GIFがこんなに大きいのはなぜですか？
GIFがすべてのコマを丸ごとの画素として保存するからです。動き補償はなく、「前と同じで位置だけずれた」という保存の仕方もなく、画質のつまみもありません。大きさはおおよそ面積かけるコマ数で、これを下げる手は3つしかありません。
小さくすること。寸法を半分にすればファイルは4分の1になります。コマを減らすか、1枚あたりを長く表示すること。そして64色や32色まで落とし、ディザリングを切ること。平らな絵ならこれは思ったほど損をせず、写真ならかなり損をします。それでも収まらないなら、正直なところ、あなたが作ろうとしているのは動画です。同じものをMP4にすれば、おそらく10分の1で済みます。
GIFはどこまで速く動かせますか？
数字が示すほど速くはなりません。この形式は各コマの表示時間を100分の1秒単位で持ちますが、ブラウザは1990年代から2以下の値を0.1秒に引き上げています。当時の回る地球儀のために書かれ、そのまま残った規則です。ですから0.01秒と指定しても毎秒100コマにはならず、毎秒10コマになります。この道具が0.02秒より短い値を用意していないのはそのためで、0.05秒、つまり毎秒20コマあたりが、求めて意味のある上限です。
パレットの設定は何を変えますか？
GIFの1コマが持てる色は最大256色で、その256色は誰かが選ばなければなりません。
コマごとに最適な色は、1枚ごとに別々に256色を選びます。いちばんくっきり見え、互いに関係のない写真を並べる場合はこれが正解です。GIF全体でひとつのパレットは、全コマからまとめてひとつの表を作ります。ファイルは小さくなり、同じ場面のコマの間でパレットが揺れて起きるちらつきもなくなります。コマが寄せ集めではなく連続したものなら、こちらを選んでください。
背景の透過を残せますか？
画像に透過があるなら残せます。「透過」を「透過部分を残す」に切り替えてください。ただし先に知っておくことがあります。GIFの透過は1ビットで、画素は見えないか完全に塗られているかのどちらかしかありません。そのため、アンチエイリアスのかかった縁も、柔らかい影も、薄れていくものも、すべて硬い縁になります。アニメーションを置く先の背景色がわかっているなら、その色に重ねてしまうほうがきれいに見えます。
使える画像の枚数に上限はありますか？
道具に組み込まれた上限はありません。実際の頭打ちは端末のメモリと、出てくるファイルの大きさに対するあなたの忍耐です。画像は1枚ずつ読まれるので100コマでも問題ありませんが、640ピクセルで100コマとなれば、それはそれで非常に大きなGIFになります。上の「GIFがこんなに大きいのはなぜですか？」もご覧ください。
無料ですか。アカウントは必要ですか？
無料です。アカウントも、ログインも、試用期間もありません。出力に透かしも入りません。このサイトには広告があり、それが費用を賄っています。広告に画像の情報が渡されることはありません。
オフラインでも動きますか？
動きます。ページを一度読み込んでから通信を切っても、そのまま使えます。何もアップロードされていないことを示す、いちばん簡単な方法でもあります。処理のために画像をどこかへ送っている道具なら、線を抜いた瞬間に止まるからです。