紹介動画シリーズ

エディタ拡張「Command Code for VS Code & Cursor」の30秒紹介動画

オープンモデル向けのコーディングエージェントCommand CodeをVS CodeとCursorで使える拡張の30秒の紹介動画です。端末との往復をなくし、選んだ行を文脈にして差分をエディタ内で確かめる流れを見せています。

  • エディタ拡張
  • 30秒
  • 文字:英語
  • 自主制作
  • 公開

依頼を受けて制作したものではありません。FablessBridgeが公開情報をもとに自主制作した紹介動画です。製品名・画面・ロゴは各社のものです。

Command Code for VS Code & Cursorとこの紹介動画

Command Code はオープンモデル向けのコーディングエージェントで、この拡張によりVS Code(1.106以上)とCursorの中で使えるようになりました(ベータ)。開いているファイルや選んだ行が自動で文脈に入り、提案された変更はエディタのネイティブ差分で残すか戻すかを選べます。セッション一覧やスラッシュコマンドもあり、CLIを入れずにアカウントだけで動きます。

製品
Command Code for VS Code & Cursor(エディタ拡張)
動画
30秒・横16:9・画面の文字は英語・ナレーションなし

動画で見せたこと

  • ファイルのパスや行を端末へ貼り付け続ける手間に対し、エディタで選んだ行がそのまま文脈チップになる様子
  • 端末のスクロールで長い差分を追う苦労に対し、変更がエディタの差分として開きKeep Changeで確定する様子
  • エディタと端末の窓を行き来して集中が切れる状況を、1つの窓にまとめて解消する流れ

30秒の流れ

0〜2秒 ワードマークが左から現れ、VS CodeとCursorに来たことを一文で伝えます。

2〜4.5秒 左のエディタでコードを書き、右の別窓の端末ではエージェントがどのファイルを見るか尋ねます。

4.5〜7.75秒 選んだ行のパス付きチップが何度も端末へ飛び、貼り付けが続きます。

7.75〜11秒 端末に長い差分が流れ続け、エディタは暗くなっていきます。

11〜13秒 2つの窓が入れ替わり続け、窓の切り替え回数が増えていきます。

13〜15秒 藍のノイズタイルが立ち上がり、ワードマークと「Now inside your editor.」が出ます。

15〜20秒 1つの窓で同じ行を選ぶと入力欄にチップが入り、送信するとセッションが追加されて返答が届きます。

20〜25秒 同じ差分がエディタ内の差分として開き、Keep Changeを押すと赤い行が畳まれてテスト通過が記録されます。

25〜27.5秒 CLIが要らないことと、VS CodeとCursorでベータ提供中であることを示します。

27.5〜30秒 ワードマークと締めの一文が出て、commandcode.ai/ide が打ち込まれます。

表現で工夫したこと

サイトの黒地に破線のグリッドと藍のノイズブロックが明滅する見た目に合わせ、エディタの色はサイトのIDEプレビューに合わせた紺藍にしました。場面のつなぎは藍のタイルが斜めに走るワイプです。VS CodeやCursorのロゴは使わず名前を文字で出すだけにし、サイトに並ぶ他社ロゴも入れていません。

製品サイトで公開されている情報だけをもとに、製品の見た目に合わせて制作しています。ナレーションは入れず、画面の動きと音楽で伝える構成です。

自社の製品の紹介動画を相談する

企画が固まっていない段階からご相談いただけます。

紹介動画を相談する料金と制作の流れを見る顧客案件と自社サンプルを見る