ワイヤーDLアオイ建設の注文住宅（AOI Home）
左のサイドナビに、無料相談とカタログ請求を固定する。
HOME BUILDER · 岡山県 · PICKED 2026.10.15
運船建設工務店のホームページデザイン参考 — 情報量多め・ネイビー・地域密着
出典：www.unsen.jp ↗確認日 2026.10.15
EDITOR'S NOTE編集部の視点
地域の工務店が伝えたいことを、全部トップに並べて迷わせない。
倉敷市を中心に注文住宅・規格住宅を手がける工務店のサイト。イベント・施工事例・お客様の声・家づくりの流れ・Q&A・対応エリアまで、検討に必要な情報をトップページに順番に積み上げている。見出しはすべて英字＋日本語の同じ型でそろえ、情報量が多くても読み進めやすくしている。
- 01ファーストビューの下にイベントのバナーを横一列に並べ、開催中の企画をすぐ見せている
- 02スタッフの顔写真を一人ずつ並べ、「誰が建てるのか」をトップで見せている
- 03Q&Aと対応エリアをトップページに置き、問い合わせ前の疑問に先回りして答えている
CONVERSION集客の工夫
✓電話番号をヘッダーに常設PC・ファーストビュー
✓タップで電話できるSP・tel:リンク 4か所
✓SPの追従ボタンSP・画面下に固定
✓予約・問い合わせ導線資料請求CONTACT / お問い合わせ・資料請求
✓LINEで相談・予約LINE公式アカウント
✓営業・診療時間の明記トップページ内
対応エリアを市町村名で明記
ページ下部に、対応エリアの市町村名を一覧で載せている。「〇〇市で建てられるか」という疑問に答えると同時に、地域名での検索にも役立つ。
電話・資料請求・LINEを常に表示
PCでは右端に「お問合わせ」「公式LINE」のタブを固定し、スマホでは画面下に資料請求・LINE・電話のボタンを固定している。どの画面からでも3つの連絡手段にすぐ届く。
LINE登録でWEBカタログを渡す
公式LINEに登録するとWEBカタログを受け取れる、という特典をトップで案内している。紙の資料請求より手軽で、その後のイベント案内にもつなげやすい。
チェック項目は 2026.10.15 に実ブラウザで描画したトップページを自動判定したものです。
COLOR配色
#FFFFFF背景
#F7F7F7セクション背景
#111547ブランドカラー・ボタン · ネイビー
#332726本文テキスト
#5792BF電話ボタン
#06C755LINEボタン
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
TYPOGRAPHYフォント
- 用途
- 和文見出し・本文
- 使用フォント
- Noto Sans JP
- 無料で近いもの
- Noto Sans JP
- 用途
- 英字見出し（ABOUT・WORKS など）
- 使用フォント
- Roboto
- 無料で近いもの
- Roboto
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h2 | 15px / 700 | 1.40 | 11.3px / 700 |
| h3 | 19.5px / 700 | 1.40 | 14.1px / 700 |
| 本文（p） | 15px / 400 | 1.60 | 14.3px / 400 |
| ボタン | 13.5px / 400 | 1.50 | 12.8px / 400 |
実測値（PC 1440px・SP 375px、2026.10.15 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
STRUCTUREページ構成（上から順に）
- 01
- 02
- 03
- 04
お知らせ
お知らせ／お知らせ一覧型 - 05
- 06
- 07
- 08
- 09
WORKS
事例・実績／写真グリッド型 - 10
- 11
お客様の声
お客様の声／カード型 - 12
家づくりの流れ
流れ／ステップ型 - 13
- 14
対応エリア
アクセス／対応エリア一覧型 - 15
開催中の住宅イベント
イベント・キャンペーン／見学会・イベント告知型 - 16
LINE登録でWEBカタログ
行動喚起／資料請求・来場予約型 - 17
電話・無料相談
行動喚起／電話＋Web予約の2ボタン帯型 - 18
フッター
フッター／店舗情報＋ナビ型 - 19
DOWNLOADワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
REPRODUCEこのサイトを参考にするときのポイント
- 01情報が多いページほど、見出しの型（英字＋日本語）を1つに決めてくり返す
- 02スタッフの顔写真をトップに置き、「誰が建てるのか」を早めに見せる
- 03Q&Aと対応エリアをトップに置き、問い合わせ前の疑問を減らす
- 04電話・資料請求・LINEの3つの入口を、PCは画面端、スマホは画面下に固定する
FAQよくある質問
運船建設のサイトで使われているフォントは？
和文は Noto Sans JP、英字見出しは Roboto です。どちらも Google Fonts で無料で使えます。
トップページに情報を詰め込みすぎると、読まれなくなりませんか？
このサイトは見出しの型と余白をそろえ、各セクションを短くして「一覧を見る」ボタンで下層へ送っています。全部を読ませるのではなく、気になる項目を見つけてもらう作りです。
どんな業種の参考になりますか？
地域密着で、イベント・事例・お客様の声などの更新情報が多い工務店・リフォーム会社のほか、教室や整骨院など地域で集客する業種にも応用できます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利は運船建設および各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。
MOREほかの工務店の参考サイト
FROM REFERENCE TO YOUR SITE
このテイストで、
御社の工務店サイトを。
「運船建設のような構成で」とお伝えいただくだけで構いません。無料診断で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。
無料診断に申し込む