Land-book ·アメリカ（西部） ·Picked 2026.10.18
Roundhouse
不動産開発・投資のサイトデザイン参考 — 背景動画・セリフ体・不動産・大きなフッター
出典：rndhouse.com ↗ 確認日 2026.10.18
Editor's note
編集部の視点
「For_people」「For_place」「For_planet」と切り替わる一語を、現場の映像に重ねた不動産開発会社のサイト。
アメリカ西部で住宅を中心に開発・投資を行う Roundhouse のサイト。ファーストビューは図面を広げる手元や建設現場、草原の映像に、セリフ体の大きな文字で「For_people」「For_place」「For_planet」と一語ずつ切り替えて重ねる。見出しは「住まいに人間らしさを」。その後は代表物件、ニュース、そして所在地・関係者向けポータル・メール登録まで入った大きなフッターで受け止める。
- 01 完成物件の写真ではなく、図面や現場の映像で「誰がどう作っているか」を先に見せる
- 02 ヒーローの一語を people・place・planet と切り替え、会社の価値観を3語で伝える
- 03 電話・メール・地図をメニューの中に入れ、どの画面からでも連絡先に届く
Conversion
集客の工夫
- 背景動画 （あり） 現場・草原などの映像を全画面で
- メニュー内に連絡先 （あり） 電話番号・メール・Google マップ
- 代表物件の紹介 （あり） 物件名つきで5件
- ニュース （あり） 地域の話題やメディア掲載を3件
- メール登録 （あり） フッターに入力欄
- 関係者向けの入口 （あり） フッターに Portals（関係者向けログイン）
- ヘッダーの追従 （あり） 中央に浮くピル型のヘッダー
- 電話番号のタップ発信 （なし） 番号は表示のみで tel:リンクなし
完成写真より、作っている姿を見せる
ファーストビューは、図面を広げて指し示す手元や建設現場の映像です。不動産会社は完成物件の写真を並べがちですが、**買い手・借り手・投資家が知りたいのは「誰がどう進めるのか」**でもあります。仕事の最中の映像は、その問いに直接答えています。
価値観を、切り替わる一語で伝える
映像の上には、セリフ体の大きな文字で「For_people」「For_place」「For_planet」と一語ずつ切り替わって表示されます。続く見出しは「住まいに人間らしさを」。長い理念の文章を読ませる前に、3つの短い言葉で印象を残す作りです。
連絡先と関係者の入口を、どこからでも
メニューを開くと、ページへのリンクと並んで電話番号・メール・Google マップが出てきます。フッターには所在地、関係者向けのポータル、メール登録まで揃っています。拠点・物件・投資・採用と入口が多い業種では、メニューとフッターが第2のサイトマップとして働きます。なお電話番号は表示のみで、スマホのタップ発信には対応していません。
チェック項目は 2026.10.18 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #F6F5F0 背景（生成り）
- #0C1620 見出し・本文
- #0B253B ネイビー（フッター・強調面）
- #164C7B リンク・アクセントの青
- #DBD4CA 補足テキスト・罫線
- #FEFDF9 カード背景
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| 大見出し・ヒーローの一語 | TWK Ghost | Fraunces |
| 本文・ナビ | Neue Haas Grotesk | Inter |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | 50px / 400 | 1.10 | 40px / 400 |
| h2 | 38px / 400 | 1.10 | 34px / 400 |
| h3 | 16px / 500 | 1.50 | 16px / 500 |
| 本文（p） | 16px / 400 | 1.50 | 16px / 400 |
実測値（PC 1440px・SP 375px、2026.10.18 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ヘッダー 画面上部の中央に浮くピル型。ロゴとメニューボタンだけで、メニューを開くと電話・メール・地図も出る。 ヘッダー／中央に浮くピル型
- 02 ファーストビュー 現場や草原の映像に、セリフ体の一語（For_people／For_place／For_planet）を切り替えて重ねる。 ファーストビュー／全面動画＋コピー型
- 03 見出し 「住まいに人間らしさを」という一文。 メッセージ／大きな一文型
- 04 取り組み 大きな写真2枚と、開発の考え方の文章。 コンセプト／写真＋メッセージ型
- 05 代表物件 物件名つきで5件。大小の写真を組み合わせる。 一覧／カード並び型
- 06 写真の区切り 全幅の写真で一息入れる。 ファーストビュー／全面写真＋コピー型
- 07 ニュースと視点 地域の開発の話題やメディア掲載を3件。 お知らせ／ニュース一覧型
- 08 フッター メニュー・所在地・関係者ポータル・メール登録・連絡先・SNS。 フッター／大きなフッター型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 不動産や建設では、完成写真だけでなく「作っている最中」の映像や写真を見せる
- 02 会社の価値観は長い文章より、切り替わる短い言葉で印象に残す
- 03 電話・メール・地図はメニューの中にも入れ、どの画面からでも届くようにする
- 04 投資家・入居者・取引先など立場の違う相手がいるなら、フッターに専用の入口を用意する
FAQ
よくある質問
Roundhouse のサイトで使われているフォントは？
ヒーローの一語や大見出しに TWK Ghost（セリフ体）、本文とナビに Neue Haas Grotesk を使っています。無料で近づけるなら Fraunces と Inter の組み合わせが候補です。
背景動画は重くなりませんか？
動画は短いループを低めのビットレートで用意し、スマホでは静止画に差し替える運用が一般的です。Roundhouse のように映像の上に乗せる文字を一語に絞ると、読み込みの途中でも伝わります。
どんな業種の参考になりますか？
不動産開発・デベロッパー・建設会社・工務店に向きます。投資家や入居者など相手が複数いる業種のフッター設計の参考にもなります。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はRoundhouseおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: Land-book
