Claude Code GIF録画 — Chromeでデモ動画を作る方法

Claude CodeはChrome拡張機能と連携すると、クリックや入力といったブラウザ操作の一連の流れをGIFファイルとして録画できます。画面録画ソフトを別途起動する必要はなく、ターミナルから一言指示するだけで完結します。Claude Code GIF録画は、チェックアウトフローの動作確認やバグ報告、PRの説明といった「言葉より画で見せたほうが早い」場面のために用意された機能です。

使うための前提条件

必要なものはGoogle Docsへの下書き自動化など他のブラウザ操作と同じです。Google ChromeまたはMicrosoft Edge、Chromeウェブストアで配布されているClaude in Chrome拡張機能(バージョン1.0.36以降)、/loginでサインインしたPro・Max・Team・Enterpriseいずれかの直接契約プランが要ります。APIキーや長期トークンで認証しているセッションではChrome連携自体が使えないため、GIF録画も同様に動きません。拡張機能のインストール手順や権限モードの詳細はClaude Chrome拡張機能の使い方にまとめています。

GIFを録画する手順

claude --chrome

拡張機能との連携が有効になったら、録画したい操作の流れを自然文で伝えます。

カートに商品を追加してから確認画面に到達するまでの
チェックアウトフローをGIFで録画して

Claudeは指示した通りの操作を実際にブラウザで行い、その様子をそのままGIFファイルとして保存します。裏側で決まった手順を再生するわけではなく、都度その場でクリックと入力を実行してから録画する形です。したがって録画のたびに実際の画面遷移が正しく動くかも同時に検証していることになります。

スクリーンショットとの使い分け

似た機能に、画面を1枚だけ切り取ってディスクに保存する機能があります。どちらも「見せる」ための機能ですが、向いている場面は違います。

GIF録画は「操作の流れ」を1つのファイルで説明できる点が強みです。ステップごとに何枚もスクリーンショットを撮って並べる作業を、指示1回で置き換えられます。一方で長時間の操作や、細かい補足説明を音声で加えたいデモには、専用の録画ソフトのほうが向きます。

v2.1.211より前は、スクリーンショットをディスクに保存するオプションを指定してもファイルが実際には書き出されない不具合があり、修正されたのはこのバージョンからです。動かない場合はまずClaude Codeのバージョンを疑うのが早道です。利用できるブラウザツールの全リストは/mcpを実行しclaude-in-chromeを選んで「View tools」で確認できます。

なぜGIF形式なのか

チェックアウトフローのような操作をわざわざGIFで残す理由は、共有のしやすさにあります。動画ファイルと違い、GIFはGitHubのPRやSlackのメッセージにそのまま貼り付ければ自動再生され、再生用のプレイヤーやホスティング先を別に用意する必要がありません。ループ再生される点も、短い操作の繰り返し確認とは相性がよく、音声解説が要らない「見せるだけ」の用途に向いています。

録画後にタブはどうなるか

Claudeが開いたタブは、セッションに紐づくタブグループとしてまとめられます。ローカルセッションでは、/clearを実行すると、実行中の永続タスクがない限り、録画で開いていたページごとタブグループが閉じられます。/resumeでセッションを切り替える場合やClaude Codeを終了する場合は、タブグループ内に空の新規タブしか残っていないときだけ閉じられる挙動になっています。録画した操作の最終画面を見返したいなら、/clearやセッション終了の前に確認しておくのが確実です。

複数ページをまたぐ操作も1本のGIFにできる

Claude Codeはタブを行き来しながら1つのタスクを進める仕組みを持つため、録画も単一ページの操作に限りません。「ログインページから商品一覧、カート、決済確認画面までの一連の流れを録画して」のように複数ページをまたぐ指示を出せば、ページ遷移を含めた一連の操作が1本のGIFにまとまります。手作業でスクリーン録画ツールを起動し、ページ遷移のたびに録画範囲を意識する手間がかかりません。

録画したGIFの使いどころ

もっとも分かりやすい使いどころは、PRの説明欄です。UIの変更点をコードの差分だけで伝えるのは難しく、実際に動く様子を貼るほうがレビューする側の理解が早くなります。バグ報告でも同様で、再現手順を文章で書くよりGIFを1本添えるほうが、再現条件の食い違いが起きにくくなります。社内向けの操作ドキュメントに埋め込む使い方も、キャプチャを1枚ずつ用意する手間を省けます。バグトラッカーに起票する際は、録画したGIFに加えてログファイルを添付欄へアップロードする指示も同じセッション内で続けて出せるため、再現手順の記録と証跡の添付を1つの会話でまとめて終えられます。

録画前に確認すべきこと — 見えているものはすべて映る

チーム外に共有する前には、録画内容を一度確認する手順を挟むのが安全です。

対応しているブラウザを確認する

Chrome連携が対応するのはGoogle ChromeとMicrosoft Edgeです。加えてClaude CodeはBrave・Arc・Vivaldi・Operaといった他のChromiumベースのブラウザも検出し、接続を試みます。macOS・Linux・Windowsのいずれでも動きますが、以下のとおりWSL環境は対象外です。

録画がうまく始まらないときは、そもそも対応していないブラウザやOS環境で試していないかを最初に確認する価値があります。

Plan modeでは承認が必要になる

Plan modeで動かしている場合、ページを読むだけの操作は確認なしで進みますが、GIF録画はクリックや入力と同じ「状態を変える操作」に分類され、実行前に承認が必要です。複数の操作をまとめて一括実行するbrowser_batchという仕組みもありますが、確認なしでそのまま一括実行できるのは中身のすべてが読み取り専用の場合だけです。GIF録画を含むバッチは、その時点で必ず承認待ちの状態になります。

やや紛らわしいのは、本来は読み取り専用の操作であっても、状態を変えるオプションを同時に指定すると承認待ちに変わる点です。スクリーンショット取得は本来ページを読むだけの操作として扱われますが、save_to_diskオプションを付けてディスクへの書き出しを指定した瞬間、承認が必要な操作へと切り替わります。GIF録画にはそもそも読み取り専用の形自体が存在しないため、常に承認対象です。権限モード全体の設計はClaude Code権限モデルの変遷で扱っています。

VS Code拡張でも使えるか

VS Code拡張機能でも同じ拡張機能を経由するため、プロンプト欄に@browserと入力して録画を指示できます。添付メニューから個別のブラウザツールを選ぶ操作方法も、CLI版と共通です。CLIとVS Code拡張は同じ拡張機能を共有するため、片方でインストールすればもう片方で入れ直す必要はありません。VS Code拡張全体の使い方はClaude Code VS Code拡張機能の使い方で確認できます。

うまく動かないとき

拡張機能が検出されない、録画中に接続が切れるといったトラブルは、Chrome連携そのものの接続トラブルであることが大半です。よくある原因と対処法はClaude Code Chrome連携のトラブルシューティングに切り分けてまとめています。

よくある質問

録画に音声は含まれますか

音声録音についての記載はなく、対応していないと見て運用するのが安全です。音声解説が必要なデモには専用の録画ソフトを使ってください。

録画できる長さに上限はありますか

時間や容量の上限は公表されていません。長時間の操作を録画する場合は、生成されたファイルのサイズを確認してから共有するとよいでしょう。

承認なしで録画させることはできますか

録画は状態を変える操作に分類されるため、Plan modeでは実行前に承認を求められます。通常モードのセッションでの確認の出方は、拡張機能側から継承するサイト単位の許可設定に従うため、モードごとに挙動が異なる点に注意してください。

まとめ

Claude Code GIF録画は、claude --chromeで連携を有効にしたうえで「〜をGIFで録画して」と伝えるだけで、複数ステップの操作をまとめて記録できる機能です。スクリーンショットが1画面の状態を示すのに対し、GIF録画は操作の流れそのものを説明する用途に向きます。表示されているものはすべてそのまま記録される点だけは、共有前に必ず意識しておく必要があります。