木曜はデザイン系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 |
主な情報源
- Rive vs Figma Motion (2026)
- Webflow の2026年インタラクション更新（whatifdesign）
- Best Website Design Tools in 2026（Awesomic）
- ShaderGPT AI Shader Generator by 14islands（Abduzeedo）
- Shader Gradient（uwarp）
- How to Use Recraft AI（tech-insider）
- How to Build a Website with AI in 2026（Higgsfield）
各ツール・サービスは提供元の規約に従ってご利用ください。情報は各情報源の公開時点のものです。収集・要約はAI、公開判断は人。