リファレンス / MyApp / GifCreator 説明書

GifCreator Web 版 マニュアル

  • GifCreator
  • GIF
  • APNG
  • 動画変換
GifCreator 説明書 の章一覧

概要

GifCreator の Web 版は /apps/gif-creator/ で公開しています。 動画を読み込み、使いたい範囲を切り出して、アニメーション GIF または APNG として保存できます。

処理はすべてブラウザの中で完結し、動画がサーバーへアップロードされることはありません。 そのため、読み込めるのは お使いのブラウザが再生できる動画 に限られます。 多くの環境では MP4 (H.264) と WebM が確実に開けます。MOV や AVI、MKV は、 中の映像がそのブラウザで再生できる形式なら開けます。

画面の見かた

  • 上のヘッダーに、読み込んだ動画の名前・解像度・長さ・ファイルサイズと、テーマの切り替え・「動画を開く…」ボタンが並びます
  • 左の大きな領域がプレビューで、その下が切り出し範囲を決めるタイムラインです
  • 右が設定パネルで、いちばん下に出力の見積もりと「GIF を作成」ボタンがあります
  • 最下部のステータスバーに、直前の操作の結果やエラーが出ます

作成が終わるとヘッダーの下に「編集 / 結果」のタブが出て、結果タブで出来上がりを確認できます。

テーマ（ライト / ダーク）

ヘッダーのボタンで、アプリの配色を切り替えられます。押すたびに「🌓 自動」→「☀️ ライト」→「🌙 ダーク」の順に変わります。 「自動」は、お使いの OS（またはブラウザ）の設定に合わせてライトとダークを選びます。 切り替えが効くのはアプリの中だけで、サイトのほかの部分の配色は変わりません。

1. 動画を読み込む

「動画を開く…」から選ぶか、アプリの枠へ動画ファイルをドラッグ＆ドロップします。 読み込めない形式のときは、ステータスバーに「この動画はブラウザで再生できない形式です」と出ます。

読み込むと、そのまま GIF の作成まで進みます。 動画全体を、出力幅を元動画の半分にして、 ほかは今の設定のまま書き出し、終わると「結果」タブに切り替わります。 範囲や設定を変えたいときは「編集」タブで直し、あらためて「GIF を作成」を押してください。

ただし、フレームが多すぎる（900 枚を超える）か、フレームを持つメモリが大きくなりすぎる （約 512MB を超える）設定になるときは、ブラウザが固まらないよう自動では作成しません。 ステータスバーの案内に沿って、範囲を短くするか、フレームレートやサイズを下げてから「GIF を作成」を押してください。

2. 使う範囲を決める（トリム）

タイムラインのバーが動画全体です。両端のつまみを動かすと、切り出す範囲が決まります。

  • バーをクリックするとその位置へ移動します
  • 「▶ 再生」を押すと、切り出し範囲の中だけを繰り返し再生します
  • 「⇤ 開始」「終了 ⇥」は、いま表示している位置をそれぞれ範囲の開始・終了にします
  • 「全体」で範囲を動画全体に戻します

右側に 0:01.20 – 0:04.80 / 3.60 秒 のように、範囲と長さが出ます。

3. 切り抜く（クロップ）

設定パネルの「切り抜き」で 範囲を切り抜く にチェックを入れると、プレビューに枠が出ます。

  • 枠の中をドラッグすると位置を動かせます
  • 8 つのつまみで大きさを変えられます
  • 枠の外から新しくドラッグすると、そこから引き直せます
  • 数値で指定したいときは「位置」「大きさ」の入力欄を使います（単位は動画のピクセル）
  • 「全体に戻す」で切り抜きを解除できます

4. 出力の設定

出力

  • 形式
    • GIF: 256 色までのパレットに落とします。どの環境でも表示でき、対応の幅が広い形式です
    • APNG: フルカラーのまま書き出します。グラデーションや実写がきれいですが、ファイルは大きくなります。 拡張子は .png で保存されます（APNG は PNG の拡張なので、対応していない環境では 1 枚目が静止画として表示されます）
  • サイズ: 「元のまま」「幅を指定」「倍率で指定」から選びます。高さは縦横比を保って決まります。 動画を読み込むたびに「幅を指定」で元動画の横幅の半分（1920px の動画なら 960px）になります。 長辺は 1920px を上限にしています

動き

  • フレームレート: 1 秒あたりの枚数です。GIF は表示時間を 10 ミリ秒単位でしか表せないため、 12fps なら 80ms と 90ms を交互に使って平均を合わせています
  • 再生速度: 0.25 倍〜4 倍。元動画の速度を変えて書き出します。速くするほどフレーム数は減ります
  • 再生方向: 「順再生」「逆再生」「ブーメラン (往復)」。ブーメランは行きと帰りで同じフレームを使い回すので、 フレームを取り出す時間は増えません
  • ループ: 「無限に繰り返す」「1 回だけ」「回数を指定」。回数の扱いは表示するソフトによって 1 回ぶん前後することがあります

GIF の画質

GIF を選んだときだけ出ます。

  • 色数: 2〜256 色。減らすとファイルは小さくなりますが、帯（バンディング）が出やすくなります
  • パレット
    • 全体で 1 つ: すべてのフレームから 1 つのパレットを作ります。色がちらつかず、ファイルも小さくなります
    • フレームごと: フレームごとに最適なパレットを作ります。場面が大きく変わる動画に向きます
  • ディザ
    • なし: 最も近い色にそのまま置き換えます。イラストや図表、文字が多い映像向きです
    • 誤差拡散: 階調のつながりがなめらかになります。実写向きですが、粒が毎フレーム動くのでファイルは大きくなります
    • 組織的: 決まった模様でぼかします。模様がフレーム間で動かないので、差分が小さくファイルも小さくなります
  • ディザの強さ: 0〜100%。強くするほど階調はなめらかに、弱くするほど輪郭がくっきりします

差分だけを書く

前のフレームと同じ画素を書かずに済ませる指定です。既定で有効になっています。

  • GIF では、変わらない画素を透過にして前のフレームを透かせます（パレットの 1 枠を透過色に使います）
  • APNG では、変わった矩形だけを書き出します。まったく同じフレームは前のフレームの表示時間に足して省きます

止まっている場面が多い動画（画面録画など）ではファイルがかなり小さくなります。 毎フレーム全体が動く動画では効果が薄く、切っても構いません。

5. 作成して保存する

動画を読み込んだときは自動で始まります。設定を変えて作り直すときは、 右下の「GIF を作成」（APNG のときは「APNG を作成」）を押します。どちらの場合も、

  1. 動画を 1 コマずつシークしてフレームを取り出し（フレーム抽出）
  2. GIF / APNG に書き出します（書き出し）

進捗バーの下に フレーム抽出 12 / 36 のように現在の枚数が出ます。途中で「中止」できます。

できあがると「結果」タブに切り替わり、実際に動くプレビューと、解像度・フレーム数・再生時間・ ファイルサイズが出ます。「ダウンロード」で保存してください。ファイル名は元の動画名から作られます。

実際の解像度で確かめる

結果のプレビューの上にある切り替えで、表示の大きさを変えられます。 右端には 480 × 360 px ・ 表示 100% のように、出力の解像度と今の表示倍率が出ます。

  • 全体: 枠に収まるように表示します。枠より小さい画像は等倍のまま、大きい画像は縮めて表示します
  • 等倍: 画像の 1 ピクセルを画面の 1 ドットで表示します。ディスプレイの拡大率 （Windows の 150% やスマホ・Mac の高解像度画面など）で引き伸ばされないので、 書き出したファイルを実際に貼ったときと同じ細かさで見られます
  • 2倍 / 4倍: ピクセルをぼかさずに拡大します。ディザの粒や色の段差を確かめるのに使います

枠に入りきらないときは、プレビューをドラッグすると見る場所を動かせます。 背景は「チェック / 黒 / 白」から選べます。透過の有無や、明るい / 暗いページに貼ったときの縁の見え方を確かめられます。

ボタンの上の欄には、作成前でも 480 × 270 36 枚 3.00 秒 のように出力の見積もりが出ます。 フレーム数が 900 枚を超える設定では作成できません。フレームレートを下げるか、範囲を短くしてください。

小さく仕上げるこつ

ファイルサイズは、だいたい 幅 × 高さ × フレーム数 で決まります。効き目の大きい順に、

  1. サイズを小さくする（幅 480px 前後がよく使われます）
  2. フレームレートを下げる（10〜15fps でも動きは十分に伝わります）
  3. 切り出す範囲を短くする
  4. 色数を減らす（GIF。64〜128 色でも見た目はあまり変わりません）
  5. ディザを「なし」か「組織的」にする
  6. 差分だけを書く を有効にしておく

設定の保存

出力の設定（形式・フレームレート・サイズ・色数など）とテーマはブラウザに保存され、次に開いたときも残ります。 切り出し範囲と切り抜き範囲は動画ごとに決まるものなので保存されません。

うまくいかないとき

  • 動画が開けない: そのブラウザが再生できない形式です。MP4 (H.264) か WebM に変換してからお試しください
  • フレームが飛ぶ・同じ画が続く: シークの精度は動画のキーフレーム間隔に左右されます。 フレームレートを下げるか、別の形式に変換し直すと改善することがあります
  • 途中で重くなる: 出力サイズとフレーム数を減らしてください。フレームは書き出しが終わるまで メモリに保持するため、大きい設定ではブラウザが苦しくなります
  • GIF の再生が速すぎる / 遅すぎる: GIF は 10 ミリ秒単位でしか表示時間を指定できません。 また、極端に短い表示時間は表示するソフト側で読み替えられることがあります

← GifCreator 説明書 へ