3Dホームページの表現手法｜「何が動くか」で分かる3つの型と、6つの用語の正体

スクロールすると立体が組み上がる。カメラが建物の中へ入っていく。部品がばらばらに展開して中身が見える。ここ数年、そういうホームページが増えました。

見れば「すごい」とわかる。でも、それを人に説明しようとすると言葉が出てこない。僕も同じでした。だから調べたんです。

そうしたら、面白いことが2つわかりました。1つは、3Dホームページの表現に、業界共通の分類がそもそも存在しないこと。世界のサイトを表彰しているAwwwardsも、Web制作の技術ブログとして有名なCodropsも、分類らしい分類を持っていませんでした。もう1つは、巷で使われている言葉の多くが、Web業界ではなく別の業界からの借り物だったこと。工業製図、映像制作、ゲーム開発、そして20年以上前の学術研究です。

共通の分類が無いなら、軸を自分で立てるしかありません。この記事では、まず「何が動くか」という軸で、3Dホームページを3つの型に分類します。そのうえで、世間でよく見かける6つの言葉を、定義・出どころ・実際に見られるサイトまで含めて1つずつ整理します。

型と言葉の正体がわかると、選べるようになります。「かっこいいサイト」ではなく「うちにはこの型が合う」と言えるようになる。それがこの記事のゴールです。

先に結論 — 3Dホームページは「何が動くか」で3つに分かれる

僕の分類はこうです。主役の物が動くのか、見ている側の視点が動くのか、それとも自分で動かすのか。

型	何が動くか	ひとことで言うと	向いている用途
モチーフ型	主役の物が動く	主役（社名・ロゴ・製品・キャラクター）が、上から下まで姿を変え続ける	ブランド・会社案内・商品紹介・採用
シネマ型	視点（カメラ）が動く	画面の奥へ奥へ進んでいく。映画のよう	世界観・施設・商品の物語
プレイ型	自分で動かす	操作して遊べる。滞在時間が伸びる	話題づくり・採用・ポートフォリオ

技術的には、3つの型ともWebGL（ブラウザの中で立体を描く仕組み）で作られています。それを扱いやすくしたのが、Three.js（スリードットジェイエス）というライブラリです。

モチーフ型の実物を2本、置いておきます。1本目は社名の3文字が跳ねて、回って、散って、また一語に戻るサイト。

2本目は食卓の小人が場面ごとに演目を変えながらお店を案内するピッツェリアのサイト（検証のために作った架空のお店です）。

どちらも、3Dソフトは1つも使っていません。

では、専門家の間でよく聞く「3Dビルドアップ」「カメラジャーニー」「モーフィング」といった言葉は何なのか。あれは型の名前ではなく、型の中の「動き方」や「味付け」の名前が混ざったものです。しかも、Webの用語として定着していない言葉も交じっています。ここから、その正体を1つずつ確かめます。

よく聞く6つの言葉は、3つの型のどこに当たるのか

先に対応表を出します。細かい話はこの後ですが、この表だけでも頭が整理されるはずです。

言葉	主に動かすもの	3つの型でいうと	用語としての定着度
2.5Dデプス表現	画像レイヤー	どの型でもない（疑似3D）	定着している
3Dビルドアップ	立体パーツ	モチーフ型の動き方の1つ	Webでは未定着
カメラジャーニー	空間内のカメラ	ほぼシネマ型のこと	使用例を確認できず
モーフィング	物体の形	型ではなく味付け	最も定着している
エクスプローデッドビュー	分割された部品	モチーフ型の動き方の1つ	工業系で定着
ゲーム型ナビゲーション	キャラ・乗り物	プレイ型そのもの	学術用語として存在

見てのとおり、6つは対等な並びではありません。型の名前と、型の中の動き方と、味付けの名前が混ざっています。だから「6つの表現手法」として横並びで覚えようとすると混乱するんです。見分ける軸はあくまで「何が動くか」。ここが違えば、必要な素材も制作費も別物になります。

それぞれの名前は、どこから来たのか

6つの言葉の出どころを調べると、Web業界発のものがほとんどないことに気づきます。

表現	本籍のある業界	確認できた出典
2.5Dデプス表現	ゲーム業界・アニメーション	起源は1930年代のマルチプレーンカメラ
3Dビルドアップ	モーショングラフィックス・VFX	Houdiniコミュニティの「build-up animation」
カメラジャーニー	今回は特定できず	近い言葉は walkthrough / camera path
モーフィング	映像VFX	1980〜90年代の映像技術由来
エクスプローデッドビュー	工業製図・CAD	特許図面・製品マニュアルの標準技法
ゲーム型ナビゲーション	学術研究（HCI）	ACM論文（2003年）

つまりWeb業界がこの分野で新しく言葉を作ったわけではないということです。3Dの表現をWebに持ち込むとき、先に同じことをやっていた業界の語彙をそのまま借りてきた。エクスプローデッドビューが特許図面の言葉であることを知っていれば、製造業の社長に説明するときに話が早くなります。

以下、1つずつ見ていきます。それぞれの言葉が3つの型のどこに当たるのかも、あわせて添えます。

2.5Dデプス表現とは何か

背景・中景・前景・文字をそれぞれ別のレイヤーに分け、スクロールに合わせて違う速度で動かす手法です。3つの型でいうと、実はどれでもありません。立体を1つも使わない疑似3Dだからです。

背景の山はゆっくり、中央の建物は少し速く、手前の葉は大きく速く動く。立体モデルは1つも使っていないのに、人の目には奥行きがあるように見えます。

仕組みは単純で、スクロール量に係数を掛けるだけです。

手前のレイヤー　= スクロール量 × 0.8
中景のレイヤー　= スクロール量 × 0.4
背景のレイヤー　= スクロール量 × 0.15

実装はCSSのtransformでも、GSAP ScrollTriggerのような外部ライブラリでも可能です。近年はCSS Scroll-driven Animations（スクロール位置をアニメーションの時間軸として扱う仕組み）も使えるようになりました。

この言葉の出どころ

「2.5D」はパララックス（視差）効果の別名として実際に使われている言葉です。エマーソン大学の技術サポートページには「Creating a Parallax 2.5D Scene」という記事があり、パララックスと2.5Dが同じものを指す語として並記されています。

もっと遡ると、この考え方自体は1930年代のアニメーション制作で使われたマルチプレーンカメラに行き着きます。複数のセル画を前後にずらして配置し、カメラを動かして奥行きを出す技法です。90年前の映像技術が、いまブラウザの中で動いていることになります。

向いている場面と、向かない場面

ブランドの世界観、創業物語、採用ストーリー、観光や地域のサイト。つまり読ませたい文章が長くある場合に効きます。文章はHTMLにそのまま置けるので、検索エンジンにもAIにも読まれる。ここが後述の重い手法との決定的な違いです。

一方で、多用すると2010年代のパララックスサイトに見えます。動く理由がないまま動かすと、ただの装飾になる。移動量が大きすぎると単純に読みづらい。

見られる事例

歴史的な代表例は、ゲーム「Firewatch」のプロモーションサイトです。多層の背景画像を異なる速度で動かすだけで、非常に強い奥行きを作りました。多くの開発者が再現に挑戦したほどの完成度です。ただしこのサイトは現在オフラインで、アーカイブでしか見られません。

今アクセスできるものだと、サウジアラビアの都市開発プロジェクト「Masar Destination」が近い体験です。ただし正直に言うと、こちらは2.5Dというより準3Dの地図探索に近く、教科書的なパララックスの模範例とは少し違います。

3Dビルドアップとは何か

ばらばらの部品が、スクロールに合わせて組み上がっていく表現です。設計図が立体になる。柱が立つ。パーツが集まって製品になる。3つの型でいうと、モチーフ型の中の「集まる方向」の動き方です。主役の物が姿を変え続ける型の、1つの見せ方にすぎません。

実装は2通りある

1つはCSSだけで作る方法です。perspective・rotateX・translateZ・transform-style: preserve-3d といったプロパティを使い、HTMLのカードやパネルを立ち上げます。本物の3Dモデルではありませんが、画面が起き上がる程度の表現なら十分成立します。

もう1つはWebGLを使う方法です。Blenderなどで作った部品をGLB形式で書き出し、Three.jsで表示する。各パーツに「開始位置・開始角度」と「完成位置・完成角度」を設定し、スクロールの進行率に合わせて間を補間します。

この言葉の出どころ

これはWeb業界ではなく、モーショングラフィックスやVFXの業界で「build-up animation」と呼ばれている技法です。

Houdini（映像業界で広く使われる3DCGソフト）のコミュニティサイトには、こういう記述があります。

transforms any 3D object into an abstract voxel-style build-up animation – ideal for motion design and stylized reveals

3Dオブジェクトを、粒が集まって形になっていく「build-up animation」に変換する、という説明です。After Effectsの講座にも「Flat Animation Buildup」という名前のものがあり、パーツが組み上がる演出を指してこの語が使われています。

ただしWeb業界のタグや用語としては、この言葉はまだ定着していません。Awwwards・Codropsといった主要なWeb制作メディアで「3D build-up」を検索しても出てきません。映像業界の言葉を、Webの文脈に持ち込んで説明している段階です。

何に向いているか

建築、住宅、製造業、システムやサービスの説明。完成までの工程を見せたい場合に強い手法です。複雑な仕組みを一つずつ見せられるので、「なぜこの価格なのか」を説明する場面にも効きます。

弱点は準備です。3Dモデルが1つの塊になっていると動かせないので、最初から部品ごとに分けて作る必要がある。ここを後から直すのは非常に手間がかかります。

見られる事例

最も有名な実例はApple製品ページの演出です。Builder.ioやCSS-Tricksといった技術メディアが、この手法をApple由来として解説する記事を出しています。

ただ正直に書いておくと、「3Dビルドアップが主役」と言い切れる単独の商用サイトは、今回2度にわたって探しましたが見つけられませんでした。受賞サイトのギャラリーも当たりましたが、独立した事例には辿り着けていません。

カメラジャーニーとは何か

物体ではなく、見ている側の視点（カメラ）が3D空間を移動する表現です。3つの型でいうと、シネマ型そのものを指しています。

スクロールすると建物へ近づく。トンネルに入る。上空へ飛ぶ。次の部屋へ移動する。ユーザーは何も操作していないのに、自分が移動しているように感じます。

仕組みとしては、3D空間内にカメラの移動ルートをあらかじめ作っておき、スクロールの進行率をそのルート上の位置に対応させます。スクロールが50%なら、カメラもルートの50%地点にいる、という設計です。

この言葉についての注意

6つの中で、この語だけは今回調べた範囲で使用例を確認できませんでした。建築ビジュアライゼーション、ゲーム開発、3DCG制作、Web制作の各分野を当たりましたが、「camera journey」という語そのものが業界で使われている形跡が見つかりません。

実際に各業界で使われているのは、こういう言葉です。

• 建築ビジュアライゼーション：walkthrough（人の目線で歩く）／flythrough（俯瞰で飛ぶ）
• Web制作：camera path／scroll-driven camera
• 3DCG制作：camera path／Follow Path

この記事では便宜上「カメラジャーニー」と呼んでいますが、人に説明するときや検索するときは、camera path や flythrough を使ったほうが通じます。

日本の実例があります

TIER IVという自動運転の会社のサービスサイト「Pilot.Auto」が、この表現の分かりやすい実例です。スクロールのたびに視点が切り替わり、カメラが俯瞰と寄りを繰り返しながら車が動いていきます。

海外の受賞サイトではなく日本企業の実務のサイトでこの水準が実装されている、というのは知っておく価値があると思います。

一番難しいのは「止めること」

この手法で失敗するパターンは、だいたい同じです。カメラを動かし続けてしまう。

移動して、止めて読ませる。物体が動いて、また止めて読ませる。この緩急がないと、ユーザーはコピーを読む前に次の場面へ進んでしまいます。視点移動が激しいと、単純に酔います。

現在地が分からなくなりやすいのも弱点です。「今どこにいるのか」が示されないサイトは、途中で閉じられます。

モーフィングとは何か

1つの形が、連続的に別の形へ変わっていく表現です。丸が商品になる。ロゴが建物になる。語源は metamorphosis（変態）です。3つの型でいうと、これは型ではありません。どの型にも足せる「味付け」です。モチーフ型の主役が姿を変えるときにも、シネマ型の場面転換にも使われます。

この言葉の出どころ

6つの中で最も確実に定着している言葉です。1980年代から90年代の映像技術に由来し、Wikipediaにも単独の項目があります。

日本語圏でも定着していて、Webデザインスクールの解説記事で正式な演出技法として扱われているほか、2007年の学術論文「Webサイト間のモーフィングによるWebデザイニング支援」でも専門用語として使われています。20年近く前から日本語のWeb文脈で通用していた言葉です。

3つの実装方法がある

1つめはSVGのパスを変形させる方法。ロゴ、アイコン、線画、図解に向いています。

2つめは3Dモデルの頂点を補間する方法（Morph Targets）。Three.jsの公式サンプルでも確認できます。

3つめは、実際には形を変えず、変わったように見せる方法です。クロスフェード、粒子分解、マスク、ノイズを使ったシェーダーなど。

実務では3つめが一番使いやすいと思います。理由は単純で、構造の違う3Dモデル同士を頂点レベルで補間するのは技術的に難しく、中間の形が不自然になりやすいからです。粒子でいったんばらして、別の形に再構築するほうが自然に見えます。

見られる事例

CSSとSVGだけで動くモーフィングのデモ集に、40以上のパターンが並んでいるサイトがあります（morphingsvg.mayurchaudhary.com）。「CSSだけでどこまでできるのか」を確かめたいなら、ここが早いです。

エクスプローデッドビューとは何か

完成している製品を、部品ごとに分解して見せる表現です。日本語では「分解図」「爆発図」と呼ばれます。3つの型でいうと、こちらもモチーフ型の動き方の1つ。ビルドアップとは逆の、「分かれる方向」です。

イヤホンなら、外装・ドライバー・基板・バッテリー・マイク・センサーが中心から外側へ展開されていく。

この言葉の出どころ

工業製図・CAD由来の言葉です。もともとは特許図面や製品マニュアルで使われてきた表現が、そのままWebに転用されました。

面白いのは、3DCGソフトの機能名としても定着していることです。Houdiniの公式日本語ドキュメントには「Exploded View」という名前のノード（機能）が存在します。日本語版でもカタカナに直さず、そのまま英語表記で使われている。それだけ言葉として固まっているということです。

製造業の方に説明するときは、この語は説明不要で通じます。

モーフィングとの違い

混同しやすいので整理しておきます。エクスプローデッドビューは形そのものを変えません。変えるのは位置と角度だけです。モーフィングは形が変わる。ここが決定的な違いです。

3Dビルドアップとは向きが逆です。ビルドアップが集まる方向、エクスプローデッドが分かれる方向。技術的には同じ仕組みを使うことが多いのに、意味は正反対になります。

見られる事例

iyO Audioの製品ページ（iyo.audio/iyo-one）で実際に確認できます。部品ごとの分解図が掲載されていて、この手法の代表例としてAwwwardsにも掲載されています。

成功させるコツは、一度に全部開かないこと

部品が多すぎると、何を見ればいいのか分からなくなります。外装、内部構造、中心機能、そして再び完成、というように段階的に分解していくほうが伝わります。

ゲーム型ナビゲーションとは何か

ユーザーがキャラクターや乗り物を操作して、サイトの中を自由に移動する設計です。メニューをクリックするのではなく、車を運転して実績ページへ行く。歩いて部屋に入る。3つの型でいうと、プレイ型そのものです。

この言葉の出どころ

調べていて一番驚いたのがこれでした。20年以上前の学術論文に、そのままの名前で存在していました。

Tsang, M., Fitzmaurice, G., Kurtenbach, G., Khan, A. (2003). “Game-Like Navigation and Responsiveness in Non-Game Applications.” Communications of the ACM, Vol.46 Issue 7

さらにその前身となる研究もあります。

Burtnyk, N., Khan, A., Fitzmaurice, G., Balakrishnan, R., Kurtenbach, G. (2002). “StyleCam: Interactive Stylized 3D Navigation using Integrated Spatial & Temporal Controls.” UIST 2002

書いたのはAutodeskとトロント大学の研究者たちです。そしてこの研究が対象にしていたのは「3D Webコンテンツを製品マーケティングや広告で見せるための操作設計」でした。いま僕たちが話していることと、ほぼ同じ領域です。

つまりこの表現は、流行の新しい手法ではありません。20年前に名前がつき、研究され、いまブラウザの性能が追いついて実用になった、という順番です。

見られる事例

ブルーノ・シモンさんのポートフォリオ（bruno-simon.com）が、この分野で最も引用される定番です。キーボードで車を運転して3Dの世界を巡り、作品ごとの場所に到達します。ソースコードも公開されています。

必要になるものが、他と桁違いに多い

プレイ型だけは、難易度の桁が違います。3Dの表示に加えて、キーボードとタッチの入力処理、カメラの追従、衝突判定、物理演算、マップの設計、読み込み管理、そして操作が分からない人のための通常ナビゲーションへの逃げ道。

つまり、Webサイトというよりゲーム開発に近い実装になります。

企業サイトには、正直おすすめしません

記憶に残る。滞在時間が伸びる。SNSで共有されやすい。長所は確かにあります。

ただ、問い合わせや採用を目的とする人に「まず操作を覚えてください」と要求することになります。営業導線としては明確に遠回りです。

使うなら、通常のサイトとは別の場所に置くのがいいと思います。実績を巡る特設ページ、購入者向けの学習マップ、周年企画。本線から外して、寄り道として用意する。

どう選ぶか — 型から入って、動き方は後で決める

選び方の順番はシンプルです。まず目的から型を決める。動き方や味付けは、その後で足す。この順番なら迷いません。

仕組みや工程を分かりやすく説明したいなら、モチーフ型。集まる方向（ビルドアップ）で見せるか、分かれる方向（分解図）で見せるかは、型を決めた後の話です。製造業、建築、システム、コンサルティングのメソッド説明に向きます。

世界観に引き込みたいなら、シネマ型。ブランドストーリー、採用、理念を伝える場面です。予算を抑えたいなら、疑似3Dの2.5Dデプス表現で雰囲気だけ出す手もあります。

変化を印象づけたいなら、モーフィングの味付けを足す。ビフォーアフター、事業の転換、ロゴ演出。これはどの型と組み合わせてもかまいません。

遊んでもらいたいなら、プレイ型。ただし前述の通り、企業サイトの本線には置かないこと。

そしてもう1つ、選ぶ前に決めておくべきことがあります。どこまで「ページであること」を捨てるかです。

表現に振るほど、そのサイトはページでなくなっていきます。スクロールバーが消え、メニューが消え、時間と視線が進行を担うようになる。売り物の説明が必要なら、そこまでは捨てられません。世界だけを渡せばいいなら捨てられる。

これは技術の話ではなく、事業の話です。

型を決めたら、次に決めるのは「何を主役にするか」です。社名・ロゴか、事業の象徴になる物か、キャラクターか。主役の選び方は3Dサイトの設計は「何を主役にするか」で決まるにまとめています。そもそもの仕組みや費用感から知りたい方は3Dホームページとは何かをどうぞ。

まとめ

この記事の核心は3点です。

1. 「6つの表現手法」と対等に並べるのは間違いだった。分類として機能する軸は「何が動くか」で、型はモチーフ型・シネマ型・プレイ型の3つ
2. よく聞く6つの言葉は、型の名前と、型の中の動き方と、味付けの混ざりもの。しかもWeb業界が自分で名付けたものはほとんどなく、工業製図、映像制作、ゲーム開発、学術研究からの借り物
3. 選ぶ基準は見た目ではなく目的。説明したいのか、没入させたいのか、変化を見せたいのか、遊ばせたいのか

調べていて印象に残ったのは、ゲーム型ナビゲーションの論文が2003年のものだったことです。20年前に名前がついて研究もされていた表現が、いまようやくブラウザで動くようになった。新しいのは技術であって、発想そのものは新しくないということだと思います。

僕自身、Brain教材の紹介ページを3Dで作りました。粘土でできた村の上空から始まり、スクロールに合わせて雲の間を降りていく構成です。この記事の分類でいうと、シネマ型にモーフィングの味付けを足した作りです。

作ってみて分かったのは、難しいのは3Dそのものではなく、どこで止めて読ませるかの設計でした。技術の問題ではなかった。カメラを動かし続けたくなるのを我慢して、要所で止める。その配分に一番時間がかかっています。

ここは正直に書いておきます。3Dホームページは、誰にでもおすすめできるものではありません。文章量が少なくなりがちで、読み込みも重くなる。それを承知のうえで「この会社にはこの表現しかない」と言える場合にだけ選ぶべきものです。

自分のサイトが今どう見えているのか、まず確かめたい方へ。URLを入れるだけで、AI検索への対応度を8つの軸で採点するツールを配っています。公式LINEに登録して「AIO」と送ってください。

https://online.zoroya.co.jp/line/open/0RvI2YIDwo6D?mtid=215Go3drIXpK

出典

• Tsang, M., Fitzmaurice, G., Kurtenbach, G., Khan, A. (2003)「Game-Like Navigation and Responsiveness in Non-Game Applications」Communications of the ACM, Vol.46 Issue 7, pp.56-61
• Burtnyk, N., Khan, A., Fitzmaurice, G., Balakrishnan, R., Kurtenbach, G. (2002)「StyleCam: Interactive Stylized 3D Navigation using Integrated Spatial & Temporal Controls」UIST 2002, pp.101-110
• SideFX（Houdini開発元）公式日本語ドキュメント「Exploded View geometry node」
• Node Connector「Procedural Build-Up Animations with KineFX」
• Emerson College「Creating a Parallax 2.5D Scene」
• WISS2007「Webサイト間のモーフィングによるWebデザイニング支援」
• Builder.io「Recreating Apple-style 3D scroll animations in Three.js and WebGL」
• CSS-Tricks「Let’s Make One of Those Fancy Scrolling Animations Used on Apple Product Pages」
• LIG「ユーザー体験を高める3DCGを使ったWebサイト8選」／「心がアツくなる！3DCGを使用したアツいWebサイト10選」
• Awwwards「Interactive WebGL Exploded View – iyo」
• Pilot.Auto（TIER IV）pilot.auto/ja/
• Bruno Simon ポートフォリオ bruno-simon.com
• iyO Audio 製品ページ iyo.audio/iyo-one