2026年8〜9月、Webデザイン制作を支えるAIツールが「素材」レベルで進化している。Figmaはコード・モーション・シェーダーをキャンバス上の新しい創作素材として統合し、RiveはAIコーディングエージェントでインタラクティブなステートマシン制作を加速、Recraftは本物のSVGベクターをプロンプト一つで書き出し、MotionSitesはLovableやClaudeに渡すだけで動くヒーローセクションのプロンプト集を提供する。今日はこの4つを軸に、コードいらず・軽い学習コストで「作り込まれた見た目」に近づけるツール群を紹介する。
Figma Config 2026――「コード」「モーション」「シェーダー」が新しい創作素材に
6月開催のFigma Config 2026で、Figmaはキャンバス上で扱える素材そのものを拡張した。目玉は5つ。
| 機能 | できること | 提供状況 |
|---|---|---|
| Figma Motion | タイムライン＋キーフレームでモーションを作成。CSS/JSON/React/MP4/WebM/Animated SVG/GIFへ書き出し | 提供開始済み |
| Code Layers | デザインレイヤーをワンクリックまたはプロンプトで「動くコード」に変換し、デザインとハンドオフの壁を減らす | 7月よりアーリーアクセス |
| シェーダー塗り／エフェクト | 画像を説明・参照するとFigmaのエージェントがシェーダー塗り（新素材）やシェーダーエフェクト（既存レイヤーの変形）を生成 | 有料プランで提供 |
| 生成プラグイン | 自然言語でやりたいことを書くと、エージェントがその場でプラグインを書いて動かす | 提供開始 |
| Weaveツール | 買収したWeavy由来のノードベースAIツールをメインキャンバスに統合 | 提供開始 |
これまで「デザイン」と「実装」の間にあった溝を、コード・モーション・シェーダーという素材ごとFigma上に取り込みにいく方向性が明確になった。特にCode Layersは、v0やLovableのようなAIサイトビルダーとFigmaの役割分担を今後変える可能性がある。
Rive――AIコーディングエージェントとステートマシンでインタラクティブUIを内製化
Riveはアニメーション・デザイン・コードを一つのエディタで扱うツールで、Webやアプリで動くインタラクティブなグラフィックを作れる。中核にあるのがState Machineで、アニメーションを「状態」として捉え、ホバー・クリック・タップといったユーザー操作で状態遷移を視覚的に組み立てられる。
有料プランにはAIコーディングエージェント用の月間クレジットが含まれ、エディタ内のLuauスクリプティングをAIが支援。「重力を9.8にして地球っぽくして」といった曖昧な指示から、それらしい数値を提案してくれる。ClaudeやGemini、OpenAIのモデルと組み合わせて、状態を持つ「キャラクターUI」を作る実践も増えている。コードを書かずに複雑なインタラクションを作りたいWebデザイナーにとって、シェーダーやパララックス演出とは違う「動きに反応するUI」の選択肢になる。
Recraft――プロンプトから「本物のSVG」を書き出すベクターデザインAI
Recraftは、Webサイトに使うロゴ・アイコン・イラストをベクター（SVG）でそのまま生成できる数少ないAI画像生成ツール。最新モデルはテキストの正確な配置指定やブランドスタイルの一貫性に強く、パスが整理された編集可能なSVGを、トレースやクリーンアップなしでそのまま書き出せる。ラスター画像をアップロードしてSVG化する機能や、背景除去・アウトペインティングなどの編集ツールも一式揃う。
Webデザインの現場では、アイコンセットやOGP画像、ロゴのバリエーション出しといった「量産系」の作業に向く。無料プランは1日50クレジットで商用利用は不可、月10ドルのプランから商用利用と非公開生成が可能になる。
MotionSites――「動くヒーローセクション」をプロンプトごと買う
MotionSitesはサイトビルダーではなく、570以上のプレミアムなAIプロンプト集。SaaS・エージェンシー・ポートフォリオ・ランディングページといったカテゴリ別に、洗練されたヒーローセクションやアニメーションを再現するプロンプトが用意されており、コピーしてLovable・Bolt・Cursor・Claudeなどのコーディング系AIに貼り付けるだけで、そのままアニメーション付きのReactコードが生成される。
自分でゼロからプロンプトを組み立てる時間がない、けれど既製テンプレートっぽさは避けたい――という場合に、完成度の高い「型」を素早く取り込む手段になる。ループ動画の背景素材やセクション単位の部品も別売りされている。
まとめ
Figmaはキャンバスの中に「コード・モーション・シェーダー」を素材として取り込み、Riveは状態を持つインタラクションを、Recraftは量産可能なベクター素材を、MotionSitesは完成度の高いプロンプトの「型」を提供する。役割が重ならないので、案件の工程（設計→素材→実装）に応じて組み合わせるのが現実的だ。
主な情報源
- Config 2026: New Materials, New Tools and a More Expressive Canvas（Figma Blog）
- Figma Launches Code Layers & Motion at Config 2026（CMSWire）
- Scripting with the AI Coding Agent（Rive Blog）
- Introducing Recraft V3（Recraft Blog）
- MotionSites Guide（MotionSites公式）
各ツール・サービスは提供元の規約に従ってご利用ください。情報は各情報源の公開時点のものです。収集・要約はAI、公開判断は人。