少し前まで、トップページでぬるっと動く3Dや、スクロールで景色が変わる没入型サイトは、はっきり言って“ぜいたく品”でした。モーションデザイナーと、シェーダーまで書けるフロントエンドエンジニアと、それを支える予算。この3点セットが揃ってはじめて成立する世界で、中小規模の案件で気軽に提案できるものではありませんでした。

その前提が、ここ半年でかなり崩れています。きっかけは、Claude（とりわけClaude Code）がWebGL／Three.jsをまともに書けるようになったこと。今回は、制作会社として実際に触っている立場から、「何がどう変わったのか」「どんなものが作れるのか」「どう作るのか」、そして「どこで落とし穴にハマるのか」を、できるだけ正直にまとめます。

何が変わったのか：「Skills」でClaudeが3Dを“覚えた”

WebGLを生で書くのは、正直しんどい領域です。座標系、行列、ライティング、シェーダー。Three.jsという定番ライブラリがあっても、APIのバージョン差分や非推奨化が激しく、AIに任せても「学習データが古くて、動かないコードを返してくる」のが従来の悩みでした。

ここを埋めたのが、Claude Codeの Skills という仕組みです。ざっくり言うと、特定領域の“最新の正しい書き方”をまとめた小さな知識パックを、必要なときだけ自動で読み込ませる機能。Three.js向けには有志がスキル群（シーンの基礎、ライティング、シェーダー、ローダー、アニメーション）を整備していて、「3Dシーンを作って」と頼むと該当スキルが裏で読み込まれ、レンダラーの初期化からリサイズ対応まで、いきなり“動くひな形”が返ってきます。

地味ですが効くのが、バージョン追従です。たとえばWebGPU向けの新しいシェーダー記述（TSL）は、importのパスが three/nodes から three/tsl に変わったり、時間を扱う関数名が差し替わったりと、APIがどんどん動いています。ネット上のサンプル（=AIの学習データ）の多くは古いまま。スキルはこの差分を吸収してくれるので、「それっぽいけど動かないコード」と格闘する時間がごっそり減ります。

要するに、作りたいものを言葉で説明すれば、Claudeが3Dの実装を出してくる——いわゆるvibe codingの土俵に、Three.jsがきれいに乗ったわけです。

作例で見せる：いま“言葉から”作れるもの

抽象論だと伝わりにくいので、実際にどのレベルの指示で何が出てくるか、代表的な作例で示します。どれも数行〜十数行の自然言語プロンプトが出発点です。

1. 浮遊する幾何形状のヒーローセクション

「浮遊する幾何オブジェクトを配置し、カメラがゆっくり動き、スクロールで演出が切り替わるヒーロー。bloomのポストプロセスとグラデーションのマテリアルで、滑らかにシーンを遷移させる」——この一文から、トップに置けるレベルの3D背景がひな形として立ち上がります。ブランドサイトの“最初の3秒”を作るには十分な出発点です。

2. 3Dプロダクトコンフィギュレーター

「GLTFモデルを読み込み、カラーピッカーとホイール／内装の選択肢で、ボタンを押すとマテリアルが切り替わる車のコンフィギュレーター。環境マップでリアルな反射を入れる」。EC・商品紹介で効く“触って選べる”体験が、ここまで具体的に指示できます。家具、シューズ、ガジェット——「実物に近い見え方を、回して確かめたい」系の商材と相性が良い領域です。

3. データを“見せる”3Dビジュアライゼーション

「JSONから3Dの棒グラフを生成。読み込み時にアニメーションで伸び、raycastingでホバー時にツールチップ、オービットコントロールでぐりぐり回せる。パフォーマンスのためにインスタンス化したジオメトリを使う」。レポートやダッシュボードを“ただの表”から脱却させたいときの定番パターンです。

4. シェーダーで作る水面・流体

「反射と波のアニメーションを持つ、シェーダーベースの水面」。少し前なら専門職の領域だった表現も、出発点のコードはすぐ出てきます。ここから先（質感の追い込み）は人間の目と手の出番ですが、ゼロからGLSLを書く必要はなくなりました。

ポイントは、**「うまくいけば、構想から動くプロトタイプまでが“その日のうち”、コストもトークン代で数ドル〜十数ドル規模」**というスピード感に落ちてきていること。これまで見積もりの段階で諦めていた表現を、まず動かして判断できるようになったのは、制作の現場としては大きな変化です。

どう作るのか：最小限のワークフロー

「魔法のように出てくる」わけではありません。実務で使うなら、最低限おさえておくと事故が減るポイントがあります。

ステップ1：Three.jsスキルを入れておく

プロジェクトにThree.js系スキルを導入しておくだけで、出力の“初手の正確さ”が変わります。基礎・シェーダー・ローダーをまとめたスキル群や、WebGPU／TSLに特化したスキルが公開されています。最初の30分の手戻りが消えるので、入れない理由はあまりありません。

ステップ2：プロンプトは「振る舞い」で書く

「かっこいい3Dを作って」ではなく、何が・どう動くかを具体的に。オブジェクトの種類、カメラの動き、インタラクション（ホバー／クリック／スクロール）、ポストプロセスの有無。振る舞いを記述すれば、実装はClaudeが書きます。これはGSAPのスクロール演出でも同じで、「説明できるものほど、きれいに出る」のが鉄則です。

ステップ3：最小の“動く核”から育てる

いきなり全部盛りにしない。「シーン＋カメラ＋レンダラー＋ライト＋オブジェクト1個」を先に動かして、そこに段階的に足していく。たとえば、ひな形はこの程度のコードから始まります。

import * as THREE from "three";

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  75, window.innerWidth / window.innerHeight, 0.1, 1000
);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
// 高解像度端末でGPUを焼かないための上限クランプ（地味だが重要）
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
document.body.appendChild(renderer.domElement);

scene.add(new THREE.AmbientLight(0xffffff, 0.5));
// ...ここからオブジェクトやアニメーションを足していく

この“核”が動いてさえいれば、あとは「波を足して」「bloomを足して」と会話的に積み増せます。

ステップ4：“AIっぽさ”をデザインスキルでなくす

ひとつ注意点。Claude（に限らず生成AI）にデザインを丸投げすると、どれも同じ見た目に収束しがちです。Interフォント、紫のグラデーション、角丸カード、控えめなアニメ。AnthropicはこれをAIの「平均への回帰」と呼んでいて、対策として“デザインの方向性”を先に指定するスキルが整備されています。3Dの実装スキルと、デザインの方向づけスキルは併用してこそ。技術的に動くだけのものと、ブランドとして成立するものは、別物です。

現場の本音：使いどころを間違えない

ここが一番伝えたいところです。「作れる」と「使うべき」は違います。

まず、本当にWebGLが要るのか。 多くのランディングページは、CSS 3DとGSAPのスクロール演出だけで、体感的な“高級感”の8割は出せます。WebGLが真価を発揮するのは、パーティクル、本物の3Dオブジェクト、シェーダー表現——CSSでは届かない領域に踏み込むときだけ。投資対効果で見ると、「まずCSS＋GSAPで詰めて、どうしても足りない一点だけWebGL」という順番が、たいてい正解です。

次に、パフォーマンス。 WebGLシーンは低スペック端末で容赦なく重くなります。実務では、端末判定を入れてモバイルでは静止画にフォールバックする、ピクセル比に上限をかける、といった“逃げ道”を最初から設計しておく必要があります。デスクトップで美しくても、現場の多くはスマホからアクセスします。iOS Safariのposition: sticky周りのクセも、出荷前に必ず実機で確認する。ここを省くと、表現は派手なのに「重くて閉じられるサイト」が出来上がります。

そして、「動く＝良い」ではない。 演出は、目的に効くところにだけ。全部を動かすと、何も伝わらなくなります。

これから：WebGPU／TSLという次の波

もうひとつ、地続きで来ているのがWebGPUです。WebGLの次世代にあたるGPUの使い方で、計算や描画のパフォーマンスが上がり、TSL（Three.js Shading Language）という、より書きやすいシェーダー記述も整いつつあります。前述の通りAPIはまだ動いている最中ですが、ここも対応スキルが追従しはじめていて、GPUパーティクルや高度なポストプロセスを“言葉から”組む流れが見えてきました。Claudeのデザイン系ツールでも、3Dやシェーダーのインライン出力が実験的に載りはじめています。来年の標準は、たぶんこのあたりにあります。

まとめ：道具が変わると、提案が変わる

整理すると、いま起きているのはこういうことです。

  • WebGL／Three.jsの“正しい最新の書き方”をClaudeが扱えるようになり、動くコードが一発で出やすくなった
  • これまで予算で諦めていた3D・没入型の表現を、まず動かして判断できるようになった
  • ただし、使いどころ・パフォーマンス・デザインの方向づけは、依然として人間の設計が要る

私たちCreavePlusは、Claude Codeを実装の主軸に据えて、Web制作とDXの現場でこの“道具の変化”を日々検証しています。大事なのは、3Dを「できるからやる」ことではなく、そのブランドの目的に効く一点に、過不足なく投資すること。道具が安くなったぶん、設計の良し悪しがそのまま結果に出る時代になりました。

「うちのサイトでも、ここだけ動かしたい」「3Dにする価値があるか相談したい」——そんな段階の話こそ、いちばん面白いところです。お気軽にどうぞ。