ターミナルGIFアニメーションを簡単に作る方法【ブラウザで完結・無料】

Handy Dev Tools Handy Dev Tools
Handy Dev Tools
2026.02.24

技術ブログやREADME.mdでCLIツールを紹介する時、静止画よりもGIFアニメーションの方が分かりやすいですよね。

でも、従来の方法でターミナルGIFを作るのは意外と面倒でした…

この記事では、ブラウザだけでターミナルGIFを簡単に作れる新しい方法を紹介します。

  1. 従来の方法の問題点
    1. 方法1：terminalizer（CLIツール）
    2. 方法2：asciinema + agg
    3. 方法3：画面録画ソフト
  2. 新しい方法：スクリプトでGIF生成
    1. 特徴
  3. 基本的な使い方
    1. 1. スクリプトを書く
    2. 2. プレビューで確認
    3. 3. GIFを生成・ダウンロード
  4. コマンド一覧
    1. プロンプトとコマンド入力
      1. [prompt] / [prompt:値]
      2. [cmd] / [cmd:数値]
    2. 出力
      1. タグなし行
    3. 待機
      1. [wait] / [wait:数値]
    4. プログレスバー
      1. [progress] / [progress:数値]
    5. スピナー
      1. [spinner] / [spinner:数値]
    6. 画面クリア
      1. [clear]
    7. 質問と回答
      1. [question] / [answer]
    8. 文字装飾
      1. [color:色]…[/color]
      2. [color:色:r]…[/color]
      3. [bold]…[/bold]
    9. コメント
      1. ; 文字列
  5. 実例
    1. 例1：npm install
    2. 例2：git push
    3. 例3：docker build
    4. 例4：pytest実行
    5. 例5：対話的なスクリプト
    6. 例6：エラーケース
  6. ユースケース
    1. 1. 技術ブログでのCLI解説
    2. 2. OSS ProjectのREADME.md
    3. 3. チュートリアル動画の素材
    4. 4. ドキュメント
  7. 設定のカスタマイズ
    1. 画面サイズ
    2. テーマ
    3. FPS（フレームレート）
  8. Tips・小技
    1. Tip 1：カスタムプロンプト
    2. Tip 2：カラフルな出力
    3. Tip 3：背景色で強調
    4. Tip 4：複数コマンドの実行
    5. Tip 5：エラーケースの再現
    6. Tip 6：コメントでスクリプトを整理
  9. 他のツールとの比較
  10. よくある質問
    1. Q1. GIFのファイルサイズはどのくらいですか？
    2. Q2. 実際のコマンド実行結果をコピーできますか？
    3. Q3. 日本語は使えますか？
    4. Q4. スクリプトを保存できますか？
    5. Q5. MP4やWebMで出力できますか？
    6. Q6. プログレスバーやスピナーの見た目を変えられますか？
  11. 技術的な仕組み
    1. 使用技術
  12. まとめ
  13. 📦 その他の開発ツールもチェック
    1. 人気のツール

従来の方法の問題点

方法1：terminalizer（CLIツール）

# インストール
npm install -g terminalizer

# 録画
terminalizer record demo

# 実際にコマンドを実行
$ npm install
$ git push origin main

# GIF生成
terminalizer render demo

問題点：

  • ❌ Node.jsのインストールが必要
  • ❌ 実際にコマンドを実行する必要がある
  • ❌ タイミングがずれたら最初からやり直し
  • ❌ 失敗したコマンドは録画できない

方法2：asciinema + agg

# 録画
asciinema rec demo.cast

# GIF変換
agg demo.cast demo.gif

問題点：

  • ❌ 2つのツールが必要
  • ❌ 実際にコマンドを実行する必要がある
  • ❌ 編集が困難

方法3：画面録画ソフト

問題点：

  • ❌ タイミング調整が難しい
  • ❌ 録画→編集→変換の手間
  • ❌ ファイルサイズが大きくなりがち
  • ❌ 何度も撮り直しが発生

新しい方法：スクリプトでGIF生成

スクリプトを書くだけでGIFを生成できるツールを作りました。

ターミナル GIF ジェネレーター | Handy Dev Tools
ターミナル出力を擬似的に再現し、GIFアニメーションとして記録・ダウンロードします
handy-dev.tools

特徴

✅ ブラウザで完結 – インストール不要
✅ スクリプト方式 – コマンド実行不要
✅ 簡単に編集 – 何度でもやり直せる
✅ 完璧なタイミング – ミリ秒単位で制御
✅ 無料・登録不要 – すぐに使える

基本的な使い方

1. スクリプトを書く

[prompt] npm install
[wait:500]
Installing packages...
[progress:2000] Installing
[color:green]✓[/color] Installed 42 packages
Done in 2.5s

2. プレビューで確認

リアルタイムでアニメーションを確認できます。

3. GIFを生成・ダウンロード

「GIF生成」ボタンをクリックするだけ。

Terminal GIF Demo

コマンド一覧

プロンプトとコマンド入力

[prompt] / [prompt:値]

[prompt] / [prompt:値] 文字列

プロンプトを表示します。直後に文字列があれば、コマンド入力としてタイプします。

デフォルトプロンプト：

~ $

例1：デフォルトプロンプトで入力

[prompt] npm install

表示：

例2：カスタムプロンプト

[prompt:root@server:~ #] apt update

表示：

例3：プロンプトのみ表示

[prompt]

[cmd] / [cmd:数値]

[cmd] 値
[cmd:数値] 値

コマンドをタイピングアニメーションで表示します。
プロンプトの表示が必要な場合は[prompt]で表示させる必要があります。

デフォルト速度：60ms/文字

例1：通常速度

以下の例は[prompt] npm installと同じ動作となります。

[prompt]
[cmd] npm install

例2：ゆっくり（100ms/文字）

[cmd:100] echo "Hello World"

例3：速く（30ms/文字）

[cmd:30] git status

出力

タグなし行

出力内容

通常の出力は、タグなしで書くだけです。

例：

[cmd] npm test
All tests passed ✓
25 tests, 0 failures

表示：

待機

[wait] / [wait:数値]

[wait]
[wait:数値]

指定時間だけ待機します。

デフォルト：500ms

例：

[prompt] npm install
[wait:300]
Installing packages...
[wait:1000]
✓ Done!

表示：

プログレスバー

[progress] / [progress:数値]

[progress] ラベル
[progress:数値] ラベル

プログレスバーを0%から100%までアニメーション表示します。

デフォルト時間：2000ms

例1：デフォルト（2秒）

[progress] Installing packages

表示：

例2：カスタム時間（3秒）

[progress:3000] Downloading files

表示：

例3：ラベルなし

[progress]

表示：

スピナー

[spinner] / [spinner:数値]

[spinner] ラベル
[spinner:数値] ラベル

ローディングスピナーを表示します。完了時に自動的に消えます。

デフォルトのラベルはLoading...です。

デフォルト時間：1500ms

表示：

例1：デフォルト（1.5秒）

[spinner] Connecting to server

表示：

例2：カスタム時間（3秒）

[spinner:3000] Building project

表示：

例3：ラベルなし

[spinner]

画面クリア

[clear]

[clear]

ターミナル画面をクリアします。

例：複数コマンドの実行

[prompt] npm test
All tests passed ✓
[wait:1000]
[clear]
[prompt] npm run build
Build successful ✓

表示：

質問と回答

[question] / [answer]

[question] 設問[answer] 回答

または

[question:数値] 設問[answer:数値] 回答

インタラクティブなプロンプトを再現します。

デフォルト：

  • question: 即座に表示
  • answer: タイピング（60ms/文字）

例1：デフォルト

[question] What is your name? [answer] Bob

表示：

例2：カスタム速度

[question:500] Choose a framework: [answer:200]React

表示：

文字装飾

[color:色]…[/color]

[color:色] テキスト [/color]

文字色を変更します。

使える色：

  • black
  • red
  • green
  • yellow
  • blue
  • magenta
  • cyan
  • white

例：

[color:green] ✓ Success [/color]
[color:red] ✗ Error [/color]
[color:yellow] ⚠ Warning [/color]

表示：

[color:色:r]…[/color]

[color:色:r] テキスト [/color]

背景色＋白い文字で表示します。

例：

[color:green:r]  OK  [/color]
[color:red:r]  ERROR  [/color]

表示：

[bold]…[/bold]

[bold] テキスト [/bold]

太字で表示します。

例：

[bold] Important: [/bold] Read the docs

表示：

コメント

; 文字列

; コメント

コメント行は無視されます。スクリプトにメモを残せます。

例：

; このスクリプトはnpm installのデモです
[prompt] npm install
[wait:500]
; プログレスバーを表示
[progress:2000] Installing

表示：

実例

例1：npm install

; npm installのデモ
[prompt] npm install
[wait:300]
Installing packages...

[progress:2000] Installing

✓ Installed 42 packages
Done in 2.5s

生成されるGIF：

例2：git push

[prompt] git push origin main
[wait:500]
Enumerating objects: 15, done.
Counting objects: 100% (15/15), done.
[spinner:1000] Compressing objects
Writing objects: 100% (9/9), 1.2 KiB | 1.2 MiB/s, done.
Total 9 (delta 5), reused 0 (delta 0)

To github.com:username/repo.git
   abc1234..def5678  main -> main

例3：docker build

[prompt] docker build -t myapp .
[wait:300]
[1/5] FROM docker.io/library/node:18
[spinner:800]
[color:green] ✓ DONE [/color]

[2/5] WORKDIR /app
[color:green] ✓ DONE [/color]

[3/5] COPY package*.json ./
[color:green] ✓ DONE [/color]

[4/5] RUN npm ci
[progress:2000] Installing dependencies
[color:green] ✓ DONE [/color]

[5/5] COPY . .
[color:green] ✓ DONE [/color]

[bold] Successfully built myapp [/bold]

例4：pytest実行

[prompt] pytest tests/
[wait:300]
[bold] ============================= test session starts ============================== [/bold]
platform darwin -- Python 3.11.0, pytest-7.4.0
collected 25 items

[spinner:1500] Running tests

tests/test_user.py [color:green] ....... [/color]                                              [ 28%]
tests/test_auth.py [color:green] ........ [/color]                                             [ 60%]
tests/test_api.py [color:green] .......... [/color]                                            [100%]

[color:green:r]  25 passed in 2.43s  [/color]

例5：対話的なスクリプト

[prompt] npm create vite@latest
[wait:300]
[question] Project name: [answer]my-app
[question] Select a framework: [answer]React
[question] Select a variant: [answer]TypeScript

Scaffolding project in ./my-app...
[progress:1500] Creating files

[color:green] ✓ Done! [/color]

Now run:
  [bold] cd my-app [/bold]
  [bold] npm install [/bold]
  [bold] npm run dev [/bold]

例6：エラーケース

[prompt] git push origin main
[wait:500]
[spinner:1000] Connecting

[color:red:r]  ERROR  [/color]
[color:red] ✗ Permission denied (publickey). [/color]
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

ユースケース

1. 技術ブログでのCLI解説

Before（静止画）：

$ npm install
（説明文）

After（GIF）：

  • コマンド入力のアニメーション
  • インストール中のプログレスバー
  • 完了メッセージ

効果：

  • 読者の理解度が向上
  • 視覚的に分かりやすい
  • プロフェッショナルな印象

2. OSS ProjectのREADME.md

例：CLIツールの紹介

## Installation

![Installation Demo](./demo.gif)

## Usage

![Usage Demo](./usage.gif)

効果：

  • GitHubのスター数増加
  • 使い方が一目で分かる
  • ユーザーの興味を引く

3. チュートリアル動画の素材

例：オンライン講座

  • 長い動画の代わりにGIFで要点を見せる
  • ファイルサイズが小さい
  • 繰り返し再生で理解しやすい

4. ドキュメント

例：API利用ガイド

## cURLでAPIを呼び出す

![cURL Demo](./curl-demo.gif)

効果：

  • 実際の使い方が分かる
  • エラー時の挙動も見せられる

設定のカスタマイズ

画面サイズ

幅: 800px（デフォルト）
高さ: 600px（デフォルト）

推奨サイズ：

  • ブログ埋め込み：800×600
  • GitHub README：800×400
  • Twitter投稿：800×450

テーマ

Dark（デフォルト）：

  • 背景：ダークグレー
  • テキスト：ホワイト
  • プロンプト：グリーン

Light：

  • 背景：ホワイト
  • テキスト：ブラック
  • プロンプト：ブルー

Monokai：

  • 背景：#272822
  • テキスト：#F8F8F2
  • プロンプト：#A6E22E

FPS（フレームレート）

10 FPS（デフォルト）
15 FPS
20 FPS

推奨：

  • ファイルサイズ重視：10 FPS
  • 滑らかさ重視：15-20 FPS

Tips・小技

Tip 1：カスタムプロンプト

[prompt:root@server:/var/www #] ls -la
total 4
drwxr-xr-x    3 root     root            96 Jul 10  2023 .
drwxr-xr-x    4 root     root           128 Apr 17  2024 ..
-rw-r--r--    1 root     root            14 Jul 10  2023 .gitignore
[prompt]

表示：

Tip 2：カラフルな出力

[color:green] ✓ Success [/color]
[color:red] ✗ Error [/color]
[color:yellow] ⚠ Warning [/color]
[color:cyan] ℹ Info [/color]

表示：

Tip 3：背景色で強調

[color:green:r]  PASS  [/color] All tests passed
[color:red:r]  FAIL  [/color] 3 tests failed

表示：

Tip 4：複数コマンドの実行

[prompt] npm test
All tests passed ✓
[wait:1000]
[clear]
[prompt] npm run build
Build successful ✓

表示：

Tip 5：エラーケースの再現

実際には実行できないエラーも簡単に再現できます。

[prompt] rm -rf /
[wait:500]
[color:red:r]  ERROR  [/color]
[color:red] Permission denied [/color]
You cannot delete the root directory!

表示：

Tip 6：コメントでスクリプトを整理

; ========================================
; npm installのデモ
; ========================================

[prompt] npm install
[wait:300]

; プログレスバーを表示
[progress:2000] Installing

; 完了メッセージ
✓ Done!

表示：

他のツールとの比較

Handy Dev Toolsterminalizerasciinema画面録画
インストール不要必要必要必要
コマンド実行不要必要必要必要
編集簡単困難困難困難
タイミング制御完璧手動手動手動
ファイルサイズ小中小大
ブラウザ完結✅❌❌❌
文字装飾✅✅✅✅
エラー再現✅❌❌❌

よくある質問

Q1. GIFのファイルサイズはどのくらいですか？

A1. 設定により異なりますが、通常は以下の範囲です：

  • 10秒、800×600、10 FPS：約500KB-1MB
  • 30秒、800×600、10 FPS：約1.5MB-3MB

ファイルサイズを小さくする方法：

  • FPSを下げる（20→10）
  • 画面サイズを小さくする
  • アニメーション時間を短くする

Q2. 実際のコマンド実行結果をコピーできますか？

A2. スクリプト方式なので、実際のコマンド実行は不要です。

手順：

  1. ローカルでコマンドを実行
  2. 出力をコピー
  3. スクリプトに貼り付け（タグなし行として）

Q3. 日本語は使えますか？

A3. はい、使えます。

[prompt] npm install
インストール中...
[progress:2000] インストール中
完了しました ✓

Q4. スクリプトを保存できますか？

A4. ご自分でスクリプトをテキストファイルで保存してください。

手動でバックアップする場合：

  • スクリプトをテキストファイルとして保存
  • 次回、コピー＆ペーストまたは、ファイル読み込みで復元

Q5. MP4やWebMで出力できますか？

A5. 現在はGIFのみです。READMEなどに貼り付ける想定なので、別のソフトウェアなどで変換してください。

Q6. プログレスバーやスピナーの見た目を変えられますか？

A6. 現在はデフォルトのスタイルのみです。

将来的に選択できるように機能を追加を予定しています。

技術的な仕組み

使用技術

  • Canvas API – アニメーション描画
  • gif.js – GIF生成（ブラウザのみで動作）
  • Web Workers – パフォーマンス最適化

すべてブラウザで完結します。
サーバーにデータを送信することはありません。

まとめ

ターミナルGIFの作成方法を3つ紹介しました：

  1. terminalizer – CLIツール、実際のコマンド実行が必要
  2. asciinema – 録画ツール、編集が困難
  3. Handy Dev Tools – ブラウザで完結、スクリプト方式

最も手軽なのは、ブラウザで完結する方法です。

ターミナル GIF ジェネレーター | Handy Dev Tools
ターミナル出力を擬似的に再現し、GIFアニメーションとして記録・ダウンロードします
handy-dev.tools

メリット：

  • インストール不要
  • コマンド実行不要
  • 何度でも編集可能
  • 完璧なタイミング制御
  • 無料・登録不要
  • 文字装飾対応

技術ブログやREADME.mdでCLIツールを紹介する時は、
ぜひこのツールを使ってみてください！

📦 その他の開発ツールもチェック

Handy Dev Toolsでは、他にも70種類以上の開発ツールを提供しています。

👉 全ツール一覧を見る

人気のツール

すべて無料・登録不要・ブラウザで完結です。

この記事が役に立ったら、ぜひツールも使ってみてください！

スポンサーリンク
タイトルとURLをコピーしました