WEBCAN.
Free Diagnosis無料診断
  1. TOP
  2. デザイン参考集
  3. 工務店
  4. アーキテックスハウジング

HOME BUILDER · 福岡県 · PICKED 2026.10.15

アーキテックスハウジング工務店のホームページデザイン参考 — モノトーン・写真主体・性能訴求

アーキテックスハウジングのトップページ（PC）
PC（1440px）
アーキテックスハウジングのトップページ（スマホ）
スマホ（375px）
出典：architex.co.jp ↗確認日 2026.10.15

EDITOR'S NOTE編集部の視点

性能の数字を、写真の上にバッジで重ねたファーストビュー。

福岡・北九州で注文住宅を手がける工務店のサイト。外観写真に縦書きのコピーを重ね、受賞歴と断熱・気密・換気・耐震の性能値をバッジにしてファーストビューに収めている。全体はグレーの濃淡でまとめ、来場予約と資料請求のボタンだけに赤を使っている。

  1. 01ファーストビューに受賞バッジと性能値4項目を並べ、「雰囲気の良い会社」と「根拠のある会社」を一画面で両立させている
  2. 02見学会・モデルハウス・規格住宅・施工事例と、検討が進んだ人が見たい順に上から並べている
  3. 03色はグレーの濃淡に絞り、スマホの「ご来場予約」ボタンだけを赤にして行動を目立たせている

CONVERSION集客の工夫

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

性能を「数字のバッジ」で先に見せる

断熱性能（UA値）や気密性能（C値）を、ファーストビューのバッジで示している。性能を比べて工務店を探す人には、説明を読む前に判断材料が届く。数字は自社の実測値など、根拠を示せるものだけを載せるのが前提になる。

来場予約と資料請求を常に表示

PCでは画面右端に「来場予約」「資料請求」のタブを固定し、スマホでは画面下に同じ2つのボタンを固定している。見学会の告知を読んだその場で予約へ進める。

見学会を写真つきのカードで並べる

イベント欄は、建物の写真・日付・会場（市区町村名）をカードにして3件並べている。「どこで・いつ」が一目で分かるので、近くの会場を選んで予約しやすい。

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

COLOR配色

#FFFFFF背景
#444444本文テキスト
#EDEBEAセクション背景 · ウォームグレー
#474948濃色セクション
#333333ボタン
#C30D23予約ボタン（スマホ）

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

TYPOGRAPHYフォント

用途
和文本文
使用フォント
游ゴシック体
無料で近いもの
Noto Sans JP
用途
英字見出し（EVENT・WORKS など）
使用フォント
Roboto
無料で近いもの
Roboto
要素PC サイズ / 太さPC 行間SP サイズ / 太さ
h215px / 4001.5012px / 400
h311px / 4002.0011px / 400
本文（p）20px / 5001.8013px / 500
ボタン13.3px / 400—13.3px / 400

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

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

  1. 01

    ヘッダー

    ロゴを中央に置き、ナビを左右に分割。右上にフリーダイヤルとSNSのアイコン。

    ヘッダー／電話番号＋予約ボタン常設型
  2. 02

    ファーストビュー

    外観写真に縦書きのコピー。右上に受賞バッジ、下部に断熱・気密・換気・耐震の性能値を4つのバッジで並べる。右端に来場予約・資料請求のタブを固定。

    ファーストビュー／写真＋実績バッジ型
  3. 03

    メッセージ

    エリア名を入れた見出しと、家づくりの考え方を短く。

    コンセプト／写真＋メッセージ型
  4. 04

    イベント

    見学会・モデルハウスのオープンを、写真・日付・会場つきのカードで3件。

    イベント・キャンペーン／見学会・イベント告知型
  5. 05

    モデルハウス

    3会場のモデルハウスを写真と所在地で紹介。

    事例・実績／写真グリッド型
  6. 06

    規格住宅の紹介

    濃いグレーの帯で、価格と性能を打ち出した商品を1つだけ大きく。

    事例・実績／大判1件＋サムネ型
  7. 07
  8. 08

    施工事例

    新着の事例をカルーセルで。縦書きの説明文を写真に添える。

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

    Instagram・YouTube

    SNSの投稿と動画をそのままトップに並べ、更新の多さを見せる。

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

    家づくり5つの柱

    強み・こだわり・品質保証・アフターサービス・家づくりの流れを写真タイルで。

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

    コンタクト

    電話番号と受付時間、来場予約・資料請求の3つの入口をまとめる。

    行動喚起／資料請求・来場予約型
  12. 12
  13. 13

    スマホ追従ボタン

    「ご来場予約」「資料請求」の2つ。

    行動喚起／SP追従ボタンバー型
アーキテックスハウジングの構成をWEBCANの部品で組んだワイヤーフレーム（PC）

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

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

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

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

Figmaでの使い方

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

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

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

  1. 01性能値や受賞歴など、根拠を示せる数字をファーストビューのバッジにする。数字は3〜4個までに絞る
  2. 02色はグレーの濃淡でまとめ、予約ボタンなど行動してほしい場所だけに強い色を使う
  3. 03トップの並びは「見学会 → モデルハウス → 商品 → 事例」のように、検討が進んだ人が知りたい順にする
  4. 04スマホでは来場予約と資料請求を画面下に固定する

FAQよくある質問

アーキテックスハウジングのサイトで使われているフォントは？

和文の本文は游ゴシック体、EVENT・WORKS などの英字見出しは Roboto です。どちらも Google Fonts の Noto Sans JP と Roboto で近い印象を再現できます。

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

性能や品質を数字で示せる注文住宅・リフォーム会社のほか、設備や実績の数字が強みになる製造業・設備工事業のサイトにも応用できます。

ダウンロードしたワイヤーフレームはそのまま使えますか？

ワイヤーフレームは、このサイトの構成をWEBCANの部品で組み直したもので、元サイトの文章・画像・デザインは含みません。自社の情報を入れて、構成を考えるたたき台としてお使いください。

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

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

FROM REFERENCE TO YOUR SITE

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

「アーキテックスハウジングのような構成で」とお伝えいただくだけで構いません。無料診断で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。

無料診断に申し込む