今日は「デザイン系AIツール・素材」特集です。プロンプトだけでインタラクティブな3Dサイトを生成するOmma、Figmaのキャンバス上で質感を作る新機能「Shaders」、状態遷移でリッチな動きを作るRive、750種以上のアニメーションシェーダーを揃えるshaders.comまで、「作る手間を減らして質感を上げる」道具を4つ紹介します。
プロンプトだけで動く3Dサイトを作る「Omma」
Splineチームが提供する新エージェントOmmaは、テキストや画像、既存サイトのURLを渡すだけでインタラクティブな3Dシーンをまるごと生成するツールです。単なる3Dモデル生成にとどまらず、パーティクルや流体シミュレーション、簡単なミニゲーム、Figmaデザインの3D化まで一つのキャンバスでこなせるのが特徴。生成したシーンはそのまま埋め込みリンクとして書き出せるため、「AIで作ったサイトの見た目をワンランク上げたい」ときの仕上げ工程としても使われています。
- 入力: テキストプロンプト / 画像 / ライブサイトのURL / Figmaファイル
- 出力: インタラクティブ3Dシーン(埋め込み用リンク・コード書き出し対応)
- 向いている用途: プロダクトの3Dショーケース、ヒーローセクションの演出、データの3D可視化
Figma Config 2026:キャンバス上に「シェーダー」と「モーション」がやってきた
6月に開催されたFigma Config 2026では、デザインファイルの中だけで質感と動きを作り込める新機能群が発表されました。中心となるのは以下の3つです。
| 機能 | できること | 状況 |
|---|---|---|
| Shaders | WebGPUベースの生成シェーダーをレイヤーの塗り・エフェクトとして適用 | 提供開始 |
| Figma Motion | キャンバス上でタイムライン編集・キーフレーム・イージング変数を扱うネイティブアニメーションモード。プロンプトからアニメ生成も可能 | 提供開始 |
| Weave / 生成プラグイン | Figma Design パネル内で動く20種以上のAI画像・データビジュアライズ生成ワークフロー | オープンベータ |
ポイントは、これまで外部ツールに書き出して作っていた質感・モーションがデザインファイルを離れずに作れるようになったこと。ラフなワイヤーフレームにシェーダー塗りを当てて質感を確認し、そのままFigma Motionで動きを付ける、という一気通貫の流れが可能になりました。
Rive:ステートマシンで作る「反応するUI」
Riveは、タップ・スクロール・データの変化に応じてアニメーションが切り替わる「動くUI」を、コードなしで組み立てられるツールです。核となるのはステートマシンという考え方で、「Idle」「Hover」「Pressed」のような状態をグラフ上でつなぎ、条件分岐のロジックをデザイナー自身が組める点がFigma Motionとの大きな違いです。書き出しは静止画やクリップではなくWeb/iOS/Android/ゲームエンジン向けの軽量ランタイムで、実装後もアプリ側の状態と連動して動き続けます。
- Figma Motion: デザイン・レビュー・ハンドオフに強い。書き出しは「完成品」のクリップやコード
- Rive: 本番環境でリアルタイムに反応する「動く仕組み」そのものを作る。ロード状態・スクロール連動・入力反応などロジックが必要な場面に強い
「見せるための動き」はFigma Motion、「触ったら反応する動き」はRive、と役割で使い分けるのが実務的です。
shaders.com:750種以上のアニメーションシェーダーをそのまま埋め込む
shaders.comは「Webシェーダーのためのデザインプラットフォーム」を掲げるライブラリサービスです。ガラス風、煙、シルク、ピクセルビームなど750種類以上のプリセットが用意されており、React・Framer・素のHTML/CSSなど主要なフレームワーク向けにコードとして書き出せます。StripeやVercel、Linearのサイトで見られるような、動く背景グラデーションを自作するより手早く再現できるのが利点です。プリセットの利用には有料プラン(月額あたり数千円程度)が必要な点は事前に確認してください。
ls.graphics:モックアップ・テクスチャ・カラーパレットの実務系素材
ls.graphicsは、Photoshop・Figma向けのデバイスモックアップやテクスチャ、3Dツールアイコン、カラーパレット比較などの実務系素材を配布しているサイトです。派手な生成AI演出とは対照的に、プレゼン資料やLP用のモックアップをすぐ差し込みたいときに重宝します。サブスクリプションでPSD/Sketch/Figmaファイルへのフルアクセスが得られ、無料素材も一定数公開されています。
主な情報源
- Figma Blog: Config 2026 recap
- explainx.ai: Figma Config 2026 Complete Recap
- Little Fuji: Omma AI Agent by Spline レビュー
- Abduzeedo: Omma AI Canvas by Spline
- Rive Masterclass: Figma Motion vs Rive
- Rive Blog: A beginner’s guide to the Rive State Machine
- LS.GRAPHICS Blog
各ツール・サービスは提供元の規約に従ってご利用ください。情報は各情報源の公開時点のものです。収集・要約はAI、公開判断は人。