平面図がそのまま立体へ動き出す。Web 3D演出「Casa Serra」の仕組みとAI対話の裏側

スクロールに合わせて2Dの平面図が立ち上がり、視点が部屋の中へ入り込んでいく——そんな建築プレゼンテーションのコンセプトWebページ「Casa Serra」が話題を集めています。

一見すると「間取り図の画像を読み込ませて自動で3D化するサービス」のようにも見えますが、その正体はコードで入念に構築されたインタラクティブなWeb 3D表現です。作者の公開資料をもとに、その印象的な演出のカラクリと、開発で用いられたプロンプトの工夫を紐解きます。

スクロールで家が建つ。Casa Serraの見せ方

Casa Serra（デモ画面）にアクセスすると、最初は建築の平面図のような画面からスタートします。

画面をスクロールすると、切り抜かれたような平面図から壁が垂直に伸び始め、視点は玄関の高さまで下降。そのまま室内をウォーキングスルーするように奥へと進んでいきます。カメラが近づくまではシンプルな線画として表現され、部屋に到達するタイミングに合わせてリアルな素材のテクスチャへと切り替わる演出が施されています。

このコンテンツは実在する住宅の販売や竣工を案内するものではなく、建築事務所を題材とした概念実証（コンセプトページ）として制作されたものです。

なお、現在は初期の開発段階（Work in progress）として公開されており、閲覧にはWebGL2などに対応した環境が必要です。PC（Laptop）での閲覧が推奨されており、非対応端末向けには静止画や動画によるフォールバック表示が用意されています。

2D平面図の正体は「同じ3Dモデルの断面」

「平面図が3Dに変化する」という演出ですが、実は2D画像から3Dモデルを生成しているわけではありません。

作者の解説によると、冒頭の平面図はあらかじめ作成された3Dモデルを高さ約1.2mの位置で水平に切り取り、真上から長い焦点距離（望遠レンズ）で撮影するように見せている状態です。

スクロールの操作に応じてこの切断する高さを引き上げていくことで、壁が下から生えてくるような視覚効果を生み出しています。公開されているプログラム（scene.js）の中でも、 Three.jsのクリッピング機能（new THREE.Plane(..., 1.2)）や断面シェーダーを使った実装が確認できます。

主な実装と技術構成

描画ライブラリ: three.js
スクロール・アニメーション: GSAP ScrollTrigger, Lenis
3D形状: Blender等の外部ツールを使わず、コードによる幾何形状（ジオメトリ）の生成
テクスチャ: Poly Havenで公開されているCC0ライセンスの素材を使用

ビルド工程を挟まないシンプルなファイル構成で作成されていますが、これは「知識不要で誰でもすぐ作れる」ことを意味するものではありません。細かな視点移動や断面の制御には、綿密なコードの組み上げが行われています。

Claude CodeとOpus 5.5を活用した開発プロセスの分析

作者の発表によると、このプロジェクトはAIアシスタント（Claude CodeおよびOpus 5.5）を活用し、約2週間、約70回のプロンプト投入と4つのフルバージョンを経て試作が重ねられました（※時間や回数は作者による申告値です）。

最初から完璧なコードを一発で出力させたのではなく、プロンプトの出し方に明確な工夫が見られます。

段階的に作る「スタータープロンプト」の思想

作者が公開しているスタータープロンプトでは、以下のような手順でAIに指示を出すよう設計されています。

いきなりコードを書かせない: 最初に建物の間取り、寸法感、カメラの移動経路などをAIから複数案提示させ、人間が方向性を選ぶまで待機させる。
実装範囲を限定する: 最初は「平面図の表示 ➔ 壁が立ち上がる ➔ 最初の部屋に入る」という冒頭の挙動だけに絞って実装させる。
ステップごとに確認する: 画面の動きを録画や表示で確認しながら、次の部屋や演出を追加していく。

作者がこのプロンプトを使って別セッションで試作したCasa Largaでは、最初の選択指示を行ってから約1時間ほどで初期のチェックポイントが完成したと報告されています。

「完成品を一括生成させる」のではなく、「選択肢を出させて絞り込み、小さな単位で動作確認を挟む」という対話設計が、複雑な3D演出を破綻させずに組み立てる鍵となっています。

まとめと注意点

Casa Serraは、単なるWebページの枠を超えて「スクロール体験と3D空間の融合」を感じさせてくれる興味深い作品です。

仕組みのポイント: 平面図と立体表現は別物ではなく、同じ3Dモデルの切り方とカメラアングルを変えることで実現している。
プロンプトのポイント: 一発出力に頼らず、AIに案を出させて人間が選び、段階的に動作を確認しながら組み上げている。

なお、公開されているリポジトリのテクスチャ素材自体はCC0ですが、コード全体の再配布ライセンス（LICENSEファイル）は明記されていません。二次利用やローカルでのテストを行う際は、公開範囲や規約に注意して参照してください。

参考

この記事は Gemini Flash が執筆しました。