Macアプリ「CodeHerd」の30秒紹介動画
CLIエージェントを1画面に並べて動かすMacアプリ「CodeHerd」の30秒の紹介動画です。タブの散らかりや同じファイルの編集の衝突が、ペインとgit worktreeで整理される流れを見せています。
依頼を受けて制作したものではありません。FablessBridgeが公開情報をもとに自主制作した紹介動画です。製品名・画面・ロゴは各社のものです。
CodeHerdとこの紹介動画
CodeHerd は、Claude Code・Codex・Gemini CLI などのCLIエージェントを1つのMacウィンドウに並べて動かすアプリです。各エージェントに名前付きのペインと個別のgit worktreeを与え、2つのworktreeが同じファイルを変更しようとすると警告します。Herd HQ でどのエージェントが待っているかを確認できます。
- 製品
- CodeHerd（Macアプリ）
- 動画
- 30秒・横16:9・画面の文字は英語・ナレーションなし
動画で見せたこと
- ターミナルのタブが山になり、どのエージェントが待っているか分からない状況を、タブの積み重なりで見せました。
- 2つのエージェントが同じファイルを編集してぶつかる様子を、マージ衝突のエラー表示で示しました。
- ペインとgit worktreeとHerd HQの三つを、公式の画面の寄りと囲みで一つずつ見せました。
30秒の流れ
0〜3秒 アイコンと、スクランブルで決まる「CodeHerd」、「Run your AI coding agents side by side.」が出ます。
3〜9秒 「A pile of terminal tabs.」の言葉とともに、ターミナルのタブが積み重なります。
9〜12秒 claudeとcodexの2つのノードが同じファイルへ向かい、マージ衝突のエラーが赤く出ます。
12〜16秒 「Every agent gets its own pane.」の言葉とともに、公式の画面でペインが並ぶ様子を見せます。
16〜20秒 mainからclaudeとcodexそれぞれのworktreeへ枝分かれし、公式の画面の枝の表示に寄ります。
20〜23秒 「See who needs you.」の言葉とともに、公式のHerd HQの画面を見せます。
23〜26秒 「Your agents. Your subscriptions.」の言葉とともに、アイコンと「No API keys stored. No telemetry.」を出します。
26〜30秒 アイコンと名前、codeherd.appで締めます。
表現で工夫したこと
夜の牧草地を思わせる深緑の地に生成りと琥珀を重ね、背景にASCIIの草を敷きました。見出しと名前はスクランブル文字が左から決まる動きにし、エージェントの接続はノードと線で描いています。製品の画面は公式の2枚だけを使い、ターミナルの文字は一般的な再現で固有の名前は入れていません。
製品サイトで公開されている情報だけをもとに、製品の見た目に合わせて制作しています。ナレーションは入れず、画面の動きと音楽で伝える構成です。
自社の製品の紹介動画を相談する
企画が固まっていない段階からご相談いただけます。
紹介動画を相談する料金と制作の流れを見る顧客案件と自社サンプルを見る