Three.jsのサイトがスマホで重い｜最初に下げるのは描く画素の数

「Claude Codeで作ったThree.jsのサイトがパソコンでは滑らかなのにスマホだと重い」と、原因を探している作り手は多いです。スマホで重いThree.jsのページは、形や質感より先に描く画素の数から下げます。画素の比率をそのまま渡すと3倍の画面では9倍の画素を描くことになるので、まず上限を決めてから形と質感を軽くします。

three.jsの公式マニュアルでは、画素の比率が3倍のスマホは通常の画面の1画素あたり9画素を描くことになると説明されています（three.js公式マニュアルのResponsive Design・2026年11月に確認）。スマホの描く力はパソコンより小さいので、この差がそのまま重さになります。

この記事では、重さの原因を描く画素の数から順に説明します。そのうえでどこから直すかを決める基準と、今日確かめられることをお伝えします。

スマホで重い原因は描く画素の数から始まる

Three.js（Webで3Dを描くための道具）は、canvas（ページの中の絵を描く場所）の画素を1つずつ計算して色を決めます。計算する画素が多いほど、1回の描画に時間がかかります。

スマホの画面は小さくても画素は細かく、画素の比率（CSSの1画素を実際の何画素で表すか）が2や3の機種が多くあります。パソコンで滑らかに動いていても、同じページがスマホではずっと多くの画素を描いていることがあります。

three.jsの作例には renderer.setPixelRatio(window.devicePixelRatio) の行が入っているものが多く、Claude Codeが書くコードにも同じ行が入ることがあります。見た目は細かくなりますが描く量はそのぶん増えます。

スマホで重いときは、まず何画素を描いているかを確かめます。

画素の比率を上げると描く量は2乗で増える

画素の比率は縦と横の両方にかかります。比率が2なら描く画素は4倍になり、比率が3なら9倍になります。

three.jsの公式マニュアルは、renderer.setPixelRatio(window.devicePixelRatio) の書き方を強く推奨しないとしています。描く大きさが頼んだ大きさと変わってしまい、後から処理を足すときに大きさが分からなくなるためです。

同じマニュアルでは、重い3Dのページなら何もせず1倍の画素で描いてブラウザに拡大させる方がよいとも書かれています。細かさを少し上げたい場合は、canvasの大きさを変えるときに自分で画素の比率をかけて描く大きさを決めます。

実際の直し方は、画面の比率と上限の小さい方を使うことです。たとえば上限を1.5にすれば、比率が3の機種でも描く画素は2.25倍までに収まります。

画素の比率には上限を付け、画面の比率をそのまま渡さないようにします。

形と質感を軽くするのは画素の後

画素の数を下げても重いときは、描く物の数と質感の画像を見直します。前の節で描く画素を減らしたので、ここからは1枚の絵を描くまでの手間を減らす話です。

three.jsの公式マニュアルでは、メッシュ（形と質感をまとめた1つの物）を1つ作るごとに描く処理が1回以上かかると説明されています（three.js公式マニュアルのたくさんの物を描く最適化・2026年11月に確認）。マニュアルの例では約19,000個の箱を1つにまとめると18,999回の処理が減り、筆者の環境では1秒に20コマ未満だった動きが60コマになったとされています。

質感の画像も重さにつながります。MDNのWebGLの説明では、JPGやPNGは通信量は小さくてもGPU（画面を描く専用の計算機）のメモリでは小さくならないとされています（MDNのWebGLのベストプラクティス・2026年11月に確認）。GPU向けに圧縮した画像の形式はメモリの使用量が少なく、モバイルでは特に効くと書かれています。

同じ形の物を1つずつ作る書き方や大きな画像をそのまま読み込む書き方は、動いていても重さの原因になります。Claude Codeが書いたコードでも物の数と画像の大きさは一度数えてください。

画素の次に見直すのは、物の数と質感の画像の大きさです。

表示の速さはLCPの2.5秒で確かめる

動きの滑らかさとは別に、ページが開くまでの速さも確かめます。3Dの画像や形のファイルが大きいと、最初の画面が出るまでに時間がかかります。

Googleは表示の速さの目安としてLCP（一番大きな要素が出るまでの時間）を2.5秒以内としています（web.devのWeb Vitalsの説明・2026年11月に確認）。この目安はモバイルとパソコンを分けて、訪問の75パーセンタイルで満たしているかで見ます。

3Dの部分が読み込み終わるまで文字やメニューが出ないページは、LCPが遅れやすくなります。文字とメニューを先に出し、3Dは後から読み込む形にすると最初の画面が早く出ます。

開く速さはLCPで測り、3Dより先に文字とメニューを出します。

どこから直すかを決める判断の表

ここまでの話を表にまとめます。作ったページを当てはめて、上から順に確かめてください。

4つとも左の列なら、重さの原因はほかにあります。シェーダー（色の計算を書いた小さなプログラム）や後から足した効果を1つずつ外して確かめてください。

1つでも右の列があるなら、上の行から順に直します。画素の比率の上限は数行で直せて効きも大きいので、最初に直してください。

御社が今日やること

次の4つは今日確かめられます。

1. コードの中で setPixelRatio と devicePixelRatio を検索し、上限が付いているかを見る
2. スマホの実機でページを開き、上限を1.5に変えたときの滑らかさを比べる
3. 読み込んでいる画像と形のファイルの大きさを書き出し、大きい順に並べる
4. PageSpeed Insights（Googleが出している表示の速さを測る無料の道具）でモバイルの結果を開き、LCPが2.5秒以内かを見る

やりがちな失敗は、パソコンのブラウザの開発者ツールでスマホの画面にして確かめることです。画面の大きさは同じでも描く力はパソコンのままなので、重さは実機で確かめてください。

Claude Codeで最初にThree.jsのページを作るときの頼み方は、Three.jsのサイトを作る手順の記事で説明しています。

弊社がやっていること

弊社は2017年から300件以上のサイトやシステムを作ってきました。3Dや動きのあるサイトのご相談では、スマホの実機で重さを確かめてから直す順番を一緒に決められます。見るのは画素の比率と物の数と画像の大きさの3つです。

一方で弊社をすすめない場合もあります。

• 画素の比率に上限を付けるだけで足りるなら、ご自分で直せるので弊社に頼む必要はありません
• スマホのどの機種でも同じ滑らかさで動くとは言えず、弊社も約束できません
• 見た目の細かさを一番に優先したいなら、重さとの釣り合いをご自分で決めていただく必要があります

3Dを含めた作り直しを考えるときは料金の一覧をご覧ください。どこから直すか迷うときは相談の窓口からご連絡ください。初回の30分は無料です。