不動産/ラグジュアリーUI設計ガイド -- "Grand Space"
高級不動産のUIが売るのは「空間」そのものだ。Sotheby's International Realty の圧倒的な写真の力、Compass の洗練されたスペック表示。物件の広がりを画面上で体感させ、価格に見合う品格をUIで証明する。
本テンプレートは Sotheby's Luxury Real Estate から着想を得た「Grand Space」設計システムを定義する。ネイビーブルーの信頼感とゴールドの品格、セリフ書体の正統派タイポグラフィが、最高の物件にふさわしい舞台を作る。
核心となる設計思想
物件写真が全てを語る。UIは透明な額縁であり、写真を邪魔しない。余白は「空間の広がり」を暗示し、密集は「狭さ」を感じさせる。ネイビーブルーは信頼、ゴールドは品格。この2色で不動産の最高峰を表現する。
1. デザイン哲学 -- 「空間を売る」
Sotheby's のアプローチ -- 写真が全て
Sotheby's International Realty は物件写真をフルブリードで配置し、UIを最小限に抑える。物件の価値は空間の広がりであり、その広がりを画面上で体感させるために、余白と大きな写真に全力を注ぐ。
Compass のアプローチ -- スペックの明快さ
Compass は物件のスペック（間取り/面積/バスルーム数）をアイコン付きグリッドで即座に把握可能にしている。価格はセリフ書体で品格を維持しながら、実用情報へのアクセスも効率的。
物件詳細プレビュー
このテンプレートの適用範囲
| カテゴリ | 適合度 | 具体例 |
|---|---|---|
| 高級不動産 | 最適 | Sotheby's, Compass, ラグジュアリーマンション |
| 建築事務所 | 最適 | 設計事務所ポートフォリオ |
| インテリアデザイン | 最適 | 空間デザイン、リノベーション |
| ホテル/旅館 | 適合 | 高級宿泊施設の予約ページ |
| 中古不動産ポータル | 適合 | 物件詳細ページ |
| 賃貸ポータル | 非推奨 | 情報量が多すぎる場合は CORPORATE |
2. ネイビー & ゴールド配色
信頼と品格の2色
LUXURY PALETTE
NAVY
#1a3a5cGOLD
#b8964eDARK
#1a1a1aOFF-WHITE
#f8f7f43. セリフ書体の品格
フォントシステム
The Penthouse
Display -- Playfair Display, 64px, weight 400
480,000,000
Price -- Playfair Display, 36px, gold
BEDROOMS
4
Spec -- Label 11px uppercase + Value 24px serif
SCHEDULE A VIEWING
Button -- Inter, 12px, uppercase, letter-spacing 1px
4. コンポーネント詳細
スペックグリッド
ボタンスタイル
Schedule Viewing
Inquire Now
Brochure
5. レイアウト原則
余白は空間の広がり
不動産サイトの余白は物件の開放感を暗示する。セクション間は80px以上、写真の周りには十分なスペース。
| 要素 | デスクトップ | モバイル |
|---|---|---|
| 最大コンテンツ幅 | 1400px | 100% |
| サイドパディング | 64px | 20px |
| セクション間余白 | 80px | 48px |
| スペックグリッド | 4列 | 2列 |
| 物件カードグリッド | 3列 | 1列 |
6. ダークセクションのドラマ
EXCLUSIVE OFFERING
Experience Luxury Living
都心の最高立地に、人生の最高の住空間を。
あなただけの特別な内覧をご予約ください。
あなただけの特別な内覧をご予約ください。
Private Viewing
Contact Agent
7. Do's and Don'ts
Do
- 物件写真を最大限大きく（フルブリード推奨）
- 価格をセリフ書体で品格を持って表示
- スペックをグリッドで一覧化
- ネイビー + ゴールドで信頼と品格
- ボタンは uppercase + letter-spacing
- エージェント情報を明示
Don't
- 物件写真を小さくしない
- カラフルなバッジを使わない
- ポップ体を使わない
- 角丸を大きくしない（2-4px）
- 情報を詰め込みすぎない
- ゴールドを使いすぎない
8. レスポンシブ対応
| 画面サイズ | スペックグリッド | ギャラリー | ヘッダー |
|---|---|---|---|
| Mobile (<640px) | 2列 | スワイプ | ハンバーガー + 問い合わせ |
| Tablet (640-1024px) | 3列 | サムネイル行 | 全ナビ |
| Desktop (1024px+) | 4列 | ストリップ | 透過ナビ + CTA |
9. プロンプトガイド
クイックカラーリファレンス
Background: #ffffff | Panel: #f8f7f4 | Dark: #1a1a1a
Text: #1a1a1a | Secondary: #555555 | Muted: #999999
Navy: #1a3a5c | Gold: #b8964e | Border: #e8e5e0Stitch向けプロンプト例
「高級物件の詳細ページを作成してください。
DESIGN.md の REAL_ESTATE プリセットに従ってください。
ヒーロー: ダーク背景 (#1a1a1a)、物件名 Playfair Display 48px、
住所 14px rgba(255,255,255,0.55)、価格 32px ゴールド (#b8964e)。
スペックグリッド: 4列、ラベル 11px uppercase #999999、値 28px serif。
ボタン: ネイビー (#1a3a5c)、12px uppercase letter-spacing 1px。」