工務店・住宅・建築のおしゃれなウェブサイトデザイン｜制作者が分かるサイトだけ20件【2026年9月調査】

編集部が見たところ

白地に極太のゴシックで「DELIGHT LIFE STYLE DESIGN」。
文字の上に目玉のイラストとサムズアップの手が乗り、「Style」だけがオレンジの筆記体です。

写真は斜めに傾けて重ねてあります。
整った住宅サイトが並ぶなかで、ここだけ雑誌の表紙のような騒がしさがあります。

リノベーションと店舗設計の会社が、自社サイトを自社で作った例です。

「きちんとして見せる」ことを最初から狙っていない。
狙わなくても仕事が取れる会社の作り方です。

※ 画面を見て編集部が書いた感想です。
制作者や掲載企業の見解ではありません。

編集部が見たところ

左3分の1が白地で、縦書きのメニューと大きな「Re LOOP」の文字。
右3分の2に、店舗の入口をぼかして撮った写真。

その写真の中にアーチ型に切り抜いた窓があり、店の看板が見えます。
写真の中に写真がある構造です。

「めぐる景色に あたらしい息吹を」は縦書き。
リノベーションという言葉を一度も使わずに、古いものが生き返る感じを画面で出しています。

拠点が兵庫と徳島の2つあることを、右下に小さく置いているだけなのも潔い。

※ 画面を見て編集部が書いた感想です。
制作者や掲載企業の見解ではありません。

編集部が見たところ

画面いっぱいに廊下の写真が1枚。
手前の障子はぼけていて、奥の床とテーブルにピントが合っています。

文字は中央のロゴと、右下の3行だけです。
会社名も電話番号もファーストビューにありません。

注文住宅のサイトは施工事例を並べたくなりますが、ここは1枚に絞りました。

右上に「資料請求」「モデルハウス見学」の2つだけ置いているのが、この静けさを成立させています。

※ 画面を見て編集部が書いた感想です。
制作者や掲載企業の見解ではありません。

編集部が見たところ

「社会、くらしをリノベーションし、あなたと環境にとって豊かな未来をつくる」。
2行の日本語が画面の上に置かれ、その下からリノベーション物件の写真が始まります。

写真は角丸の大きな面で、下から6件が順に切り替わります。
左下に番号と物件名。

文字と写真が重なっている部分があり、写真が動いても文字が読めるように上端の余白を白く残してあります。

会社の規模が大きくなっても、トップページで見せるのは物件1件ずつという判断です。

※ 画面を見て編集部が書いた感想です。
制作者や掲載企業の見解ではありません。

編集部が見たところ

「Value in motion」「不動産の価値を循環させる。
」。
写真が円柱に巻きついたように湾曲して並びます。

ビル街の写真と、街なかに座る人の写真。
2枚とも撮り下ろしです。

「循環」という言葉を、曲面という形で見せています。
文字で説明せずに形で言う作り方です。

ヘッダー右の「お問い合わせ」だけが水色で、ほかは無彩色。
押す場所が1つしかないことが一目で分かります。

※ 画面を見て編集部が書いた感想です。
制作者や掲載企業の見解ではありません。

編集部が見たところ

「目で見て、触れて、感じる理想の住まいづくり」。
ローラーで壁を塗る施主の写真と、ショールームの壁の写真を並べています。

壁には「2400」「2200」「1800」と寸法が書かれ、コンセントやスイッチが実物で並んでいる。
ショールームそのものがコンテンツになっています。

淡い緑の図形と細い線画のイラストが、写真のあいだをつないでいます。

リノベーションを「体験できる」と言葉で書かずに、体験している写真を出す。
ロゴの下の「リノベーションを、楽しもう。
」も無理がありません。

※ 画面を見て編集部が書いた感想です。
制作者や掲載企業の見解ではありません。

編集部が見たところ

写真を一切使わず、青の濃淡だけで描いた家のイラストが画面の下半分に並びます。
屋根の連なりが山の稜線のように見え、その上を2人の小さな人物が歩いています。

見出しは「住まいえらびを、もっと自由に。
」の1行だけ。

不動産のサイトは物件写真から始まるのが普通ですが、物件を1つも見せずに「選ぶ楽しさ」だけを描いています。

ヘッダーのメニューが半透明のバーに収まっていて、イラストの上でも読めます。

※ 画面を見て編集部が書いた感想です。
制作者や掲載企業の見解ではありません。

編集部が見たところ

足場の上でヘルメットのシールドを下ろした職人の顔を、画面いっぱいに。
動画です。

その上に「The New Standard.」を斜めに2段で置き、右に「大規模建設に、新たな価値創造を。
」。

工務店という社名ですが、扱っているのは大規模建設です。
住宅会社と間違えられないよう、最初の1枚で規模を伝えています。

メニューが全部英語で、JA／ENの切り替えがある。
採用と協力会社を意識した作りです。

※ 画面を見て編集部が書いた感想です。
制作者や掲載企業の見解ではありません。

編集部が見たところ

深い緑の地に、建物の写真を四角く切り抜いて2列に並べています。
背景の緑には、山のような多角形の模様。

「もっと面白く、家をつくろう。
」の下に「MORE LIFE STYLE」が画面の幅いっぱいに置かれ、下端で切れています。

右上の2つの円に「販売棟数1200棟以上」「安心のアフター50年無償点検」。
数字を最初の画面に出しています。

実績の数字を出すサイトは多いですが、円をわざと重ねて置くことで、表組みに見えないようにしています。

※ 画面を見て編集部が書いた感想です。
制作者や掲載企業の見解ではありません。

編集部が見たところ

住宅の内観写真を左右2枚に分けて並べ、中央にセリフ体で「Proud of for Future」、その下に「次世代に誇れる家づくり」。

左は木の天井と造作キッチン、右は坪庭に面した窓。
どちらも施工した家です。

セリフ体の英文と明朝体の日本語を細く組んで、写真の情報量とつり合わせています。

右上は「資料請求・お問い合わせ」の1つだけ。
注文住宅で最初にほしいのは資料だという判断です。

※ 画面を見て編集部が書いた感想です。
制作者や掲載企業の見解ではありません。

編集部が見たところ

左に設計者の横顔、右に現場の手元の写真を6枚。
中央に「建築家 × 現場力」を枠で囲んで置き、その下に「建築家専門の工務店」。

誰に向けた会社かが、この1行で決まっています。
施主ではなく建築家に向けたサイトです。

ヘッダーのボタンも「建築家の方へ」の1つだけ。
下端に「着工のお知らせ」「上棟のお知らせ」が流れます。

このサイトはノーコードツールのSTUDIOで作られています。
写真とディレクションに予算を置けば、実装方法は問題にならないという例です。

※ 画面を見て編集部が書いた感想です。
制作者や掲載企業の見解ではありません。

編集部が見たところ

生成りの地に、細いセリフ体で「The CLASSIC」を大きく1行。
その下に「時と記憶が美しく積み重なっていく」。

上半分はほぼ余白で、下から照明のペンダントが1つだけ見えています。

ロゴは手描き風の線画で、屋根と木を描いたもの。
全体が印刷物のような静けさです。

右下に「気密測定の結果！」というブログのお知らせが出ていて、そこだけ現場の生々しさがあります。
落差が悪くありません。

※ 画面を見て編集部が書いた感想です。
制作者や掲載企業の見解ではありません。

編集部が見たところ

写真も図もありません。
ピンク・水色・オレンジが混ざり合うグラデーションが画面全体を覆っています。

「ボーダレスな発想と事業で まちを面白く。
」の見出しは右寄せ。
左下に社名と英文が小さく置かれています。

建設・不動産のサイトで、建物を1つも出さない選択です。
事業領域を絞らないことを、境目のない色で表しています。

下端の「ZERO-TEN」と「CONTACT」だけが濃紺の四角で、グラデーションの上でも読めます。

※ 画面を見て編集部が書いた感想です。
制作者や掲載企業の見解ではありません。

編集部が見たところ

「直す」「創る」の4文字を、画面の左右いっぱいに明朝体で置いています。
文字の一部が画面から切れるほど大きい。

その間に「大工の手仕事で想いをカタチにする。
」と、施工写真が3枚。
斜めの細い線が画面を横切ります。

「高知市・南国市の職人大工衆」と地域と職種をはっきり書いているのも、地元で探す人には効きます。

これもSTUDIO製です。
文字を大きく置くだけの設計なら、ツールの制約はほとんど関係ありません。

※ 画面を見て編集部が書いた感想です。
制作者や掲載企業の見解ではありません。

編集部が見たところ

「「夢」を「家」にする。
」。
カギ括弧つきの2語を緑の明朝体で置き、右に施工事例のスライダー（10件）を並べています。

見出しの下に「平均坪単価57万円*で高デザイン性・高機能を叶える」と書き、注釈で「*2024年契約件数60件の平均数値になります」と根拠を添えています。

坪単価を最初の画面に出す注文住宅サイトは多くありません。
しかも平均値の出し方まで書いてある。

右下に「Web来場予約」「カタログ請求」「電話」の3つが固定されています。

※ 画面を見て編集部が書いた感想です。
制作者や掲載企業の見解ではありません。

編集部が見たところ

深い緑の地を、アーチ形に切り抜いています。
その中にクリーム色の家、黄色いワーゲン、湖、レモンの木。
写真というより1枚の絵です。

左に「PICNIC MOTEL」がクリーム色のセリフ体で2行、下に筆記体で「House Project」。
アーチの縁に沿って英文が曲線で回り込んでいます。

左下に「produced by NEXTWEEKEND」、右下に「お近くの取扱店に相談する」。
住宅会社ではなくメディアが出しているプロジェクトです。

※ 画面を見て編集部が書いた感想です。
制作者や掲載企業の見解ではありません。

編集部が見たところ

街全体を3DCGのジオラマにしています。
白と水色の2色だけで、港、倉庫、展望台、住宅地、道路が俯瞰で並びます。

自社が施工した建物だけが水色に塗ってあり、ほかは白のままです。
実績の位置を、地図ではなく色分けで示しています。

右に縦書きで「あなたが見る風景をもっと美しく、もっと強く。
」、下端に「Neo landscape creation company」が画面幅いっぱい。
右下に「Onahama／Tokyo」の切り替えがあります。

※ 画面を見て編集部が書いた感想です。
制作者や掲載企業の見解ではありません。

編集部が見たところ

左に「社会を支え 未来を創造する」が黒の太ゴシックで2行。
その下に「00 Philosophy」「01 Architecture」「02 Infrastructure」「03 Sustainability」の4項目が縦に並びます。

選んでいる項目だけが濃くなり、説明文と「詳しく見る」が開きます。
最初の画面が、そのまま目次と本文を兼ねています。

右に空撮写真。
選んだ項目に応じて写真が入れ替わる作りです。
この20件で、最初の画面に事業の目次を置いているのはここだけです。

※ 画面を見て編集部が書いた感想です。
制作者や掲載企業の見解ではありません。

編集部が見たところ

生成りの地を左右に割り、左に施工実績（本多内科医院）の外観写真、右にコラムのカードを3枚。

そのコラムが「北海道 奥道北でモノ作りを始めた話」「ぬか床で、今日をちょっと丁寧に。
」。
チーズ、野菜、ぬか漬けの写真です。
設計施工の会社のサイトで、最初の画面の半分が食べ物です。

左下に「Hive’s Philosophy 人を想い 自然を想い」。
実績とコラムを同じ大きさで並べ、会社の関心をそのまま見せています。

※ 画面を見て編集部が書いた感想です。
制作者や掲載企業の見解ではありません。

編集部が見たところ

写真を縦に3枚並べています。
左に青いソファの部屋、中央に床に座って笑う3人家族、右に赤い椅子のリビング。

家族の写真だけが正方形に近く、両脇の部屋の写真は画面の外に切れています。
人を中心に、部屋がその左右に広がる構図です。

下に白い面が斜めに立ち上がり、そこに「Re:forus」とメニュー5項目。
右上に黄色い丸で「資料請求 お問い合わせ」、右下に「内覧会開催中!」。

※ 画面を見て編集部が書いた感想です。
制作者や掲載企業の見解ではありません。