ワイヤーDLアオイ建設の注文住宅（AOI Home）
左のサイドナビに、無料相談とカタログ請求を固定する。
HOME BUILDER · 大阪府 · PICKED 2026.10.15
木の家イムラ工務店のホームページデザイン参考 — 明朝体・縦書き・自然素材
出典：imura-k.com ↗確認日 2026.10.15
EDITOR'S NOTE編集部の視点
縦書きの明朝体と木の写真で、「自然素材の家」を言葉より先に伝える。
大阪・奈良で木の家を手がける工務店のサイト。見出しや本文まで明朝体で組み、縦書きを多用して和の落ち着きを出している。モデルハウスの来場予約と見学会を何度もくり返し案内し、世界観と集客の導線を両立させている。
- 01ファーストビューの写真に縦書きの明朝体のコピーを重ね、右側に見学会のバッジを置いている
- 02深い緑をブランド色にし、ボタンや見出しの差し色にも同じ緑を使っている
- 03モデルハウスをエリア別（大阪・奈良）に分けて紹介し、近い会場を選びやすくしている
CONVERSION集客の工夫
✓電話番号をヘッダーに常設PC・ファーストビュー
✓タップで電話できるSP・tel:リンク 1か所
✓SPの追従ボタンSP・画面下に固定
✓予約・問い合わせ導線見学会・イベント / 今すぐ来場予約
－LINEで相談・予約LINE公式アカウント
✓営業・診療時間の明記トップページ内
来場予約の入口を3段構えにする
ヘッダーの「来場予約」、トップ中盤の来場予約バナー、スマホ下部の固定ボタンと、来場予約へ進む入口を何度も用意している。読み進めて気持ちが高まった場所から予約へ進める。
見学会は開催地を見出しに入れる
見学会のカードは「新築平屋見学会【川西市】」のように、見出しに開催地を入れている。近くの会場かどうかがタイトルだけで判断できる。
FAQと対応エリアをトップの下部に置く
家づくりの流れ・よくある質問・対応エリアを、トップページの下部にまとめている。検討の最後に残る疑問に、問い合わせの前に答えられる。
チェック項目は 2026.10.15 に実ブラウザで描画したトップページを自動判定したものです。
COLOR配色
#3B6741ブランドカラー・ボタン · フォレストグリーン
#FFFFFF背景
#F5F4F4セクション背景
#242121本文テキスト
#8D894Eサブカラー · オリーブ
#722530差し色（来場予約）
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
TYPOGRAPHYフォント
- 用途
- 和文見出し・本文
- 使用フォント
- Noto Serif Japanese（Noto Serif JP）
- 無料で近いもの
- Noto Serif JP
- 用途
- 約物
- 使用フォント
- YakuHanMP
- 無料で近いもの
- YakuHanMP
- 用途
- 英字（Pickup・Concept など）
- 使用フォント
- EB Garamond
- 無料で近いもの
- EB Garamond
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | 12px / 400 | 1.00 | 12px / 400 |
| h2 | 17px / 400 | 1.50 | 14px / 400 |
| h3 | 15px / 500 | 1.00 | 13px / 500 |
| 本文（p） | 12px / 400 | 1.00 | 16px / 400 |
| ボタン | 13px / 400 | 1.00 | 11px / 400 |
実測値（PC 1440px・SP 375px、2026.10.15 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
STRUCTUREページ構成（上から順に）
- 01
- 02
- 03
- 04
お知らせ
お知らせ／お知らせ一覧型 - 05
- 06
- 07
来場予約バナー
行動喚起／資料請求・来場予約型 - 08
- 09
施工事例・お客様インタビュー
事例・実績／大判1件＋サムネ型 - 10
素材の話・暮らしのストーリー
強み・選ばれる理由／写真とテキストの交互型 - 11
- 12
注文住宅を建てるまでの流れ
流れ／ステップ型 - 13
よくあるご質問
よくある質問／アコーディオン型 - 14
お役立ちコラム
お知らせ／お知らせ一覧型 - 15
- 16
フッター
フッター／店舗情報＋ナビ型 - 17
DOWNLOADワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
REPRODUCEこのサイトを参考にするときのポイント
- 01自然素材や和の雰囲気を出したいときは、見出しを明朝体の縦書きにする
- 02ブランド色を1色決め、ボタンと見出しの差し色に同じ色を使う
- 03見学会のタイトルに開催地を入れ、モデルハウスはエリア別に分ける
- 04来場予約の入口をヘッダー・本文中・スマホ下部の3か所に置く
FAQよくある質問
木の家イムラのサイトで使われているフォントは？
和文は Noto Serif Japanese（Google Fonts では Noto Serif JP）に、約物を詰める YakuHanMP を組み合わせています。英字は EB Garamond です。すべて無料で使えます。
縦書きは読みにくくなりませんか？
このサイトでは、縦書きをキャッチコピーと見出しだけに使い、説明文は横書きにしています。長い文章まで縦書きにしないのがポイントです。
どんな業種の参考になりますか？
自然素材や和の雰囲気を打ち出したい工務店・リフォームのほか、旅館、和菓子店、日本料理店などにも応用できます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利は木の家イムラおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。
MOREほかの工務店の参考サイト
FROM REFERENCE TO YOUR SITE
このテイストで、
御社の工務店サイトを。
「木の家イムラのような構成で」とお伝えいただくだけで構いません。無料診断で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。
無料診断に申し込む