間取り図から作った3Dの住宅プレゼン（BlenderとAIで制作）

寸法の書いていない間取り図の画像と依頼文から、AIにBlenderで3Dモデルを組ませ、部屋ごとにスクロールで見せるWebのプレゼンにした見本です。住宅は架空のもので、実在の物件ではありません。

画面を押すと全画面で開きます。全画面の上の切り替えで、スマホの幅でも確かめられます。閉じるときは「閉じる」か Esc キーを押してください。

PURPOSE

何のために作ったか

間取り図の画像と、寸法を書いた依頼文から、AIがどこまで図面どおりの3Dモデルを組めるか、そのモデルをお客さまに見せる形まで持っていけるかを確かめた見本です。

元にしたのは、寸法の書いていない2階建ての間取り図の素材です。AIのCodexにBlenderを動かさせて3Dモデルを組み、そのモデルをClaude Codeでスクロールして見るWebページにしました。

住宅の提案、モデルハウスや分譲地の案内、店舗・事務所のレイアウトの説明のように、図面だけでは伝わりにくい空間を見せたいときの参考にしてください。

デモの概要

元にした間取り図はストック素材で、住宅名の「HOUSE 686」は建物の幅6.86mから付けた仮の名前のため、実在の住宅・お客さまの物件ではありません。面積などの数字は3Dモデルの値から出したもので、設計図として使える精度かどうかは確かめていないので、建てるための図面としては使わないでください。

POINT

01 スクロールすると、部屋ごとにカメラが動く

14の章に分けて、リビング・キッチン・寝室・浴室と順に見せます。章ごとに視点・切り口の高さ・光らせる部屋が切り替わります。
02 面・メッシュ・透過・輪郭線の4つの見せ方

右下のボタンで表示を切り替えられます。家具の配置を見たいときは面、建物の作りを見たいときは透過や輪郭線、と使い分けます。
03 最後に1階と2階の平面図を並べる

12章で2つの階を真上から並べ、寸法線を入れています。立体で見たあとに、図面と同じ向きで見直せます。
04 自由に回して、部屋を選んで見られる

最後の章ではドラッグで回転、ホイールで拡大ができます。階の切り替え・分解表示・断面の高さのつまみ・部屋の名前のボタンもあります。

PROCESS

STEP 1

依頼文を用意する

図から読んだ寸法、部屋ごとの家具、素材の色、仕上がりの確認項目をまとめた依頼文を用意した
STEP 2

AIにBlenderで組ませる

Codexが組み立て用のプログラムを書き、図面を下に敷いて重ね合わせを確かめながら、家具や扉までモデルを作った
STEP 3

見て直す

高すぎた棚の高さ、図面の記号を机と読み違えた箇所など、見ておかしい所を指摘して直した
STEP 4

Webのプレゼンにする

モデルをWeb用に軽くして書き出し、Claude Codeで章立て・カメラの動き・表示の切り替えを付けたページにした