「元気で安心！」をやめて、暮らしの雑誌にした。信州の工務店サイトが77分でできるまで
松本市の木の家の工務店を想定した架空のモデル店舗「萩原工務店」のホームページ制作サンプル。派手な工務店サイトをあえて避け、生成りの紙と縦組みの明朝で「暮らしの雑誌」のように仕上げた5ページ、制作は約77分（実測）。
この事例は、工務店（木の注文住宅・古民家再生）のホームページがどんなふうに仕上がるかをご覧いただくための制作サンプルです。登場する「萩原工務店」は、長野県松本市を拠点にする三代目の工務店という設定で私たちが用意した架空のモデル店舗で、店舗・人物・住所・電話番号はすべて架空、掲載している写真もこのモデル店舗のためにAIで生成したものです。ただし、設計の検討からページの組み立て、公開までの流れは実際のご依頼とまったく同じ手順で行っており、制作時間の約77分も実測です。
モデル店舗の設定：年に8棟だけ、手で刻む松本の工務店
萩原工務店は、1978年に祖父が大工としてひとりで始め、1996年に法人化、いまは三代目の萩原拓真さん（42歳）が代表を務める、という設定の工務店です。従業員は8名（自社大工6人・設計1人・事務1人）。長野県産の杉や桧を自社の作業場で手刻みし、プレカットに任せない。そのぶん新築は年に8棟までしか手がけられません。対応エリアは松本市・安曇野市・塩尻市・大町市と、車で1時間ほどの周辺。松本市島内には社員の家族が実際に住むモデルハウス「島内の家」があり、土日だけ予約制で公開している。ここまでが、モデル店舗としてあらかじめ決めておいた「会社の事実」です。
サイトのゴールは「モデルハウス見学予約」と「無料相談の申込」。想定するお客様は30〜40代の子育て世帯で、最初に見るのは奥様、しかもスマホから、という前提を置きました。そして、いちばん大切にした言葉が「信州の木で、手で刻む家」です。この一行をどう見せるかが、デザインの出発点になりました。
検討して、選ばなかった3つの方向
最初に決めたのは「やらないこと」でした。工務店のホームページによくある「元気で安心！」系の、原色と大きな文字で押してくる見せ方は、このモデル店舗には合いません。木と紙と余白。『チルチンびと』のような暮らしの雑誌の誌面感。そこは最初から動かさない前提として、そのうえで3つの方向を検討し、いずれも見送りました。
ひとつめは「炉辺の夜」。焦茶から墨にかけての暗い基調に、薪ストーブの火の色を差す案です。情緒はとても強いのですが、「木と生成りを基調に」という指定に反しますし、スマホで開いた最初の一画面が重くなる。これは不採用としつつ、夕景のヒーローの下部とモデルハウスの夜景セクションの2箇所だけ、暗幕として部分的に残しました。ふたつめは「刻みの図面」。継手や仕口の技術図解を主役にした、ゴシック体の硬派な職人ドキュメンタリーです。ご主人には刺さるはずですが、最初に見るのが奥様という導線に合わない。こちらも不採用で、精神だけを「家づくりの考え方」ページの一節に残しています。
みっつめは、いわば「自動運転の答え」です。クリーム地に高コントラストのセリフ体、テラコッタの差し色。AIに任せると出てきがちな、それらしいテンプレートの顔つきです。生成り基調そのものは指定なので残しますが、差し色と組版で明確に離すことにしました。差し色は藍、表題は縦組み。この選択が、最終的な見た目を決めています。
なぜ「縦組みの明朝と藍」がこの工務店に合うのか
コンセプトは「暮らしの雑誌を一冊めくるように読む、信州の木の家の記録」。住宅カタログではなく、写真と選ばれた言葉でつづる誌面です。松本は民藝の町なので、紙は生成り（#F6F2E9）、文字は純黒ではなく墨（#2B2620）、差し色は大工の半纏の藍（#2E4A63）ひとつだけ。木の色は写真が運んでくれるので、UIの茶色は罫線や目次番号など小さな飾りに留めています。緑・赤・オレンジ系のUI色は禁止にしました。
書体は見出しとリードに Zen Old Mincho、本文と表に Zen Kaku Gothic New、数字と英字のアイブロウにだけ EB Garamond。そして、このサイトを記憶してもらうための一点が「縦組みの明朝」です。トップページでは夕暮れの家の写真の右側に「信州の木で、手で刻む家」が縦一行で静かに立ち、各ページのセクション見出しには「木のこと」「ごあいさつ」「流れ」といった縦組みの短いラベルと、横組みの英字アイブロウを添える誌面システムとして展開しています。見出しは体言止めの三語コピーではなく、「家づくりの流れと、かかる費用を、順番にお伝えします。」のように文章として書く。これも、大きな文字で叫ばない雑誌の表紙のようなルールです。
美しいだけで中身がない、を作らない
雑誌のような余白は物語のセクション（ヒーロー・暮らしの写真・事例のプレビュー）に効かせ、事実のセクションは日本の工務店サイトとして必要な情報を漏らさず組みました。「家づくりの流れと費用」ページでは、相談から入居までの目安12〜14ヶ月を EB Garamond の大きな数字で示し、7つの工程を「考える」「建てる」「暮らす」の3章に入れ子にしています。費用は隠さず表で、新築2,800万円〜（延床30坪・本体工事・税込の目安）、古民家再生・リノベ1,200万円〜、実例として塩尻市M様邸1,650万円・工期7ヶ月を明記。FAQもアコーディオンで6問ほど用意しました。
「会社概要・お問い合わせ」ページは、代表の顔写真と実名でのごあいさつから始まり、社名・代表・創業と法人化の年・所在地・許可番号・従業員数を定義表で並べ、モデルハウス「島内の家」の案内、電話（受付9:00〜18:00・水曜定休）とLINEボタン、見学予約・無料相談を選べるフォームへと続きます。LINE公式アカウントのIDが後から届く想定なので、ボタンは先に用意し、URLが空のあいだは「準備中」と表示される作りにしました。番地が架空のため、Googleマップの埋め込みは使わず、長野県の地図に松本市・安曇野市・塩尻市・大町市を落としたエリア図を自作しています。
スマホでは、見学予約を第一に
スマホで開くと、縦組みの「信州の木で、手で刻む家」はそのまま画面右に立ち、画面の下には生成り地に罫線を引いた固定バーが常に出ています。左が「モデルハウス見学予約」、右が「電話する」。工務店サイトでは電話を最優先に置くことが多いのですが、このモデル店舗の想定客は30〜40代のスマホ層。そこで「電話最優先」という定石にあえて逆らい、見学予約を第一、電話を第二の順番にしました。モバイルのヒーローにはボタンを重ねず、薄い藍のテキストリンクだけにして、行動の入口は固定バーに一本化しています。動きは控えめに、スクロールで写真と文がふわりと一度だけ現れる程度。パララックスや数字のカウントアップは使いません。
納品したページと、かかった時間
納品したのは、トップ（/）、会社概要・お問い合わせ（/company）、家づくりの流れと費用（/flow）、家づくりの考え方（/philosophy）、プライバシーポリシー（/privacy）の5ページ。トップには日付つきのお知らせ、三代の物語の見開き、暮らしの写真、施工事例のプレビュー、住んでからの声、暗幕のモデルハウス、対応エリアの地図、そして電話番号と受付時間を添えた静かな相談への誘いまでを一枚に収めています。すべて日本語メタと LocalBusiness の構造化データつきで、フッターには「このサイトは制作サンプルです（架空の会社です）」と明記しました。ここまでの制作時間は約77分（実測）です。チャットで方向を伝え、対案を検討して選び、5ページを組み上げて公開するまでが、その時間に含まれています。
この事例のようなホームページを、あなたのお店にも。工務店でも、それ以外の業種でも、まずはどんなお店で、誰に来てほしいのかをチャットで話していただくだけで大丈夫です。hpbanto.com（ホームページ番頭）で、お待ちしています。
