WebFamil Web Design / HTML
GRAND ESTATE — 法人向け不動産・高級物件紹介サイト
デモサイトを見るデザインのコンセプト
「本質的な価値を、あなたに。」 — 都心のプレミアム物件や法人向け不動産を扱うブランドにふさわしい、信頼感と高級感を両立したトーンで統一しています。派手さより「読みやすさ・使いやすさ」を優先し、企業・資産家層がストレスなく情報にアクセスできることを目指しました。
カラー・トーン
メインカラーに深いネイビー（#0F172A）、アクセントにシャンパンゴールド（#C5A059）を採用し、金融・不動産業界でよく使われる「信頼・落ち着き」と「品質・特別感」を同時に伝える配色にしています。背景は明るいグレー（#F8F9FA）で、カードやセクションのメリハリを付けています。
Primary #0F172A
Accent #C5A059
Bg #F8F9FA
タイポグラフィ・余白
英文見出しに Lato、本文・和文に Noto Sans JP を組み合わせ、ビジネスサイトとしての可読性とモダンな印象を両立しています。セクション間の余白を大きめに取り、ヒーロー・特徴・物件一覧・フッターの流れが一目で分かる構成にしました。
構成・HTMLのポイント
- トップ — ヒーロー＋検索ボックスで「種別・エリア・キーワード」からすぐに物件検索できる導線
- 選ばれる3つの理由 — アイコン＋見出し＋短文で、非公開物件・資産価値分析・専任エージェント制を簡潔に説明
- 物件カード — 画像・価格・間取り・エリア・CTAを1カードにまとめ、一覧性とクリック導線を確保
- 購入・売却・賃貸・事業用 — 各ニーズ別に専用ページを用意し、検索フォーム・流れ・メリットを整理
- スタッフ紹介 — 写真・役職・専門タグ・連絡先で「誰に相談できるか」を明確に表示
技術・実装
レスポンシブ対応を前提に、CSS変数でカラー・余白を一元管理し、グリッドレイアウトでカードやスタッフ一覧を配置しています。Font Awesomeでアイコンを統一し、ヒーローやページヘッダーには背景画像＋オーバーレイで奥行きを出しています。
HTML5
CSS3（Variables / Grid / Flexbox）
レスポンシブ
Font Awesome
想定ユーザー・用途
法人のオフィス・拠点探し、資産家の高級マンション・投資用物件の購入・売却、都心の賃貸を探す個人までを想定した「ワンストップ」の不動産サイトとして設計しています。ナビゲーションは「購入する」「売却する」「賃貸を探す」「事業用物件」の4軸で分け、目的別に迷わずたどり着けるようにしています。