CANVAS LAB デキるシゴトを増やすメディア
TouchDesignerの使い方｜音に反応する映像の作り方【2026】
2022.07.28
「コーディング」と聞くと、Webサイトを組むための地味な作業を思い浮かべるかもしれません。ですが同じプログラミングでも、映像・アニメーション・サウンドに特化したクリエイティブコーディングという領域があり、こちらは書いたコードがその場で絵として動きます。
その入り口として扱いやすいのがTouchDesignerです。本記事では入門編として、音に反応して動くオーディオビジュアライザーを作る手順を、実際の画面つきで解説します。あわせて、2026年10月時点のライセンス区分と、商業施設の体験型コンテンツ開発で実際に使える範囲までまとめました。
この記事の要点
- TouchDesignerはノードをつなぐビジュアルプログラミングツール。コードを書かずに映像を組み立てられるため、入門の敷居が低い。
- オーディオビジュアライザーの作成手順は4ステップ（画像の3D化→マテリアル指定→オーディオ認識→パラメータへの値の代入）。
- 2026年10月時点で、無料のNon-Commercial版は出力1280×1280まで。商用案件・大画面投影には有償ライセンスが必要。
- MacとWindowsの両方で動作し、Python・GLSL・C++で拡張できる。類似のvvvvはWindows専用、Quartz ComposerはMac専用。
- 株式会社キャンバスは2012年創業・第15期。体験型デジタルコンテンツ開発を含む累計実績は1500件超で、自社パッケージのぬりえスタジアムは1日400名以上の体験実績がある（プライムツリー赤池／イオンモール新小松）。
目次
TouchDesignerとは？できることと他ツールとの違い
TouchDesignerとは、ノードをワイヤーでつないで映像・音・センサー入力をリアルタイムに処理できるビジュアルプログラミングツールである。テキストでコードを書く代わりに、処理のかたまり（オペレーター）を線でつないで組み立てるため、プログラミング未経験でも絵を動かしながら学べます。
似たツールには「vvvv」「Max/MSP」「Quartz Composer」などがあり、いずれもノードベースで直感的に扱えるのが共通点です。その中でTouchDesignerが選ばれやすい理由は、対応環境の広さと拡張性にあります。
TouchDesignerの特徴
3DCGの拡張子をそのまま読み込める点と、MacとWindowsの両方で動く点が大きな利点です。前述のvvvvはWindowsのみ、Quartz ComposerはMacのみの対応です。またPython・GLSL・C++による拡張ができ、公式リファレンスも充実しています。
- 「.obj」などの3DCGの拡張子がそのまま使える
- Mac・Windowsの両方で使用可能（vvvvはWinのみ、Quartz ComposerはMacのみ）
- Python・GLSL・C++による幅広い拡張性
- 公式リファレンスが充実している
まず触ってみたい場合は、公式サイトからダウンロードできます。
無料版と商用ライセンスの違い
非商用であれば無料版で使えますが、出力解像度に制限があります。クライアントワークや大画面への投影を前提にする場合は有償ライセンスが必要です。
| ライセンス | 出力解像度 | 用途 | 費用（2026年10月時点） |
|---|---|---|---|
| Non-Commercial（無料） | 1280×1280まで | 学習・検証・個人作品 | 無料 |
| Commercial | 制限なし | 商用案件・クライアントワーク | 有償（公式サイト参照） |
| Pro | 制限なし | 大規模・常設インスタレーション | 有償（公式サイト参照） |
学習と社内検証の段階では無料版で十分です。案件として納品する段階になったら、必要な出力解像度から逆算してライセンスを選びます。
オーディオビジュアライザーの作り方（全体の手順）
それでは実際に、音に合わせて反応するオーディオビジュアライザーを作っていきます。手順は次の4つです。
オーディオビジュアライザーの作成手順
- 画像を3D化する
- マテリアルを指定する
- オーディオを認識させる
- パラメータへ値を代入する
今回は素材として、弊社キャンバスの会社ロゴ画像を使用します。
①2D画像の3D化
まずは2D画像を3D化します。TouchDesignerを起動すると以下の画面が表示されます。
「Ctrl+A」→「Delete」（もしくは右クリック→ドラッグで範囲指定）で、表示されているオペレーターをすべて削除します。次に右クリック「Add Operator」→タブ「COMP」→「Geometry」を選択します。Searchで絞り込むこともできます。
以下のオペレーターが配置されます。
配置した「Geometry COMP」は、3DCGをレンダリングする際の素材を格納しておく箱のようなものです。今回はロゴ画像を3DCG化するために使います。
TouchDesignerの操作画面は階層構造になっており、オペレーターを選択した状態で「i」キーを押すと、その内部の階層に入れます。上階層の「Geometry COMP」に表示されていたのが「torus1」です。
デフォルトの「torus1」を削除し、使用する画像をドラッグ＆ドロップします。SVGは対応していないため、PNGに変換したものを使用します。
2D画像を3D化するために「Trace SOP」を呼び出します。右クリック「Add Operator」→タブ「SOP」→「Trace」を選択します。
「Trace SOP」のパラメータ「TOP Name」に画像のオペレーター名（今回の例では「canvas」）を入力すると、灰色の矢印が表示されてロゴが現れます。「canvas」の右端のワイヤー接続部をクリックしてワイヤーを出した状態でTABキーを押し、オペレーターを選んでも同じ結果になります。これで3D化が完了です。
「trace1」右下の「+」を押すと、マウスで動かせることが確認できます。ここから厚みを出すため、右クリック「Add Operator」→タブ「SOP」→「Extrude」を選択して接続します。
オペレーター同士をつなぐには、接続元の右端をクリックしてワイヤーを出し、接続先の左端をクリックします。接続先が2つある場合は上に接続してください。これでロゴに厚みが出ます。厚みの幅はパラメータ「Values」→「Depth Scale」で変えられます。
このとき「extrude1」の紫色の●が光っていない場合は、クリックしてRender Flagを立てましょう。
「u」キーで上の階層へ戻ります。この時点では何も表示されていません。Geometry内のソースを使うときは、お約束として次の3つのオペレーターが必要です。
- Camera COMP
- Light COMP
- Render TOP
これらを配置すると自動的にワイヤーで接続され、Render TOPにロゴが出力されます。
Render TOPを右クリック→「View…」で別ウィンドウで表示を確認できます。表示が小さい場合は、Geometryのパラメータ→タブ「Xform」内の「Scale」を調節してください。
②Materialの指定
TouchDesignerでは一般的な3DCGソフトと同様に、オブジェクトへマテリアルを指定できます。オペレーター一覧「MAT」→「Wireframe」をクリックし、表示されたオペレーターを「geo1」にドラッグ＆ドロップして「Parm:Material」を選択します。
「geo1」と「wireframe1」が接続され、ロゴがワイヤーフレーム表示になりました。
オペレーターの種類と接続方法の違い
ここまで、オペレーター同士の接続を「ワイヤーを手動で引いてつなぐ」方法と「パラメータにオペレーター名で指定する（またはTABキーで指定する）」方法の2通りで行ってきました。この違いを整理します。
オペレーターを追加する際は「TOP」「SOP」「COMP」などのカテゴリ（型）を選んでから選択します。同じカテゴリ同士はワイヤーを引いて直接接続できますが、別カテゴリ同士は型変換が必要なため、パラメータやTABキーでの指定が必要になります。
オペレーターはカテゴリごとに色分けされており、同種同士の接続はそのカテゴリ色のワイヤー、型変換が行われている接続は破線のワイヤーで表示されます。
各オペレーターの役割
| オペレーター名 | 役割 | 主な使いどころ |
|---|---|---|
| COMP(Component) | プログラムを組み立てる下地（箱） | Geometry／Camera／Light など全体の構造 |
| SOP(Surface Operator) | 3Dデータの処理 | 2D画像の3D化・厚みづけ・形状変形 |
| TOP(Texture Operator) | 2D画像・映像の処理 | 画像の読み込み・エフェクト・最終出力 |
| MAT(Material) | マテリアル（質感）の指定 | ワイヤーフレーム表示・質感の割り当て |
| CHOP(Channel Operator) | 数値・信号の処理 | 音声入力・センサー信号・値の増幅や制限 |
③オーディオビジュアライザーの作成（音の取り込み）
ここからは、オーディオから出力されている値を増幅し、ロゴのスケール（大きさ）へ代入して、音に合わせて大きさが変化する状態を作ります。
右クリック「Add Operator」→タブ「CHOP」→「Audio Device In」をクリックします。パラメータ「Driver」で音声入力のあるデバイスを選択すると、波形が動くのが確認できます。
「Audio Device In」から出力される値は小さいため、別のオペレーターを接続して増幅します。オペレーター一覧から「CHOP」→「Math」をクリックし、「audiodevin1」と「math1」をワイヤー接続すると、同じ値が「Math」側にも表示されます。このオペレーターでは入力値に対して四則演算ができます。
今回はタブ「Mult-Add」→「Multiply（乗算）」の値を「20」にします。数値は環境に合わせて調節してください。
このままではマイナスの値も増幅されてしまうため、「1」より小さい値を出さないよう制限を加えます。オペレーター一覧から「CHOP」→「Limit」をクリックし、「math1」からワイヤー接続してパラメータを調節しましょう。
④パラメータへ値を代入する
「geo1」を選択した状態で「limit1」の「+」ボタンをクリックし、表示された「chan1」を「geo1」のパラメータ「Scale」にドラッグ＆ドロップします。選択項目が出るので「CHOP Reference」をクリックします。
すると音に合わせて画像が横に伸びます。現在は横幅（x）のみ適用されているので、高さ（y）にも適用します。GeometryのScale項目にマウスをホバーすると「+」が表示されるので、そちらをクリックすると以下のパラメータが表示されます。
ここにはパラメータへ適用されているオペレーターの値がPythonの文法で記載されています。オペレーター（op）の「limit1」の「chan1」を適用している状態です。あとは、sxに記述されている op('limit1')['chan1'] をそのまま sy にもコピー＆ペーストします。
これで、音に合わせて大きさが変化するオーディオビジュアライザーが完成しました。
TouchDesignerでつまずきやすいのはどこ？
入門時に手が止まる箇所はだいたい決まっています。先に知っておくと、ここで諦めずに進めます。
| つまずくポイント | 症状 | 対処 |
|---|---|---|
| 画像が読み込めない | SVGを入れても表示されない | SVGは非対応。PNGに変換してから読み込む |
| 何も表示されない | Render TOPが真っ黒 | Render Flag（紫の●）が立っているか確認する |
| 上階層に戻ると消える | Geometry内は見えるのに全体で見えない | Camera COMP・Light COMP・Render TOPの3つを配置する |
| ワイヤーがつながらない | 接続先をクリックしても線が引けない | 別カテゴリ同士は型変換が必要。パラメータ名かTABキーで指定する |
| 音に反応しない | 波形が動かない | Audio Device Inのパラメータ「Driver」で入力デバイスを選び直す |
| 値が小さすぎて動きが見えない | スケールがほぼ変化しない | Math CHOPのMultiplyを上げ、Limit CHOPで下限を設定する |
特に多いのが2つ目と3つ目です。何も表示されないときは、まずRender Flag（紫の●）とCamera・Light・Render TOPの3点セットを確認してください。構造の問題ではなく設定の見落としであることがほとんどです。
また、動作にはGPUが使われます。統合GPUのノートPCでも入門のサンプルは動きますが、解像度を上げたりエフェクトを重ねると目に見えてフレームレートが落ちます。本番で大画面に投影する前提なら、単体GPUを搭載したマシンで検証してください。
TouchDesignerは商業施設の体験型コンテンツでも使える？
使えます。ここまで作ったものは音に反応する映像ですが、入力を音声からセンサーやカメラに置き換えれば、来場者の動きに反応する床面投影や壁面演出がそのまま同じ考え方で成立します。入力（CHOP）→加工（Math／Limit）→出力（Render TOP）という構造は変わりません。
実際の案件で論点になるのは、作れるかどうかではなく長時間安定して動き続けるかです。イベント会期中に映像が止まらないこと、設営・撤去が会場の制約内に収まること、当日スタッフが復旧できること――ここまで含めて設計する必要があります。センサー入力を使う構成の費用感はセンサー連動インタラクティブコンテンツの費用と事例、カメラで来場者を認識させる場合は画像認識の体験型コンテンツの費用・事例にまとめています。
TouchDesignerを使った体験型コンテンツの費用相場と実例はTouchDesignerでできる体験型コンテンツ｜費用相場と事例で詳しく解説しています。施設での導入実績そのものを見たい場合は体験型コンテンツの導入事例まとめが参考になります。
株式会社キャンバスでは、こうしたリアルタイム映像・センサー連動の開発を体験型デジタルコンテンツ開発およびセンシング開発としてご提供しています。
入門のあと、何を作ると実務につながる？
オーディオビジュアライザーが動いたら、次は入力を変えることをおすすめします。音声の代わりにマウス座標、Webカメラの明度、距離センサーの値を入れてみると、「何を入力に使っても構造は同じ」という感覚がつかめます。ここが分かると、イベント企画の要件をそのままノード構成に翻訳できるようになります。
映像表現の引き出しを増やしたい場合は、キーフレームに頼らず数式で動きを作る考え方が共通して役立ちます。After Effectsエクスプレッション入門｜関数と乱数は、乱数や三角関数で動きを作る発想を押さえるのに向いています。
一方で、自社イベントに向けて短期間で確実に動くものを用意したい場合は、ゼロから開発するより既存パッケージを使うほうが早く安全です。自社パッケージの実績では、ぬりえスタジアムが1日400名以上の体験（プライムツリー赤池／イオンモール新小松）、バッティングヒーローが設営約15分・1日320名想定、ディノコア創世記が1日240名想定（イトーヨーカドー木場）、フライングペイントが最短3日で導入可能な構成となっています。目的と会場から選べるよう整理した体験型デジタルコンテンツ6選（比較・30秒診断）もご覧ください。
開発会社の選定基準を先に押さえておきたい方は体験型コンテンツ制作会社の選び方、パッケージごとの違いは体験型コンテンツのパッケージ比較｜費用・目的で選ぶ6種、商業施設での催事を想定している場合は商業施設の集客イベント費用と事例が判断材料になります。企画段階からの相談は無料相談で承っています。
まずはクリエイティブコーディングそのものを楽しむところから始めてください。今回のサンプルにエフェクトを足すだけでも、見栄えは大きく変わります。
この記事を書いた会社について
作ったものが本番で止まらないところまで、設計します
株式会社キャンバスは2012年創業のデジタルクリエイティブ／システム開発会社です。TouchDesignerのようなリアルタイム映像やセンサー連動を使った体験型デジタルコンテンツを、企画・開発から設営・当日運営まで一括でご支援しています。DX活用支援・体験型デジタルコンテンツ開発・自社パッケージの累計実績は1500件超です。
よくある質問
Q. TouchDesignerは無料で使えますか？
A. 非商用であれば無料版（Non-Commercial）で使えます。2026年10月時点では、無料版は出力解像度が1280×1280までに制限されており、商用案件や大画面への投影には有償ライセンスが必要です。学習と検証は無料版で十分に進められます。
Q. プログラミング未経験でもTouchDesignerは扱えますか？
A. 扱えます。TouchDesignerはノードをワイヤーでつなぐビジュアルプログラミング方式のため、コードを書かずに映像を組み立てられます。ただしパラメータへの値の代入でPythonの記法（例：op('limit1')['chan1']）が出てくるので、基本的な書き方だけは覚えておくと詰まりません。
Q. MacとWindowsのどちらでも動きますか？
A. どちらでも動きます。これはTouchDesignerの利点で、類似ツールのvvvvはWindows専用、Quartz ComposerはMac専用です。3DCGの拡張子（.obj など）をそのまま読み込める点も共通して使えます。
Q. TouchDesignerで作ったものを商業施設のイベントで使えますか？
A. 使えます。センサーやカメラの入力をリアルタイムに映像へ反映できるため、来場者の動きに反応する床面投影や壁面演出に向いています。ただし常設・長期稼働では安定性の確保と運用設計が必要になるため、費用感はTouchDesignerでできる体験型コンテンツの費用相場をご覧ください。
Q. 自社イベント向けに体験型コンテンツの開発を相談できますか？
A. 可能です。株式会社キャンバスは2012年創業・第15期で、DX活用支援・体験型デジタルコンテンツ開発・自社パッケージの累計実績は1500件超です。ゼロから開発するほかに、既存パッケージを使って短期間で導入する選択肢もあります。
関連記事
- TouchDesignerでできる体験型コンテンツ｜費用相場と事例【2026】
- センサー連動インタラクティブコンテンツの費用と事例【2026】
- 体験型コンテンツの導入事例まとめ｜施設・目的別の集客効果【2026】
- 体験型コンテンツのパッケージ比較｜費用・目的で選ぶ6種【2026】
- After Effectsエクスプレッション入門｜関数と乱数【2026】
- 体験型コンテンツ制作会社の選び方｜失敗しない発注先の基準と費用【2026】
運営：株式会社キャンバス（canvas-works.jp）— AIを前提に価値をつくるデジタルクリエイティブ／システム開発企業。体験型コンテンツ開発・AI開発・自社パッケージ（ぬりえスタジアム／バッティングヒーロー／デジスポ／フライングペイント／フォトフォトAI／ディノコア創世記）を展開。
最終更新：2026年10月5日｜執筆・監修：株式会社キャンバス（キャンバスラボ編集チーム）。2012年創業・第15期。DX活用支援・体験型デジタルコンテンツ開発・自社パッケージの累計実績は1500件超。