スクロールで建物の中へ入っていくサイトを作ってみた｜写真6枚とClaudeで「3Dっぽい」Webサイト

先に結論を書きます。スクロールすると、建物の外から近づいて、屋上に降り、部屋の中に入っていく。そんな「3Dっぽい」Webサイトは作れます。しかも、本当の3Dを作らなくても、写真6枚でここまでできました。

ノートPCで動かしているところ。スクロールすると、建物の外から部屋の中へ進んでいきます

この記事では、どうやって作ったのか、しくみは何なのか、実際のサイトで使うときに何に気をつけるのかを書きます。

きっかけは、インスタで見た「Websites in 2026」

最近、インスタでよく見かける投稿があります。海外の制作会社が「Websites in 2026」として紹介していた、タワーマンションのサイトです。

画面の右に「眺めを選ぶ」メニューがあって、選ぶと、カメラが建物のまわりを回ったり、雲の上から見下ろしたり、屋上のテラスに降りたりします。まるでゲームの一人称視点のように、建物の中へ入っていく見せ方でした。

ここまで作り込む必要はないけど、これに近い雰囲気のコンテンツを作れると面白いなと思って。

最初は、本格的な3Dを作らないと無理だろうと思っていました。そこで、見本の動画を見せながら、Claudeに「写真を何枚かで作るのは無理よね？」と聞いてみました。

返ってきた答えは、意外なものでした。あの見せ方は、ブラウザの中で3Dを動かしているのではなく、「眺めの画像」を何枚か用意して、そのあいだをつなぐ動きを、選んだときやスクロールに合わせて見せている作りだろう、ということでした。

それなら、写真を何枚か用意すれば作れます。

作ったのは、架空のマンションの見本サイトです。スクロールすると、次の順に進みます。

右の「眺めを選ぶ」メニューを押すと、途中の眺めを通りながら、選んだ眺めまで進みます。

スマホでは、メニューが画面の下に横並びで出ます。

最初に、ChatGPTで6枚の画像を作りました。正面、近づいた眺め、空撮、真上、屋上テラス、リビングです。

ここで大事なのは、6枚とも同じ建物に見えることです。1枚目の画像ができたら、2枚目からは1枚目を添付して「同じ建物を、斜め上から見た写真に」のように頼みました。窓の並び、木のルーバー、屋上のプールなど、建物の特徴をはっきり書いておくと、別の建物になりにくくなります。

また、「プロの建築写真家が一眼カメラで撮影した写真」「CGやイラストのような見た目にしない」と書くと、本物の写真に近い仕上がりになりました。

サイトは、Claudeとやり取りしながら組み立てました。中身はシンプルで、スクロールの位置に合わせて、今どの眺めとどの眺めのあいだにいるかを計算し、画面に描き分けているだけです。

今の見本は、眺めと眺めのあいだを、ズームしながら次の写真に切り替える動きでつないでいます。これだけでも、建物に近づいていく感じは十分に出ます。

さらに本物らしくするなら、AIの動画で「この画像から始まって、この画像で終わる」カメラの動きを作り、その動画をスクロールに合わせてコマ送りします。Appleの製品ページで、スクロールすると映像が進むのと同じやり方です。

「スクロールで建物の中へ入る」見せ方には、大きく3つの作り方があります。

作り方	中身	向いている場面
① ブラウザで3Dを動かす	Three.jsなど、Webで3Dを表示する道具で、建物の3Dの中をカメラが動く	本物の一人称視点で、自由に動かしたいとき
② 写真や動画をスクロールでつなぐ	眺めの写真や、撮った動画のコマを、スクロールに合わせて切り替える	見た目をきれいにしたいとき。スマホでも軽い
③ 実物の部屋を3Dで撮る	スマホで部屋をぐるっと撮って、3Dにする技術を使う	実在する部屋を、自由に見回してほしいとき

今回の見本は②です。インスタで見たサイトも、②の作りだと思います。