[← ニュース一覧](/ja/news)使い方

# Claude、Cursor、CodexでVisiboxのCSSエフェクトを作る

ClaudeがVisiboxの新しいエフェクトを、ゼロからライブで、ほんの数分で作り上げます。

Visibox 5にはMCPサーバーが組み込まれています。難しく聞こえますが、要するにデスクトップのAIアシスタントがアプリの中に入り込んで、実際に作業できるということです。上の動画では、ClaudeをVisiboxに接続し、自分では書き方がわからないエフェクトを作ってもらっています。ジェームズ・ボンド風のガンバレル・アイリスで、画面を円形にマスクし、曲に合わせて跳ね回るものです。数分後には、それがプロジェクトに追加され、クリップに適用できる状態になっています。

インストールするプラグインも、覚えるエフェクト言語もありません。欲しいものを言葉で説明すれば、面倒な部分はアシスタントが引き受け、自分は演出家の席に座ったままでいられます。

## Visiboxのエフェクトの正体はCSS

これを可能にしている仕掛けはこうです。VisiboxのエフェクトはただのCSSで、あらゆるWebページのスタイルを決めているのと同じ言語です。技術的に聞こえますが、実は閉じた独自のエフェクト形式とは正反対です。CSSはインターネット上で最もドキュメントが充実しているもののひとつなので、コードが得意なAIアシスタントなら、Visiboxのエフェクトを書くのもすでに得意なのです。

しかも、アシスタントは手探りで推測するわけではありません。接続すると、プロジェクトにすでにあるエフェクトを読み込み、Visiboxが求める書き方のルールを学んで、それに沿った新しいエフェクトを書きます。デバッグが必要なコードの断片ではなく、ちゃんと読み込まれて動くものができあがります。

## 動画の内容

最初から最後まで、ノーカットで紹介しています。

-   **最初に一度だけ接続する。** 設定メニューからワンクリックでVisiboxのMCPサーバーを登録します。
-   **接続を確認する。** アシスタントがやることを説明しているだけでなく、実際にVisiboxとやりとりしているかを手早くチェックします。
-   **エフェクトを説明する。** ガンバレル・アイリスを、普通の言葉で頼みます。
-   **できあがる様子を見る。** アシスタントが既存のエフェクトを読み込み、CSSを書き、新しいエフェクトをプロジェクトに追加します。
-   **クリップに適用する。** できあがったら、クリップへの適用は数クリックで完了です。

## 主導権は自分にある

ポイントは「AIが代わりにやってくれる」ことではありません。これまでならドキュメントを読み込むか誰かに頼むしかなかった、退屈で面倒な作業が、ひと言で済むようになったということです。ショーの見た目も、何をいつ出すかも、何を採用するかも、決めるのは今までどおり自分です。アシスタントは舞台スタッフであって、演出家ではありません。

同じやり方は、エフェクト以外にも広く使えます。接続したアシスタントは、プロジェクトの編集、クリップの並べ替え、曲の調整もこなします。オーディオリアクティブなビジュアライザーを作ることもできます。こちらはさらに難しい技ですが、そのぶんAIにはいっそう向いています。詳しくは別の解説記事で紹介しています：[Claude、ChatGPT、GeminiでAIミュージックビジュアライザーを作る](/news/ai-generated-visualizers-recipe)。

## 対応しているアシスタント

Visiboxは、MCPプロトコルに対応したデスクトップアシスタントならどれでも使えます。収録時点で対応しているのは次のとおりです。

-   Claude DesktopとClaude Code（Anthropic）
-   Cursor
-   Visual Studio Code
-   OpenAI Codex
-   Gemini CLI

対応するアシスタントは続々と増えています。詳しい設定手順は[Visiboxマニュアル](https://manual.spaceage.tv/5.0.0/integrations/ai)にあります。

## 試してみよう

Visiboxは無料で始められ、2週間はすべてのPro機能が使えます。アシスタントをつないで、自分だけのエフェクトをいくつか作ってみてください。[Visiboxをダウンロード](https://spaceage.tv)して、見たいものをAIに伝えましょう。

共有

[⊙ 無料で試すVisiboxをダウンロード14日間のPro試用 · カード不要](/ja/downloads)

フォローする

-   [Discord →](/discord)
-   [Reddit →](https://www.reddit.com/r/visibox/)
-   [Instagram →](https://www.instagram.com/spaceage.visibox)
-   [TikTok →](https://www.tiktok.com/@spaceage.visibox)
-   [YouTube →](https://www.youtube.com/@spaceage)
-   [メーリングリストに登録 →](/ja/mailinglist)

How To, ai, effects, MCP, video

## こちらもおすすめ

![Claude、ChatGPT、GeminiでAI音楽ビジュアライザーを作る](/_astro/Screenshot-2026-05-13-at-1.10.02-PM-copy.BTB9XGX9.jpg)

レシピ

### [Claude、ChatGPT、GeminiでAI音楽ビジュアライザーを作る](/ja/news/ai-generated-visualizers-recipe)

![ChatGPTが「ストレンジャー・シングス」風ビジュアライザーを書いた](/_astro/StrangerVisualizer_play.Cy8ibYD6.jpg)

使い方

### [ChatGPTが「ストレンジャー・シングス」風ビジュアライザーを書いた](/ja/news/chatgpt-wrote-my-stranger-things-visualizer)

![AIでつくるコンサート映像](/_astro/AI-eye.Bbs8USfm.jpg)

使い方

### [AIでつくるコンサート映像](/ja/news/creating-concert-visuals-with-ai)