TEL

TRASPコラム

工務店のホームページ成功事例15選!参考になるデザインを厳選

Webデザイン

更新日:2022.05.25
公開日:2021.05.28

工務店のおしゃれなホームページデザイン15選

 

ホームページ制作といっても「どのようなコンテンツ」で「どのようなデザイン」にするのか悩みますよね。

 

そこで今回は、集客のためにホームページを作りたい・リニューアルしたいという工務店の方のために、参考にしたい工務店のホームページデザインを15社厳選しました!

 

全国の工務店で建築業界のトレンドを熟知したホームページ制作を行なってきたTRASPが、プロの視点からデザインやお問い合わせを増やすコンテンツのポイントも解説しています。ホームページを作る際に、ぜひ参考にしてみてください。

 

 

工務店のホームページ制作を得意とする制作会社を知りたい方は、以下の記事もあわせて読んでみてください。

 

無料相談受付中

 

工務店のホームページデザインとは?

工務店のホームページデザインとは?

 

建設・建築業界は、主に「個人」を相手にする会社「法人」をメインとする会社に分かれます。

 

個人が求めるのは「安心感」や「親しみ」、法人は実力や技術力が求められるので、ターゲットに合わせたデザインにするのが良いでしょう。

 

また特に工務店は、新築や注文住宅、水まわりや内装リフォームなど日々の暮らしに関わる工事を請け負うため、個人法人に関わらず

  • 「信頼できる会社か」
  • 「確かな実力があるのか」
  • 「実際にどんな施工をしているのか」

という点がチェックされます。
したがって、信頼感が伝わるデザインと施工事例にこだわるのがおすすめ。
具体的なやり方については記事後半で解説します。

 

 

工務店がホームページ集客を成功させるポイントをまとめた記事がありますので、ご覧ください。

「安心感を与える」工務店のホームページデザインの事例5選

新築住宅やリフォームなど、個人のお客様からの依頼がメインの場合、訪問者に親近感や信頼感を持ってもらうことが大切です。まず、親しみを感じられる工務店のホームページ事例を5つピックアップしたので、紹介していきます。

 

1.株式会社 清水工務店

1.株式会社 清水工務店

http://www.shimizu21.com/

 

トップページに実際のお客様が写った施工写真がたくさん使用されています。小さな子どもが笑顔で遊んでいる様子、リビングで家族団らんのひと時など、生活の一部を切り取ったようなイメージ写真を載せることで、「この工務店にお願いしたら、こんな暮らしが叶うんだ」とイメージしやすいですね。

 

新着情報にお客様の声や現場の様子、自社で開催しているイベントやDIY講座の様子を紹介しているので、より親近感を感じられるサイトになっています。

記事がカテゴリ別に色分けされているので、ユーザーが見たい情報を探しやすい工夫がされているのもポイントです。

 

2.株式会社フォーラス&カンパニー

2.株式会社フォーラス&カンパニー

https://re-forus.jp/

 

中古物件のリノベーションを行う大阪の会社のホームページです。

 

淡いマスタードカラーを基調にナチュラルテイストの配色を使用することで、優しく温かみを感じるデザインに仕上がっています。「中古物件に対する不安や不満を解決する」「リノベーションの可能性を伝える」というメッセージ性が伝わる素敵なWebサイトです。

細かい装飾やアニメーション、下層ページのディテールまでしっかり作り込まれていて、シンプルながらも印象に残ります。サイトの雰囲気作りや統一感を出す際に非常に参考になると思います!

 

3.キン建築工房

3.キン建築工房

https://kin-kenchikukoubou.com

 

こちらはオレンジ色がベースの温もり感じるWebデザインになっています。

 

地域密着でお客様に寄り添った工務店として仕事をされており、「笑顔が見えるリフォーム」というキャッチコピーがそのイメージにぴったりで素敵です!

また、キャッチコピーの下に対応している業務内容が書かれているので、スクロールしたり下層ページに飛ばなくても必要な情報がわかるユーザーに優しい設計がされているのもポイントです。

 

当社で制作させていただいた事例の一つです。他の事例も見たい方は以下のリンクからご覧ください。

 

当社の制作事例を見る

 

無料相談受付中

 

4.シンプル工務店

4.シンプル工務店

https://simple-k.co.jp/

 

岐阜市を中心に注文住宅の設計・建築を手がける工務店で、「良い家をより安く」をコンセプトとして、コストを抑えながらデザインも性能も両立した住宅を提供しています。

 

「シンプルで、いい家を、より安く」という、とにかくシンプルで直球的なキャッチコピーが、こちらの工務店のコンセプトや特徴をうまく表現していると感じました。

 

こちらの工務店のメインとなるターゲットは、趣味や遊び、車などたくさんのことに興味を持ちながら、これから子育てにもお金が必要となる若い世代のご夫婦。

「予算内で夢のマイホームが建てられそう!」と思ってもらえるポップなデザインやカラー、わかりやすい表現を取り入れられています。

 

全体的にフォントサイズを大きめにしており、どの世代にも読みやすい配慮も良いですね。

 

5.理建

5.理建

https://riken-reform.com/

 

愛知県で一般住宅やマンションをはじめ、店舗改装などのリフォームを行う工務店のホームページです。

 

メインビジュアルが3パターンあり、自動的に切り替わるようになっています。
画像が変わるごとに違うキャッチコピーが設定されていて、「子どもが小さいファミリー世代のお悩み、二世帯で暮らすご家族の不安を解消する」「
みんなが笑顔になれる住まいを叶えられる」という印象を与えてくれます。

 

また、そのターゲットが見るであろう項目によって、デザインを色分けしているのもポイントです。業務内容の一覧で、幅広い世代に必要なリフォームにはさわやかな青を基調とした色を、バリアフリーリフォームにはベージュ系の落ち着いた色を使って差別化しているので、非常にわかりやすいですね。

 

こちらも当社で制作させていただいた事例の一つです。他の事例も見たい方は以下のリンクからご覧ください。

 

当社の制作事例を見る

 

「かっこいい」工務店のホームページデザイン事例5選

スタイリッシュだったり、クールだったり、かっこいいホームページのデザインへの憧れるという方も多いのではないでしょうか?思わず参考にしたくなるデザインやレイアウトが秀逸な事例を5つまとめました。

 

1.株式会社松下組

1.株式会社松下組

http://matsushitagumi.com/

 

職人の誇りや情熱、匠ならではの技術が伝わる、とにかくかっこいい写真が印象的!

 

雑誌のようなメインビジュアルからスクロールしていくと、ポップでカラフルなイラストを用いて入社後の未来地図が現れます。「松下組の人生ゲーム」というユニークで目を引くキャッチコピーはインパクト大!

縦書きを至るところに使用することで個性が引き立ち、さらに写真や余白をうまく使うことで、シンプルながらも近代的なデザインに仕上がっています。

 

2.株式会社古谷野工務店

2.株式会社古谷野工務店

https://koyanokoumuten.co.jp/

 

トップページには、施工事例、お客さまのインタビュー記事、新着情報、アクセス、問い合せのみと文章が少なく非常にシンプルな構造です。

 

古谷工務店の「古工」の文字を使った、筆書体のようなかっこいいロゴに合う、白と黒のモノトーンな配色で全体の雰囲気を統一余白の使い方も素敵で、スタイリッシュな印象を与えます。

 

シンプルながらも計算されたデザインから、工務店のこだわりを感じられます。

 

3.株式会社 工藤工務店

3.株式会社 工藤工務店

http://www.kudostyle.jp/

 

クオリティにこだわりのあるこちらの工務店では、打ち合わせからデザイン、施工、メンテナンスまでオリジナルな美しさを求めており、そのこだわりがキャッチコピーや文章、写真から感じられるホームページです。

 

トップページは開くごとにメインビジュアルが変わり、どの写真も違った良さの雰囲気を感じられます。色数を抑えたカラートーンは、ハイセンスな家づくりを想像させ、こだわりを持つユーザーを惹きつけるホームページ構成ですね。ターゲットに合ったデザインになっているといえます。

 

毎日のように更新される建築現場レポートでは、着工から引き渡しまで各施工の状況を写真付きで紹介していて、家づくりの臨場感が伝わります。

 

4.なゆた工務店

4.なゆた工務店

https://www.nayutakoumuten.com/

 

新築や増改築の他に、店舗や保育園・学習塾、オフィスや施設、参画型のリフォームまで幅広く行う工務店のホームページで、当社で制作させていただきました。

 

ロゴにも使用されている、和をイメージさせる鶯色をアクセントカラーに取り入れています。全体的に落ち着いた雰囲気のデザインは、個人から法人まであらゆる人に親近感を与えることができます。写真の大きさやレイアウトにメリハリがあり、訪問者を飽きさせないのもポイントです。

 

当社で制作させていただいた事例の一つです。他の事例も見たい方は以下のリンクからご覧ください。

 

当社の制作事例を見る

 

無料相談受付中

 

5.株式会社MIYOSHI

5.株式会社MIYOSHI

https://miyoshi-gifu.jp/

 

職人さんの現場の様子を映した動画をメインビジュアルに使用しており、躍動感のあるファーストビューとなっています。スクロールすると左右からスライドインでコンテンツが出てくるアニメーションも印象的。

 

ページの至るところにも職人さんのかっこいい写真が使われており、匠の技術や情熱が伝わるのはもちろんのこと、職人の顔が見えることで会社への安心感も高まります。

 

新着情報に事例や現場レポートを紹介したり、「家づくりのQ&A」として自社の特徴や対応エリアを載せているのもユーザーにやさしいですね。

 

「おしゃれで個性的」な工務店のホームページデザイン事例5選

どのサイトにもあまり見ない、独自の世界観で見る人を魅了する事例を厳選しました!個性あふれるホームページを作りたい方は、ぜひ参考にしてみてください。

 

1.70年代不動産 有限会社 川堀工務店 K-LIVING

1.70年代不動産 有限会社 川堀工務店 K-LIVING

ttps://kawahori70.com/

 

70〜80年代の中古物件をリノベーションし、新たな価値を生み出すというニッチな業種に特化している会社です。

 

ネイビーを背景色に鮮やかなイエローを差し色で使うことで、ユーザーにアピールしたいポイントが目立つようにデザインされています。

写真や文字だけでなく、ゆる〜い手書き風の文字やイラストを随所に取り入れているのも大きなポイント。全体的にポップでにぎやかなデザインは、中古物件のデメリットを感じさせず、リノベーションがもっと身近に感じられるサイトに仕上がっていますね。

 

2.株式会社グッドライフ

2.株式会社グッドライフ

http://goodlife-inc.co.jp/

 

オフィスのデザイン・施工を行う会社のホームページです。

 

メインビジュアルでは、設計図からイスや観葉植物などが飛び出すアニメーション動画が使用されています。お客さまから出た悩みや希望をもとに設計し、それが実現するまでの流れが具体的にイメージできるのが魅力です。

 

法人向けでオフィス事務所に特化した自社の強みをトップページだけでうまく表現されていますね。

 

3.BALENA

3.BALENA

http://www.balena91.jp/

 

長野県で建築・リノベーションを手がけている会社のホームページです。

 

雲をイメージした装飾、清潔感のある淡いブルーを基調とした配色、風を感じるような流線形のデザイン、風に流れるようなキャッチコピーは、「くうきを創る。」というコンセプトにぴったりです!

 

ナビゲーションメニューをクリックすると出てくる、ページ遷移のアニメーションも印象的で、その世界観に思わず引き込まれます。

 

4.Masuno HOMES

4.Masuno HOMES

https://masuno55.co.jp/

 

大阪で自然素材の注文住宅を提供する会社で、機能性とデザイン性を兼ね備えた家づくりにこだわっています。

 

「触れる動画で家の中を探検しよう!」という家の内部をぐるりと巡る動画がトップページに埋め込まれており、まるで実際にモデルハウスに訪れたかのような体験ができます。動画内にクリックできるポイントがあり、各部屋のこだわりや見どころを説明したコメントが見られるのも面白いですね。

 

コロナ禍でも動画でモデルハウス体験ができる、今の時代にあった工夫が施されていますね。

 

5.株式会社 jigsaw

5.株式会社 jigsaw

https://www.jigsaw-house.net/

 

「jigsaw(ジグソー)」という社名に合わせて、ジグザク線が装飾に使われていたり、ジグソーパズルのような固定ナビゲーションにデザインされていたり、とても遊び心があってワクワクします!

目立たせたい画像や文字の大きさやレイアウトにメリハリがあり、装飾などの細かなデザインや色使いも素敵で、細部までこだわり抜かれた見ていて飽きないサイトです。

 

モデルハウスや住宅展示場の集客について解説した記事もありますので参考にしてください。

 

工務店のホームページで問い合わせ・受注を増やすデザイン5つ

問い合わせを増やす工務店のホームページデザインのポイント

 

ホームページ制作において、いくらデザイン性が良くても集客につながるとは限りません。
では、問い合わせを増やすためには、どんなことに気をつければ良いのでしょうか?

 

受注につながるホームページを作るには、「自社の強みが伝わるデザイン」と「ユーザーのニーズに刺さるコンテンツ」が重要です。

 

 

1.自社の魅力を伝えるキャッチコピー

Webサイトは、アクセスして3秒で「続きを読む」か「離脱する」かが決まるというデータがあります。
そのためサイトに留まらせるためには、訪問者のニーズに刺さるキャッチコピーを考えなくてはなりません。

キャッチコピーの役割とは

ビジュアルだけでは想像できない強みや特徴を、シンプルな表現で瞬時に訪問者の心を掴む

 

まずは、工務店のホームページに訪れるユーザーは、どのような悩みを抱えているのか書き出してみましょう。

「予算内でコストを抑えて注文住宅を建てたい」「トイレから水が漏れているのでリフォームで直したい」

といった悩みがありそうですね。

 

キャッチコピーを考える際は、お客さまの悩みからニーズを引き出し、自社ならではの強みとからめて根拠となる理由やエピソードを入れると伝わりやすくなります。

 

キャッチフレーズの例

「自社工場で部材を加工している」→「だから、低コストで夢のマイホームが持てます」

「地元密着ならではのスピード対応」→「だから、緊急時でもすぐに駆けつけます」

「自社設計・施工の一貫体制」→「だから、お客様のこだわりを反映させやすいです」

 

2.地域を絞ったSEO対策

ユーザーが工務店を探す際にはほとんどの人が「業種+地域名」や「サービス+地域名」など自分の住んでいる地域名を入れて検索します。たとえば、水まわりリフォームを考えている人なら「水まわり リフォーム 大阪市」のようになります。

 

エリアを入れて調べる人は、具体的な目的があって依頼したいという人が多いです。
たとえば「水まわり リフォーム」だけだと費用を知りたい、自力でDIYしたい人もあてはまります。
その点、地域名が入っていれば=依頼につながりやすく、地域に絞ったSEO対策は、
潜在顧客にアプローチできる効果の高いマーケティング手法なのです。

 

会社概要や所在地、アクセスはもちろん、対応エリアなどを記載しておくとSEO対策としても効果的です。

 

SEOについて解説した記事、工務店のSEO対策に強い会社を紹介した記事もありますので参考にしてください。

 

3.スマートフォンで見やすくする(モバイル化・SNS運用)

マイホームを持ちたいと考えている層は、20〜30代がメインです。この年齢層はネット世代であり、パソコンよりもスマホでリサーチする方が多いため、モバイルに適したホームページを作成する必要があります。

 

もしモバイル対応していないサイトをスマホで閲覧した場合、文字や画像が小さく表示され、ユーザーにストレスを与えてしまいます。モバイル対応していないサイトは離脱率が高く、潜在顧客を取りこぼしてしまうことも…。こうした事態を避けるためにも、必ずモバイル対応させましょう。

 

また近年、Web検索よりもSNSで検索をする、という人も増えています。これからターゲットとなっていく20〜30代、そしてそれよりも若い世代には顕著でしょう。そのため、ホームページをSNSと連携することもおすすめ。写真や動画などのビジュアルで訴求できる工務店はSNSと相性が良く、SNS運用は気軽に始められるため、やっておいて損はないといえるでしょう。

 

工務店のインスタ運用、ホームページとの連携について解説した記事もありますので参考にしてください。

 

 

4.施工事例をたくさん掲載する

依頼を検討しているお客さまにとって、施工事例は会社を決める判断材料になります。実績となる事例が少ないと「この工務店に依頼したら、どんな暮らしができるのか」イメージしにくく、依頼する業者の候補から外されてしまいます。

 

情報が少なかったり内容が伝わりにくいようでは、マイナスの材料となってしまう可能性がありますので、施工事例を掲載する際には、以下の内容を入れるようにしましょう。

 

施工事例に載せる内容

  • 施工写真
  • 施工した日付
  • タイトル(施工内容や工事名+地名+施主名など)
  • 施工内容やポイント
  • 施主さんの家族構成
  • 費用や施工期間の目安
  • 施主さんや担当者さんのコメント

施工内容に「お客様がどんな目的や悩みがあって依頼したのか」「予算内に収めるためにどんな提案をしたのか」など、シチュエーションを記載しておくと、具体的にイメージしやすく信頼や反響も高まります。

 

5.お客さまの声で安心感を与える

「お客さまの声」は、見込み客からの問い合わせにつながる非常に重要な要素です。

 

アンケートだけでは深い内容まで掘り下げられないことも多いので、直接インタビューしたりヒアリングを行ったりするのも良いでしょう。

最近は自社のYouTubeを持ち、インタビューの様子を動画で紹介している会社も増えてきています。動画はお客さまや担当者の声をよりリアルに伝えられるので、ぜひ活用してみてください。

 

動画マーケティングについて紹介した記事もありますので参考にしてください。

 

まとめ

本記事では、工務店のホームページデザインの事例や、問い合わせを増やすホームページ制作のポイントを解説してきました。

 

ホームページ作成において大切なのは、サイト訪問者にとって「使いやすく・伝わりやすく・わかりやすい」ことです。自社ならではの強みを分析し、狙ったターゲットに刺さるホームページを目指しましょう。

 

TRASP株式会社は、工務店・建築業界に強いホームページ制作会社です。業界のトレンドや顧客のニーズからベストな施策を提案し、工務店に適したWeb集客戦略をお伝えします!

 

無料サイト診断も行っているので、お気軽にご相談ください。

 

無料相談受付中

タグ

CONTACTweb制作やweb集客のご相談やお見積もりなど

WEBサイト無料診断
WEBサイト無料診断
© TRASP.inc All Rights Reserved.