出典：barrbuild.co.uk ↗ 確認日 2026.10.21
Editor's note
編集部の視点
施工した家の写真だけで始め、サービスの種類・役員の顔ぶれ・雑誌の掲載・2つの事務所の場所で信用を積み上げる英国の建設会社。
ロンドンからコッツウォルズまでの住宅を手がける建設会社 Barr Build のサイト。ファーストビューは施工した家の写真が切り替わる全画面のスライドに、ロゴとメニューボタンだけ。メニューを開くと、各ページのほか、グループの家具工房・キッチン部門と、メールアドレス・電話番号が並ぶ。トップは「ロンドンからコッツウォルズまで」という対応地域の一文から、6つのサービス、4人の役員と見習い制度の話、雑誌と新聞の掲載記事、2つの事務所の場所へと続き、フッターでは協力会社・資材業者向けに事前審査票の入口を置いている。
- 01 サービスを「主な仕事」4つと「追加の仕事」2つに分け、引き渡し後の維持管理まで請けることを見せる
- 02 役員4人の名前・合計120年以上の経験・見習い制度を書き、会社の中身で信用をつくる
- 03 フッターに協力会社・資材業者向けの事前審査票を置き、お客さま以外の入口も用意する
Conversion
集客の工夫
- 対応地域の明示 （あり） 「ロンドンからコッツウォルズまで」
- 電話番号の掲載 （あり） メニューとフッターに +44 (0)1844 217706
- 事務所の所在地 （あり） 本社（テーム）とコッツウォルズ事務所の2か所
- 施工事例の絞り込み （あり） 事例ページでサービスの種類ごとに（州名つき）
- メディア掲載 （あり） House & Garden と The Times の記事
- 協力会社の募集 （あり） フッターに事前審査票（PQQ）のフォーム
- 問い合わせフォームの項目 （あり） 関心のあるサービスと「何で知ったか」を選ぶ
- ファーストビューに問い合わせ （なし） なし（メニューの中）
対応地域とサービスを、最初に言い切る
ファーストビューは施工した家の写真が切り替わるだけで、文字はロゴのみです。スクロールすると最初に 「ロンドンからコッツウォルズまで」 と対応地域を一文で書き、続けてサービスを「主な仕事」4つ（カントリーエステート・新築・改装・歴史的建物の修復）と「追加の仕事」2つ（維持管理・造作家具）に分けて並べています。建てて終わりではなく、引き渡しの後も付き合える会社だと伝わる分け方です。
会社の中身で、信用をつくる
「私たちについて」では、役員4人の名前と 合計120年以上の経験、続けてきた見習い制度、地域の工務店から始まった歩みを書いています。その下には House & Garden と The Times の記事を写真つきで並べ、第三者の評価も見せます。高額な住宅の工事では、写真のきれいさだけでなく「誰がやっている会社か」が依頼の決め手になります。
お客さま以外の入口も、サイトに置く
トップの終わりでは、ロンドンから1時間以内の本社と、コッツウォルズの事務所の2か所を紹介し、「相談する」ボタンにつなげます。フッターには 協力会社・資材業者向けの事前審査票（PQQ） の入口があり、取引を始めたい会社もサイトから申し込めます。問い合わせフォームでは関心のあるサービスと「何で知ったか」を選ばせ、相談の中身と経路を最初からつかめるようにしています。
チェック項目は 2026.10.21 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #F6F3EF 背景
- #ECE6DE セクション背景
- #E0CCBA セクション背景（ベージュ）
- #303030 ボタン・濃い帯
- #000000 見出し・本文
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| 大見出し | Portrait Text | Cormorant Garamond |
| 本文・ラベル・ボタン | Brown LL | Figtree |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h2 | 64px / 100 | 1.00 | 40px / 100 |
| h3 | 28px / 100 | 0.80 | 28px / 100 |
| 本文（p） | 16px / 400 | 1.40 | 16px / 400 |
| ボタン | 11px / 400 | 1.18 | 11px / 400 |
実測値（PC 1440px・SP 375px、2026.10.21 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ヘッダー 左上にメニューボタンだけ。開くと各ページ、家具工房・キッチン部門、メールと電話。 ヘッダー／ロゴ＋メニューボタン型
- 02 ファーストビュー 施工した家の写真が切り替わる全画面のスライドに、中央のロゴ。 ファーストビュー／全面写真＋コピー型
- 03 対応地域と姿勢 「長く続く品質を」「ロンドンからコッツウォルズまで」と、規模を問わない姿勢。 メッセージ／大きな一文型
- 04 サービス カントリーエステート・新築・改装・歴史的建物の修復と、維持管理・造作家具。 機能・強み／左右交互型
- 05 会社について 役員4人と合計120年以上の経験、見習い制度、地域の工務店から全国で認められる会社へ。 コンセプト／写真＋メッセージ型
- 06 役員からのメッセージ 「よく建てる」とは、最初の問い合わせから引き渡しの後まで信頼できること。 メッセージ／大きな一文型
- 07 掲載記事 House & Garden と The Times の記事を写真つきで。 一覧／カード並び型
- 08 事務所の場所 ロンドンから1時間以内の本社と、コッツウォルズの事務所。 コンセプト／写真＋メッセージ型
- 09 フッター 採用・会社・部門・取材のリンク、メールと電話、ニュースレター、協力会社向けの事前審査票。 フッター／大きなフッター型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 対応地域は「どこからどこまで」と一文で書き、トップの早い位置に置く
- 02 サービスは「主な仕事」と「引き渡し後の仕事」に分けて並べ、長い付き合いができることを見せる
- 03 役員の名前・経験年数・人材育成の取り組みを書き、会社の顔を見せる
- 04 協力会社・資材業者の募集の入口をフッターに置き、取引先の窓口もサイトでまとめる
FAQ
よくある質問
Barr Build のサイトで使われているフォントは？
大見出しに Portrait Text、本文やラベルに Brown LL を使っています。どちらも有料書体なので、無料で近づけるなら Cormorant Garamond と Figtree の組み合わせが候補です。
問い合わせフォームで「何で知ったか」を聞くのはなぜ？
Barr Build のフォームは、口コミ・検索・建築家やインテリアデザイナーの紹介・SNS などから選ばせています。住宅の建設は設計者からの紹介が多いため、どの経路から相談が来ているかを集計できるようにしておくと、力を入れる先を決めやすくなります。
どんな業種の参考になりますか？
工務店・リフォーム会社・古民家の改修を手がける会社など、地域を決めて住宅を建てる建設業に向きます。協力会社を広く募っている会社なら、フッターの事前審査票の入口もそのまま使えます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はBarr Buildおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: Httpster
