Claude × WebGL。Claude Codeで3Dを作るなら入れたいスキルと、できること・できないこと
この記事の目次
Claude Codeで3Dのサイトを作ってみたい。でも何を準備すればいいのか、どこまで任せられるのかが分からない。この記事はそんな方に向けて書いています。
先に結論を書くとThree.jsの動く試作ならClaude Codeでかなり早く作れます。その差を分けるのが「スキル」です。一方でSNSで話題になるような3Dサイトと同じものは、Claude Codeだけでは作れません。
入れておきたいスキルと作れるもの、作れないものを順に見ていきます。
Claude Codeが3Dを苦手にしていた理由
ブラウザで3Dを描くWebGLは、手で書くとかなり大変な分野です。座標やカメラ、光の当たり方まで自分で組み立てる必要があります。
そのため多くの人はThree.jsというライブラリを使います。ただThree.jsは更新が速く書き方がよく変わります。
たとえばWebGPU向けのシェーダーを書くTSLは、今の公式ドキュメントでは three/tsl から読み込む形です。ところがネット上には古い書き方のサンプルが多く残っています。AIはそうした古いサンプルからも学んでいるので、それらしく見えて動かないコードを返してくることがありました。
スキルを入れると何が変わるのか
ここを補うのがClaude Codeの「Skills（スキル）」です。特定の分野の正しい書き方をまとめた資料で、関係のある作業のときだけClaudeが自動で読み込みます。
Three.js向けのスキルを入れておくと「3Dの場面を作って」と頼んだときに該当するスキルが読み込まれます。画面の準備から画面サイズが変わったときの対応まで、最初から動くひな形が返ってきやすくなります。
古い書き方のコードと格闘する時間が減る。これがスキルを入れる一番の理由です。
入れておきたいThree.jsのスキル
公開されているスキルの中でもよく使われているのが CloudAI-X/threejs-skills です。GitHubで約3,400のスターが付いていて、Three.js r160以降を対象にしています。
中身は10個のスキルに分かれています。
- threejs-fundamentals：場面、カメラ、描画の基本
- threejs-geometry：立体の形を作る
- threejs-materials：表面の質感
- threejs-lighting：光と影
- threejs-textures：画像を貼る、周りの景色を映り込ませる
- threejs-animation：動き
- threejs-loaders：Blenderなどで作った3Dモデル（GLTF・GLB形式）の読み込み
- threejs-shaders：シェーダー（表面の色や揺らぎを細かく計算するプログラム）
- threejs-postprocessing：画面全体にかける効果（光のにじみやぼかしなど）
- threejs-interaction：クリックやドラッグなどの操作
導入はリポジトリのREADMEに沿ってプロジェクトの .claude/skills に置きます。全部入れておいても使うときだけ読み込まれるので困ることはあまりありません。
スキルを入れると作れる試作
どれも数行から十数行の依頼文から始められる試作です。
1. トップに置く3Dの背景
使いどころ：ブランドサイトやサービスサイトの最初の画面
「浮かぶ立体を並べてカメラをゆっくり動かし、スクロールで場面が切り替わる背景。光がにじむ効果とグラデーションの質感を付ける」。この程度の依頼でトップに置ける3D背景のひな形ができます。
2. 色や部品を選べる商品の3D表示
使いどころ：家具や靴、家電など回して見たい商品の紹介
「3Dモデルを読み込み、ボタンで色やパーツを切り替えられる。周りの景色を映り込ませて本物らしく見せる」。商品を触って選ぶ体験の土台を作れます。ただし商品の3Dモデルは別に用意が必要です。
3. データを見せる3Dグラフ
使いどころ：レポートやダッシュボード
「データから3Dの棒グラフを作り、読み込み時に伸びるアニメーションを付ける。マウスを乗せると数値が出てドラッグで回せる。数が多くても重くならない書き方にする」。表だけでは伝わりにくい数字を、触って見られる形にできます。
4. シェーダーで作る水面
使いどころ：世界観を見せたい場面の背景
「映り込みと波のアニメーションがある水面」。少し前までは専門の人しか書けなかった表現ですが、出発点のコードはすぐに出てきます。質感をどこまで追い込むかは人の目と手の仕事です。
うまくいけば構想から動く試作まではその日のうちに作れます。費用もトークン代で数ドルから十数ドル程度です。見積もりの段階で諦めていた表現を、まず動かしてから判断できるようになりました。
頼み方と進め方
Claude Codeに任せれば何でも出てくるわけではありません。事故を減らすために押さえておきたい点を4つにまとめます。
1. スキルを先に入れておく
上で紹介したスキルを入れておくだけで、最初に出てくるコードの正確さが変わります。
2. 見た目ではなく「動き」で頼む
「かっこいい3Dを作って」ではなく、何がどう動くかを書きます。立体の種類、カメラの動き、クリックやスクロールへの反応、画面効果の有無。説明できるものほどきれいに出てきます。
3. 小さく動かしてから足していく
いきなり全部を頼まず、場面とカメラと光、それに立体1つだけを先に動かします。最初のひな形はこの程度のコードです。
javascript
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));
// ...ここからオブジェクトやアニメーションを足していくこれが動けば、あとは「波を足して」「光のにじみを足して」と会話しながら積み上げられます。
4. デザインの方向を先に決める
AIにデザインまで任せると、どれも似た見た目になりがちです。Interフォント、白い背景に紫のグラデーション、控えめなアニメーション。Anthropicも公式ブログでこの現象を取り上げていて、デザインの方向を先に指定するスキルを対策として紹介しています。
3Dの実装スキルとデザインの方向づけは、両方そろえて使うものです。動くだけのものとブランドとして成り立つものは別物です。
作る前に「使うべきか」を考える
ここが一番伝えたいところです。作れることと使うべきことは違います。
まず本当にWebGLが要るのか。 多くのページはCSSの3D表現とGSAPのスクロール演出だけで、十分に高級感を出せます。WebGLが本当に活きるのは、光の粒や本物の3Dモデル、シェーダー表現など、CSSでは届かない表現に踏み込むときです。まずCSSとGSAPで詰めて、どうしても足りない1か所だけWebGLにする。この順番がたいてい正解です。
次に重さ。 WebGLの場面は性能の低い端末では一気に重くなります。スマホでは静止画に切り替える、高解像度の画面で描きすぎないよう上限をかける。こうした逃げ道を最初から作っておきます。見る人の多くはスマホからなので、出す前に必ず実機で確かめます。
そして動けば良いわけではない。 演出は目的に効くところだけに使います。全部を動かすと何も伝わらなくなります。
試作と「話題の3Dサイト」の間にある差
ここまでの試作はClaude Codeで本当に作れます。ただSNSで話題になるような3Dサイトと同じものは作れません。
差がつくのはコードではなく3Dの素材と演出です。話題のサイトは、映像制作用のソフトで作り込んだ素材と何十回もの調整の上にできています。たとえば1枚のコースターを主役にしたあるサイトは、制作に1年かかっています。
話題のサイトが実際にどう作られているかは、「Claude Codeで3Dサイトが作れる」は本当？話題のサイトの作り方を制作会社が分解してみた で詳しく分解しています。
まとめ
- Three.jsのスキルを入れると、Claude Codeは動くコードを出しやすくなる
- 背景や商品表示、グラフ、水面などの試作ならその日のうちに作れる
- ただし素材づくり、デザインの方向、重さへの対策、使いどころの判断は人の仕事
- 話題の3Dサイトと同じものはClaude Codeだけでは作れない
私たちCreavePlusはClaude Codeを実装の中心に置いてWeb制作をしています。3Dを「作れるから入れる」のではなく、そのブランドに効く1か所に絞って使うことを大事にしています。
3D以外に制作のどの工程が安くなるのかは AIで制作コストを60%削減できる理由 で分解しています。
「うちのサイトでもここだけ動かしたい」「3Dにする価値があるか相談したい」。そんな段階でも大丈夫です。
出典
