建設会社・建築会社のホームページデザイン事例19選｜デザイナーが見どころを解説

建設会社のホームページは、施工写真と会社概要を並べるだけでは、どの会社も似た見え方になりがちです。発注者や求職者に「この会社に頼みたい」「ここで働きたい」と思ってもらうには、トップ画面で何を見せるかの判断が欠かせません。

この記事では、リーピーが制作した建設・土木・建築関連のホームページ18件と、他社が制作した1件を、制作を担当したデザイナーの視点で解説します。写真の選び方、コピーの置き方、事業の見せ方といった、自社サイトの制作やリニューアルにそのまま使えるポイントをまとめました。

「（制作：株式会社リーピー）」と書かれたサイトは、当社の制作実績です。

「人」と「現場」を前に出したWebデザイン事例

まずは、社員や現場の姿をトップ画面の主役にしたサイトです。建設会社の強みである「人」を、どう撮り、どこに置いているかに注目してください。

株式会社どき 様（東京都／海上・河川土木工事）

https://www.doki.co.jp/（制作：株式会社リーピー）

東京都で海上・河川土木工事と建設発生土処理をされている株式会社どき様のWebサイトを制作させていただきました。海上土木は、発注者にも求職者にも「どんな現場なのか」が想像しにくい仕事です。

そこでトップには、台船の上に社員が並び、背後に湾岸のタワーマンションが立つ1枚を選びました。人の後ろに都市を置くことで、「この街の足元を海からつくっている会社」という立ち位置を、説明抜きで伝えるためです。

写真を画面いっぱいに広げず枠に収めたのは、海の深い青を余白側に回し、会社の色として記憶に残すため。問い合わせボタンだけを朱色にしたのも、青一色の画面で唯一の「押す場所」をはっきりさせ、取引の相談を取りこぼさないための判断です。

株式会社中原組 様（山口県／総合建設業）

https://www.nakaharagumi.jp/（制作：株式会社リーピー）

山口県で総合建設業を営まれている株式会社中原組様のWebサイトを制作させていただきました。建設会社のトップ画像は、完成した建物や重機で実績を見せるのが一般的です。

ただ、完成品の写真はどの会社のサイトでも似た絵になり、会社の違いが伝わりません。そこで図面を手に現場で上を見上げる社員の1枚を選び、「まちをつくる途中にいる人」を会社の顔にしました。完成形ではなく過程を見せたのは、地域のまちづくりにこれからも関わり続ける会社だと伝えたかったからです。

ヘルメットのロゴと採用エントリーボタンを同じ緑にそろえたのも、写真の中の社員と「次はあなたが」という入口を、色でひと続きに見せる狙いです。

嶽下産業株式会社 様（静岡県御殿場市／解体工事・産業廃棄物処理）

https://t-ind.co.jp/（制作：株式会社リーピー）

静岡県御殿場市で解体工事と産業廃棄物処理をされている嶽下産業株式会社様のWebサイトを制作させていただきました。解体や廃棄物処理は、地域に欠かせない一方で、社名を覚えてもらいにくい業種です。

そこで社名の「嶽下」を筆文字で画面いっぱいに描き、その文字の内側を現場写真の窓にしました。社名と仕事の中身を一度に見せることで、「あの解体の会社」ではなく「嶽下さん」として記憶してもらいたいと考えました。

背景に富士山の稜線を入れたのは、地図や住所を出さずに御殿場の会社だと一目で分かるようにするため。「つくる、こわす、つなぐ」と解体を隠さないコピーにしたのも、仕事への誇りをそのまま採用と信頼につなげたいという考えからです。

株式会社大洋画地 様（埼玉県川口市／建設コンサルタント）

https://taiyokakuchi.co.jp/（制作：株式会社リーピー）

埼玉県川口市で測量・設計などの建設コンサルタント業をされている株式会社大洋画地様のWebサイトを制作させていただきました。建設コンサルタントの仕事は、工事現場のような分かりやすい絵になりにくいのが悩みどころです。

そこでトップには、図面にペンを走らせる手元と都市計画図のモニターを1枚に収めました。その上に「Shape the Future you Envision.」を細い英字で横切らせ、図面の線と文字の線を重ねたのは、「未来の街を描く仕事」であることを絵として感じてもらうためです。

写真の下半分に白い帯を重ねたのは、図面の細かい線とコピーがぶつからないようにするため。採用サイトへの入口を右上の緑の四角に独立させたのも、取引先向けの情報と求職者向けの入口を混ぜない配慮です。

「地域の風景」から入るWebデザイン事例

次は、会社のある土地の風景からサイトを始めている事例です。地域密着の会社が、地図や住所に頼らずに「どこの会社か」を伝える方法として参考になります。

株式会社森建設 様（鹿児島県鹿屋市／建築工事・土木工事）

https://mori-construction.jp/（制作：株式会社リーピー）

鹿児島県鹿屋市で建築工事と土木工事をされている株式会社森建設様のWebサイトを制作させていただきました。地域に根ざした建設会社ほど、「どこで仕事をしている会社か」が信頼の土台になります。

そこでトップには社員も重機も置かず、高原に建つ天文台と牧草地を空から撮った1枚だけを選びました。人や実績より先に土地を見せることで、「この風景の中で仕事を続けてきた会社」という関係を、言葉より早く伝えられると考えました。

せり上がる英字「CRAFTING TOMORROW」を草地と同じ系統の緑にしたのは、文字を風景から浮かせず、会社と土地を一体に見せるため。ナビゲーションを白い箱に入れて上部に浮かべたのも、航空写真の広がりを最後まで損なわないための判断です。

有限会社中田建設 様（島根県安来市／土木工事・築炉工事）

https://nakada-const.co.jp/（制作：株式会社リーピー）

島根県安来市で土木工事と築炉工事をされている有限会社中田建設様のWebサイトを制作させていただきました。工業炉をつくる築炉工事は、一般の方にはなじみが薄く、説明なしでは伝わりにくい仕事です。

そこでコピーを「地域とともに土木を支える。築炉を支える。」と2つの事業を同じ形で並べ、背景に安来の港と家並みを空から撮った写真を置きました。なじみのない築炉の仕事も、土木と同じように地元の暮らしにつながっていると、文の形と風景で感じてもらう構成です。

文字を写真の海の部分に重ねたのは、白の太いゴシックを確実に読ませるため。右上に「無料相談」と「採用エントリー」を同じ濃い青で縦に並べ、取引先と求職者のどちらも最初の画面から迷わず進めるようにしました。

山口実業株式会社 様（岐阜県山県市／土木工事・舗装工事）

https://yj1126.jp/（制作：株式会社リーピー）

岐阜県山県市で土木工事と舗装工事をされている山口実業株式会社様のWebサイトを制作させていただきました。土木・舗装は守備範囲が広い一方で、仕上がると目立たない仕事です。

そこで「道も川も街も。」の7文字を中を抜いた線の文字にし、山に囲まれた谷の風景を透かして見せました。道路・河川・街づくりという仕事の範囲を、文字そのものと風景を重ねることで、「この景色全部が私たちの仕事」と伝える意図です。

画面の周りを土木会社では珍しい濃い紫で囲んだのは、ほかの会社のサイトと並べたときに一目で覚えてもらうため。右下の見積もりボタンを紫の補色に近い黄緑にしたのも、問い合わせの入口を画面の中で最も目に入る場所にするための選択です。

大日コンサルタント株式会社 様（岐阜県／建設コンサルタント）

https://dainichi-consul.co.jp/（制作：株式会社リーピー）

岐阜県で道路・トンネル・橋梁・河川などの建設コンサルタント業をされている大日コンサルタント株式会社様のWebサイトを制作させていただきました。設計や計画の仕事は、完成した橋や道路の写真を並べても、その会社が何をしたのかが伝わりにくいものです。

そこで夕日を受けた街を、両手の指でつくった四角い枠でのぞく写真を選びました。指の枠は「まちの未来を構想する仕事」の見立てで、目に見えにくい設計の仕事を写真1枚で言い換えています。

「まちを、一歩前に。」を字間の広い細い明朝で組んだのは、逆光の柔らかい光に合わせ、押しつけず誠実に語る会社の姿勢を文字でも表すため。「ESTD 1952」の表記を添え、創業からの歴史を信頼の裏づけとして静かに示しています。

Works 制作実績

「建築業（建設会社）」の
当社の制作実績はこちら

リーピーでは、「Webで地方をおもしろくする」というビジョンのもと、全国各地の”地方企業”を中心にWebサイト制作を起点とした、集客・採用面の支援を行っております。（支援実績1,430社以上）

• 「建築業」の事例一覧
• 会社資料を見る

「社名」と「言葉」で覚えてもらうWebデザイン事例

写真よりも先に、社名やコピーを覚えてもらうことを狙ったサイトです。言葉の選び方と、文字の置き方に工夫があります。

株式会社桐山組 様（岐阜県大垣市／総合建設業）

https://kirigumi.co.jp/（制作：株式会社リーピー）

岐阜県大垣市で総合建設業を営まれている株式会社桐山組様のWebサイトを、撮影から制作させていただきました。建設会社のサイトはどこも「信頼」「実績」を語るため、社名が記憶に残りにくいのが悩みどころです。

そこで社名の「桐（キリ）」にかけた「キリがないほど、桐山組。」を、極太の書体で画面の真ん中に据えました。言葉遊びにしたのは、一度読めば口に出したくなり、そのまま社名を覚えてもらえるからです。

背景を建設業では珍しい黄緑にしたのも、比較検討で複数のサイトを開かれたときに、一目で見分けてもらうための選択です。社員の写真はあえてファーストビューの下に回し、「まず社名、次に人」の順で印象を積み上げています。

株式会社光建 様（愛知県名古屋市／土木工事・維持補修工事）

https://www.kouken-nagoya.com/（制作：株式会社リーピー）

愛知県名古屋市で土木工事と維持補修工事をされている株式会社光建様のWebサイトを制作させていただきました。維持補修は、街のインフラを支える大切な仕事ですが、新しく何かを建てる仕事に比べて目立ちにくい分野です。

そこでコピー「未来に光を。」の「光」だけを白い筆文字にし、ロゴと同じ紫から青緑へのにじみを重ねました。社名の「光」と、街の明かりを守る仕事を一つの言葉に結び、社名そのものを事業の説明にしました。

背景のビル群を色のない線画で描いたのは、主役の「光」を際立たせるため。ロゴの色を分解した帯を画面の端に流したのも、硬くなりがちな土木会社の画面に動きを加え、近寄りやすい空気をつくる工夫です。

株式会社興栄コンサルタント 様（岐阜県岐阜市／建設コンサルタント）

https://www.koei-con.co.jp/（制作：株式会社リーピー）

岐阜県岐阜市で建設コンサルタント業をされている株式会社興栄コンサルタント様のWebサイトを制作させていただきました。測量や設計は人の手と頭を使う仕事ですが、写真ではデスクワークにしか見えず、魅力が伝わりにくい業種です。

そこであえて写真を使わず、図面を広げる社員と測量機をのぞく社員を、未来の街並みと一緒にイラストで描きました。人と街を同じ絵に入れたのは、「いい顔で働いている。だから、いいまちができている。」というコピーのとおり、働き方と仕事の成果を一続きの話として見せるためです。

コピーが一文ずつ現れてから街がそろう順番にし、言葉を読み終えたところで絵が完成して、納得感が残るようにしました。

「イラスト」と「図」で事業の広さを見せるWebデザイン事例

事業が複数ある会社や、写真では伝わりにくい仕事を、イラストや線画で整理した事例です。

山創株式会社 様（岐阜県関市／建設土木・遮熱工事・保育園運営ほか）

https://sanso-gifu.jp/（制作：株式会社リーピー）

岐阜県関市で建設土木、遮熱工事、社会福祉事業などをされている山創株式会社様のWebサイトを制作させていただきました。事業が多い会社は、写真を並べるほど「結局何の会社か」が分からなくなりがちです。

そこで1つの街を真上から見たイラストを描き、屋根の上の作業も、川下りも、公園で遊ぶ子どもも、すべて同じ地図の上に置きました。ばらばらに見える事業が、地域の暮らしという一つの目的でつながっていることを、1枚の絵で伝えようと考えました。

街の中央に立体の「SANSO」を据えたのは、どの事業も同じ会社が担っていることを示すため。「For Life」だけをオレンジの手書き文字にしたのも、事業の根にある「暮らしのため」という想いを最も強く残す狙いです。

株式会社TEAM EIWAN 様（愛知県名古屋市／アスベスト除去工事）

https://team81.net/（制作：株式会社リーピー）

愛知県名古屋市でアスベストの除去工事と調査をされている株式会社TEAM EIWAN様のWebサイトを制作させていただきました。アスベスト除去は、依頼する側が「うちの建物でも頼めるのか」を判断しにくい仕事です。

そこで工場からビル、住宅まで建物の種類をひと通り並べた街のイラストを描き、その道路で社名の「81」をかたどりました。どんな建物にも対応できることと社名を1枚の絵で同時に覚えてもらい、「アスベストならEIWAN」と思い出してもらう作戦です。

ボタンを目立つピンクにし、「まずは現場の相談をしてみる」と呼びかけたのは、不安を抱えた依頼者が最初の一歩を踏み出しやすくするため。重くなりがちな業種だからこそ、入口は軽くしています。

鈴木建設株式会社 様（千葉県旭市／土木・建築・農業施設工事）

https://www.suzuki-asahi.jp/（制作：株式会社リーピー）

千葉県旭市で土木工事、建築工事、農業施設工事を手がける総合建設会社、鈴木建設株式会社様のWebサイトを制作させていただきました。公共工事から注文住宅まで扱う会社は、事業の幅をどう1画面に収めるかで迷いがちです。

そこで背景に高架道路やビル群を緑の線だけで描き、その上に現場の社員や打ち合わせの写真をカードのように散らしました。線画を「これからつくる街」、写真を「今の仕事」として重ね、コピーの「MONOづくりで街の未来を創造する。」を画面の構成そのもので表しています。

ロゴの形からとった緑の三角形を散らし、縦に流れる英字で動きを出したのも、若い世代の求職者にも「動きのある会社」と感じてもらう狙いです。

Works 制作実績

「建築業（建設会社）」の
当社の制作実績はこちら

リーピーでは、「Webで地方をおもしろくする」というビジョンのもと、全国各地の”地方企業”を中心にWebサイト制作を起点とした、集客・採用面の支援を行っております。（支援実績1,430社以上）

• 「建築業」の事例一覧
• 会社資料を見る

「つくるもの」と「素材」を主役にしたWebデザイン事例

施工したもの、扱っている素材や製品そのものを前面に出したサイトです。BtoBの取引が中心の会社で特に参考になります。

有限会社達匠 様（岐阜県岐阜市／外構・エクステリア工事）

https://www.tatsusho.com/（制作：株式会社リーピー）

岐阜県岐阜市で外構・エクステリア工事をされている有限会社達匠様のWebサイトを制作させていただきました。外構の施工写真は昼の明るい光で撮ることが多いものの、それでは住宅メーカーのカタログと同じ絵になってしまいます。

そこで日が落ちてから照明をともした門まわりの1枚を選びました。タイルの柱や木目の扉に明かりが当たる夕景こそ、外構の質感と照明計画という設計力が最も伝わると考えました。

左側に紙のような質感の地を敷き、縦組みの明朝で「あなたが描く夢が住まいの景色となる。」を添えたのは、施工の話ではなく暮らしの話をしている会社だと伝えるため。モダンや和風などスタイル別に施工事例を並べたのも、施主が自分の好みから探せるようにするための配慮です。

株式会社杉山設計事務所 様（愛知県／橋梁設計）

https://www.s-pec.jp/（制作：株式会社リーピー）

愛知県で橋梁の設計をされている株式会社杉山設計事務所様のWebサイトを制作させていただきました。設計事務所の取引先は、自治体や建設コンサルタントなど図面を読み慣れたプロです。そうした相手に事務所の写真や社員の笑顔を見せても、技術力の判断材料にはなりません。

そこでトップには、実際の田園に設計した橋の3Dモデルを重ねた動画を流しました。「この場所にこの橋を架ける」という仕事そのものを見せるのが、いちばん説得力のある自己紹介になると考えたからです。

動画に網目のトーンを重ねたのは、現実と設計のあいだを扱う仕事であることを質感で伝える狙いです。メニューを画面の下にまとめたのも、橋の上の空を残し、構造物の大きさを損なわないためです。

株式会社翠豊 様（岐阜県加茂郡／木材製造・販売）

https://www.suihoo.co.jp/（制作：株式会社リーピー）

岐阜県加茂郡で、不燃木材「もえーせん」をはじめとする木材の製造・販売をされている株式会社翠豊様のWebサイトを制作させていただきました。木材は製品が板や角材になるため、写真1枚では他社との違いが伝わりにくい商材です。

そこで山の丸太置き場、ノミを使う手元、加工の機械、木の格子天井が広がる完成した建物までの写真を、縦に区切って左から右へ並べました。製品単体ではなく「原木が建物になるまで」の流れを見せることで、素材から仕上がりまで責任を持つ会社だと伝えたいと考えました。

コピーを完成した建物の写真の上に置いたのは、流れの終着点である「人々の豊かな生活」と言葉を重ねるため。不燃木材の紹介をすぐ下に続けたのも、関心が高まったところで主力製品につなげる順番です。

昭和コンクリート工業株式会社 様（岐阜県／コンクリート製品製造・PC工事）

https://www.showa-con.co.jp/（制作：株式会社リーピー）

岐阜県でコンクリート製品の製造とPC工事をされている昭和コンクリート工業株式会社様のWebサイトを制作させていただきました。このサイトを訪れるのは、設計事務所や役所の担当者など、製品を探している実務の人が中心です。

そこで人物ではなく、橋の部材や水門などの製品写真をスライドで大きく見せ、何をつくっている会社かを最初の画面で言い切りました。目的の製品を探しに来た人に、雰囲気より先に答えを見せる判断です。

「CADダウンロード」への入口を紺の帯に常に表示したのは、図面データを取りに来る担当者が、どのページからでもすぐにたどり着けるようにするため。電話番号を大きな数字で受付時間と一緒に置いたのも、急ぎの問い合わせが多い業種ならではの配慮です。

他社が制作した建設会社のWebデザイン事例

ここからは、他社が制作した建設会社のホームページを紹介します。

株式会社前田組（福岡県飯塚市／土木工事）

https://maeda-g.co.jp/

※弊社の制作実績ではありません。掲載内容は2026年10月時点のものです。

福岡県飯塚市で土木工事を手がける株式会社前田組のホームページです。土木会社のトップは重機や橋の写真で規模を見せることが多いなか、このサイトは足場の階段を上るベテラン社員1人の表情に寄った写真から始まります。

「何をつくるか」より先に「誰がつくるか」を見せることで、地域の発注者に顔の見える会社として覚えてもらう狙いでしょう。写真全体を淡い青緑に抑え、社名と「人に、地球に資する」の一文を小さく置いたのも、声を張らずに誠実さを伝えるための引き算です。

読み込み中に数字を数えてから写真を出す仕掛けは、最初の1枚をしっかり見てもらうための間のつくり方と考えられます。メニューを左端の縦長ボタンにまとめたのも、主役の写真を邪魔しないための判断でしょう。

建設会社のホームページで差がつく3つのポイント

19件の事例に共通していたのは、「何でも載せる」のではなく、トップ画面で見せるものを1つに絞っていることです。自社のホームページを作るときは、次の3点から考えると方向が決まりやすくなります。

• 主役を決める：「人」「地域の風景」「社名やコピー」「つくるもの」のどれを最初に見せるか
• 誰に向けるかを分ける：発注者向けの「相談・見積もり」と、求職者向けの「採用エントリー」の入口を、最初の画面で分けておく
• 事業の広さは整理して見せる：事業が多い会社ほど、写真を並べるより、イラストや図で1枚にまとめたほうが伝わる

建設会社のホームページでも、工務店や設計事務所、リフォーム会社、塗装会社のサイトは見せ方の考え方が少し変わります。近い業種の事例は、以下の記事でまとめています。

参考記事：『参考になる！「工務店・HM・設計事務所」のホームページ制作事例30選！』
参考記事：『【厳選16サイト】「リフォーム業界」で参考になるホームページデザイン集！』
参考記事：『参考になる！「塗装屋（屋根/外壁）」のホームページデザイン事例16選！』

「実績と信頼感」を伝え、
集客につながるホームページに

リーピーでは、建設・土木・建築の会社のホームページを数多く制作してきました。売上げや採用につなげるための戦略設計から、専属デザイナーによるデザイン、写真撮影までを一貫してお手伝いしています。

• 競合とホームページから差をつけたい！
• 発注者にも求職者にも伝わるサイトにしたい！
• その業界において「地域No.1」を目指したい！

という企業の方は、ぜひ一度リーピーのWebサイト制作にお任せください！

Works 制作実績

「建築業（建設会社）」の
当社の制作実績はこちら

リーピーでは、「Webで地方をおもしろくする」というビジョンのもと、全国各地の”地方企業”を中心にWebサイト制作を起点とした、集客・採用面の支援を行っております。（支援実績1,430社以上）

• 「建築業」の事例一覧
• 会社資料を見る

※当社の制作実績ではないサイトは、デザイン性などが優れているため事例としてご紹介しています。制作をされた制作会社様・掲載企業様で、掲載の取り消しをご希望の場合は速やかに対処いたしますので、当社までご連絡くださいませ。