主役は「建設業許可票」。隠さない工務店の姿勢を、そのままホームページにしました

大阪・北浜の職人直営工務店、スマイルベース株式会社様のホームページ制作事例。許可・保証・保険という「確かめられる事実」を、現場の許可票そのままのデザインで堂々と掲げました。選ばなかった3つの方向性も公開します。

大阪・北浜の、職人直営の工務店

スマイルベース株式会社様は、大阪市中央区道修町（北浜）に事務所を構える工務店です。代表取締役で専任技術者でもある村里俊明さんが、見積も施工も説明も自ら担当する「職人直営」のスタイル。得意とするのは大工工事（木造軸組・2×4）、屋根ふき（スレート・板金・瓦）、給排水・給湯設備で、新築も改修も手がけます。主な対応エリアは梅田から15km圏内、ご相談は大阪府・兵庫県・奈良県まで。建設業許可を取得したばかりの、新しい会社です。

ホームページに求められたのは、3つの入口をきちんと分けること。家を建てる・直す施主さま向け、下請けを探している元請さま向け、そして一緒に現場をつくる協力業者さま向け（職人さんが株主として直営に参画する仕組み）です。もうひとつの大きな条件が「実績写真がまだない」こと。新会社ですから当然ですが、工務店サイトの定番である施工事例ギャラリーが使えないなかで、何を主役にするかが最初の問いになりました。

選ばなかった3つのデザイン

最初に検討して見送ったのは「木と朝」という方向でした。クリーム色の地に明朝体、木の温かみを前面に出す案です。きれいにまとまるのですが、注文住宅ブランドのように見えてしまい、職人直営の工務店ならではの硬さ・実直さが消えてしまう。AIが作りがちな定番の見た目でもあり、却下しました。

次に「深紺の看板」。紺のベタ地に白の極太ゴシック、法被のように密で力強い案です。元請さま向けには悪くないのですが、施主さまには重すぎる。しかも、お客様が「こういう雰囲気が好き」と教えてくださった参考サイトは白地に青のアクセントという整理された印象で、真逆でした。この案は丸ごと採用せず、締めのセクションにだけ濃紺を借りることにしました。

3つめは「フルブリードの現場写真＋青」。画面いっぱいの現場写真に青を効かせる、工務店サイトの自動運転のような型です。写真のない新会社では成立しませんし、仮に写真があっても他社と見分けがつかない。これも却下です。3つとも「作れる」案でしたが、この会社の状況と性格に合っていませんでした。

主役は「建設業許可票」

行き着いたコンセプトは「許可票のように、隠さない工務店」。現場に必ず掲げる建設業許可票のように、施主さまが確かめたいことを全部ボードに書いて掲げる、という考え方です。実績写真の代わりに、建設業許可・住宅保証機構への登録・工事完成保証・加入している保険といった「確かめられる事実」を主役に据えました。デザイン上の合図は「許可票プレート」。白いボード、2pxの紺枠、ラベル列と値の罫線表、四隅に小さなビス。これをトップのヒーロー直下、安心の根拠ページ、会社概要と、要所で繰り返しています。

配色はお客様のロゴから採った紺と空色に、白地。電話やお問い合わせのボタンだけは安全ベストのオレンジで、他には使いません。書体は見出しも本文もBIZ UDPゴシック。公的な書類や標識で使われるUDゴシックは、許可票のコンセプトとぴったりでした。許可番号や電話番号などの数字にはIBM Plex Monoを当てて、掲示物らしい表情に。背景には方眼の「図面グリッド」を薄く敷き、ヒーローと責任のセクションでだけ下へ白くフェードさせています。お客様が好まれた「白地＋青アクセント＋濃色で締める」骨格はそのまま活かし、装飾やレイアウトは一切借りずに組み立てました。

5ページで、3つの入口をきちんと分ける

納品したのはトップ、施主さま向け、元請・協力業者さま向け、安心の根拠、会社概要・お問い合わせの5ページです。トップは「High Quality, Smart Price」の見出しと電話番号、その下に大きな許可票プレート、そして「どなたのご相談か、入口を選んでください」と3つのタイルで分岐します。濃紺のセクションでは「営業担当はいません」と掲げ、設計→見積→施工→監督→説明を一本の紺の線が貫く図で、同じ職人が最後まで責任を持つ仕組みを見せました。サイトで唯一の演出的な動きがこの線の描画です。

施主さま向けページは、住宅設備を施主さまご自身で選んで購入する「施主支給」の説明が中心です。中間マージン・選べる自由・価格が見えるという3つのメリット、一般的な施主支給との違い、当社が代行すること、工事費の考え方までを、架空の金額を入れずに仕組みとして書きました。元請・協力業者さま向けページは前半が下請け対応の範囲と認証・保険加入状況、後半が職人さんが株主として参画する仕組みの図解です。安心の根拠ページは「誰を・いつ・何から守るか」の一覧表から始まり、許可・保証・保険を1項目ずつプレートにしました。会社概要には、18の専門職人がひとつのチームとして建築一式を請け負う「ワンチーム図」と、梅田から15km圏を描いた対応エリア地図を自前で描き起こしています。

チャットで仕上げた細部

この案件で印象的だったのは、お客様ご自身が材料をどんどん送ってくださったことです。事務所に掲げた許可票の写真、ロゴ、保険の加入者証、組織図、そして現場の場面写真。AIで画像を生成する案もお出ししましたが、お客様が自前の写真を送ってくださったので、その案は取り下げました。写真は「場面」として置き、人物をご本人やスタッフとして紹介しない、という約束で使っています。

細かな調整も、すべてチャットのやりとりで進みました。見出しは当初の案から「High Quality, Smart Price」へ、お客様のご指定で変更。「安い」ではなく「賢い選択」という表現にしたいというお考えからです。トップの流れ図がスマートフォンで2行に折り返してしまうと、スクリーンショットを送っていただき、モバイルでは縦のはしご状に組み直しました。保険の支払限度額や工程の並び順（設計を必ず最初に）も、お客様の訂正をそのまま反映。公開後にトップの写真を差し替えたいというご希望にも、そのまま対応しています。取引先に見せたい朝には、公開中のアドレスをすぐお伝えできました。

この事例のようなホームページを、あなたのお店にも

新しい会社でも、伝えられる事実は必ずあります。スマイルベース様の場合、それは許可と保証と保険、そして「話す人＝施工する人」という仕組みでした。あなたのお店にも、きっと同じように掲げられるものがあるはずです。写真や資料を送って、チャットで話すだけ。ホームページ番頭（hpbanto.com）が、その事実が一番よく見えるかたちを一緒に探します。