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

# AIが書いたコードでライブ映像を作る方法：プログラミング知識は不要

CSSのみのアニメーション。div要素10個、CSS約40行、JavaScriptなし。30秒のシームレスなループ。AIとの1回の会話で生成しました。

フレームワークもライブラリも使っていません。何十年も前からどのブラウザにも入っている、素のHTMLとCSSだけです。CSSカスタムプロパティ（`--i`）1つを`calc()`式に渡すことで、1つのアニメーションルールから10種類の速度を生み出しています。テクニックはAIが考えました。人間がしたのは、見たいものを言葉で伝えることだけです。

これからp5.jsやThree.jsのようなツールを掘り下げていきますが、「ごくわずかなコードでも多くのことができる」という点は覚えておいてください。

## テキストから動画の先へ：AIに映像を生成するコードを書かせる

以前の記事「[AIでライブ映像を作る](/news/creating-concert-visuals-with-ai)」では、Sora、Veo、Runwayといった、文章のプロンプトから動画クリップを生成するテキスト動画変換ツールを紹介しました。夢のような風景、抽象的な液体の世界、宇宙を飛ぶような映像など、映画的でフォトリアルなコンテンツ作りにはうってつけです。ただ、同じくらい強力で、おそらくもっと楽しい方法がもう1つあります。AIに映像を生成する_コードを書かせる_方法です。

コードの知識は必要ありません。その部分はAIが引き受けます。必要なのは、何を見たいかを決めることだけです。これを「バイブコーディング」と呼ぶ人もいます。作りたいものを普通の言葉で説明し、実装はAIに任せるやり方です。今ではAIツールの使い方として特に人気があり、実は映像づくりに_ぴったり_なのです。

動画を説明してAIのレンダリングを待つのではなく、会話の中でアニメーションを説明すると、AIがそれを描画するプログラムを書いてくれます。しかもブラウザ上でリアルタイムに動きます。仕上がりはアルゴリズミックで幾何学的、カスタマイズの幅は無限です。脈打つグリッド、渦を巻くパーティクル、形を変えるシェイプ、ジェネレーティブなパターン、オプアート風の錯視などを思い浮かべてください。これがAI支援のクリエイティブコーディングで、私たちの[Op Art Video Pack](/ja/video-packs/visibox-op-art-video-pack-1)もこの方法で作りました。

## 映像づくりにAI生成コードを使う理由

ツールの話に入る前に、テキスト動画生成ではなくこの方法を選ぶ理由を整理しておきましょう。

-   **完璧なループ。** コードベースのアニメーションは、最初からシームレスにループするよう設計できます。クロスフェードでごまかす必要はありません。数学がきれいにつないでくれます。
-   **バリエーションは無限。** 色、速度、形、パラメーターを1つ変えるだけで、まったく別の映像になります。1つのプロンプトから何十ものループが生まれます。
-   **クセになります。** 本当です。「今度は渦巻きにして」と頼んで、AIがリアルタイムにコードを書き換える様子を眺め始めたら、午後がまるごと消えます。

### コード生成とテキスト動画AI：使い分けの目安

以前の[AI生成映像の記事](/news/creating-concert-visuals-with-ai)を読んだ方は、どちらを使えばよいか迷うかもしれません。簡単に比較してみます。

テキスト動画AI（Sora、Runway、Veo）

AIコード生成（この記事）

**向いているもの**

映画的、有機的、フォトリアルな映像

幾何学的、アルゴリズミック、パターン系の映像

**ループ**

編集の工夫や専用ツールが必要

設計の段階から数学的にシームレス

**カスタマイズ**

毎回ゼロから生成し直し

パラメーターを1つ変えれば新しいバリエーション

**ファイルサイズ**

大きい（複雑な映像データ）

小さい（圧縮しやすいシンプルな動き）

**準備**

クラウドサービスのアカウントとクレジット

ブラウザで使える無料のAIチャットボット

**スタイル**

幻想的、シュール、写真的

精密、幾何学的、オプアート

## 映像コードを書いてくれるAIツール

主要なAIチャットボットには、コードのライブプレビュー機能が搭載されています。バイブコーディングを可能にしているのがこの機能です。作りたいものを入力すると、HTML、CSS、JavaScriptが生成され、その場で動く様子を確認できます。使えるツールを紹介します。

### Claude（Artifacts）

AnthropicのClaudeには、会話の横にサイドパネルを開くArtifactsという機能があります。Claudeに映像のコードを頼むと、その場で結果がレンダリングされ、コードと並んでインタラクティブなライブプレビューが表示されます。「色を暖かくして」「回転を遅くして」「パーティクルを増やして」と修正を頼めば、プレビューがすぐに更新されます。

Claudeは整理された読みやすいコードを書く傾向があり、クリエイティブコーディングのプロンプトを特にうまく処理します。p5.js、Three.js、Canvas API、CSSアニメーションとの相性もよく、どれも1つのHTMLファイル内でCDNリンクから読み込めます。

Artifactsは無料プランでも有料プランでも使えます。[claude.ai](https://claude.ai)から利用できます。

### ChatGPT（Canvas）

OpenAIのChatGPTには、同じようなサイドパネル型のワークスペースCanvasがあり、HTMLとJavaScriptをリアルタイムにレンダリングできます。p5.jsのスケッチ、Three.jsのシーン、素のJavaScriptアニメーションを頼めば、Canvasに実行結果が表示されます。Claudeと同じように、会話しながら仕上げていけます。

Canvasはサンドボックス環境で動作し、CDN経由で外部ライブラリも使えます。ChatGPTの無料プランと有料プランの両方に含まれていますが、複雑なコード生成には有料プランで使えるより高性能なモデルが有利です。[chatgpt.com](https://chatgpt.com)から利用できます。

### Google Gemini（Canvas & AI Studio）

GoogleのGeminiにもCanvas機能があり、サイドパネルでコードを生成してプレビューできます。Claude ArtifactsやChatGPT Canvasとほぼ同じ機能です。Geminiユーザーなら誰でも無料で使え、HTML、CSS、JavaScriptのライブプレビューに対応しています。

もっと本格的なものを作りたいなら、GoogleのAI Studioにある「Build Mode」が使えます。普通の言葉の説明から完全なWebアプリを生成し、ライブプレビューとワンクリックでのデプロイまで行えます。シンプルなループアニメーションには大げさですが、インタラクティブな映像楽器やジェネレーティブアートのギャラリーを作りたいなら試す価値があります。[gemini.google.com](https://gemini.google.com)と[aistudio.google.com](https://aistudio.google.com)から利用できます。

### その他の選択肢

より高度なワークフローには、**Cursor**や**Windsurf**のようなAI搭載コードエディターがあり、AIを組み込んだ本格的な開発環境を使えます。また、**v0**、**Bolt.new**、**p5js.ai**といったWebベースのツールでも、ライブプレビュー付きで映像コードを生成できます。

## クリエイティブコーディング用ライブラリ：p5.js、Three.jsなど

コードはAIが書くので深く理解する必要はありませんが、何を頼めばよいかを知っておくと役に立ちます。

-   **素のHTMLとCSS**：ブラウザ自身のアニメーション機能を見落とさないでください。冒頭の例はこれだけで作っています。CSSの`@keyframes`、カスタムプロパティ、`calc()`を使えば、JavaScriptなしで複雑な幾何学アニメーションを作れます。ライブラリに手を伸ばす前に、まずAIに「CSSだけのアニメーション」を頼んでみてください。ライブラリがいらないこともあります。
    
-   **p5.js**：Webでのクリエイティブコーディングの定番ライブラリです。もともとアーティストやデザイナー向けに作られたもので、パーティクルシステム、フローフィールド、幾何学パターン、ノイズを使った映像など、2Dのジェネレーティブアートにぴったりです。迷ったらAIにp5.jsのスケッチを頼みましょう。美しいものにたどり着く一番の近道です。
    
-   **Three.js**：Webで3Dを扱うときの標準です。回転する3Dオブジェクト、ボリュームライト、カメラが飛び抜けていく映像など、奥行きのあるものが欲しいならThree.jsを指定しましょう。どのAIチャットボットのサンドボックスでもCDN経由で動きます。
    
-   **その他の選択肢**：ブラウザ標準の**Canvas API**や**CSS/SVGアニメーション**はライブラリなしで動きます。タイムラインベースの演出には**GSAP**が便利です。GPUを使った高度なエフェクト（Shadertoyのようなもの）が欲しいなら、AIに**GLSLフラグメントシェーダー**を頼んでみてください。コードは複雑になりますが、仕上がりは圧巻です。
    

## はじめてのAI生成ループ映像を作る

実践的な手順を紹介します。先ほど挙げたAIチャットボットのどれかを開いて、こんなプロンプトを試してみてください。

> ゆっくりと脈打ちながら回転する同心円のp5.jsスケッチを作ってください。背景は暗くして、明るく彩度の高い色を使ってください。シームレスにループさせてください。

数秒でアニメーションのライブプレビューが表示されます。そこから調整を重ねていきます。

-   「円を細くして、数を増やして」
-   「深い紫、エレクトリックブルー、ホットピンクのカラーパレットにして」
-   「回転にかすかな揺らぎを加えて」
-   「少しだけ速くして」
-   「今度は円の代わりに四角形でバリエーションを作って」

1回の変更にかかるのは数秒です。15分あれば、1ダースのオリジナルループができあがります。

### 前置き：AIをうまく働かせるための下準備

AIチャットボットは汎用ツールです。何も指示しないと、小さなキャンバスで出力したり、不要なUIコントロールを付けたり、きれいにループしないアニメーションを作ったりすることがあります。最初のプロンプトの冒頭に、どんな出力が欲しいかを伝える数行を入れておけば、こうした問題はほとんど避けられます。

映像生成の会話の最初に貼り付けて使える前置きの例です。

> ライブパフォーマンス用のループ映像アニメーションを作りたいと思っています。作成するすべての映像で、次のルールに従ってください。
> 
> -   1つのHTMLファイルで、CDN経由で読み込んだp5.jsを使う
> -   キャンバスはブラウザウィンドウ全体に広げ、サイズ変更に追従させる
> -   背景は暗い色か黒にする
> -   すべての動きは、フレーム数ではなく時間ベースの計算（sin、cos、剰余）でシームレスにループさせる
> -   UIコントロール、テキストのオーバーレイ、ボタン、スライダーは付けず、映像だけにする
> -   アニメーションは60fpsでなめらかに動かす
> -   特に指定がない限り、はっきりした彩度の高い色を使う

これで、以降のプロンプトは短くクリエイティブなものだけで済みます。AIはもう出力の形式を知っているからです。「虹色の軌跡を引きながら渦を巻く六角形」と言うだけで、全画面でループし、すぐに録画できる状態のものが出てきます。

前置きは好みに合わせて調整してください。p5.jsではなくThree.jsを使いたいなら差し替えればいいですし、白い背景がよければその行を変えれば済みます。ポイントは、ルールを一度決めておけば毎回繰り返す必要がなくなることです。

**ヒント：** Claudeを使っているなら、この前置きを「プロジェクト」の指示として保存しておくと、すべての会話に自動で含まれます。ChatGPTにも、設定に同じような「カスタム指示」機能があります。こうしておけば、新しいチャットを開いてすぐに映像のプロンプトを始められます。

### AIクリエイティブコーディングのプロンプトのコツ

技術的な設定は前置きに任せて、クリエイティブなプロンプトでは_何を見たいか_だけに集中しましょう。

-   **形だけでなく動きを説明する。** 「回転する六角形」でも悪くはありません。でも「呼吸するようにゆっくり回転しながら拡大縮小する六角形、残像エフェクト付き」のほうがずっと良い結果になります。
-   **ムードを伝える。** 「催眠的」「ミニマル」「サイケデリック」「穏やか」「攻撃的」といった言葉が、色選び、速度、複雑さの手がかりになります。
-   **実在するものにたとえる。** 「万華鏡のように」「顕微鏡で見た細胞のように」「窓を伝う雨のように」。たとえを使うと、抽象的な説明よりも具体的な映像のゴールをAIに伝えられます。
-   **カラーパレットを指定する。** 指定しなければAIが色を選びますが、ありきたりになりがちです。「黒地にシアンとマゼンタだけ」「夕焼けのような暖色系」と指定すれば、個性のある仕上がりになります。
-   **少しずつ調整する。** 理想の映像を1回のプロンプトで説明しようとしないでください。シンプルに始めて、磨いていきましょう。そのほうが速くて楽しいです。
-   **バリエーションを頼む。** 気に入ったものができたら、「カラーパレットを変えたバリエーションを3つ作って」「もっとミニマルなバージョンを作って」と頼みましょう。映像ライブラリを作る最速の方法の1つです。
-   **会話の途中で技術を切り替える。** p5.jsのスケッチで思った見た目にならないときは、「このコンセプトをThree.jsで3Dの遠近感付きで作り直して」と頼んでみてください。レンダリング方法を変えるだけで、仕上がりが一変することがあります。

### 最初に試したいプロンプト

取っかかりが欲しいときのために、安定して良い結果が出るプロンプトを紹介します。まず前置きを貼り付けてから、どれか試してみてください。

**オプアートと幾何学**

-   「白黒のセグメントが交互に並んだ同心円のリングを回転させて、モアレ干渉パターンを作って」
-   「広がったり縮んだりを繰り返す同心多角形。それぞれ隣とわずかに位相をずらして」

**パーティクルとフロー**

-   「数百個の小さなパーティクルが、そよ風に流される煙のように見えない曲線に沿って流れていく。パーティクルはフェードイン、フェードアウトさせて」
-   「宇宙を飛んでいるように、ゆっくり前へ流れていく星空。星の大きさと明るさはばらつかせて」

**オーガニックと自然**

-   「重なり合うサイン波がオーロラのように画面を漂い、緑と紫の色合いが移り変わる」
-   「静かな水面に落ちる雨粒のように、ランダムな点から外側へ広がる同心円の波紋」

**3Dと遠近感**（これらはThree.jsを指定しましょう）

-   「黒い背景の前でゆっくり回転する、エッジが光るワイヤーフレームのトーラスノット。Three.jsでレンダリングして」
-   「回転する幾何学図形でできたトンネルの中を、カメラがゆっくり進んでいく。Three.jsで」

**抽象とサイケデリック**

-   「なめらかなノイズで変形するブロブ状のシェイプが、玉虫色に色を変えていく」
-   「半透明のシェイプが何層にも漂って重なり、交わったところに新しい色が生まれる」

## AI生成映像を動画ファイルとして書き出す方法

ブラウザで気に入ったものができたら、Visibox（やその他のソフト）で使えるように動画ファイルとして書き出す必要があります。方法はいくつかあります。

### 画面収録

一番簡単な方法です。ブラウザでアニメーションを全画面表示（ほとんどのブラウザでF11）にして、画面を録画します。

-   **Mac：** 手軽に録るなら標準の画面収録（Cmd+Shift+5）、フレームレート、形式、エンコードまで細かく制御したいなら**OBS Studio**（無料）を使います。
-   **Windows：** 手軽に録るなら**Xbox Game Bar**（Win+G）、60fpsや形式の指定が必要な本格的な作業には**OBS Studio**を使います。

### ブラウザ内キャプチャ（上級者向け）

画面収録によるノイズのない、ピクセル単位で正確な出力が欲しいなら、ブラウザのcanvas要素から直接フレームをキャプチャできます。少し技術的になりますが、設定はAIが手伝ってくれます。

-   **CCapture.js**：アニメーションループに組み込んで、実際のレンダリング速度に関係なく、固定フレームレートで全フレームをキャプチャするJavaScriptライブラリです。複雑なシーンでもなめらかな出力が得られます。AIには「このスケッチにCCapture.jsを追加して、60fpsのWebM動画として書き出せるようにして」と頼みましょう。
-   **MediaRecorder API**：canvas要素の出力を直接録画できる、ブラウザ標準のAPIです。AIには「このcanvasアニメーションをWebMファイルとして録画する録画ボタンを追加して」と頼みましょう。

### きれいに書き出すコツ

-   **60fpsで録画する。** 再生環境が対応しているならおすすめです。アルゴリズミックな映像では、なめらかな動きの差がはっきり出ます。
-   **出力先の解像度に合わせる。** 1080pのプロジェクターに出力するなら、録画前にブラウザウィンドウ（またはキャンバス）を1920x1080に設定しておきましょう。
-   **必要な長さより長めに録る。** ループが10秒でも、30〜60秒は録っておきましょう。あとで動画編集ソフトで一番きれいな区間を切り出せます。
-   **録画中はほかのアプリを閉じる。** フレーム落ちを防げます。
-   **最終ファイルはH.264でエンコードする。** 互換性が高く、Visibox（をはじめほとんどの再生ソフト）が一番得意とする形式です。OBSならH.264/MP4で直接録画できます。

## AI生成ループをVisiboxで使う

ループを動画ファイルとして書き出せたら、Visiboxへの取り込みは簡単です。ドラッグ＆ドロップするだけです。いくつか気をつけたい点があります。

-   **ループを確認する。** Visiboxでループ再生して、つなぎ目をよく見てください。コード生成の映像は、AI生成の動画より通常きれいにループしますが、確認はしておきましょう。
-   **Visiboxのエフェクトを使う。** [Op Art Video Pack](/ja/video-packs/visibox-op-art-video-pack-1)に入っているループは24本ですが、Visibox内蔵のカラーフィルター、フリップ、回転のエフェクトを組み合わせれば、何百ものバリエーションになります。同じ技はAI生成のコンテンツにも使えます。
-   **ライブラリを育てる。** プロンプトのセッションを1回するたびに、オリジナルのループがいくつも生まれます。続けていけば、完全に自分だけの映像ライブラリができあがります。

## まとめ

この方法の一番の魅力は、「AIが作った」というより「とても手の速いアシスタントと一緒に自分でデザインした」と感じられることです。無料の[Op Art Video Pack](/ja/video-packs/visibox-op-art-video-pack-1)をダウンロードして何ができるかを確かめたら、Claude、ChatGPT、Geminiを開いて自分だけの映像を作ってみてください。それを使ってパフォーマンスする準備ができたら、[Visibox](/ja)がその手間を引き受けます。

* * *

## よくある質問

**コードの知識は必要ですか？** いいえ。そこがこの方法の肝です。コードはAIが書き、人間は見たいものを普通の言葉で説明するだけです。「p5.js」や「Three.js」を指定するといった用語は自然と身につきますが、コードを直接編集する必要はありません。

**映像コードの生成に一番向いているAIチャットボットはどれですか？** 主要な3つ（Claude、ChatGPT、Gemini）は、どれもライブプレビュー付きで映像コードを生成できます。クリエイティブコーディングではClaudeの出力が特にきれいな傾向がありますが、ChatGPTもGeminiも十分な実力があります。3つとも試して、自分のワークフローに合うものを選んでください。どれも無料で始められます。

**これらの映像を商用利用できますか？** 基本的にはできます。これらのAIツールが生成するコードはオリジナルで（既存のコードのコピーではなく）、映像そのものは学習した画像ではなく数学的な関数で決まります。詳細は各ツールの利用規約を確認してください。ただ実際には、出力は自分のものとして、パフォーマンス、ビデオパック、そのほかどこでも使えます。

**どの解像度で書き出せばいいですか？** ほとんどのライブパフォーマンス環境では、1080p（1920x1080）がちょうどいい落としどころです。多くのプロジェクターやLEDウォールはこれ以上の解像度に対応しておらず、ファイルサイズも扱いやすく収まります。4Kが必要なら、録画前にキャンバスサイズをそれに合わせて設定してください。

共有

[⊙ 無料で試す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, motion graphics

## こちらもおすすめ

![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)