完成サイト
ASTERISM 星彩sites/20_asterism
宇宙を舞台にした架空ハイジュエリーメゾン。Veo 生成の2景を連番スクラブでつなぎ、虹彩バブルに浮かぶ星型クリスタルへ巨大タイポを突き抜けて寄り、銀河を旋回するクチュールへ。コレクションのカードはポインタに追従して大きく倒れ込み、宝石がカードから浮き出る。
KYOMEI 共鳴sites/19_amazing
海外で話題の3DスクロールLPの文法を、架空ブランドのコンテンツで完全再現。Veo 生成のヒーロー映像から、スクロール連動のカウンター、3D空間から整列するベントグリッド、巨大タイポへのズームスルー、発光する地球の実績セクションまで、9景をひと続きのスクロールで駆け抜ける。
無銘 MUMEIsites/18_mumei
一本の刀が、生まれるまで。Veo で生成した刀鍛冶の起承転結5景（炉→鎚→焼き入れ→刃文→朝光）を連番223フレームのスクロールスクラブでつなぎ、火の粉のWebGLが常時舞う。鎚打ちの拍で画面が爆ぜ、終章では「無銘」の銘がスクロールで一画ずつ刻まれる。
KUJIRA 天翔sites/16_kujira
Veo 3.1 で「起承転結」4シーンを1本につないだ30秒のAI動画を、170枚の連番フレームでスクロールスクラブ。夜の港町に浮かぶ発光鯨→月への追跡→オーロラを泳ぐ群れ→夜明けの港まで、スクロールがそのまま物語の再生ヘッドになる。
KAGERO 陽炎sites/15_kagero
光を、味方に。架空アイウェアのプロダクトビュー。Veo 3.1 で作った実写カット 3 本を、スクロールがそのまま回転ハンドルになるスクラブで操作する。指の動きに合わせて製品が回り、緋・翠・蒼のレンズ色をその場で切替。WebGL は陽炎の揺らぎを担当。D2C・メーカー向けの文法。
MEBUKI 芽吹sites/09_mebuki_kv
ダーク×花×ガラス UI のブランドサイトに、Veo 3.1 で作ったカメラワーク付きの AI 人物動画 4 カットを、スクロール位置に再生ヘッドを直結する「スクロールスクラブ」で動かす。カメラの動きとスクロールが完全同期し、手前にはコード生成の花びらが降り続ける。
AERIUM 空中庭園都市sites/10_aerium
空に、住所を。スクロールでカメラが夜の都市を飛び抜ける一本道フライスルー。ビル群・交通光・天空庭園まで全てコード生成。高度目盛りに沿わせた「計画台帳」の版面に、街区スペック・事業年表・FAQ まで載せてある。不動産・都市開発向け。
真昼 MAHIRUsites/17_mahiru
正午を、着る。骨白のスタジオを舞台にした架空サングラスブランド。Veo 3.1 のヒーロー360度オービットと、顔まわりを回る間奏のクローズアップアークを、どちらもスクロール位置に再生ヘッドを直結したスクラブで操る。丸・角・盾の3型は Three.js のプロシージャル生成で、横レールに浮かんだまま右から左へ流れる。
OTOWA 音羽sites/13_otowa
スクロールでヘッドホンが空中分解し、再結合しながら本体色が 苔→墨→砂 に変わる。Apple 製品ページの文法をコードモデリングで再現し、情景 4 カットは AI 生成(差し替え式)。D2C・メーカーの製品ページ提案向け。
灯火 — TOKA COFFEE ROASTERSsites/03_toka
豆と火のあいだにある一杯。暖色×クラフト×明朝。頂点シェーダのノイズで豆の塊が変形し、スクロールに合わせて焙煎の進行そのものがテーマ遷移になる。
KOTODAMA 言霊sites/11_kotodama
言葉が、空間になる。巨大な立体タイポグラフィを建築物のように立て、その間をカメラで進む。近づいた言葉だけが金色に灯る。DOM 側はカードを使わず、罫線と番号だけで組んだ辞書のような版面。制作会社・エージェンシー向け。
MERIDIANsites/01_meridian
基準線をひく、静かな精度。石灰岩×港青のライト×エディトリアル。柱インスタンス群が列柱グリッド→球面→モノリスへモーフする。ライト／ダーク切替つき。
SEIRAN 星嵐sites/14_seiran
2 万粒の点群が星雲→結び目→波形→星座へ GPU モーフィングする。スクロールがそのまま変形のタイムライン。単色シアンの計器盤トーンで、実測値・仕様表を罫線グリッドに整理した。SaaS・AI スタートアップ向け。
TSUMUGI 紬sites/12_tsumugi
暗い蔵に額装作品を浮かべ、行灯の光の中をカメラで縫う空間ギャラリー。静止画だけで没入展示が成立する実証。WebGL が落ちても作品が見えるよう、DOM 側にも図録グリッドを併設した。工芸・ギャラリー向け。
POGO KOBEsites/04_pogo
踏み鳴らせ、港町。3日間のクリエイティブフェス。原色×ブルータリスト×トゥーンシェーディング。プリミティブ群が転がり→整列→散開する。イベント・採用向け。
AZIMUTHsites/02_azimuth
海図のない領域を、航行可能にする。ダーク×HUD×テック。ワイヤーフレームの夜の海と発光リングでデータ感を出した、SaaS・AI プロダクト向け。
LUMEN 神戸のアトリエsites/08_lumen
金属リングのリアルタイム 3D を背景に置き、紙色のスクリムで大判タイポを常に主役に保つ。商品ビジュアルは画像を使わず CSS の円錐グラデーションだけで 4 型を描き分けた。ジュエリー・小規模ブランド向け。
SIGNALsites/06_signal
神戸の AI プロダクトスタジオ（架空）。生の WebGL フラグメントシェーダで背景を描く方式。ライブラリ依存ゼロで、読み込みが速く挙動が読みやすい。
KIRIHAsites/07_kiriha
光の粒で物語を編む、神戸の映像制作スタジオ（架空）。Canvas 2D のパーティクルのみ。GPU の弱い端末でも落ちにくく、旧端末が多い客先に強い。
STRATAsites/05_strata
神戸・北野の建築設計事務所（架空）。地層のように時間を設計する。WebGL を一切使わず CSS 3D のレイヤーパララックスだけで奥行きを出した最軽量版。
料金の考え方
表示は税別の目安です。構成・演出の密度により変動します
価格の安さではなく、「訪れた人が思わずスクロールしてしまうサイト」という体験を提供しています。 ここに並ぶ作例と同じ水準の演出設計・実装を含んだ料金です。
Production
3Dアニメーションサイト制作
¥500,000〜（税別）
- 1ページ構成（LP）からご依頼いただけます
- スクロール演出の企画・設計・実装まで一式
- 作例をベースに進めるため、完成形を最初から見ながら詰められます
- スマートフォン表示・省電力環境へのフォールバックも標準対応
- 複数ページのコーポレート構成は内容に応じてお見積もり
Maintenance
月額保守プラン
月額制制作とセットでのご提供
- 動きのあるサイトはブラウザの更新の影響を受けるため、保守プランとセットでお引き受けしています
- 主要ブラウザ更新後の表示・動作検証と追従修正
- 文言・画像の軽微な差し替え対応
- 不具合発生時の一次対応
- 金額は更新頻度とサイト規模に応じてお見積もり
お見積もりは無料です。「予算内でどこまでできるか」という聞き方でも構いません。 近い作例を挙げていただければ、その場で概算をお答えできます。
この動きを、御社のサイトで。
ここに並んでいるのは、色・文字・3D の題材を差し替えればそのまま御社のサイトになる実働デモです。 「どの方式が合うか分からない」という段階からご相談いただけます。 ご予算と公開時期をお聞かせいただければ、近い作例をベースにした進め方をご提案します。