先に結論を書きます。スクロールすると、建物の外から近づいて、屋上に降り、部屋の中に入っていく。そんな「3Dっぽい」Webサイトは作れます。しかも、本当の3Dを作らなくても、写真6枚でここまでできました。
この記事では、どうやって作ったのか、しくみは何なのか、実際のサイトで使うときに何に気をつけるのかを書きます。
きっかけは、インスタで見た「Websites in 2026」
最近、インスタでよく見かける投稿があります。海外の制作会社が「Websites in 2026」として紹介していた、タワーマンションのサイトです。
画面の右に「眺めを選ぶ」メニューがあって、選ぶと、カメラが建物のまわりを回ったり、雲の上から見下ろしたり、屋上のテラスに降りたりします。まるでゲームの一人称視点のように、建物の中へ入っていく見せ方でした。
「写真を何枚かで作るのは無理よね？」
最初は、本格的な3Dを作らないと無理だろうと思っていました。そこで、見本の動画を見せながら、Claudeに「写真を何枚かで作るのは無理よね？」と聞いてみました。
返ってきた答えは、意外なものでした。あの見せ方は、ブラウザの中で3Dを動かしているのではなく、「眺めの画像」を何枚か用意して、そのあいだをつなぐ動きを、選んだときやスクロールに合わせて見せている作りだろう、ということでした。
それなら、写真を何枚か用意すれば作れます。
作ったもの：写真6枚で「建物の中へ入っていく」見本
作ったのは、架空のマンションの見本サイトです。スクロールすると、次の順に進みます。
- 湾の向こうから見た、夕方の全景
- 砂浜側から近づく
- 空から近づく
- 屋上を真上から見下ろす
- 屋上のテラスに降りる
- 部屋の中に入って、リビングを見回す
右の「眺めを選ぶ」メニューを押すと、途中の眺めを通りながら、選んだ眺めまで進みます。
スマホでは、メニューが画面の下に横並びで出ます。
作り方は3ステップ
1. ChatGPTで「眺めの写真」を6枚作る
最初に、ChatGPTで6枚の画像を作りました。正面、近づいた眺め、空撮、真上、屋上テラス、リビングです。
ここで大事なのは、6枚とも同じ建物に見えることです。1枚目の画像ができたら、2枚目からは1枚目を添付して「同じ建物を、斜め上から見た写真に」のように頼みました。窓の並び、木のルーバー、屋上のプールなど、建物の特徴をはっきり書いておくと、別の建物になりにくくなります。
また、「プロの建築写真家が一眼カメラで撮影した写真」「CGやイラストのような見た目にしない」と書くと、本物の写真に近い仕上がりになりました。
2. Claudeとやり取りしながら、サイトを組み立てる
サイトは、Claudeとやり取りしながら組み立てました。中身はシンプルで、スクロールの位置に合わせて、今どの眺めとどの眺めのあいだにいるかを計算し、画面に描き分けているだけです。
- スクロールすると、次の眺めへ進む
- 右のメニューで、好きな眺めに飛べる
- スマホでは、メニューを画面の下に並べる
- 動きが苦手な人の設定（動きを減らす）では、静かな切り替えにする
- 画面に「見本・架空の物件です」と出す
3. 眺めと眺めのあいだを、動画でつなぐ
今の見本は、眺めと眺めのあいだを、ズームしながら次の写真に切り替える動きでつないでいます。これだけでも、建物に近づいていく感じは十分に出ます。
さらに本物らしくするなら、AIの動画で「この画像から始まって、この画像で終わる」カメラの動きを作り、その動画をスクロールに合わせてコマ送りします。Appleの製品ページで、スクロールすると映像が進むのと同じやり方です。
しくみは3通りある
「スクロールで建物の中へ入る」見せ方には、大きく3つの作り方があります。
| 作り方 | 中身 | 向いている場面 |
|---|---|---|
| ① ブラウザで3Dを動かす | Three.jsなど、Webで3Dを表示する道具で、建物の3Dの中をカメラが動く | 本物の一人称視点で、自由に動かしたいとき |
| ② 写真や動画をスクロールでつなぐ | 眺めの写真や、撮った動画のコマを、スクロールに合わせて切り替える | 見た目をきれいにしたいとき。スマホでも軽い |
| ③ 実物の部屋を3Dで撮る | スマホで部屋をぐるっと撮って、3Dにする技術を使う | 実在する部屋を、自由に見回してほしいとき |
今回の見本は②です。インスタで見たサイトも、②の作りだと思います。
実際のサイトで使うときに、気をつけること
ファーストビューのつかみに使うなら
最初の画面で「おっ」と思わせる力は強いです。そのうえで、次のことに気をつけます。
ファーストビューで使うときの3つの注意
- 大事な文字は最初から見せる：会社名、何の会社か、相談のボタンは、動きの上に最初から出しておく
- 眺めは3〜4つまで：長いと、肝心の中身にたどり着く前に帰られてしまう
- スマホでの重さ：写真を軽くして、最初の1枚だけ先に表示する
施工事例に使うなら、本物の写真・動画で
工務店や不動産のサイトで、施工事例をこの見せ方にするのは、とても相性がいいと思います。ただし、使うのは実際に建てた家の写真や動画です。
AIの画像は、実物にない窓や形を描き足すことがあります。施工事例は「この会社が本当に建てた家」だから信頼されるので、そこにAIの画像を使うと、見る人をだますことになりかねません。広告のルールの上でも、問題になるおそれがあります。
おすすめは、完成した家を、外観から玄関、リビング、キッチン、庭へと、ゆっくり歩いて撮った動画を、スクロールに合わせて動かす作りです。揺れを抑えるジンバル付きのカメラで30秒ほど撮れば、「スクロールで家の中を歩ける施工事例」になります。
AIの画像を使ってよいのは、これから建てる家の完成イメージや、コンセプトの紹介です。その場合は「画像はイメージです」と書いておきます。
まとめ｜写真6枚でも、建物の中へ入っていける
「3Dっぽい」サイトは、本当の3Dを作らなくても、眺めの写真を何枚か用意して、スクロールでつなぐだけで作れました。
- しくみは、眺めの写真（または動画）を、スクロールに合わせて切り替えること
- ChatGPTで写真を作るときは、1枚目を添付して「同じ建物」にする
- ファーストビューで使うなら、大事な文字は最初から見せる
- 施工事例は、AIの画像ではなく、本物の写真や動画で
見本はまだ「仮の動き」でつないでいるので、次は動画でつないだ版や、実際に撮った映像で作る版も試してみます。こういう見せ方を自社のサイトで使ってみたい場合は、お問い合わせから気軽にご相談ください。
ふだんの制作の話や、作ったものの裏側は Instagram と X でも出しています。
ここまで作り込む必要はないけど、これに近い雰囲気のコンテンツを作れると面白いなと思って。