NWA Coding Lab
C05🏢企業・コーポレート系上級

Sakura不動産

不動産

想定時間18h
技術HTML / CSS / JS
完成形を見るソースコードを見る

Client Brief

桜

桜井 真司営業部長

Sakura不動産株式会社

件名: 新規制作のご依頼

世田谷・目黒エリアの高級住宅専門不動産。ポータルサイト依存から脱却し、自社サイトで集客したい。物件の魅力を写真で伝えたい。

ご要望

  • 1物件カードが写真メインで魅力的に見える
  • 2エリア・価格・間取りで検索できるフィルタUI
  • 3おすすめ物件のフィーチャード表示
  • 4高級感のあるエレガントなデザイン

予算

¥400,000

納期

2ヶ月

種別

新規制作

クライアントの人柄

営業力が高い、見た目の印象を重視、顧客志向

避けてほしいこと

チープな不動産ポータル感情報詰め込み安っぽいアイコン

成功指標

自社サイト経由の内見予約を月20件以上

追加メモ

"三井不動産のサイトのような上品さが理想。物件写真が映えるデザインで。"

Preview

フル画面で開く →
/demo/C05-sakura-realty/index.html

Learning Points

1

物件カードグリッド

2

検索フィルタUI

3

詳細ページ遷移

4

数値強調

How to Build

01

Step 1: 物件カード設計

60分

物件カードの情報設計（写真・価格・面積・間取り・所在地）とフィルタUIの仕様策定。

成果物: カード・フィルタ設計書

02

Step 2: HTML構造

120分

ヒーロー→おすすめ物件→検索フィルタ→物件一覧→会社概要→アクセス→フッター。

成果物: 完全なHTML

03

Step 3: エレガント配色

90分

薄紅×ゴールドのエレガント配色。Tenor Sans見出し。物件カードのレイアウト。

成果物: ビジュアルベース

04

Step 4: フィルタUI＋グリッド

120分

検索フィルタ（select×3 + ボタン）、物件カードGrid、価格の強調表示。

成果物: ほぼ完成形

05

Step 5: JS＋レスポンシブ

90分

フィルタパネルの表示切り替え、タブUI。Grid列数の調整。

成果物: 完成版

Source Code

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sakura不動産 | 理想の住まいを、あなたに。</title>
  <meta name="description" content="Sakura不動産は、上質な住まいをご提案する不動産会社です。賃貸・売買物件を豊富に取り揃えております。">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;600&family=Outfit:wght@300;400;500;600&family=Tenor+Sans&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>

  <!-- ========== Header ========== -->
  <header class="header">
    <div class="header__inner">
      <a href="#" class="header__logo">
        <span class="header__logo-icon">&#x1F338;</span>
        <span class="header__logo-text">Sakura<span class="header__logo-accent">不動産</span></span>
      </a>
      <nav class="header__nav">
        <ul class="header__nav-list">
          <li class="header__nav-item"><a href="#featured" class="header__nav-link">おすすめ物件</a></li>
          <li class="header__nav-item"><a href="#properties" class="header__nav-link">物件一覧</a></li>
          <li class="header__nav-item"><a href="#search" class="header__nav-link">物件検索</a></li>
          <li class="header__nav-item"><a href="#about" class="header__nav-link">会社概要</a></li>
          <li class="header__nav-item"><a href="#access" class="header__nav-link">アクセス</a></li>
        </ul>
      </nav>
      <button class="header__search-btn" aria-label="検索">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/>
        </svg>
      </button>
      <button class="header__menu-btn" aria-label="メニュー">
        <span></span><span></span><span></span>
      </button>
    </div>
  </header>

  <!-- ========== Hero ========== -->
  <section class="hero">
    <div class="hero__bg">
      <img src="https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?w=2000&q=80" alt="上質な住宅外観" class="hero__bg-img">
      <div class="hero__overlay"></div>
    </div>
    <div class="hero__content">
      <p class="hero__subtitle">Sakura Real Estate</p>
      <h1 class="hero__title">理想の住まいを、<br>あなたに。</h1>
      <p class="hero__description">厳選された上質な物件を、<br class="sp-only">経験豊富なスタッフがご提案いたします。</p>
      <div class="hero__actions">
        <a href="#properties" class="hero__btn hero__btn--primary">物件を探す</a>
        <a href="#about" class="hero__btn hero__btn--secondary">詳しく見る</a>
      </div>
    </div>
  </section>

  <!-- ========== Featured Properties ========== -->
  <section class="featured" id="featured">
    <div class="container">
      <div class="section-header">
        <p class="section-header__label">Featured</p>
        <h2 class="section-header__title">おすすめ物件</h2>
        <p class="section-header__desc">スタッフが厳選した、今月の注目物件をご紹介いたします。</p>
      </div>
      <div class="featured__grid">
        <!-- Featured 1 -->
        <article class="featured-card">
          <div class="featured-card__img-wrap">
            <img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=600&q=80" alt="ガーデンテラス白金" class="featured-card__img">
            <span class="featured-card__badge featured-card__badge--new">新着</span>
          </div>
          <div class="featured-card__body">
            <h3 class="featured-card__name">ガーデンテラス白金</h3>
            <p class="featured-card__price"><span class="featured-card__price-num">12,800</span>万円</p>
            <div class="featured-card__details">
              <span class="featured-card__detail"><strong>4LDK</strong></span>
              <span class="featured-card__detail">128.5㎡</span>
              <span class="featured-card__detail">港区白金台</span>
            </div>
            <p class="featured-card__note">築3年 / 鉄筋コンクリート / 南向き</p>
          </div>
        </article>
        <!-- Featured 2 -->
        <article class="featured-card">
          <div class="featured-card__img-wrap">
            <img src="https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?w=600&q=80" alt="プレミアムレジデンス代官山" class="featured-card__img">
            <span class="featured-card__badge featured-card__badge--recommend">おすすめ</span>
          </div>
          <div class="featured-card__body">
            <h3 class="featured-card__name">プレミアムレジデンス代官山</h3>
            <p class="featured-card__price"><span class="featured-card__price-num">9,500</span>万円</p>
            <div class="featured-card__details">
              <span class="featured-card__detail"><strong>3LDK</strong></span>
              <span class="featured-card__detail">95.2㎡</span>
              <span class="featured-card__detail">渋谷区代官山</span>
            </div>
            <p class="featured-card__note">築1年 / RC造 / 角部屋</p>
          </div>
        </article>
        <!-- Featured 3 -->
        <article class="featured-card">
          <div class="featured-card__img-wrap">
            <img src="https://images.unsplash.com/photo-1600566753086-00f18fb6b3ea?w=600&q=80" alt="メゾン広尾ヒルズ" class="featured-card__img">
            <span class="featured-card__badge featured-card__badge--new">新着</span>
          </div>
          <div class="featured-card__body">
            <h3 class="featured-card__name">メゾン広尾ヒルズ</h3>
            <p class="featured-card__price"><span class="featured-card__price-num">15,200</span>万円</p>
            <div class="featured-card__details">
              <span class="featured-card__detail"><strong>5LDK</strong></span>
              <span class="featured-card__detail">156.8㎡</span>
              <span class="featured-card__detail">渋谷区広尾</span>
            </div>
            <p class="featured-card__note">新築 / 鉄骨造 / ルーフバルコニー付</p>
          </div>
        </article>
      </div>
    </div>
  </section>

  <!-- ========== Search UI ========== -->
  <section class="search" id="search">
    <div class="container">
      <div class="section-header">
        <p class="section-header__label">Search</p>
        <h2 class="section-header__title">物件検索</h2>
        <p class="section-header__desc">条件を指定して、あなたにぴったりの物件を見つけましょう。</p>
      </div>
      <div class="search__tabs">
        <button class="search__tab search__tab--active" data-tab="sale">売買</button>
        <button class="search__tab" data-tab="rent">賃貸</button>
      </div>
      <div class="search__panel">
        <div class="search__filters">
          <div class="search__filter-group">
            <label class="search__label" for="filter-area">エリア</label>
            <select class="search__select" id="filter-area">
              <option value="">エリアを選択</option>
              <option value="minato">港区</option>
              <option value="shibuya">渋谷区</option>
              <option value="shinjuku">新宿区</option>
              <option value="meguro">目黒区</option>
              <option value="setagaya">世田谷区</option>
              <option value="chiyoda">千代田区</option>
            </select>
          </div>
          <div class="search__filter-group">
            <label class="search__label" for="filter-price">価格帯</label>
            <select class="search__select" id="filter-price">
              <option value="">価格帯を選択</option>
              <option value="3000">〜3,000万円</option>
              <option value="5000">3,000〜5,000万円</option>
              <option value="8000">5,000〜8,000万円</option>
              <option value="10000">8,000〜1億円</option>
              <option value="over">1億円以上</option>
            </select>
          </div>
          <div class="search__filter-group">
            <label class="search__label" for="filter-rooms">間取り</label>
            <select class="search__select" id="filter-rooms">
              <option value="">間取りを選択</option>
              <option value="1">1K / 1DK / 1LDK</option>
              <option value="2">2K / 2DK / 2LDK</option>
              <option value="3">3K / 3DK / 3LDK</option>
              <option value="4">4LDK以上</option>
            </select>
          </div>
          <div class="search__filter-group search__filter-group--btn">
            <button class="search__btn" id="search-btn">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/>
              </svg>
              検索する
            </button>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- ========== Property List ========== -->
  <section class="properties" id="properties">
    <div class="container">
      <div class="section-header">
        <p class="section-header__label">Properties</p>
        <h2 class="section-header__title">物件一覧</h2>
        <p class="section-header__desc">最新の物件情報をお届けいたします。</p>
      </div>
      <div class="properties__grid">
        <!-- Property 1 -->
        <article class="property-card">
          <div class="property-card__img-wrap">
            <img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=600&q=80" alt="シャトー麻布" class="property-card__img">
            <span class="property-card__badge property-card__badge--new">新着</span>
          </div>
          <div class="property-card__body">
            <h3 class="property-card__name">シャトー麻布</h3>
            <p class="property-card__price"><span class="property-card__price-num">7,980</span>万円</p>
            <div class="property-card__details">
              <span class="property-card__detail"><strong>3LDK</strong></span>
              <span class="property-card__detail">85.3㎡</span>
            </div>
            <p class="property-card__location">港区麻布十番</p>
            <p class="property-card__note">築5年 / RC造 / 14階建</p>
          </div>
        </article>
        <!-- Property 2 -->
        <article class="property-card">
          <div class="property-card__img-wrap">
            <img src="https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?w=600&q=80" alt="ルミエール目黒" class="property-card__img">
            <span class="property-card__badge property-card__badge--recommend">おすすめ</span>
          </div>
          <div class="property-card__body">
            <h3 class="property-card__name">ルミエール目黒</h3>
            <p class="property-card__price"><span class="property-card__price-num">5,480</span>万円</p>
            <div class="property-card__details">
              <span class="property-card__detail"><strong>2LDK</strong></span>
              <span class="property-card__detail">68.7㎡</span>
            </div>
            <p class="property-card__location">目黒区下目黒</p>
            <p class="property-card__note">築8年 / SRC造 / 8階建</p>
          </div>
        </article>
        <!-- Property 3 -->
        <article class="property-card">
          <div class="property-card__img-wrap">
            <img src="https://images.unsplash.com/photo-1600566753086-00f18fb6b3ea?w=600&q=80" alt="パークサイド世田谷" class="property-card__img">
          </div>
          <div class="property-card__body">
            <h3 class="property-card__name">パークサイド世田谷</h3>
            <p class="property-card__price"><span class="property-card__price-num">4,280</span>万円</p>
            <div class="property-card__details">
              <span class="property-card__detail"><strong>3LDK</strong></span>
              <span class="property-card__detail">72.1㎡</span>
            </div>
            <p class="property-card__location">世田谷区三軒茶屋</p>
            <p class="property-card__note">築10年 / RC造 / 6階建</p>
          </div>
        </article>
        <!-- Property 4 -->
        <article class="property-card">
          <div class="property-card__img-wrap">
            <img src="https://images.unsplash.com/photo-1600585154526-990dced4db0d?w=600&q=80" alt="グランヴィラ新宿御苑" class="property-card__img">
            <span class="property-card__badge property-card__badge--new">新着</span>
          </div>
          <div class="property-card__body">
            <h3 class="property-card__name">グランヴィラ新宿御苑</h3>
            <p class="property-card__price"><span class="property-card__price-num">6,350</span>万円</p>
            <div class="property-card__details">
              <span class="property-card__detail"><strong>2LDK</strong></span>
              <span class="property-card__detail">75.4㎡</span>
            </div>
            <p class="property-card__location">新宿区新宿御苑</p>
            <p class="property-card__note">築2年 / RC造 / 20階建</p>
          </div>
        </article>
        <!-- Property 5 -->
        <article class="property-card">
          <div class="property-card__img-wrap">
            <img src="https://images.unsplash.com/photo-1512917774080-9991f1c4c750?w=600&q=80" alt="ブリーズコート千代田" class="property-card__img">
            <span class="property-card__badge property-card__badge--recommend">おすすめ</span>
          </div>
          <div class="property-card__body">
            <h3 class="property-card__name">ブリーズコート千代田</h3>
            <p class="property-card__price"><span class="property-card__price-num">11,500</span>万円</p>
            <div class="property-card__details">
              <span class="property-card__detail"><strong>4LDK</strong></span>
              <span class="property-card__detail">110.2㎡</span>
            </div>
            <p class="property-card__location">千代田区番町</p>
            <p class="property-card__note">築1年 / SRC造 / 角部屋</p>
          </div>
        </article>
        <!-- Property 6 -->
        <article class="property-card">
          <div class="property-card__img-wrap">
            <img src="https://images.unsplash.com/photo-1502672260266-1c1ef2d93688?w=600&q=80" alt="アーバンフラット渋谷" class="property-card__img">
          </div>
          <div class="property-card__body">
            <h3 class="property-card__name">アーバンフラット渋谷</h3>
            <p class="property-card__price"><span class="property-card__price-num">3,980</span>万円</p>
            <div class="property-card__details">
              <span class="property-card__detail"><strong>1LDK</strong></span>
              <span class="property-card__detail">45.6㎡</span>
            </div>
            <p class="property-card__location">渋谷区神南</p>
            <p class="property-card__note">築12年 / RC造 / リノベ済</p>
          </div>
        </article>
      </div>
      <div class="properties__more">
        <a href="#" class="properties__more-btn">もっと見る</a>
      </div>
    </div>
  </section>

  <!-- ========== About ========== -->
  <section class="about" id="about">
    <div class="container">
      <div class="about__inner">
        <div class="about__text">
          <p class="section-header__label">About Us</p>
          <h2 class="section-header__title">私たちの想い</h2>
          <p class="about__philosophy">
            Sakura不動産は、「住まいは人生を彩る舞台」という信念のもと、
            お客様一人ひとりのライフスタイルに寄り添った物件をご提案してまいりました。
          </p>
          <p class="about__description">
            創業以来20年以上にわたり、都内を中心に厳選した物件のみをお取り扱いしております。
            経験豊富なスタッフが、物件のご紹介から契約、アフターフォローまで一貫してサポートいたします。
            お客様にとっての「理想の住まい」を見つけるお手伝いを、私たちにお任せください。
          </p>
          <div class="about__stats">
            <div class="about__stat">
              <span class="about__stat-num">2,500+</span>
              <span class="about__stat-label">取扱物件数</span>
            </div>
            <div class="about__stat">
              <span class="about__stat-num">98.5%</span>
              <span class="about__stat-label">顧客満足度</span>
            </div>
            <div class="about__stat">
              <span class="about__stat-num">20年+</span>
              <span class="about__stat-label">業界実績</span>
            </div>
          </div>
        </div>
        <div class="about__visual">
          <div class="about__visual-block"></div>
        </div>
      </div>
    </div>
  </section>

  <!-- ========== Access ========== -->
  <section class="access" id="access">
    <div class="container">
      <div class="section-header">
        <p class="section-header__label">Access</p>
        <h2 class="section-header__title">アクセス</h2>
      </div>
      <div class="access__inner">
        <div class="access__info">
          <dl class="access__list">
            <div class="access__item">
              <dt class="access__term">会社名</dt>
              <dd class="access__desc">株式会社 Sakura不動産</dd>
            </div>
            <div class="access__item">
              <dt class="access__term">所在地</dt>
              <dd class="access__desc">〒106-0047<br>東京都港区南麻布3-1-15 Sakuraビル 2F</dd>
            </div>
            <div class="access__item">
              <dt class="access__term">電話番号</dt>
              <dd class="access__desc">03-1234-5678</dd>
            </div>
            <div class="access__item">
              <dt class="access__term">営業時間</dt>
              <dd class="access__desc">10:00〜19:00（水曜定休）</dd>
            </div>
            <div class="access__item">
              <dt class="access__term">最寄駅</dt>
              <dd class="access__desc">東京メトロ南北線「白金高輪駅」徒歩5分</dd>
            </div>
          </dl>
        </div>
        <div class="access__map">
          <div class="access__map-placeholder">
            <p>Google Map はこちらに表示されます</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- ========== Footer ========== -->
  <footer class="footer">
    <div class="container">
      <div class="footer__inner">
        <div class="footer__brand">
          <span class="footer__logo">Sakura<span class="footer__logo-accent">不動産</span></span>
          <p class="footer__tagline">理想の住まいを、あなたに。</p>
        </div>
        <div class="footer__links">
          <div class="footer__link-group">
            <h4 class="footer__link-title">物件情報</h4>
            <ul class="footer__link-list">
              <li><a href="#">売買物件</a></li>
              <li><a href="#">賃貸物件</a></li>
              <li><a href="#">新着物件</a></li>
              <li><a href="#">おすすめ物件</a></li>
            </ul>
          </div>
          <div class="footer__link-group">
            <h4 class="footer__link-title">サービス</h4>
            <ul class="footer__link-list">
              <li><a href="#">物件査定</a></li>
              <li><a href="#">住宅ローン相談</a></li>
              <li><a href="#">リノベーション</a></li>
              <li><a href="#">管理・運用</a></li>
            </ul>
          </div>
          <div class="footer__link-group">
            <h4 class="footer__link-title">企業情報</h4>
            <ul class="footer__link-list">
              <li><a href="#">会社概要</a></li>
              <li><a href="#">採用情報</a></li>
              <li><a href="#">プライバシーポリシー</a></li>
              <li><a href="#">お問い合わせ</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="footer__bottom">
        <p class="footer__copyright">&copy; 2024 Sakura不動産 All rights reserved.</p>
      </div>
    </div>
  </footer>

  <script src="js/script.js"></script>
</body>
</html>

Self Check

0 / 8

Submit

Discord #提出-corporate チャンネルに以下を投稿

  1. 1デプロイURL
  2. 2GitHubリポジトリURL
  3. 3工夫した点3つ
  4. 4クライアントへの提案メッセージ案

Freelance Value

地域不動産会社サイト・物件紹介LP。相場：200,000〜400,000円

企業・コーポレート系の他の課題を見る