※この記事にはプロモーションが含まれています
スクロールすると立体が動く、あのホームページのことです。
ここ数年で増えました。カメラが建物の中に入っていく。製品の部品がばらばらに展開する。粘土でできた村の上を飛んでいく。見れば「すごい」と分かるけれど、自分の会社に必要なものなのかは分からない。
この記事では、3Dホームページの仕組みから費用、そして向く会社と向かない会社までを一度に整理します。僕自身が3Dホームページを作る仕組みを開発して、実際に測った数字を出しながら書きます。
読み終えたときに「うちは作るべきか、やめるべきか」が判断できる状態を目指します。
目次
3Dホームページとは何か
技術的にはWebGLという仕組みを使って、ブラウザの中に立体空間を描いたホームページです。
ゲームのような映像をソフトのインストールなしでブラウザに表示できる。この仕組みを扱いやすくしたのがThree.jsというライブラリで、実際の制作ではこれを使います。
呼び方は現場でいくつかあります。3Dホームページ、シネマティックWeb体験、イマーシブサイト、スクロール連動型3D。どれも同じものを指していますが、場面で使い分けられています。提案書では前の2つ、技術的な説明では後の2つ、という具合です。
どこまで普及しているのか
数字で押さえておきます。
| 指標 | 数値 | 出典 |
|---|---|---|
| Three.jsを使うサイト数 | 240,000サイト | Wappalyzer |
| WebGLのブラウザ対応率 | 97.54% | Can I use |
対応率97.54%は、実質的に「どの環境でも動く」水準です。技術的な障壁は、もうほとんどありません。
ChatGPTやStripe、WixといったサービスもThree.jsを使っています。特殊な技術ではなく、すでに普通に使われているものです。
表現には6つの種類がある
「3Dのサイト」とひとくちに言っても、中身はかなり違います。よく使われる表現は6つに整理できます。
| 表現 | 動くもの |
|---|---|
| 2.5Dデプス表現 | 画像レイヤー |
| 3Dビルドアップ | 立体パーツ |
| カメラジャーニー | 空間内のカメラ |
| モーフィング | 物体の形 |
| エクスプローデッドビュー | 分割された部品 |
| ゲーム型ナビゲーション | キャラ・乗り物 |
見るべきは何が動くかです。画像なのか、立体なのか、それともカメラ（見ている側の視点）なのか。ここが違えば、必要な素材も制作費も別物になります。
調べていて面白かったのは、これらの呼び名の多くがWeb業界ではなく別の業界が先に名付けていたことです。エクスプローデッドビューは工業製図から、モーフィングは映像制作から、ゲーム型ナビゲーションは20年以上前の学術研究から来ています。
各表現の定義と実際に見られるサイトは、別の記事にまとめました。
▶ 3Dホームページの6つの表現手法｜名前・見分け方・実例まとめ
検索には載るのか
一番よく聞かれる質問です。
前提として、AIクローラーはJavaScriptを実行しません。ChatGPTやPerplexityが情報を集めるとき、サーバーが返した最初のHTMLだけを読んで終わります。Googleだけが例外で、JavaScriptを実行して評価します。
3DはJavaScriptで動くので、「だから読まれないのでは」という心配が出てくる。
実際に測ってみました。JavaScriptを切った状態と動かした状態で、読めるテキストの量を比べています。
| 型 | JS無効で読める | JS有効で読める |
|---|---|---|
| 言葉が主役 | 491字 | 497字 |
| 物が主役 | 563字 | 569字 |
ほとんど変わりませんでした。差は数十字で、その正体は「Loading」といった読み込み中の表示だけです。
理由は設計にあります。文章をHTMLに実テキストとして置き、JavaScriptはそれを読んで3Dに焼き付けるだけにしてある。だから3Dは見せ方であって、内容の置き場所ではない。
逆に言えば、文章をJavaScriptの中に持たせた瞬間、この性質は失われます。
▶ JavaScriptは検索エンジンに読まれないのか｜実測して確かめた
本当の課題は、読み取り以前にある
測ってみて分かったのは、心配されている場所と実際の課題が違うことでした。
| 課題 | 実測値 |
|---|---|
| 文字量が少ない | 500字前後 |
| 転送量が重い | 919KB（うちThree.jsが687KB） |
演出に画面を使うぶん、文章が減ります。実測で500字前後。検索で上位に来るページは数千字あることが珍しくないので、この分量では技術に関係なく土俵に乗りません。
対処はできます。3Dの下に読み物を足す設計にすると、実測で1,017字まで増えました。500字と1,000字では、戦える土俵がまったく違います。
費用の相場
ここは正直に書きます。
海外の制作スタジオの相場を調べると、イマーシブなサイトは15,000ドルから200,000ドル超という幅でした。日本円で230万円から3,000万円超です。
一方、日本の中小企業のホームページ制作の相場は50万円から300万円程度。1桁以上の開きがあります。
つまり海外の事例をそのまま日本の中小企業に持ち込むのは現実的ではありません。
ただし状況は変わってきています。AIのコーディング支援を使うと、以前は専門のエンジニアでなければ書けなかった3Dのコードを、非専門の制作者でも扱える範囲に入ってきた。僕が3Dホームページの生成ツールを作れたのも、この変化があったからです。
この価格差を埋める方向に可能性があると思っています。
スマートフォンでは何が起きるか
ここが一番の注意点です。
パソコンで問題なく動いていたページが、iPhoneでは落ちました。原因はメモリでした。
3Dで文字を表示するとき、文字を画像に変換してから3D空間に貼ります。この画像が1枚あたり約33MB。文章が6つあれば200MBです。スマートフォンのブラウザには重すぎます。
ほかにも、画面外でも3Dが描画され続けて端末が熱くなる、縦長画面で文字が18pxまで小さくなる、といった問題がありました。
すべて対処できますが、対処に手間がかかります。スマートフォンからの訪問が多い事業なら、この手間を予算に見込んでおく必要があります。
▶ スマホで3Dサイトを作るデメリット｜iPhoneが落ちる理由と回避策
既存サイトがある場合はどうするか
サイト全体を作り替える必要はありません。
WordPressなら、固定ページとして1枚だけ追加できます。既存ページの検索順位も問い合わせ導線も変えずに済むので、リスクが小さい。効果が薄ければそのページだけ下げればいい。
実装で一番よく事故るのは、読み込み設定の1行です。WordPressの標準機能では3Dのコードを正しく読み込めず、画面が真っ白になります。
▶ 既存のWordPressサイトに3Dページを1枚だけ足す方法
設計で最初に決めること
技術の話は最後です。先に決めるのは何を主役にするかです。
主役の候補は4つあります。言葉、物、場所、象徴。
- 言葉 ── 著者や理念を持つ会社。ただし素材の条件が最も厳しい
- 物 ── 製品や作品。4つの中でいちばん外さない
- 場所 ── 作家や個人の表現。素材ゼロで成立するが、中身が空だと綺麗なだけで終わる
- 象徴 ── 事業が複数ある場合。「うちは何屋か」が一言で言えない相手ほど効く
そして、選ぶとはどこまで「ページであること」を捨てるかを決めることでもあります。
表現に振るほど、スクロールバーが消え、メニューが消え、ページというより場所に近くなっていく。売り物の説明が必要なら、そこまでは捨てられません。
これは技術の話ではなく、事業の話です。
▶ 3Dサイトの設計は「何を主役にするか」で決まる｜4つの型と選び方
向く会社と、向かない会社
判断の材料をまとめます。
向いている
- 検索以外の流入経路がある（広告、SNS、紹介、既存顧客）
- 商品や作品そのものに見せる価値がある
- ブランドの世界観で選ばれている
- 事業が複数あって、一言で説明しづらい
向いていない
- 検索流入を主軸にしたい。文章量が構造的に少なくなるため
- スマートフォンからの訪問が大半で、対応の手間を払えない
- 通信量を気にする相手が多い
- 説明すべき情報量が多い（料金体系が複雑、商品点数が多い）
演出で選ばれる商売なのか、別の理由で選ばれているのか。ここが判断の分かれ目だと思います。
この話は、ポッドキャストの第72回「3Dホームページは売上につながる？研究からわかった使いどころ」でも話しています。
