家は、ほとんどの人にとって人生でいちばん高い買い物です。だからこそ工務店のホームページに求められるのは、かっこよさでも情報量でもなく、「この会社に任せて大丈夫だ」と思ってもらうこと。この記事では、ラタトスクが制作した工務店向けデモサイトを題材に、その「信頼」をデザインでどう作ったのかを、制作者自身が種明かししていきます。
「デモ制作の舞台裏」シリーズでは、業種ごとのデモサイトを取り上げて、配色・構成・コピーの意図を具体的に解説していきます。今回は工務店編です。
お読みいただく前に
この記事で扱うのは、ラタトスクが技術力の証明として制作した架空のデモサイトです。実在の店舗・実際の案件ではありません。登場する「山口工務店」という社名や創業年数・施工実績などの数字も、すべて架空の設定です。
工務店のホームページで一番大事なこと
工務店を探している人は、最終的に何を見て決めるのでしょうか。価格表でも、設備の仕様一覧でもありません。「素材感」と「実例」だと私は考えています。
素材感とは、木の質感や職人の手仕事が、サイトを開いた瞬間の空気として伝わってくること。工務店の強みは、大手ハウスメーカーのような規格化された商品ではなく、木や土といった素材と、それを扱う人の技術です。その強みは文章で「こだわっています」と書くより、サイト全体の色・書体・写真から感じ取ってもらう方がずっと強く伝わります。
実例とは、実際に建てた家を見せることです。家づくりを検討する人は「うちの場合はどうなるだろう」と自分の暮らしを重ねながらサイトを見ています。施工事例が具体的であるほど、その想像が進み、問い合わせの心理的ハードルが下がります。
逆に言えば、この2つが弱いホームページは、どれだけ立派な理念を書いても「よくある工務店のサイト」で終わってしまいます。
デモ「山口工務店」でどう設計したか
デモサイトの設定は「創業昭和三十九年・三代続く木造住宅専門の地域工務店」。この設定を、飾りではなくデザインの根拠として使っています。
配色｜木の色だけでページを組む
デモの配色は、焦げ茶（#5C4A2B）・木肌のようなベージュ（#D4B896）・生成りの背景（#FAF6EE）の3色が軸です。すべて「木」から取った色で、彩度の高い原色は一切使っていません。青や赤のボタンを置けば目立ちはしますが、その瞬間に「素材の空気」が壊れるからです。
もうひとつ工夫したのが、トップの大きな写真（ヒーロー画像）の処理です。写真の上に濃い茶色のグラデーションを下方向にかけて、白い文字が写真に沈み込むようにしています。文字を読ませつつ、写真の木の質感を殺さないための処理です。
フォント｜明朝体で「60年の格」を出す
このデモでは、見出しだけでなく本文・ナビゲーションまで、ほぼ全面に明朝体（Shippori Mincho）を使っています。ゴシック体は機能的で現代的な印象を与える一方、明朝体は誠実さ・伝統・職人気質を感じさせる書体です。「創業60年・三代続く工務店」という設定なら、迷わず明朝体です。
あわせて、字間（文字と文字のあいだ）を通常より広めに取り、行間もゆったりさせています。詰まった文字組みはにぎやかで安売り感が出ますが、余白のある文字組みは静けさと格を作ります。こだわりの強い工務店ほど、この「静けさ」が似合います。特徴紹介の番号を「1・2・3」ではなく漢数字の「一・二・三」にしたのも同じ意図です。
コピーと数字｜時間軸で語る
ヒーローのキャッチコピーは「百年使える家を、今日のために。」としました。性能や価格ではなく、「時間」で語るコピーです。工務店の家づくりは建てて終わりではなく、住み継がれていくもの。その価値観を一文に込めて、「家」の一文字だけを木肌色に変えて視線を留めています。
その下には「創業60年」「施工実績420棟」「家業継承3代」「構造保証30年」という4つの数字を並べ、スクロールに合わせてカウントアップするアニメーションを付けました。理念は言葉で、信頼の裏付けは数字で。役割を分けています（もちろん、この数字も架空の設定です。実際の制作では、お店の本当の数字だけを使います）。
施工事例｜「豪華さ」より「暮らしの想像」
施工事例のセクションには、3枚の実例写真（works/w01〜03.webp）を使いました。並べ方には明確な意図があります。
- S邸／木と漆喰の家（福岡市・2024年）…… 王道の新築注文住宅
- T邸／古民家リノベーション（糸島市・2024年）…… 築90年の再生案件
- K邸／二世帯住宅（春日市・2023年）…… 家族構成が特殊なケース
新築・リノベ・二世帯とあえて種類の違う3件を選ぶことで、対応の幅を一目で伝えています。また、それぞれに「福岡市／2024年」のように地域と年を添えました。見た人が「自分の住む街の近くで、最近も建てている」と感じられることが、地域工務店の実例では何より大事だからです。写真は大きく4:3で見せ、説明文は一行だけ。語りすぎず、写真に仕事をさせています。
このほか、よくある質問では「坪単価70万円〜」という目安をあえて隠さず書き、棟梁の顔写真を載せたセクション、建設業許可の欄がある会社概要も用意しました。価格の目安を出すこと、作り手の顔を見せること自体が信頼の材料になるからです。
工務店の集客でよくある失敗
工務店のホームページでもったいないと感じるパターンを挙げます。
- 写真が信頼を壊している…… 暗い現場写真や、明らかに海外の住宅のフリー素材。「素材感」で選ばれるべき工務店にとって、写真の質はコピーより重要です。
- 施工事例が止まっている…… 最新の事例が数年前のままだと、「今もやっているのだろうか」という不安につながります。
- 専門用語だけが並ぶ…… 耐震等級や断熱性能の数値も大事ですが、それだけでは暮らしが想像できません。数値は「その家でどう暮らせるか」とセットで見せるものです。
- 窓口が電話しかない…… 家づくりの検討は数年がかりです。デモでは「『いつかは建てたい』段階でも結構です」と明記して、まだ本気度が固まっていない人の受け皿を作りました。
- 大手の真似をしてしまう…… ハウスメーカー風の均質なデザインに寄せると、手仕事・地域密着という工務店ならではの強みがかえって見えなくなります。
まとめ｜実際のデモを見てみてください
- 工務店のホームページで一番大事なのは「素材感」と「実例」
- デモでは、木から取った3色の配色と明朝体（Shippori Mincho）で「60年の格」を表現した
- コピーは性能ではなく時間軸で語り、数字で裏付けた
- 施工事例は種類の違う3件を選び、地域と年を添えて「近くで建てている」実感を作った
- 写真の質・事例の更新・受け皿の設計を怠ると、強みが伝わらない
文章だけでは伝わりきらない部分も多いので、ぜひ実物のデモサイトをスクロールして、明朝体の空気感やカウントアップの動きを確かめてみてください。繰り返しになりますが、架空の店舗であり実在しません。