西山住建

西山住建

  • WEBサイト
  • コーポレートサイト

兵庫県丹波市で50年以上にわたり地域密着の家づくりを行ってきた西山住建様のWEBサイトを制作しました。
​代表自らが大工として現場に立ち、親子二代で培った確かな技術を活かし、リフォームや古民家リノベーション、新築住宅まで幅広く対応しています。
​サイトでは、以前からパンフレットなどで展開していた代表をモデルにしたキャラクターを前面に押し出し、Lottieを用いた細やかなアニメーションで、訪問者が思わず見入ってしまうような親しみやすいデザインを実現しました。​
また、施工事例ではBefore/Afterの写真を豊富に掲載し、仕上がりのイメージが具体的に伝わるよう工夫しています。​これにより、西山住建様の技術力と人柄が自然と伝わり、初めての方でも安心して相談できるWEBサイトとなっています。

mission

(課題・狙い)

  • リフォーム需要の高まりに対応し、西山住建様の技術力と対応範囲の広さを広くPRすることで、売上向上と従業員の確保を目指す。
  • 親しみやすく、初めての方でも安心して相談できるようなWEBサイトを構築し、問い合わせ件数の増加を図る。
  • 施工事例やサービス内容を分かりやすく整理し、訪問者が必要な情報にスムーズにアクセスできるようにする。​

solution

(やったこと)

  • 代表をモデルにしたキャラクターをLottieでアニメーション化し、サイト全体に配置することで、親しみやすさと印象的なデザインを実現。
  • 施工事例ではBefore/Afterの写真を豊富に掲載し、仕上がりのイメージが具体的に伝わるよう工夫。
  • サービス内容を「リフォーム」「古民家リノベーション」「新築住宅」に分けて整理し、訪問者が必要な情報にスムーズにアクセスできるようにした。
  • サイト全体のデザインにおいて、余白や配色、タイポグラフィに配慮し、清潔感と信頼感を醸成。​

design concept

(制作に込めた意図)

  • コンテンツ構成の意図:「“家づくり”よりも“顔づくり”」という親しみの訴求

    代表が現役の大工であることを起点に、「職人と直接話せる安心感」「確かな技術」をしっかり伝えるため、営業トークではなく“現場視点”の言葉や構成で展開。
    サービス紹介では「新築」「リフォーム」「古民家再生」と対象ごとに明確にセクションを分けることで、ユーザーの関心軸に応じた訴求を可能にしている。
    トップには「つくるのは、家と、住む人のエガオ。」というコアメッセージを大きく掲げ、“建てる”ではなく“暮らしと人の幸せを支える”という思想を強調。ターゲットの属性を問わず信頼と親しみが同居する世界観に仕上げた。

  • UI/UX設計の意図:「伝統 × やさしさ」を体現する、動きと親しみのある設計

    全体はやわらかな丸みのあるUIと、芝生のような配色設計で、見た瞬間から“堅苦しくない工務店”という印象を与える構成に。
    スクロールにあわせてキャラクターがLottieで動くギミックを導入し、「地元の工務店」「親しみのある人柄」を視覚的に印象づけ。特にPC版では視線誘導と可動性を連動させることで、自然にサービス理解が進むよう配慮。
    また「手が届きやすい仕組み」や「地元ネットワークの強み」など、“人を感じる項目”を文章と写真で補完し、読み手の安心感を段階的に醸成している。

  • ビジュアル演出の意図:「人柄 × 技術力 × 暮らし感」がにじむ世界観

    トップや見出し下にはキャラクター(大工代表)をモチーフにしたビジュアルを大胆に使い、「代表=ブランド」を直感的に印象づける構成。
    写真も「施工現場」「図面を描く手元」「職人の手」など本質的な信頼に直結するカットを中心に選定し、“きれいすぎないけど、真面目さと温かさが伝わる”構成に。
    施工事例やリフォーム紹介などのページではビフォーアフターがイメージしやすい写真サイズとレイアウトにし、視覚的な納得感とともに具体的な相談への誘導を狙っている。

  • 「作るのは、家と住む人のエガオ。」という想いを軸に、“職人技”と“人柄のあたたかさ”を可視化したサイト設計。
  • Lottieや柔らかなUI設計を取り入れ、親しみと信頼が両立する空気感を表現。新築から古民家再生まで幅広く対応する対応力と、地域に根ざした小さな工務店ならではの魅力を丁寧に伝えている。

project data

(プロジェクト詳細)

Client
西山住建
Date
2024.8
URL
https://nishiyama-jyuken.com
Director
有賀 史朗
Designer / Coder
有賀 史朗
Photographer
竹内 吉崇

other works

(その他の実績)

法YOU行政書士事務所

  • WEBサイト
  • コーポレートサイト

ツチプラス

  • WEBサイト
  • サービスサイト