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

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

Claude CodeのChrome連携は、ブラウザ操作の一連の流れをGIFとして録画できます。PR説明やバグ報告に使う手順、スクリーンショットとの使い分け、共有前に確認すべき注意点をまとめます。

読了目安 約9分

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

録画を始める前に満たす条件

必要なものは3つです。Google ChromeまたはMicrosoft Edge、Chromeウェブストア配布のClaude in Chrome拡張機能(バージョン1.0.36以降)、そして/loginでサインインしたPro・Max・Team・Enterpriseの直接契約プランです。Brave・Arc・Vivaldi・Operaも検出されますが、WSL(Windows Subsystem for Linux)ではChrome連携が使えません。

詰まりやすいのは認証です。APIキーやclaude setup-tokenで発行した長期トークンで認証したセッションでは、--chromeを付けてもChrome連携がオフのままになります。v2.1.216より前はこの状態でも接続を試み、403エラーで失敗していました。Amazon BedrockなどのサードパーティプロバイダーだけでClaudeを使っている場合も対象外で、別にclaude.aiのアカウントが必要です。

拡張機能の入れ方と権限の詳細はClaude Chrome拡張機能の使い方にあります。

指示から保存までの流れ

起動時のフラグは claude --chrome です。v2.1.287でclaude --helpを実行すると、次の2行が並んでいます。

--chrome       Enable Claude in Chrome integration
--no-chrome    Disable Claude in Chrome integration

毎回フラグを付けたくなければ、セッション内で/chromeを実行して「Enabled by default」を選びます。ただしブラウザツールが常にコンテキストへ読み込まれるため、使用量が増えたと感じたらオフに戻して--chromeだけにする選択肢があります。

手順

GIFが保存されるまで

  1. 1

    連携を確認する

    claude --chromeで起動し、/chromeを実行します。パネルに「Status: Enabled」と「Extension: Installed」が出ていれば準備完了です。

    Chromeを使って初めて起動したときは、連携の紹介とサイト権限の仕組みを説明する一度きりのダイアログが出ます。Enterキーで進みます。Chromeが起動していなくてもClaude Codeは通常どおり立ち上がります。v2.1.211より前は、連携を有効にしてChromeが未起動だと、起動が固まることがありました。

  2. 2

    操作の流れを自然文で伝える

    「カートに商品を追加して確認画面に到達するまでをGIFで録画して」のように、始点と終点を書きます。

  3. 3

    承認が出たら確認する

    権限確認のダイアログは「Claude in Chrome wants to」で始まります。サイト単位でセッション中は許可する選択肢もあります。

  4. 4

    Claudeがブラウザを操作して録画する

    新しいタブが開き、Claudeが実際にクリックと入力を行います。

Claudeは決まった手順を再生するのではなく、その場で操作を実行しながら録画します。録画のたびに、画面遷移が実際に動くかの検証も兼ねることになります。

保存先のパスについて、GIF録画の説明には記載がありません。スクリーンショットを保存する機能は「ファイルパスを報告する」と書かれているので、GIFでも録画後に保存場所を尋ねておくのが確実です。

認証が必要なページを録画するとき

ログイン済みのブラウザの状態は共有されます。そのためログイン後の画面も録画対象にできます。

一方、ログインページやCAPTCHAに当たるとClaudeは止まり、手動での対応を求めます。録画の途中でこの状態になれば、そこで流れが止まります。ログインを済ませてから、録画したい操作だけを指示する順序が噛み合います。

GIFにするか、静止画にするか

くらべる

GIF録画とスクリーンショット保存

流れを見せる

GIF録画

複数画面にまたがる手順を1ファイルで示します。ステップごとに撮った画像を並べる作業が、指示1回で済みます。

状態を見せる

スクリーンショット保存

エラー画面や特定のUI状態を1枚で示します。「保存して」と頼むと、ディスクに書き出してパスを返します。

音声解説が要るデモや、長時間の操作を残したい場合は、手動の画面録画ソフトのほうが向きます。GIF録画に音声が含まれるかどうかは、公式の説明に記載がありません。

v2.1.211より前は、スクリーンショットのsave_to_diskオプションを指定してもファイルが書き出されませんでした。画像が見当たらないときは、まずClaude Codeのバージョンを疑うのが早道です。利用できるブラウザツールの全リストは、/mcpでclaude-in-chromeを選び「View tools」で見られます。

GIFを選ぶ理由

GIFは画像ファイルなので、動画のようにプレイヤーやホスティング先を別に用意しなくても、貼り付けられる場面が多くなります。音声解説が要らない短い操作の繰り返し確認とも相性がよい形式です。貼り付け先でどう表示されるかは、使うサービスごとに確認が要ります。

複数ページをまたぐ操作を1本にまとめる

Claude Codeはタブを行き来しながら1つのタスクを進める仕組みを持つため、録画も単一ページに限りません。「ログインページから商品一覧、カート、決済確認画面までを録画して」と指示すれば、ページ遷移を含む一連の操作が1本にまとまります。

PRやバグ報告で使う

UIの変更点はコードの差分だけでは伝わりにくく、動く様子を貼るほうがレビューする側の理解が早くなります。バグ報告でも、再現手順を文章で書くより映像を添えるほうが、再現条件の食い違いは起きにくくなります。

バグトラッカーへの起票では、GIFに加えてログファイルの添付も同じセッションで指示できます。ファイルの添付はv2.1.211以降の機能です。アップロードには3つの制約があります。

  • セッションが読み取りを許可しているファイルだけが対象で、Readを拒否する権限ルールがあれば添付もできません
  • 1回のアップロードは合計10MBまでです
  • ハードリンクが複数あるファイルは断られます。node_modulesのようなパッケージ管理の保管場所に多いので、コピーして使います

共有前に確認すること

チーム外に出す前に、録画内容を一度再生して確認する手順を挟みます。表示中のタブやブックマークバーを事前に整理しておくと、映り込みを減らせます。録画中の操作は可視のChromeウィンドウでリアルタイムに進むので、映り込みは録画しながら目で確認できます。開発中の画面ならデモ用のアカウントやダミーデータを使うと、確認の手間が減ります。

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

Claudeが開いたタブは、セッションに紐づくタブグループにまとまります。/clearを実行すると、残存する作業が動いていない限り、開いていたページごとグループが閉じられます。

/resumeでセッションを切り替える場合やClaude Codeを終了する場合は、グループに空の新規タブしか残っていないときだけ閉じられます。読んでいるページが残る挙動です。録画の最終画面を見返したいなら、/clearの前に確認しておくのが確実です。

承認の出方はモードで変わる

権限

承認が必要になる場面

  • Plan mode

    GIF録画、新規タブを開く操作、ショートカットの実行の前に確認が出ます。tabs_context_mcpがcreateIfEmptyを指定した場合も同じです。

  • browser_batch

    複数の操作をまとめて実行する呼び出しです。Plan modeでは、上の操作を1つでも含むバッチ呼び出しにも確認が出ます。

    ページの読み取りだけで構成されたバッチは、確認なしで通ります(v2.1.199以降)。状態を変える操作が混ざっているかどうかが分かれ目です。

  • バイパス権限モードが使える場合

    さらにフィーチャーフラグの取得がオフなら、これらの呼び出しは確認なしで動きます。

  • auto mode

    分類器がサイトへのブラウザ呼び出しを承認すると、拡張機能側のサイト単位の確認が省かれます。ただし、Claude in Chromeへのサイト拒否のルールがある場合は除きます。

どのサイトを操作できるかの権限は、Chrome拡張機能の設定から継承されます。権限モード全体の設計はClaude Code権限モデルの変遷で扱っています。

VS Code拡張で録画する

VS Code拡張でも同じChrome拡張機能を経由します。プロンプト欄に@browserと入力してから、録画の指示を書きます。CLIで使う拡張機能がすでに入っていれば、VS Code側で入れ直す必要はありません。CLIの--chromeのようなフラグも要らず、拡張機能が入っていれば使える状態になります。全体の使い方はClaude Code VS Code拡張機能の使い方にあります。

録画が始まらないとき

最初に、非対応のブラウザやWSLで試していないかを確認します。次に、APIキー認証になっていないかを見ます。拡張機能が検出されない、接続が切れるといった症状は、GIF録画ではなくChrome連携側の問題です。拡張機能のサービスワーカーが長いセッションで休止すると接続が切れます。その場合は/chromeから「Reconnect extension」を選びます。

/chromeやブラウザツールそのものが見当たらないときは、組織の設定が原因のこともあります。管理者がClaude in Chromeをオフにしていると、--chromeも/chromeもブラウザツールも使えません(v2.1.260以降)。認証方式が対応していない場合も、/chromeなどのスラッシュコマンドは一覧から隠れます。

拡張機能が未検出のときは、「Claude wants to use your browser」という導入プロンプトが出ます。選択肢は「Install extension」「Not now」「Don't ask again」の3つで、確認は1セッションに1回までです。組織がdeniedMcpServersの管理設定でclaude-in-chromeのMCPサーバーを止めている場合は、このプロンプト自体が出ません。

録画の途中で止まったときは、alert・confirm・promptといったJavaScriptのダイアログがページを塞いでいないかを見ます。ダイアログはブラウザのイベントを止めるため、Claudeに指示が届かなくなります。手動で閉じてから、続きをClaudeに伝えます。「No tab available」と出たなら、タブの準備が済む前に操作しようとした状態です。新しいタブを作って再試行するよう頼みます。

複数のブラウザをつないでいる場合は、/chromeの「Select browser…」で使う側を選べます。意図しないブラウザで録画が始まる事態を避けられます。

原因ごとの切り分けはClaude Code Chrome連携のトラブルシューティングにまとめています。

公式の説明に書かれていないこと

録画の長さやファイルサイズの上限、GIFのフレームレートや解像度は、公式の説明に記載がありません。長い操作を録画する場合は、生成されたファイルのサイズを確認してから共有します。

フラグの表示はv2.1.287で確認したものです。実際の録画は、拡張機能とブラウザが要るため試していません。

まとめ

claude --chromeで連携を有効にして「〜をGIFで録画して」と伝えれば、複数ステップの操作を1つのファイルにできます。Plan modeでは承認が要ること、画面に映るものはすべて記録されることの2点を、共有前に意識しておく必要があります。

この記事を共有:XはてブLinkedIn

関連する記事

Claude Code をもっと見る →