Three.js制作サイト8選（2026年版）：技術で読み解く

「すごいサイト集」の多くは、見た目を褒めて終わります。この記事は違います。それぞれのサイトについて、背後にあるたった一つの発想——動かし、反応させ、生きているように感じさせる仕掛け——を指し示します。だから実物を見て、チームに「これを作って」とブリーフできるようになります。

掲載サイトはすべてThree.js（またはその上のReact Three Fiber）で構築され、2026年6月時点で公開中、かつAwwwards・The FWA・あるいは実際の開発者コミュニティで話題になったものです。各サイトについて、概要・学ぶべき技術・自分のプロジェクトで現実的に再利用できるポイントを解説します。

対象読者：3Dサイトを検討中のクリエイティブデベロッパー、デザイン／ブランド責任者、創業者。ムードボードではなく、発注・制作の前に見るべき具体的なリファレンスが欲しい方。

この記事の要点

• 2026年、WebGPUが主流に。 IVRESSなどがWebGPUレンダラー＋WebGLフォールバックを実装。今年注目すべき技術です。
• 突出したサイトは、効果を盛らず一つの難題を綺麗に解く。 運転できる物理世界、音に反応する流体、本物の重みで描かれた一つのオブジェクト——一点突破です。
• スクロールが物語のエンジンに。 Cartier、Shopify、Sleep Well、Primlandはいずれも体験全体をスクロールで駆動——2Dページを動かすのではなく、3Dシーンを連鎖させます。
• ラグジュアリーと大手ブランドが実時間3Dに本格参入。 CartierとHubtownは、Three.jsがもはや開発者ポートフォリオだけでなく、フラッグシップのブランド表現の媒体であることを示します。
• 「盗めるポイント」が「眺める対象」に勝る。 スクロール連動のシーン、一枚のフルスクリーン・シェーダー、本物の重みで描かれた一つのオブジェクト——多くの技術は規模を縮めれば再利用できます。

1. 選定の考え方

アワードの審査基準の解説はしません（それはアワード受賞Webデザインの基準で扱っています）。これは3つのフィルターを通したキュレーション・ギャラリーです。

• Three.js／R3Fであることを確認。 単なる「3Dサイト」ではなく、実際にThree.jsが動いていることを検証。確認できないものは除外しました。
• 名指しできる技術が一つ。 各サイトが具体的で再利用可能なアイデアを教えてくれること。
• 評価または実際の話題性。 Awwwards Site of the Day／Month、FWA of the Day／Month、または2025〜2026年に開発者コミュニティで明確に注目されたもの。

2. 一覧で把握

3. ギャラリー

1. Oryzo — 一つのオブジェクトを、映画のように描く

概要：スタジオLusionによる架空のプロダクト発表——コルク製コースターを、フラッグシップ機材のような重厚さで提示します。ジョークでありながら実力誇示でもあり、**Awwwards Site of the Month（2026年4月）**とDeveloper Awardを受賞しました。

注目の技術：Three.jsで実時間描画される一つの主役オブジェクト。本物の重みと慣性——物理を模したイージングと、2Dレイヤーをずらすのではなく真のZ深度をカメラで進むスクロール。抑制こそが要点で、すべてのフレームがその一つのオブジェクトのためにあります。

盗めるポイント：一つのオブジェクトをきちんと魅せること。本物の質感反応とオービットカメラでライティング・アニメートされた単一プロダクトは、賑やかなシーンに勝ります。慣性と奥行きこそが「テンプレ」ではなく「作り込み」と読ませる要素です。

Site：oryzo.ai

この先のカードで使う用語を少しだけ——繰り返し出てくる3つです。飛ばし読みで構いません。

2. IVRESS — 短編映画のように展開するブランド体験

概要：弊社のプロジェクト。ナレーターのいない短編映画のように展開するブランドサイト——「到着すると、世界が気づき、何かが起きる」。**FWA Site of the Month（2026年5月）**を受賞し、CSS Design Awardsにも選出。

注目の技術：Three.jsのWebGPURendererとWebGLフォールバック。シェーダーはTSLで一度だけ書き、両バックエンドにコンパイル——コードの分岐なし。モーションは意図的で、シーングラフは力任せではなく予算管理されています。

盗めるポイント：今WebGLで出すとしても、TSLを今から採用すること。ノードベースでマテリアルを書けば、WebGPU対応は書き直しではなく設定の切り替えで済みます——詳しくはWebGPU＋Three.js移行ガイドで。

Site：brand.ivress.co.jp

3. Lacoste Ace Breaker — ゲームになったキャンペーン

概要：Lacosteのローラン・ギャロス施策として作られたブランド製Three.jsブラウザゲーム——テニス題材のブロック崩しで、賞品は本物（大会チケットやポロシャツ）。速く、リプレイ性があり、Awwwardsノミネート。思わず友達に送りたくなる類のキャンペーンです。

注目の技術：きつく絞り込んだThree.js／WebGLのプレイアブル機構をブランド世界で包んだもの——動詞一つ、瞬時の可読性、そしてリプレイを促すリーダーボードと現実の賞品。

盗めるポイント：キャンペーンのエンゲージメントでは、微ゲームがヒーロー動画に勝ります。動詞一つ（タップ／狙う／タイミング）、ループ一つ、共有できる結果——そして手に入る報酬がプレイヤーを拡散者に変えます。リプレイ性が拡散を肩代わりします。

Site：members-play.lacoste.com

4. Shopify Editions — プロダクト演出としてのスクロール

概要：Shopifyが年2回出すEditionsリリースページ——機能の変更履歴を、映画的でセクション分けされたプロダクト物語に変える長いスクロール演出です。2026春版は、分散して再構成される文字と、多くのブランドサイトが挑まない規模のモーション豊かなパネルを組み合わせます。

注目の技術：各セクションを独立した「見せ場」として演出するスクロール連鎖のリビール——散って再び集まる文字、奥行きのあるパネル、振付けられた遷移——情報量の多いページを、リストではなく一つの連続した作品に感じさせます。

盗めるポイント：スクロールを物語の装置にすること。各セクションを連鎖の中の一拍（登場・保持・退場）として扱えば、密度の高い情報ページでも、カードの羅列ではなくプレミアムで意図的なものに感じられます。

Site：shopify.com/editions/spring2026

5. Hubtown — 不動産ブランドのための3Dモノリス

概要：インドのデベロッパーHubtownのコーポレートサイト（Unseen Studio制作）——暗く反射する風景の上に浮かぶ光る3Dモノリスが、40年の不動産ポートフォリオを映画的に見せます。Awwwards Site of the Day（2026年6月）。

注目の技術：Three.jsのヒーローシーン（WebGL＋GSAP）に、特徴的なマウスリビール・インタラクション——カーソルがジオメトリとライティングの細部を露わにします——「地味」なB2B領域でもフラッグシップ級の3D体験を担えることを証明しています。

盗めるポイント：3Dは華やかでないブランドを格上げする。きちんとライティングされた一つのヒーローオブジェクトと、インタラクションでのリビールがあれば、コーポレートサイトをプレミアムに位置づけ直せます——探索できる世界一式は不要、自信ある中心要素が一つあればいい。

Site：hubtown.co.in

6. Sleep Well Creative — 3Dでのエディトリアル表現

概要：より良い睡眠へのスクロール連動ガイド——科学的知見を、スクロールで進む夢のような挿絵的3D世界に包んでいます。Awwwards Site of the Day（2026年1月）。

注目の技術：手描きのアートディレクションとThree.jsのステージを融合したスクロール連動の挿絵シーン——ページはアニメーションするエディトリアルのように読め、各スクロールの一拍が物語と映像を同時に進めます。

盗めるポイント：3Dシーンにエディトリアルのリズムを。ゲームやプロダクト描画でなくても、強い挿絵スタイルとスクロール連鎖の3Dを組み合わせれば、ありふれた長文コンテンツも最後まで読まれるものになります。

Site：sleep-well-creatives.com

7. Explore Primland — 飛んで巡る風景

概要：ブルーリッジ山脈にあるPrimlandリゾートの没入型デジタル体験——地形を映画的に空撮フライスルーし、辺鄙な場所をどこからでも探索可能にします。Awwwards Site of the Day（2026年2月）。

注目の技術：3D風景のフライスルー——Three.jsで描かれた実地形に大気のフォグをかけ、スクロールでカメラが上空を滑空——場所を写真ギャラリーではなく、巡れる世界に変えます。

盗めるポイント：場所を上空から探索可能にすること。物件・旅行・会場など物理的な場所に紐づくものなら、実地形のスクロール連動フライスルーが、写真や動画では伝わらないスケールと空気感を伝えます。

Site：explore.ownprimland.com

8. Cartier Watches & Wonders — 一本に一部屋、6つの空間

概要：Immersive Garden制作、Cartier「Watches & Wonders 2026」パビリオンのデジタルツイン——時計ごとに独立した6つの3D小部屋を、美術館のようにスクロールで巡ります。Awwwards Site of the DayおよびCSS Design Awards選出。

注目の技術：製品ごとに一つのシーン。Three.js＋GLSL・GSAP・Lenisで6つの異なる3D部屋を構築し、物語層としてWeb Audioのスコアを重ね、好奇心に応える隠しジェスチャーを仕込む——スクロールはページを下るのではなく、部屋から部屋へと移動させます。

盗めるポイント：長い一スクロールより、一品一部屋。各製品に独立した3D空間を与え、スクロールで出入りさせると、カタログが展覧会のように感じられ、各主役オブジェクトに余白が生まれます。

Site：cartier.com/watchesandwonders

4. 盗めるポイント — 再利用できる5つの型

8サイトをまとめると、いくつかのパターンが繰り返されます。おおむね労力順に並べます。

1. 重みを伴う一つのオブジェクト（Oryzo、Hubtown）——低〜中。 本物の慣性・ライティング・インタラクションでのリビールを備えた一つの主役オブジェクトは、シーン一式なしで「作り込み」と読ませる。
2. 物語の装置としてのスクロール（Shopify Editions、Sleep Well Creative）——中。 各セクションを一拍（登場・保持・退場）として演出すれば、密度の高いページも一つの連続したプレミアムな作品に感じられる。
3. 探索可能にした風景や世界（Explore Primland）——中〜高。 実地形を3Dで描き、スクロール連動カメラで巡らせれば、場所は「眺める」ものから「動き回る」ものになる。
4. 製品ごとに一部屋、または遊ぶ動詞（Cartier、Lacoste Ace Breaker）——高労力・最高エンゲージメント。 各製品に独立した3D部屋を与えるか、一つのきついプレイループを作る。小さく絞り、まず出す。
5. TSLで両レンダラーに一度書き（IVRESS）——中。 ノードベースのマテリアルを一度書けば、WebGLとWebGPUの両方で動く。将来のWebGPU移行が書き直しではなく設定の切り替えで済む。

通底するのはこれです——2026年の最良のThree.jsサイトは、一つの難しいアイデアに賭け、すべてをその周りで予算管理しています。

5. これらはどう作られているか

掲載サイトは、小さく学習可能なツールキットを共有しています。

• レンダラーはWebGPUへ移行中。 IVRESSが道を示します。2026年は、WebGLフォールバックを伴えばWebGPUを安全に出せるようになった年です。Three.jsの2026年の変化とWebGPU＋Three.js移行ガイドをご覧ください。
• プロダクトはR3F、最重量のカスタムはバニラThree.js。 React Three Fiberのコンポーネントモデルがプロダクト系を加速し、最も作り込む体験（Oryzo、Cartier）は制御のためバニラThree.jsに降ります。
• パフォーマンスは機能であり、後回しではない。 インスタンシング、ベイクドライティング、BVH衝突、バイト予算——これらが受賞作とカクつくデモを分けます。Googleで上位表示されるWebGLサイトを支えるのと同じ規律です。

6. Utsuboについて

Utsuboは、Three.jsを核にWebGPU・WebGL体験を構築するクリエイティブスタジオです。パフォーマンス予算を初日から設計に織り込みます。弊社の仕事はAwwwards、The FWA、Webby Awardsに評価され——IVRESSブランド体験はFWA Site of the Month（2026年）を、VectrケーススタディはFWA of the Dayを受賞しました。小さなエンジニアリング主導のスタジオながら、体験の新しさだけで弊社のポートフォリオは数百万のオーガニック表示に達し、実トラフィック下でも速く確実に動きます。

パートナー選定をお考えなら、Three.jsエージェンシー10選が出発点に最適です。

7. ご相談ください

Webで野心的な3Dプロジェクトを構築中ですか？私たちはインタラクティブ体験、プロダクトコンフィギュレーター、没入型ブランドプロジェクトでチームと協業しています。

パートナーシップをご検討中なら、プロジェクトについてお話しましょう：

• 何を構築しているか、どのような制約があるか
• 目標に対してどの技術アプローチが適切か
• 私たちが実行をお手伝いするのに適したパートナーかどうか

プロジェクトについて相談する

よくある質問

「Three.jsサイト」とは何ですか？ Three.jsライブラリ（多くはReact Three Fiber経由）を使い、ブラウザでインタラクティブな3Dを描画するサイトです。3Dが装飾的な一要素ではなく、体験の核——歩けるシーン、シェーダー背景、遊べる世界——であることを指します。

これらはWebGLですか、WebGPUですか？ 多くは互換性のため今もWebGLですが、2026年の突出作（IVRESSなど）はThree.jsのWebGPUレンダラー＋WebGLフォールバックを使います。SafariがWebGPU対応を出して全主要ブラウザで利用可能になり、今年が実用的な移行年となりました。

重い3DサイトはSEOやCore Web Vitalsに悪影響ですか？ 雑に作った場合だけです。3Dバンドルを遅延させ、意味のあるHTMLを先に描画し、アセットを予算管理すれば、豊かなシーンでもCore Web Vitalsを通過できます。詳しい手法はWebGLサイトSEOガイドで解説しています。

React Three Fiberとバニラ Three.js、どちらが必要ですか？ R3Fはコンポーネント駆動のプロダクト／ポートフォリオに向き、既にReactのチームを加速します。最も重くカスタムな体験（Oryzo、Cartier）は細かな制御のためバニラThree.jsを使います。どちらも同じエンジンで描画されます。

ここで最初に取り組むべき技術はどれですか？ 整ったタイポの背後に置く、フルビューポートのGLSLフラグメントシェーダー一枚。3D Webで最高のインパクト対労力比で、最初のシェーダー課題として扱いやすいものです。

この種のサイトの制作費はどれくらいですか？ 標準的なサイトにシェーダー背景を載せるだけのものから、完全に遊べる世界まで、規模で大きく変わります。構造的な内訳はプレミアムWebサイト費用ガイドをご覧ください。

このレベルのThree.jsサイトは誰が作るのですか？ ごく少数の専門スタジオとフリーランスです。弊社のThree.jsエージェンシー10選が、このギャラリーの仕事を実現できるエンジニアリングの深さと受賞歴を持つスタジオをまとめています。

2026年に優れたThree.jsサイトはこれだけですか？ いいえ——すべてのランキングではなく、技術の多様性を重視したキュレーションです。一つの再利用可能な技術が明確で、Three.jsの使用を確認できるサイトを優先したため、刺激だけでなく学びにもなります。