ホームページ制作 ／ 3D・WebGL
押すと、動く。3Dで見せるホームページ。
屋根屋の私が、自分の会社（瀧澤屋根工業）のトップページに、3Dで動く家を作りました。古い屋根がはがれて、新しい屋根が一枚ずつ葺かれていく。最後は、家の気になる所を押すと、症状と工事の説明が出てきます。
このページでは、その実物をそのまま動かして見せます。同じ仕組みを、あなたのホームページにも入れられます。
01 ／ 実物
瀧澤屋根工業のトップページで動いている3D
下の画面は、写真でも動画でもありません。あなたのブラウザが、その場で3Dの家を描いています。見るだけで終わらず、押して調べられるのがWebGLの強みです。
- 見る開いたときから、完成した家が出ています。画面に入ると「どこが気になりますか？」の見出しと、家の印が出てきます。
- 押す家の赤い印は、雨漏り・屋根の修理・雪止め・天窓などの場所です。気になる所を押してください。
- 選ぶ症状と、できる工事の説明が出ます。そのまま工事のページへ進めます。工事の名前を知らなくても、場所から選べます。
02 ／ なぜ3Dか
写真と動画では、届かない所がある
写真は、撮った角度でしか見られません。動画は、作った順番でしか進みません。3Dは、お客様が自分で回して、自分で押して、知りたい所から見られます。
| 比べる所 | 写真 | 動画 | 3D（WebGL） |
|---|---|---|---|
| 見る角度 | 撮った1枚の角度だけ | 撮ったときのカメラの動きのまま | ○場面ごとに角度を変えられる。04の見本のように、手で回せる作りにもできる |
| 押して調べる | 写真ごとに説明を付けて並べる | 再生して、順に見てもらう | ○家の印を押すと、その場所の説明が出る |
| 見えない所 | 屋根の上や下地は、写せる場面が限られる | 現場での撮影や、絵の用意が要る | ○古い屋根をはがし、防水シートから張る順番を見せられる |
| 作る手間 | 少ない | 中くらい | 多い。だから、そのまま使えるキットを用意しました |
03 ／ WebGLとは
アプリを入れずに、ブラウザで3Dを動かす技術
WebGL（ウェブジーエル）は、ホームページの中で3Dを描くための仕組みです。パソコンでもスマホでも、いつものブラウザで開くだけで動きます。お客様に何かを入れてもらう必要はありません。
工事の仕事は、言葉だけでは伝わりにくいことが多いです。屋根の上、壁の中、工事の順番。ふだん見えない所を、回して、押して、見てもらえます。
物語で見せる
工事の流れを、場面ごとに動かして見せます。古い屋根から新しい屋根へ、のような「前と後」が伝わります。
押して調べる
家や商品の上に印を置き、押すと説明が出ます。お客様が、自分の困りごとから入れます。
色や形を試す
外壁や屋根の色を、その場で切り替えて見てもらえます。打ち合わせの前に、好みがはっきりします。
中を開いて見せる
屋根材・防水シート・下地のように、重なっている物を1枚ずつ浮かせて見せられます。
04 ／ もう1つの見本
塗装店なら、色を押すと塗られていく家
同じ作り方で、別の業種の見本も作りました。架空の塗装店「みほん塗装」のカラーシミュレーターです。下の色を押すと、新しい色が下から塗られていきます。「塗り替え前」を押すと、色あせて汚れた家に戻ります。家はドラッグで回せます。
「うちの工事なら、こう見せたい」が浮かんだら。相談は無料です。
3Dの相談をする05 ／ 業種ごとの使い方
家だけではありません。見えにくいものは、3Dで
作り方は同じで、見せる物と押せる場所を変えます。下は使い方の例です（作った実績ではなく、ご提案です）。
屋根・板金
葺き替えの順番、雪止めや天窓の位置。屋根の上を、地上から見てもらえます。
外壁・屋根の塗装
色を押して、家全体の見え方を試す。塗り替え前と後を、同じ角度で見比べられます。
リフォーム・工務店
間取りの変更や、断熱材の入る場所。壁を外して中を見せられます。
製品・メーカー
金具や部材を、回して分解して見せる。図面では伝わりにくい形が伝わります。
06 ／ キットの中身
瀧澤屋根工業と同じ「3Dの家」キット
01の3Dを、ほかのホームページにも入れられる形にまとめたものです。中身は、瀧澤屋根工業で動いているものと同じです。
- 013Dの家と、どこが気になりますか最初から完成した家を出します。待たずに、気になる所をすぐ選べます。
- 02押せる印と、説明のカード家の印か下の項目を押すと、症状と工事の説明が出ます。前・次で順に見られます。
- 03押す所の案内最初の印に「まずはここ」と出て、押すたびに次の場所を案内します。
- 04見えたときだけ動く画面に入ったら始まり、外れたら止まります。見ていない間に、ずっと動き続けることはしません。
- 05スマホ用の並びスマホでは、文字の大きさと項目の並びが切り替わります。
- 061つのファイルで貼れる瀧澤屋根工業はWixのホームページで、WixのHTML埋め込みに貼って動かしています。
ご用意いただくもの
- 3Dを置きたいページ（いまのホームページか、これから作るページ）
- 押せる印から案内したい、工事のページのリンク先
- 家の印の説明に入れたい言葉
07 ／ 料金
そのまま使うか、作り変えるか、ゼロから作るか
KIT
このキットを、そのまま組み込む
55,000円〜（税込）
税別 50,000円〜
- 家の形と動きは、瀧澤屋根工業と同じです
- 文章や、押したときのリンク先など、入れ替える所は先にうかがってから見積書でお伝えします
- 私がホームページを作るときに付けることも、いまのホームページに足すこともできます
屋根・板金の会社で、まず3Dを1つ置いてみたい方へ。
CUSTOM
あなたの会社版に、作り変える
220,000円〜（税込）
税別 200,000円〜
- 屋根材・外壁・家の形を、あなたの工事に合わせます
- 押せる印の場所・数と、説明の文を決め直します
- 04の塗装店の見本のように、業種に合わせた見せ方にできます
「うちの工事で、これを作りたい」という方へ。まず話をうかがいます。
ORIGINAL
3D・WebGLのオリジナル制作
550,000〜2,200,000円（税込）
税別 500,000〜2,000,000円
- 家に限らず、商品・建物・工程を3Dで見せる仕事をお受けします
- 中身と量をうかがって、見積書でお出しします
3Dでしか伝わらないものがある方へ。
| 変えられる所 | そのまま組み込む | あなたの会社版 | オリジナル |
|---|---|---|---|
| 文章・リンク先 | 先にうかがって見積書で | ○ | ○ |
| 屋根材・外壁・色 | △ご相談。会社版のお見積りになることも | ○ | ○ |
| 家の形・場面 | △ご相談。会社版のお見積りになることも | ○ | ○ |
| 家以外の物 | × | 家・建物が中心 | ○商品・部材・工程など |
どれも、ホームページ制作とは別のお見積りです。ホームページ制作の料金は料金のページにあります。
08 ／ 進め方
見本を見ながら、決めていきます
話を聞く
何を見せたいか、どのページに置きたいかをうかがいます。オンラインで大丈夫です。
見本で決める
このページの2つの見本を触りながら、近い形を決めます。写真や図面があれば見せてください。
作る
動く見本をお送りします。触ってもらい、直したい所を言ってもらって直します。
組み込む
ホームページに入れて、パソコンとスマホで動きを確かめてから公開します。
09 ／ よくある質問
よくある質問
スマホでも動きますか？
動きます。スマホでは、文字の大きさと項目の並びが切り替わる作りです。ただ、古い端末では動きが重くなることがあります。どの端末で確かめるかは、作る前にご相談ください。
Wixのホームページにも入れられますか？
入れられます。瀧澤屋根工業のホームページはWixで、3DはWixのHTML埋め込みに貼って動かしています。ほかの仕組みのホームページでも、まずご相談ください。
3Dを入れると、ページが遅くなりませんか？
3Dは文字や写真より重いので、置き方に気をつけます。キットは、画面に入ってから動き始め、外れたら止まる作りです。ページの一番上ではなく、少し下に置くのもおすすめです。
検索（SEO）に悪い影響はありませんか？
3Dの中の文字は、検索に読まれにくいことがあります。なので、大事な説明はページの本文にも書きます。3Dは「分かりやすく見せる係」、検索は本文の係、と分けて考えます。
図面や3Dのデータが無くても作れますか？
作れます。瀧澤屋根工業の家も、3Dのデータから作ったものではありません。写真やおおよその寸法をもとに作ります。
公開したあとに、文章を直してもらえますか？
私が直します。どこをどう直したいかをうかがって、お見積りします。
55,000円の「そのまま組み込む」で、どこまで変えられますか？
家の形と動きは、瀧澤屋根工業と同じものを使います。文章やリンク先など、どこを入れ替えたいかを先にうかがい、範囲を見積書でお伝えします。色や形まで変えたいときは、「あなたの会社版」のお見積りになることがあります。
まずは、あなたの現場の
話を聞かせてください。
今のサイトを見せてください。直すべきところだけ、正直に言います。売り込みはしません。それで終わっても、それで構いません。
屋根職人歴20年以上、施工2,000棟以上。まず自分の会社で実証してから、同じやり方をお渡ししています。
