動く・描く素材をAIで作る：Figma Motion・Rive・Spline・ShaderGPT・Recraftの使い分け

デザイン・UI
デザインAIツール のアイキャッチ

木曜はデザイン系AIツール・素材の日。今回は「動き」と「背景」と「ベクター素材」に絞り、Figma Motion・Rive・Spline・ShaderGPT・Shader Gradient・Recraft を、Webサイトへどう組み込むかの視点で整理します。

画像・動画生成をイメージしたイラスト

1. モーションは「設計する」と「動かし続ける」で道具が分かれる

Figmaは Config 2026 で、タイムライン・キーフレーム・イージング変数・コード書き出しを備えたネイティブのアニメーションモード「Figma Motion」を発表したと紹介されています。一方 Rive は、入力・スクロール・データに反応するステートマシンをそのまま本番で動かす「インタラクティブ体験エンジン」です。

観点 Figma Motion Rive
出力 作ったとおりに再生するクリップ／コード アプリ内で動き続けるステートマシン
実行時のインタラクション なし 入力・スクロール・データに反応
向く用途 モーションの設計・レビュー・引き継ぎ ボタンやキャラクターなど反応する部品

使い分けは「仕様を決めるならFigma Motion、本番で反応させるならRive」。Riveはエージェントからの生成用CLIも用意されていると紹介されています。

2. 3DはSplineで作り、ノーコードサイトへ埋め込む

Splineはブラウザ上で3Dシーンを作れ、AIからの生成にも対応します。サイトビルダーではなく、公開URLのiframeやWebコンポーネントとして既存ページに埋め込む使い方が基本です。Webflow は2026年に Spline のアクション対応、Riveの直接制御、7月のマウス追従アニメーションなどを追加したとされ、「3D／Riveで作って、Webflowなどで配置する」流れが組みやすくなっています。

3. 背景はシェーダーをAIに書かせる

  • ShaderGPT（14islands）：英語で効果を説明すると GLSL を生成し、WebGLで即プレビュー。Claude・GPT・Gemini・DeepSeek など複数モデルを切り替えられ、コードはそのままコピーできます。
  • Shader Gradient：プリセットから調整して、動くグラデーション背景をWebやFramer向けに出力。コードを書かずに済ませたいときの選択肢です。

注意点として、全画面フラグメントシェーダーはピクセル数ぶん毎フレーム走ります。装飾の背景で端末を重くしないよう、解像度やデバイスピクセル比を抑え、スマホでは静止画にフォールバックさせる判断が必要です。

4. アイコン・イラストはベクターで出す

Recraftは、ラスター画像をトレースせずSVGを直接出力できる点が特徴とされます。SaaSの設定画面用アイコン40〜100点を同じスタイルで揃える、といった用途が紹介されており、FigmaやIllustratorにそのまま取り込めます。生成したSVGは使い捨てにせず、コンポーネントライブラリにコミットして管理すると一貫性が保てます。

5. 動画・サイトまで一気通貫：Higgsfield

Higgsfieldは画像・動画・音声の30以上のモデルを束ねたサービスで、公式ブログでは「プロンプトから公開URLまで」サイトを作る手順も紹介されています。スクロールで大きな文字が動くダークな編集系サイトを、2時間弱で公開まで持っていった例が載っています。事実関係の確認は制作者の責任である点も明記されています。

今日の使い分け早見表

作りたいもの 候補
モーション仕様 Figma Motion
反応するUI部品 Rive
3Dオブジェクト Spline
動く背景 ShaderGPT / Shader Gradient
アイコン・イラスト Recraft
動画・一括制作 Higgsfield

主な情報源

各ツール・サービスは提供元の規約に従ってご利用ください。情報は各情報源の公開時点のものです。収集・要約はAI、公開判断は人。