fukurou

README のデモ GIF を Claude Code に作ってもらった

  • #claude-code
  • #ai
  • #karasu

karasu のデモ GIF。エージェントがリポジトリを 1 つのモデルにリバースし、Web アプリでシステム全体からユースケースまで降りていき、最後に Deploy ビューへ切り替える

私が開発しているアーキテクチャ図ツール karasu の README に、このデモ GIF を置きました。 台本から録画、字幕、GIF への変換まで、Claude Code に作ってもらったものです。

Claude Code にデモ動画を作ってもらえることは、エンジニアの間でもまだあまり知られていない印象があります。 この記事では撮り方を簡単に紹介し、作る途中で私が何を決めたのかを書きます。

サマリ

  1. Claude Code は、devcontainer（Linux のコンテナ）の中でアプリを操作して録画し、字幕付きのループ GIF まで作れる。 自分のブラウザには触らせずに済んだ。
  2. 最初に伝えるべきは、手段より目的だった。 「3 分の紹介動画」ではなく「README に置くループ GIF」と伝えると、20〜30 秒の台本が返ってきた。
  3. 決めることの多くは、試作を見たあとに出てきた。 字幕は要らないという私の判断は、試作を見て覆った。何を公開してよいかも、字幕を読んで初めて考えた。

どうやって撮ったか

私は開発環境に devcontainer を愛用しています。 VS Code から Linux のコンテナに入り、その中で Claude Code を動かしています。 Claude Code はコンテナの中で karasu のプレビューサーバー（karasu serve）を立て、Playwright でブラウザを操作しながら録画しました。 録画には Chrome DevTools Protocol の screencast を使っていて、画面が変わったときだけフレームが届きます。 止まっている場面は 1 枚で済むので、GIF が軽くなります。 マウスカーソルと字幕は、録画用にページの上へ重ねて描いています。 フレームを GIF にまとめるのは ImageMagick です。

コンテナに足したのは日本語フォントだけでした。 日本語版の字幕とアプリの日本語 UI を描くためで、フォントがないと文字が □ になります。

冒頭のターミナルの場面は録画ではなく、作り直した再生画面です。 実際の実行は 15 分ほどかかり、そのままでは GIF に収まりません。 画面に出しているコマンドと数値は、すべて実際の実行結果を使っています。

録画のスクリプトは karasu のリポジトリに入れたので、UI が変わったら同じ手順で撮り直せます。 手順は scripts/readme-demo/README.md にあります。

3 分の紹介動画から 30 秒のループ GIF へ

最初の依頼は「karasu を紹介する 3 分のデモ動画を撮りたい。まず台本を考えてほしい」でした。 返ってきたのは、ナレーション付きの 3 分の台本です。 頼んだとおりのものでした。

そこで、なぜ作りたいのかを伝えました。 README にはループで表示する画像がそもそもなく、それを作りたい。 オープニングは要らないので、このツールで何ができるかが伝わるほうを優先したい。 GIF なら 1 分とか、もっと短いほうがいいのか。

答えは「20〜30 秒がおすすめで、長くても 1 分」でした。 理由は 3 つありました。 GIF には再生バーと音声がないので、見る人は見たい場面へ飛べない。 3 分の GIF は数十 MB になり、README の表示が遅くなる。 コマンドラインの操作は、GIF の中の文字で読ませるより、README 本文のコードブロックで読んでもらうほうが伝わる。

目的を伝えたことで、尺だけでなく中身も変わりました。 最初の台本にあったコマンドラインの場面が消え、画面を見ればすぐ分かる操作だけが残りました。 「3 分の動画」と言ったのは、動画という手段から考えていたからです。 手段だけを伝えていたら、よくできた 3 分の動画ができあがっていたはずです。

試作を見て変わった判断

台本を詰める段階で、字幕を入れるかを聞かれました。 私は「字幕なしでわかるほうが良さそう」と答えています。 あわせて、ノードを絞った小さな図より、巨大なシステムを見渡せるところを見せたいと伝えました。

題材については、試した結果を見て考えが変わりました。 Claude Code は最初、手元にあった WordPress のモデル（約 2 万行、ドメイン 42 個）を勧めてきました。 私は自分の AI ジャーナリングサービスでも足りるか確かめたくなり、リバースを頼みました。 Claude Code はドメインごとに 13 体のサブエージェントを立て、約 150 万トークンを使ってモデルを起こしました。 報告は「巨大さは足りないが、どの階層に降りても読める図になる。WordPress は降りると線の塊になる」というものです。 実際の画面を見て、私は巨大さを見せるのをやめ、AI ジャーナリングサービスで進めることにしました。

字幕も、試作を見て考えが変わりました。 最初の試作は字幕なしの 18 秒で、見てみると、何がしたいのかが伝わりません。 画面は確かに動いていて、ドリルダウンもしています。 ただ、karasu を知らない人がこれを見ても、なぜその操作をしているのか分からないと感じました。 字幕付きも見たいと頼むと、14 分後に字幕ありと字幕なしの 2 本が届きました。 並べて見ると、字幕付きのほうが明らかに伝わります。

字幕なしで伝わるという判断は、作る前の私が頭の中で下したものです。 それが間違いだったと分かったのは、実物を見たときでした。 試作が十数分で届くなら、作る前に判断を固める必要はあまりありません。 私がやったのは、出てきたものを見て「伝わらない」と言うことでした。

触らせる範囲と見せる範囲

デモの中身とは別に、境界を引く判断も 2 つありました。

1 つは、Claude Code に何を触らせるかです。 Claude Code には画面を見てマウスとキーボードを操作する computer use もあるので、私のブラウザで撮ることもできたはずです。 ただ、自分のブラウザにはログイン中のセッションがいくつも残っていて、そこを触らせるのは気が進みません。 今回は devcontainer の中の Playwright で完結したので、その心配をせずに済みました。 録画が終わったあと、コンテナに何を足したか、どう戻せるかも一覧で報告してもらいました。

もう 1 つは、見る人に何を見せるかです。 題材にした AI ジャーナリングサービスのリポジトリは非公開です。 私がそれを意識したのは、字幕付きの試作を見て、冒頭の字幕にリポジトリ名がそのまま入っているのに気付いたときでした。 字幕を「Cloudflare 上の AI ジャーナリングシステム」に変えてもらい、続けて図の中の名前も伏せるよう頼みました。 Claude Code は、パンくず、データストアの名前、Worker の名前、冒頭のターミナルのタイトルまで置き換え、置き換え後のモデルに元の名前が残っていないことを確かめました。 そのうえで、モデル先頭のコメントにまだリポジトリ名が残っていて、コミットする前に消す必要があると指摘してきました。 結局、デモ用のモデルはリポジトリに入れず、入れなかった理由を録画手順の README に書いています。

ここでも、線を引くきっかけは試作を見たことでした。 どこに線を引くかを決めたのは私で、引いた線を細部まで当てはめたのは Claude Code です。

まとめ

Claude Code は、コンテナの中でアプリを操作して録画し、字幕付きのループ GIF にするところまでやってくれます。 デモ動画が欲しいけれど手間が見合わないと思っていたなら、一度頼んでみてください。

頼むときは、動画の長さや形式より先に、どこに置いて誰に見せたいのかを伝えてください。 あとは試作を見て、伝わらないところに文句を言えば進みます。 何を見せて何を見せないかは、試作を見ながら自分で決めることになります。