Figma・Remotion・Higgsfieldで作るシェーダー背景：AIツールの使い分けとWeb実装の注意点

2026年10月13日

今日はデザイン系AIツールのうち「シェーダー（GPUで描く質感・動き）」に絞ります。Figmaのシェーダー機能、Remotionのシェーダー、動画生成のHiggsfieldを、Webの背景演出に使う場合の向き不向きで整理します。

シェーダーとは：数KBで動く質感

シェーダーは、GPU上で1ピクセルごとの色を計算する小さなプログラムです。CSSや画像では難しい、ゆらぎ・ノイズ・ガラス越しの歪みを表現できます。Webでは WebGL、近年は WebGPU で動きます。チェコの制作会社 Czech Th!s の解説記事は、シェーダーは数KB程度で済むことが多く、数MBの動画より軽くなり得る、と述べています。

1. Figma：プロンプトでシェーダーを作る（オープンベータ）

Figmaは2026年6月のConfigでシェーダーのフィル／エフェクトを発表しました（解説記事）。前述のCzech Th!sの記事によると、9月初旬にオープンベータになっています。

「ゆるやかに波打つグラデーション」「フィルムグレイン」「ガラス越しの歪み」のように文章で指示すると、キャンバス上に描画される
生成されたシェーダーコードは表示・ダウンロードでき、完成したエフェクトはコミュニティで共有できる
キャンバス上で調整できる。参考画像を渡す方法も紹介されている

同じ発表ではFigma Motion（キーフレームのアニメーション）も紹介されています。CSS・React・MP4・Lottie などへ書き出せるとされます。

2. Remotion：コードでシェーダーを動画に適用

Remotionのシェーダー機能は、Reactで動画を作る環境の中で、fisheye やハーフトーンなどのエフェクトを要素に適用できます。createEffect() で独自エフェクトをバイブコーディングする案内もあります。ヘッドレスで書き出す際は --gl=angle を付けてWebGL環境を確保する、と公式ドキュメントにあります。

bunx remotion render MyComp --gl=angle

3. Higgsfield：背景用の動画クリップを生成

Higgsfieldは、Seedance、Kling、Veo など複数の動画モデルを1つの画面から使えるサービスです。ヒーロー背景の動画素材を作る用途に使えます。開発者向けにはAPIも公開されています。ライブ描画のシェーダーと違い、書き出した時点で動画ファイルになります。

使い分けの目安

手段	得意なこと	注意点
Figmaシェーダー	デザイン段階で質感を試す。コードも取得可能	ベータ。実装時はフォールバックが必要
Remotionシェーダー	動画・モーショングラフィックスをコードで量産	React／書き出し環境の知識が要る
Higgsfield等の動画生成	写実的・映像的な背景クリップ	ファイルが重くなりやすい。モデルごとの利用条件を確認