WEBCAN.
Free Diagnosis無料診断
  1. TOP
  2. デザイン参考集
  3. 工務店
  4. アオイ建設の注文住宅（AOI Home）

HOME BUILDER · 神奈川県 · PICKED 2026.10.15

アオイ建設の注文住宅（AOI Home）工務店のホームページデザイン参考 — サイドナビ・ブルー・写真主体

アオイ建設の注文住宅（AOI Home）のトップページ（PC）
PC（1440px）
アオイ建設の注文住宅（AOI Home）のトップページ（スマホ）
スマホ（375px）
出典：home.aoi-cnst.co.jp ↗確認日 2026.10.15

EDITOR'S NOTE編集部の視点

左のサイドナビに、無料相談とカタログ請求を固定する。

相模原市・厚木市で注文住宅を手がけるアオイ建設の住宅サイト。ロゴ・メニュー・相談ボタンを画面左の縦長エリアに固定し、右側で写真を大きく見せている。カタログプレゼントやLINE登録など、すぐには電話しない検討層の受け皿を何か所にも用意している。

  1. 01メニューと「無料相談・お問合せ」「カタログ請求」を左に固定し、どこまで読んでも入口が見える
  2. 02ファーストビューの写真の右下に、カタログ無料プレゼントのバッジを重ねている
  3. 03深い青緑をブランド色に、相談ボタンなど行動の場所だけを赤系にしている

CONVERSION集客の工夫

✓電話番号をヘッダーに常設PC・ファーストビュー
✓タップで電話できるSP・tel:リンク 4か所
✓SPの追従ボタンSP・画面下に固定
✓予約・問い合わせ導線無料相談・お問合せ / イベント・見学会
✓LINEで相談・予約LINE公式アカウント
✓営業・診療時間の明記トップページ内

カタログ請求を「最初の一歩」にする

ファーストビューのバッジ、サイドナビ、バナーと、カタログ請求の入口をくり返し置いている。電話や来場はまだ早いと感じる人でも申し込める行動を用意し、連絡先がわかる見込み客に変えている。

LINE登録の入口を複数用意

トップのバナーと中盤のバナーで、公式LINEへの登録を案内している。メールより気軽な連絡手段を用意すると、若い世帯からの相談が入りやすくなる。

問い合わせ先を「新築」と「アフター」で分ける

ページ下部で、新築の相談窓口とアフターサポートの電話番号を別々に案内している。既存のお客様からの連絡が新規相談の窓口に混ざらず、どちらにも早く対応できる。

チェック項目は 2026.10.15 に実ブラウザで描画したトップページを自動判定したものです。

COLOR配色

#FFFFFF背景
#F6F6F6セクション背景
#004864ブランドカラー・見出し · ディープティール
#276F91サブカラー
#AA2D2D相談ボタン
#242424本文テキスト

背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。

TYPOGRAPHYフォント

用途
和文見出し・本文
使用フォント
Noto Sans JP
無料で近いもの
Noto Sans JP
用途
英字見出し（EVENT・CONTACT など）
使用フォント
Barlow
無料で近いもの
Barlow
用途
約物
使用フォント
YakuHanJP
無料で近いもの
YakuHanJP
要素PC サイズ / 太さPC 行間SP サイズ / 太さ
h118px / 4001.6018px / 400
h256px / 7001.0048px / 700
h332px / 7001.5020px / 700
本文（p）18px / 5001.6016px / 500
ボタン0px / 400NaN0px / 400

実測値（PC 1440px・SP 375px、2026.10.15 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。

STRUCTUREページ構成（上から順に）

  1. 01

    サイドナビ

    ロゴ・メニュー・「無料相談・お問合せ」「カタログ請求」を左に固定。右上にもイベント情報と相談のボタン。

    ヘッダー／左固定サイドナビ型
  2. 02

    ファーストビュー

    家族の写真にコピー。右下にカタログプレゼントのバッジ。

    ファーストビュー／全面写真＋コピー型
  3. 03
  4. 04

    特集バナー

    公式LINE・カタログプレゼントなどをスライドで。

    イベント・キャンペーン／特集バナー並び型
  5. 05

    イベント

    見学会・相談会・ワークショップをカードで3件。

    イベント・キャンペーン／見学会・イベント告知型
  6. 06
  7. 07

    施工事例

    事例をカルーセルで。

    事例・実績／写真グリッド型
  8. 08
  9. 09

    住み継がれる家づくり

    災害に強い・地球にやさしい・きれいが続く・長持ちの4つ。

    強み・選ばれる理由／番号つき3〜4項目型
  10. 10
  11. 11

    土地の相談

    土地探し・土地買取の相談窓口。

    行動喚起／電話＋Web予約の2ボタン帯型
  12. 12

    CONTACT・AFTER SUPPORT

    新築の相談と、アフターサポートの電話番号を並べる。

    行動喚起／電話＋Web予約の2ボタン帯型
  13. 13
  14. 14

    スマホ追従ボタン

    イベント情報・無料相談の2つ。

    行動喚起／SP追従ボタンバー型
アオイ建設の注文住宅（AOI Home）の構成をWEBCANの部品で組んだワイヤーフレーム（PC）

DOWNLOADワイヤーフレームをダウンロード

この構成を、Figmaで編集できるワイヤーに

上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。

PC版（1440px）SVG スマホ版（375px）SVG

Figmaでの使い方

  1. SVGをダウンロードする
  2. Figmaのキャンバスにファイルをドラッグ＆ドロップする
  3. セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める

文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。

REPRODUCEこのサイトを参考にするときのポイント

  1. 01写真を大きく見せたいときは、メニューと相談ボタンを左に固定し、右側を写真に使う
  2. 02電話の前の一歩として、カタログ請求やLINE登録の入口を何か所かに置く
  3. 03ブランド色は1色に決め、相談ボタンなど行動の場所だけに別の色を使う
  4. 04新規の相談とアフターサポートの連絡先を分けて案内する

FAQよくある質問

アオイ建設のサイトで使われているフォントは？

和文は Noto Sans JP、英字見出しは Barlow、約物には YakuHanJP を組み合わせています。いずれも無料で使えるフォントです。

サイドナビ型は、スマホではどうなりますか？

スマホではサイドナビをやめ、上部のヘッダーとハンバーガーメニューに切り替えています。代わりに画面下へ相談ボタンを固定しています。

どんな業種の参考になりますか？

資料請求やカタログを入口にしたい住宅・リフォーム・外構のほか、パンフレットを用意している学習塾や結婚式場などにも応用できます。

スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はアオイ建設の注文住宅（AOI Home）および各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。

MOREほかの工務店の参考サイト

FROM REFERENCE TO YOUR SITE

このテイストで、
御社の工務店サイトを。

「アオイ建設の注文住宅（AOI Home）のような構成で」とお伝えいただくだけで構いません。無料診断で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。

無料診断に申し込む