WEBCAN.
Free Diagnosis無料診断
  1. TOP
  2. デザイン参考集
  3. 工務店
  4. オーブルホーム（ARBRE HOME）

HOME BUILDER · 兵庫県 · PICKED 2026.10.15

オーブルホーム（ARBRE HOME）工務店のホームページデザイン参考 — モノトーン・ミニマル・余白

オーブルホーム（ARBRE HOME）のトップページ（PC）
PC（1440px）
オーブルホーム（ARBRE HOME）のトップページ（スマホ）
スマホ（375px）
出典：www.arbrehome.com ↗確認日 2026.10.15

EDITOR'S NOTE編集部の視点

色をほとんど使わず、写真と余白だけで家の質感を伝える。

神戸で注文住宅を手がける工務店のサイト。ファーストビューは文字を入れない室内写真1枚で、以降もグレーと白の2色だけで組んでいる。家づくりの考え方・施工エリア・相談会の案内を、アイコンつきの見出しで整理して並べている。

  1. 01ファーストビューは文字を重ねず、明るい室内写真だけを大きく見せている
  2. 02配色は白とグレーだけ。写真の木の色が、ページで唯一の色として目に入る
  3. 03「オーブルホームを知る」で、家づくりの考え方や施工エリアなどを、アイコンと見出しで一覧にしている

CONVERSION集客の工夫

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

電話番号を右上に、受付時間とセットで

ヘッダー右上に市外局番からの電話番号と受付時間を置いている。地元の工務店を探す人には、電話番号の市外局番そのものが「近くの会社」という安心材料になる。

施工エリアを本文で明記

会社紹介の中に施工エリアの項目を設け、対応する市区町村を書き出している。対応地域かどうかを問い合わせる前に確認できる。

スマホではイベント・相談会・電話を下部に固定

スマホでは画面下に「イベント」「無料相談会」「お問合わせ」「電話する」のボタンを固定している。静かなデザインのままでも、行動の入口は常に残している。

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

COLOR配色

#FFFFFF背景
#DFDFDFセクション背景 · ライトグレー
#555555本文テキスト・ボタン
#000000写真上の帯
#BBBBBBサブテキスト

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

TYPOGRAPHYフォント

用途
和文見出し・本文
使用フォント
Noto Sans JP
無料で近いもの
Noto Sans JP
用途
英字見出し（WORKS・EVENT など）
使用フォント
Roboto
無料で近いもの
Roboto
要素PC サイズ / 太さPC 行間SP サイズ / 太さ
h220px / 4002.0024px / 400
h336px / 5001.5022px / 500
本文（p）16px / 4002.0016px / 400
ボタン16px / 4001.0016px / 400

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

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

  1. 01

    ヘッダー

    英字ロゴを左、ナビを中央下に、右上に電話番号とお問い合わせ。

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

    ファーストビュー

    文字を入れない室内写真のスライド。

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

    家づくりの入口

    家づくりの考え方の文章のあと、6つのアイコンで下層ページへ案内する。

    メニュー・サービス／アイコン／写真グリッド型
  5. 05

    施工事例

    横に流れるカルーセル。

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

    イベント・家づくり相談会

    見学会と相談会を左右に並べる。

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

    オーブルホームを知る

    家づくりの考え方や施工エリアなどを、アイコンと文章の一覧で。

    強み・選ばれる理由／写真とテキストの交互型
  8. 08

    家づくり5つのコンセプト

    タブで切り替えて1つずつ読ませる。

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

    お問い合わせ

    電話番号とフォームへのボタン。

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

    スマホ追従ボタン

    イベント・無料相談会・お問合わせ・電話する。

    行動喚起／SP追従ボタンバー型
オーブルホーム（ARBRE HOME）の構成をWEBCANの部品で組んだワイヤーフレーム（PC）

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

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

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

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

Figmaでの使い方

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

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

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

  1. 01ファーストビューは文字を重ねず、自社でいちばん質の高い室内写真を1枚選ぶ
  2. 02色は白とグレーに絞り、写真の素材の色を主役にする
  3. 03施工エリア・家づくりの考え方などの「会社を知る」情報は、アイコンつきの一覧にまとめる
  4. 04静かなデザインほど、スマホの追従ボタンで行動の入口を確保する

FAQよくある質問

オーブルホームのサイトで使われているフォントは？

和文は Noto Sans JP、英字見出しは Roboto です。どちらも Google Fonts で無料で使えます。

色を使わないデザインで、問い合わせは減りませんか？

このサイトでは、ボタンの色ではなく配置で行動を促しています。ヘッダーの電話番号、各セクションの「MORE」、スマホの追従ボタンなど、入口の数と位置で補っています。

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

デザイン性で選ばれたい注文住宅・リノベーションのほか、設計事務所や家具工房、写真が強いサロンなどにも応用できます。

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

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

FROM REFERENCE TO YOUR SITE

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

「オーブルホーム（ARBRE HOME）のような構成で」とお伝えいただくだけで構いません。無料診断で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。

無料診断に申し込む