2026年、WebGPUはほぼすべての主要ブラウザで動く「当たり前の機能」になった。その結果、Webのリッチな演出は「GLSL/WGSLを手で書く」から「レイヤーを重ねる」「プリセットを選ぶ」「Claudeが書いたシェーダーをコピペする」という組み立て型の作業へと変わりつつある。今回はスクロール演出・3D表現の”作り方”そのものが変化している、WebGPUシェーダー界隈の最新動向をまとめる。
ブラウザがそのままシェーダーエンジンになった
shaders.com のドキュメントによれば、14万5000セッション・1000以上の本番ドメインのテレメトリでWebGPU対応率は99%を超えているという。ゲームエンジン専用だった表現が、フレームレートを保ったままブラウザのページ内で動く時代になった。一方でGLSL/WGSLの学習コストは相変わらず高い。この「表現力はあるが書くのが難しい」というギャップを埋めるツール群が、この数ヶ月で一気に揃ってきた。
「シェーダー版Photoshop」Shader LabとClaude Codeスキル化
スタジオ basement.studio が公開したShader Labは、レイヤーパネルにグラデーション・テキスト・メディア・TSLパスを積み上げていくブラウザ完結のビジュアルエディタだ。フォスファーの滲みやチャンネルのズレを再現する「CRT」レイヤーが名物で、組み上げたコンポジションはJSON設定として書き出し、React（Three.jsのWebGPUレンダラー経由）にそのまま持ち込める。
これをさらに使いやすくしたのが、Claude Code用スキルclaude-shadersだ。Shader Labを内部で利用しつつ、hero-aurora・hero-terminal・scroll-reveal-halftoneなど12種の「すぐ使えるプリセット」をスキルとして提供し、WebGPU非対応ブラウザではポスター画像に自動でフォールバックする設計になっている。プロンプト一つで「シェーダー入りのヒーローセクション」を実装させる、という使い方が現実的になってきた。
プロダクション基盤としてのshaders.com v3
コンポーネント単位でWebGPUエフェクトを扱えるライブラリshaders.comは、2026年7月14日にv3を発表。「コンポーネント集」から「本番運用できるデザインプラットフォーム」への脱皮を掲げ、TypeGPUベースの新レンダリングエンジンを導入した。公式発表によれば、ビルドサイズは平均で従来比3分の1、ブラウザ内でのシェーダーコンパイルは最大25倍高速化したという。GLSL/WGSLを書かずに、ビジュアルエディタで組んだ効果を React・Vue・Svelte・Solid 用のコンポーネントとしてそのままエクスポートできる点は変わらず、Framer用の公式プラグインも用意されている。
| 項目 | v3での変化 |
|---|---|
| レンダリングエンジン | TypeGPUベースの新設計に刷新 |
| ビルドサイズ | 本番ビルドで平均約3分の1に縮小 |
| シェーダーコンパイル速度 | ブラウザ内コンパイルが最大25倍高速化 |
| 対応フレームワーク | React / Vue / Svelte / Solid / Framer（プラグイン） |
| 採用実績（公式サイト記載） | Vercel・Shopify・Adobe・Framer・Microsoft・Supabaseなど、デザインエンジニア1.2万人以上が利用 |
Claudeが書いたシェーダーをそのままコピペする2つのギャラリー
もう一つの潮流は、ClaudeにシェーダーやWebGL演出そのものを書かせ、成果物をOSSギャラリーとして公開する動きだ。
claude-directoryは、Claude（Fable 5）で生成したヒーローセクション・GLSLシェーダー・3D/WebGLシーンなどをまとめたオープンソースの実験集で、各プロジェクトは実際に使ったプロンプトとデモ録画付きで公開されている。React・TypeScript・Three.js・GSAPなど普段使いのスタックで構成され、コピー&ペーストしてそのまま自分のプロジェクトに組み込める点が特徴だ。
もう一つは、開発者Paul Bakaus氏によるブログ「Carving Shaders Out of Claude Code」で語られた制作過程から生まれたRadiantだ。自身のサイト用に軽量なシェーダーを数点作るはずが、Claude Codeで「彫り出す（carving）」ように作り続けた結果6週間で94本に。シュヴァルツシルト測地線レイトレーシングやノビコフ-ソーン温度分布まで再現した「イベントホライズン」シェーダーも収録されている。すべてがフレームワーク非依存・ビルド不要の単一HTMLファイルとして配布され、MITライセンスで自由に転用できる。
| ツール／ギャラリー | 種類 | フレームワーク依存 | ライセンス |
|---|---|---|---|
| Shader Lab | ビジュアルシェーダーエディタ | React + Three.js（peer） | OSS |
| claude-shaders | Claude Codeスキル（プリセット12種） | Shader Lab経由 | AGPLv3＋商用ライセンス |
| shaders.com v3 | 商用デザインプラットフォーム | React / Vue / Svelte / Solid / Framer | フリーミアム（パブリックベータ） |
| claude-directory | AI生成UI実験集 | React / Three.js / GSAP 他 | OSS |
| Radiant | シェーダーギャラリー | 依存なし（単一HTML） | MIT |
ライブラリなしでも作れる：CSSネイティブのスクロール演出
凝ったWebGPU表現とは対極に、軽量なセクションではanimation-timeline: scroll() / view()によるCSSネイティブのスクロール演出も実用段階に入っている。cssawwwardsのガイドによれば、Chrome 115+・Edge 115+・Firefox 132+・Safari 18+で対応し、2026年半ば時点でグローバルの対応率は約84%に達している。JavaScriptライブラリを一切読み込まずに、スクロール位置に連動したフェードやパララックスを実装できる。
.reveal {
animation: fade-in linear both;
animation-timeline: view();
animation-range: entry 0% cover 40%;
}
@supports not (animation-timeline: scroll()) {
.reveal { opacity: 1; transform: none; }
}本格的なピン留めや複雑なスクラブ演出は依然としてGSAP ScrollTriggerなどJSライブラリの独壇場だが、ちょっとしたフェードインや装飾的なパララックスであれば、この@supportsによるフォールバック込みの書き方をAIコーディングエージェントに指示するだけで十分実用に足る。ヒーローはWebGPUシェーダー、それ以外のセクションはCSSネイティブ、という使い分けが2026年後半の一つの定石になりつつある。
主な情報源
- Shaders — What is shaders? (Documentation)
- Introducing Shaders v3 (2026年7月14日)
- basementstudio/shader-lab (GitHub)
- 0xjitsu/claude-shaders (GitHub)
- pulkitxm/claude-directory (GitHub)
- Paul Bakaus「Carving Shaders Out of Claude Code」
- pbakaus/radiant (GitHub)
- CSS Scroll-Driven Animations: Complete Guide (2026) — cssawwwards
各ツール・サービスは提供元の規約に従ってご利用ください。情報は各情報源の公開時点のものです。収集・要約はAI、公開判断は人。