そもそもGPUって何？わかると「スマホで軽いサイト」が作れるようになる話

「GPUって何？」この質問自体はChatGPTやGeminiに聞けば60秒で答えが返ってきます。なのでこの記事は一歩先を狙います。

GPUをざっくり理解すると、サイト制作・デザイン・WordPressの判断がどう変わるのか。

実際にカツプロの3Dトップページをスマホで動くように改善した経験（前回の記事）から得た、制作者目線の話です。

60秒でわかるGPU：社長1人と、アルバイト1万人

パソコンやスマホの中には、計算する部品が2種類あります。

• CPU＝超優秀な社長1人。複雑な判断を順番にこなす。プログラムの実行や文章処理が担当
• GPU＝単純作業専門のアルバイト1万人。同じ計算を大量に同時にこなす。画面の色決め・アニメーション・動画・3Dが担当

スマホの画面は約300万個の点（ピクセル）でできていて、1秒に60回描き直されます。毎秒1億8千万個の点の色を決める仕事は、社長1人では絶対に間に合わない。だから「点の色を決めるだけの単純作業を1万人で一斉にやる」専門部隊がいる、これがGPUです。

ここで大事なのは、あなたの作ったWebサイトも、閲覧者の画面に映る限り必ずGPUが描いているということ。GPUの気持ちがわかると、「なぜこのサイトはスマホで重いのか」が見えるようになります。

その1：アニメーションが「ヌルヌル」か「カクカク」かはCSSの書き方で決まる

Webの動きには、社長（CPU）に頼む書き方と、アルバイト部隊（GPU）に頼める書き方があります。

理由：位置やサイズを変えると、CPUがページ全体のレイアウトを毎フレーム計算し直します（リフローと呼ばれます）。一方transformとopacityは「できあがった絵を、ずらす・重ねる」だけなのでGPUが単独で処理できる。「動かすならtransform」はWeb制作の現場ルールですが、その理由はGPUにあります。

WordPressなら：スクロールでふわっと出る系のプラグインやテーマを選ぶとき、デモをスマホで触ってカクつかないか見る。カクつくものはだいたいCPU側に仕事を投げています。

その2：「表示は小さいから大丈夫」は通用しない。画像の本当の重さ

4000pxの写真をCSSで300pxに縮めて表示しても、GPUのメモリには4000px分がドンと載ります。画像はGPUに渡る瞬間に圧縮がほどかれ、生データになるからです（1ピクセル＝4バイト。4000×3000pxなら約48MB！）。

これがスマホで特に致命的な理由は、PCと違ってスマホにはGPU専用メモリがないから。本体のメモリをCPUと分け合っていて、1つのサイトが使える量には上限があります。超えるとどうなるか？ページがカクつく、端末が熱くなる、最悪ブラウザのタブが落ちます。

WordPressなら：

• アイキャッチや本文画像は表示サイズに合わせてリサイズしてからアップ（WordPressが自動生成する中間サイズ・srcsetがちゃんと効いているか確認）
• スライダーに元画像そのままを10枚入れない。「転送が軽いWebP」でもGPU上の重さは同じなので、ピクセルサイズそのものを絞るのが唯一の対策

その3：「おしゃれエフェクト」はGPUの残業で成り立っている

すりガラス風のbackdrop-filter: blur()、多重のbox-shadow、大きな半透明レイヤーの重なり。これらはGPUに「描いた絵をもう一度加工する」残業をさせるエフェクトです。1〜2箇所なら平気ですが、画面中に散りばめると、スマホのGPUは毎フレーム全部やり直しになります。

さらに厄介なのが熱。スマホのGPUは働くほど発熱し、一定温度を超えると端末が自動的に性能を落とします（サーマルスロットリング）。「最初はヌルヌルなのに、1分見てるとカクカクになるサイト」の正体はこれです。閲覧が長いほど遅くなるサイトは、当然離脱されます。

デザインの判断基準として：ぼかし・影・透過は「主役の1箇所に集中投資」。全部に薄く使うより、見た目も性能も良くなります。

その4：表示速度の指標（Core Web Vitals）にも実は絡んでいる

Googleの検索評価に使われるCore Web Vitalsのうち、操作への反応速度（INP）はCPUの混雑が、表示の安定性やスクロール体験はGPUの負荷が影響します。「SEOのために表示速度を上げましょう」の裏側には、CPUとGPUの分業を邪魔しないという設計問題があるわけです。画像圧縮プラグインを入れて満足…の一歩先として、この記事の「その1〜3」を見直すと、数字と体感の両方が変わります。

まとめ：明日から使えるGPU目線チェックリスト

• アニメーションはtransformとopacityだけで作れないか考える
• 画像は「ファイルサイズ」だけでなく「ピクセルサイズ」を表示に合わせる
• ぼかし・多重影・大きな透過は主役の1箇所だけに
• テーマやプラグインはスマホの実機でデモを触ってから選ぶ
• 「触ってると熱くなる・だんだん重くなる」サイトはGPUの悲鳴。エフェクトと画像を疑う

3DやWebGLまで踏み込む方は、続きとしてKTX2でGPUメモリを1/8にした実録記事もどうぞ。カツプロでは、こうした「作って試した結果」をコミュニティで共有しています。質問があれば掲示板でいつでも。