Claude CodeとスキルでThree.jsのサイトを作る手順

Claude CodeでThree.jsのサイトを作るときはスキルを先に入れて1回に1つの変化だけを頼み、Viteで本番用に書き出して公開するのが近道です。Three.jsはブラウザで3Dを描くための部品集で、Claude Codeは文章で頼むとコードを書いてくれるAIの道具です。この記事では実際の頼み方の例と、試作を本番のサイトに載せるまでの手順をまとめます。

スキルの選び方や作れるもの・作れないものはClaude Codeに入れたいThree.jsのスキルの記事で紹介しました。ここではその続きとして、手を動かす順番に絞って書きます。

作る前にスキルと土台を用意する

スキルは、Claude Codeに正しい書き方を教えるための説明書の束です。Claude Codeの公式の説明では、プロジェクトの .claude/skills の中に置いたスキルはそのプロジェクトで使われます。ふだんは名前と説明だけが読み込まれ、使うときに中身が読み込まれます（出典：Claude Code Docs「Extend Claude with skills」）。

Three.js向けには、CloudAI-Xが公開しているthreejs-skillsがよく使われます。10個のスキルが入っていて、Three.jsのr160以降を前提にしています。リポジトリの .claude/skills のフォルダを、作るプロジェクトの同じ場所に写せば準備は終わりです。

次に土台を作ります。Three.jsの公式の説明では、Three.jsとViteを入れて始める手順が紹介されています（出典：three.js manual「Installation」）。Viteは、作っている画面を手元で確かめたり本番用のファイルにまとめたりする道具です。

• npm install --save three（Three.jsを入れる）
• npm install --save-dev vite（Viteを入れる）
• npx vite（手元で画面を確かめる）

入れたThree.jsの版は、最初にClaude Codeへ伝えて固定しておきます。Three.jsは書き方の変わりが早く、版を伝えないと古い書き方のコードが混ざることがあるためです。

頼み方は1回に1つの変化だけにする

「かっこいい3Dのトップを作って」と頼むと、どこかで見たような無難な画面が返ってきやすくなります。うまくいくのは何を置いてどう動かしてどう確かめるかを1回に1つずつ渡す頼み方です。次の順番で頼むと崩れにくくなります。

1回目は、動く最小の画面だけを頼みます。

Three.jsのr160以降で、画面いっぱいに白い背景と立方体を1つ表示してください。ドラッグで回せるようにしてください。スキルのthreejs-fundamentalsとthreejs-interactionに沿って書いてください。

2回目は、見た目を1つだけ足します。

立方体を少し丸みのある形に変えて、左上から柔らかい光を当ててください。影は床に1つだけ落としてください。

3回目は、スクロールとの連動を足します。

ページを下にスクロールすると、カメラがゆっくり右に回り込むようにしてください。スクロールを止めたら動きも止めてください。

4回目は、確かめ方を頼みます。

スマホの幅で表示したときに動きが重くならないか確かめる手順を書いてください。3Dが表示できない端末では、代わりに説明の文章と静止画を出してください。

1回ごとに手元の画面で動きを見て、気になる点だけを次に伝えます。まとめて頼むほど、どこで崩れたのかを探す時間が増えます。話題の3Dサイトがどんな工程で作られているかは3Dサイトの作り方を分解した記事にまとめています。

試作から本番のサイトに載せるまでの5つの手順

手元で動いた試作は、そのままでは本番に出せません。本番に載せるまでの手順は次の5つです。

1. 3Dの素材を差し替える：試作の立方体を、本物の商品や場面の3Dモデルに替えます。モデルはGLB（3Dの形と質感を1つにまとめたファイル）で用意します。
2. 素材を軽くする：GLBは重くなりがちです。glTF Transformという道具の optimize の命令で、形と画像をまとめて圧縮できます（出典：glTF Transform「CLI」）。
3. 3Dが出ないときの表示を作る：古い端末や読み込みに失敗したときのために、説明の文章と静止画を出します。検索に読まれる文章もここに置きます。
4. 本番用に書き出す：npx vite build を実行すると、公開に使うファイルが dist というフォルダにまとまります（出典：three.js manual「Installation」）。
5. 公開して実機で確かめる：dist の中身をサーバーに置いて公開します。手元の速いパソコンではなく、普段使いのスマホで開いて確かめます。

コーポレートサイトの一部に3Dを入れる場合は、3Dの部分だけを別のページか枠に分けておくと安心です。3Dが止まっても会社の情報や問い合わせのページは読めるようにしておくためです。

参考までに弊社では、コーポレートサイト制作は¥150,000〜です。3Dや演出を入れる場合は内容をうかがって個別にお見積もりします。見積もりは無料です。

スマホで重くしないための確かめ方

3Dのサイトでよくある失敗は、パソコンでは滑らかなのにスマホでは重いことです。公開の前に、次の表で確かめてから出します。

描く細かさについては、Three.jsの公式の説明にも注意があります。高精細の画面に合わせてそのまま描くと処理が大きく増えるので、描く量に上限をかける書き方が紹介されています（出典：three.js manual「Responsive Design」）。

動きを減らす設定は、端末で「視差効果を減らす」などを選んだ人のための設定です。CSSの prefers-reduced-motion で見分けられます（出典：MDN「prefers-reduced-motion」）。この設定の人には3Dの動きを止めて静止画を見せると安心です。

3Dを使わずに文字や写真の動きだけで足りる場合もあります。動きのあるホームページ制作の内容と料金も比べてみてください。

参考にしたい3Dサイトと見るところ

頼み方を考えるときは、完成した3Dサイトを開いて「何が動いているか」を言葉にしてみるのが早道です。見た目をまねるのではなく、動きの種類と量を読み取ります。

• three.jsの公式の作例集：光・質感・操作などの作例がそろっています。頼みたい動きに近い作例の名前をClaude Codeに伝えると話が早く通じます。
• Bruno Simonさんのポートフォリオ：車を運転して作品を見て回るサイトです。Three.jsで描かれていて、遊びながら情報を見せる演出の参考になります。
• Awwwardsの年間賞の受賞サイト：Webデザインの賞で選ばれたサイトの一覧です。どこまでが3Dでどこからが写真や動画かを見分ける練習になります。

見た目の差を生むのはコードよりも3Dの素材と演出です。Claude Codeで届くのは「表示する」と「操作と連動させる」の部分だと考えて、素材と演出は人が決めます。

Three.jsのサイト作りで迷ったら弊社にできること

Claude Codeで試作まではできても、本番に載せる段階で手が止まる方は少なくありません。よくある悩みは次の3つです。

• 試作は動いたがスマホで重くなる理由が分からない
• 3Dの素材をどこで用意すればよいか分からない
• 会社のサイトの一部に3Dを入れたいが今のサイトを壊したくない

弊社では2017年から300件以上のサイトやシステムを制作してきました。3Dのサイトでは次のことをお手伝いします。

• どこに3Dを使いどこを文字や写真で見せるかを一緒に決めます
• 試作を本番に載せるための素材の圧縮とスマホでの確かめを行います
• コーポレートサイト制作は¥150,000〜で、3Dや演出は個別にお見積もりします（見積もりは無料です）

試作の段階でも構いませんので、弊社への相談からお気軽にお声がけください。初回の30分は無料です。