出典：connellmcfadden.com ↗ 確認日 2026.10.23
Editor's note
編集部の視点
入居者の修理依頼や申込書類をヘッダーから直接開けるようにし、空室状況と営業時間、業界団体の加盟まで1ページで見せるエディンバラの不動産会社。
エディンバラのローズバーン地区に事務所を構える不動産会社のサイト。賃貸（Lettings）・改修開発（Development）・金融（Financial）の3部門を持つ。ファーストビューは街並みの動画に「Edinburgh’s Property Specialists」の一文。続いて3部門の紹介と事務所の店構えの写真、スタッフの集合写真、「AVAILABLE」「NOW LET」の札がついた募集物件4件、全物件を載せたポータルサイトへのリンク、問い合わせフォームと事務所の住所。ヘッダーには家主向けと入居者向けのメニュー、修理依頼が並ぶ。
- 01 「修理依頼」と入居者向けの申込書類をヘッダーに置き、既存の顧客がすぐ用件を済ませられる
- 02 募集物件に「AVAILABLE」「NOW LET」の札をつけ、成約済みも残して実績として見せる
- 03 事務所の店構えとスタッフの写真、営業時間、業界団体のロゴで、地元の会社であることを伝える
Conversion
集客の工夫
- 入居者向けの窓口 （あり） ヘッダーに「Report A Repair」
- 申込書類のフォーム （あり） 入居申込・退去・学生の申込・保証人・解約通知
- 家主向けの案内 （あり） 家主ガイドと新規の家主登録フォーム
- 空室状況の表示 （あり） 物件写真に「AVAILABLE」「NOW LET」
- 全物件の一覧 （あり） Rightmove（不動産ポータル）へのリンク
- 営業時間の明記 （あり） フッターに月〜金 9〜17時・土日休み
- 業界団体・登録番号 （あり） SAL・LAS・CLA のロゴ、仲介業の登録番号と会社番号
- 電話・メール （あり） tel:リンク 2か所・mailto:リンク 1か所
既存の客の用件を、いちばん目立つ場所に
ヘッダーには「Report A Repair（修理依頼）」と「Tenants（入居者向け）」が並び、入居申込・退去・学生の申込・保証人・解約通知のフォームを直接開けます。家主向けにもガイドと登録フォームがあります。電話で受けていた用件をサイトで受け付けることで、新規の問い合わせと既存の客の連絡が混ざりません。
募集中と成約済みを、札で見分ける
募集物件は写真の左上に「AVAILABLE」「NOW LET」の札がつき、間取りとひとことの説明が添えられています。成約済みの物件も残すことで、実際に部屋が決まっている会社だと伝わります。全物件の一覧は不動産ポータルの Rightmove へのリンクに任せています。
地元の事務所と人の顔を見せる
3部門の説明の横には事務所の店構え、会社紹介にはスタッフの集合写真。問い合わせ欄では「ローズバーンの事務所にお立ち寄りください」と書き、住所と電話を添えています。フッターには営業時間（月〜金 9〜17時）と業界団体（SAL・LAS・CLA）のロゴ、仲介業の登録番号が並び、近くにある信頼できる会社であることを積み重ねています。
チェック項目は 2026.10.23 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #FFFFFF 背景
- #232F23 募集物件のセクションの背景（深い緑）
- #F3EFEB 会社紹介の背景（生成り）
- #AF8246 「Read more」のボタン・物件の札
- #262626 フッターの背景
- #636363 本文
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| 見出し・ロゴまわり | CM Display（専用のセリフ体） | Lora |
| 本文・メニュー・小見出し | Proxima Nova | Montserrat |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | 40px / 400 | 1.10 | 32px / 400 |
| h2 | 22px / 400 | 0.80 | 18px / 400 |
| h3 | 15px / 600 | 1.30 | 12px / 600 |
| 本文（p） | 17px / 400 | 1.67 | 15px / 400 |
| ボタン | 16px / 300 | 1.73 | 29px / 400 |
実測値（PC 1440px・SP 375px、2026.10.23 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ヘッダー 賃貸・金融・開発・家主向けと、修理依頼・入居者向け・会社紹介・問い合わせ。ロゴを中央に置き、上部に固定。 ヘッダー／ロゴ＋横並びナビ型
- 02 ファーストビュー エディンバラの住宅街の動画に「Edinburgh’s Property Specialists」。 ファーストビュー／全面動画＋コピー型
- 03 3つの部門 賃貸・金融・開発の3部門を短く説明し、各部門へのリンクを並べる。右に事務所の店構えの写真。 コンセプト／写真＋メッセージ型
- 04 私たちについて スタッフ6人の集合写真と、有資格者が業界基準のもとで扱うという説明。 コンセプト／写真＋メッセージ型
- 05 募集中の物件 写真・札（募集中／成約済み）・間取り・ひとことの説明と「Read more」。 一覧／カード並び型
- 06 全物件の一覧 「全物件はこちら」の一文と Rightmove のロゴのリンク。 信頼／ロゴ帯型
- 07 問い合わせ 電話・メール・事務所の住所と、名前・メール・電話（任意）・用件のフォーム。 行動喚起／ボタン帯型
- 08 フッター 部門ごとのサービス一覧、事務所の住所と営業時間、業界団体のロゴ、登録番号。 フッター／大きなフッター型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 新規客だけでなく、既存の客（入居者・取引先）がよく使う用件をヘッダーに置く
- 02 紙で受け取っていた申込書や届出は、種類ごとにフォームにしてメニューから開けるようにする
- 03 成約済みの物件や事例も札をつけて残し、動いている会社であることを見せる
- 04 業界団体の加盟や登録番号は、フッターにまとめて載せる
FAQ
よくある質問
Connell & McFadden のサイトで使われているフォントは？
見出しに CM Display というセリフ体、本文とメニューに Proxima Nova を使っています。無料で近づけるなら、見出しに Lora、本文に Montserrat の組み合わせが候補です。
不動産会社のサイトに物件をすべて載せる必要はありますか？
Connell & McFadden はトップに4件だけを載せ、全物件は不動産ポータルの Rightmove に任せています。自社サイトでは会社の顔と相談の入口に集中し、物件検索はポータルに任せるという分け方もできます。
どんな業種の参考になりますか？
賃貸管理会社、不動産仲介、リフォーム会社など、新しい客と既存の客の両方から連絡が来る業種に向きます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はConnell & McFaddenおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: Httpster
