LPのヒーロー背景、ボタンのホバー演出、ローディング画面のグラデーション。静止画だけだと「なんとなくキラッとさせたい」が伝わりにくい場面があります。2026年9月1日のアップデートで、Figmaの生成シェーダーがコミュニティ公開と組織内共有に対応しました。マウスに反応する動きや、パラメーター付きの塗りをキャンバス上で試せるようになったのです。私はWebディレクションと実装を兼任しているので、Figma 生成シェーダーが「見た目の合意」と「実装の再現性」のどちらに効くかを先に整理しておきたいと思います。
先に結論
- 向いている人: ヒーロー背景やボタンに動きを足したいデザイナー、プロトタイプ段階で質感を見せたいディレクター、React実装前に雰囲気を共有したいフロントエンド寄りの人
- 向いていない人: まだ画面構成が毎日変わるワイヤーフレーム段階、動きより情報設計を優先すべきフォーム中心の画面、Figmaエージェントの利用権限がないプランの人
- 私のおすすめ: まず1フレームの背景にシェーダーを1つだけ試す。全体に広げる前に、パフォーマンスとレビュー負荷を確認する
この記事には、Google AdSense による広告およびアフィリエイトリンクが含まれる場合があります。紹介経由で購入や申し込みがあると、私に紹介料が入ることがあります。
9月アップデートで何が変わったか
FigmaはConfig 2026以降、シェーダー（Shader Fills and Effects）とエージェントによる生成を段階的に公開してきました。2026年9月1日時点で、次の点が実務に効くようになっています。
| 項目 | 内容 |
|---|---|
| 生成シェーダー | エージェントに指示して、動きやマウス反応付きの塗りを作成 |
| 公開範囲 | Figma Communityへの公開、組織内での非公開共有が可能 |
| 実装連携 | フレームを外部へコピーした際、React側でもシェーダーを再現しやすくなった（公式発表ベース） |
| エージェント連携 | カスタムツール・スキルと合わせて、繰り返し作業を自動化しやすい |
「新しいデザインツールが増えた」というより、いまのFigmaキャンバスで動く質感を試せるのがポイントです。After Effectsや別ソフトに一度書き出す手間を、レビュー前の段階で減らせます。機能名やUIは今後も変わるため、詳細はFigma公式のリリースノートで確認してください。
生成シェーダーとは何か
生成シェーダーは、画像ファイルを貼るのではなく、数式とパラメーターで塗りを作る仕組みです。グラデーションがゆっくり流れる、マウス位置に応じて光が動く、ノイズで質感が変わる、といった表現が対象になります。
従来のFigmaでは、静止のグラデーションやブラーで近い見た目を作ることはできました。ただ、インタラクションに合わせてリアルタイムに変化する表現は、別ツールや実装後まで待つことが多かったです。生成シェーダーは、そのギャップをキャンバス上で埋める方向の機能です。
私の現場では、次の3パターンで検討します。
- ヒーロー背景 — ブランドカラーを使った動くグラデーション
- ボタン・カードのホバー — マウス追従のハイライト（プロトタイプレビュー用）
- ローディング・空状態 — 単調になりがちな画面に動きを足す
いずれも「全部に使う」必要はありません。クライアントが一番気にする1画面だけで十分なことが多いです。
作る手順（エージェントを使う場合）
Figmaエージェントは、プロフェッショナル・組織・エンタープライズプランのフルシートユーザー向けにベータ提供されています（2026年9月時点。プランは変更される可能性があります）。手順の大枠は次のとおりです。
- シェーダーを付けたいフレームまたは図形を選択する
- エージェントに、欲しい動きを日本語で指示する（例:「ブランドカラー #2D5BFF を使った、ゆっくり流れる背景シェーダー」）
- 生成された塗りのパラメーターをキャンバス上で微調整する
- プレゼンモードで動きを確認し、問題なければコメントで意図を残す
- 実装担当へ渡すときは、再現の優先度（必須／参考）を明記する
エージェントに任せるときは、色コード・速度・用途を最初の1文に入れるとブレが減ります。「かっこよくして」だけだと、案件ごとに解釈がバラけます。私は「B2Bのランディング、落ち着いたトーン、ループ3秒程度」と書くことが多いです。
生成結果がイメージと違うときは、いきなり作り直すより、パラメーターの1つだけを変えて再生成する方が早いです。速度、色相、ノイズの強さなど、変える軸をコメントに残しておくと、チーム内で調整しやすくなります。
権限がないメンバーは、ドラフトでエージェントを試せる場合があります。チーム運用では、誰が生成して誰がレビューするかを決めておくと、後から「誰が作った塗りか」で迷いません。小規模チームなら、週1回のデザインレビューで「今週試したシェーダー」を1枚だけ共有するだけでも、ノウハウが溜まります。
コミュニティ公開と組織内共有
9月アップデートで、生成したシェーダーをFigma Communityに公開したり、組織内だけで非公開共有したりできるようになりました。社内のデザインシステムに「標準の動く背景」を1つ登録しておく、という使い方が現実的です。
公開するときの注意点は次のとおりです。
- ブランドカラーやロゴが混ざっていないか確認する
- クライアント固有の画面をそのままCommunityに出さない
- 再利用しやすいよう、パラメーター名を分かりやすくしておく
逆に、クライアント案件では組織内共有に留め、プロジェクトファイルへライブラリとして読み込む運用が安全です。Communityは学習と社内テンプレの両方に使えますが、案件データの混在だけは避けたいです。
Motionや従来プロトタイプとの使い分け
Figma Motion（画面遷移のアニメーション）と生成シェーダーは、役割が違います。Motionは「画面がどう切り替わるか」、シェーダーは「その画面の中の質感や背景がどう動くか」です。
| 用途 | Motion | 生成シェーダー |
|---|---|---|
| モーダルの開閉 | 向いている | 補助的 |
| タブ切り替え | 向いている | 通常は不要 |
| ヒーロー背景の演出 | 限定的 | 向いている |
| ボタンのホバー質感 | Smart animateでも可 | 向いている |
両方を同時に入れすぎると、レビュー時に「何が主役か」がぼやけます。私は遷移はMotion、背景の質感はシェーダーと役割を分けます。詳しくは別記事のFigma Motionの手順も参考にしてください（自サイト内リンク）。
実装に渡すときの書き方
デザイナーとエンジニアの間で一番もめやすいのは、「プロトタイプで動いている＝本番でも同じコストで再現できる」という誤解です。生成シェーダーは合意形成の参考として渡し、実装の優先度をコメントで書き分けます。
実装メモに入れるとよい項目は次のとおりです。
- 必須か参考か — 背景のループアニメは参考、CTAボタンのコントラストは必須、など
- パラメーター — 色、速度、マウス追従の有無
- フォールバック — 低スペック端末では静止グラデーションに落とす
- Reduced motion — OSの「動きを減らす」設定時はアニメを止める
2026年9月のアップデートでは、フレームを外部へコピーした際にReact側でも再現しやすくなった、と公式に案内されています。ただし、プロジェクトの技術スタック（Next.js、Vue、純粋なCSSなど）によって工数は変わります。フリーランス案件では、見積もり前に「動く背景を実装まで含むか」を先に確認しておくと安全です。
実装側に渡すファイルには、スクリーンショットとシェーダー付きフレームのリンクをセットにします。動画で15秒だけ録画して添えると、「この速度感で」という認識ズレが減ります。私はLoomやOS標準の画面録画で十分だと感じています。
Figmaの開発者向けドキュメントも、渡し前に一度目を通しておくと会話が早くなります。
失敗しやすい点
- 最初から全画面に適用する — ファイルが重くなり、共同編集が遅くなることがあります
- エージェントの指示が曖昧 — 生成→やり直しのループで時間を溶かします
- アクセシビリティを後回し — 動きの多い背景は文字の読みやすさを損なうことがあります
- クライアント素材をCommunityに上げる — 守秘義務違反のリスクがあります
動きのある背景の上に白文字を載せるときは、コントラスト比を確認してください。キラキラしているだけでは伝わらず、読めないLPになりがちです。私はシェーダー適用後に、必ず通常の本文テキストを載せた状態でレビューします。
価格やプラン、機能の提供範囲は執筆時点（2026年9月3日・日本時間）の情報です。変更されることがあります。
よくある質問
Q. 無料プランでも生成シェーダーは使えますか？
A. プランと権限によって利用範囲が異なります。エージェントによる生成や組織内共有は有料プラン向けの機能です。最新の条件はFigma公式の料金ページで確認してください。
Q. 動画として書き出せますか？
A. シェーダー付きフレームは、プレゼンや録画で見せる運用が現実的です。MP4書き出しが必要な案件では、用途を先に決めてから作ると迷いません。
Q. Motionを使っている案件に後から足せますか？
A. 足せます。ただし、遷移アニメと背景シェーダーが同時に動くと、レビュー負荷が上がります。1画面ずつ追加するのがおすすめです。
Q. 実装まで自分でやるフリーランス向けの進め方は？
A. まずFigmaで雰囲気を固め、実装ではCSSやWebGLのどちらで近づけるかを見積もりに含めます。小さなLPならCSSグラデーション＋軽いアニメで十分なことも多いです。
まとめ
Figma 生成シェーダーは、2026年9月のアップデートで「作って、共有して、実装に繋げる」流れが一段楽になりました。全部の画面に入れる必要はなく、ヒーローかボタン1箇所から試すのが現実的です。次の一手は、いま手がけている案件で「静止画だと伝わりにくい背景」を1つ選び、エージェントにブランドカラーと速度を指定して生成してみることです。
