スクロールで家が建つ 3Dホームページひな形|工務店・注文住宅|WebGL・スマホ対応・商用OK
- Digital9,800 JPY





スクロールすると、3Dの家が基礎から組みあがっていく。工務店・注文住宅のための、1ページのホームページひな形です。 ▼ 動く見本(ブラウザで触れます) https://ugoku-site.pages.dev/house/ ※見本のページには「制作見本」の表示が入っています。お届けするファイルには入っていません。 ■ 動く仕掛け ・基礎 → 柱と梁 → 屋根 → 外壁・窓 → 内装と灯り → 完成 の順に、家が組みあがります。空も朝から夕方、夜へ変わります ・プランと概算:平屋/2階建て/吹き抜けを切りかえると、3Dの家が建てなおされ、概算費用が動きます ・オプション(太陽光パネル・薪ストーブ・ひろい縁側デッキ)を選ぶと、3Dの家にも反映されます ・朝・夕・夜の切りかえ、ドラッグで家をまわす操作 ・施工事例、家づくりの流れ、よくある質問、見学会・資料請求フォーム 家・木目・しっくい・空は、すべてプログラムで描いた3Dです。写真やAI画像は使っていません。 ■ 中身 ・index.html / css / js(会社の情報とプランの金額は js/config.js の1ファイルにまとめてあります) ・vendor(Three.js・GSAP・Lenis と、それぞれの利用条件) ・README.txt(書きかえ方、フォームの送信先の設定、公開のしかた) ・LICENSE.txt(利用規約) ■ 使い方 1. ダウンロードして、zipを開きます 2. js/config.js をテキストエディタで開き、会社名・電話・住所・プランの金額を書きかえます 3. フォルダごと、レンタルサーバーや Cloudflare Pages などにアップロードして公開します ※このひな形は、index.html をダブルクリックで開くと3Dが表示されません。確認は README.txt の「ローカルサーバーで開く」か、アップロードしてから行ってください。 ■ ご注意 ・このひな形は、AIツール(Claude Code)を使って制作し、表示と動作を確認しています ・3D は WebGL を使います。古いパソコンやスマートフォンでは動きが重くなることがあります(自動で画質を下げる仕組みと、3Dが使えないときの代わりの表示があります) ・文章や料金はすべて例です。ご自分のお店の事実に書きかえてください ・書きかえの作業はご自身で行っていただきます。書きかえの代行はしていません ・商用利用できます。お客さまのサイト制作に使って納品することもできます。ひな形そのものの再配布・再販売はできません(詳しくは LICENSE.txt) ・ダウンロード商品のため、返品・返金はできません




