TRASPコラム

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

サイトまとめ

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

 

「工務店にはどんなコンテンツが必要?」

「どんなサイトを制作すれば良いかわからない…」

集客のためにホームページを作りたい・リニューアルしたいけど、わからないことだらけで悩みを抱えている方は多いと思います。

 

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

 

この記事では、以下のことがわかります。

  • ユーザーに選ばれる!工務店ホームページの特徴
  • ホームページ制作で参考にしたいデザイン事例
  • 問い合わせが増やすために入れるべきコンテンツ

 

工務店を中心に、建築業界のトレンドを熟知したホームページ制作を行なってきた制作会社の視点から、デザインやコンテンツの参考になるポイントも解説しております。ホームページを作る際に、ぜひ参考にしてみてください。

 

選ばれる工務店に多いホームページデザインの特徴

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

 

特に工務店は、新築や注文住宅、水まわりや内装リフォームなど暮らしに関わる工事を請け負うため、個人法人に関わらず「信頼できる会社か」「確かな実力があるのか」「実際にどんな施工をしているのか」という点が見られます。

 

個人が求めるのは安心感、法人は実力や技術力が求められるので、ターゲットに合わせたデザインにするのが良いでしょう。デザインのポイントは以下で紹介しているので、ぜひ参考にしてみてください。

 

安心感を与える工務店のホームページデザインの事例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(ジグソー)」という社名に合わせて、ジグザク線が装飾に使われていたり、ジグソーパズルのような固定ナビゲーションにデザインされていたり、とても遊び心があってワクワクします!

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

 

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

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

 

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

 

それでは、参りましょう!

 

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

ビジュアルだけでは想像できない強みや特徴を、シンプルな表現で訪問者の心を掴むのがキャッチコピーの果たす役割です。そのためにも、サイト訪問者のニーズに刺さるキャッチコピーを考えなくてはなりません。

 

工務店のホームページに訪れるユーザーは、「予算内でコストを抑えて注文住宅を建てたい」「トイレから水が漏れているのでリフォームで直したい」といった悩みを解決してくれる業者を探しています。

 

自社ならではの強みを理解し、根拠となる理由やエピソードを入れると伝わりやすくなります。

 

キャッチフレーズの例

  • 自社工場で部材を加工している→だから、低コストで夢のマイホームが持てます
  • 地元密着ならではのスピード対応→だから、緊急時でもすぐに駆けつけます
  • 自社設計・施工の一貫体制→だから、お客様のこだわりを反映させやすいです

 

地域を絞ったSEO対策

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

 

エリアを入れて調べる人は、具体的な目的があって依頼したいという意思を持って検索する人が多いです。地域に絞ったSEO対策は、潜在顧客にサービスの価値を訴求できる効果の高いマーケティング手法なのです。

 

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

 

サイトをスマートフォン対応に

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

 

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

 

こうした事態を避けるためにも、必ずモバイル対応させましょう。

 

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

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

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

 

施工事例に載せる内容

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

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

 

お客様の声で安心感を与える

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

 

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

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

 

まとめ

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

 

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

 

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

 

<TRASPへの無料相談>

https://trasp-inc.com/contact

2021.05.28

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

無料サイト
診断受付中

無料サイト診断受付フォーム

    会社名
    ご担当者名※必須
    メールアドレス※必須
    お電話番号※必須
    診断URL※必須
    診断キーワード※必須
    page top
    © TRASP.inc All Rights Reserved.