NWA Coding Lab
E03🛒EC・通販系中級

HOME LIVING

家具/インテリアEC

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

Client Brief

木

木村 陽子ECマネージャー

HOME LIVING株式会社

件名: 新規制作のご依頼

北欧家具を中心に扱うインテリアEC。商品ページのレビュー機能と関連商品表示を強化して、単品購入額と滞在時間を上げたい。

ご要望

  • 1レビュー星評価の表示
  • 2関連商品のレコメンド表示
  • 3在庫ステータス表示
  • 4大判写真で商品の質感を伝える

予算

¥280,000

納期

1ヶ月

種別

新規制作

クライアントの人柄

インテリア好き、暮らしの質感にこだわる、北欧デザイン信奉

避けてほしいこと

安っぽいECサイト感派手なセール表示情報過多

成功指標

商品ページの滞在時間を2倍に、関連商品クリック率15%以上

追加メモ

"無印良品やActusのような、暮らしの質感が伝わるサイトが理想です。"

Preview

フル画面で開く →
/demo/E03-home-living/index.html

Learning Points

1

レビュー星評価

2

関連商品

3

在庫表示

4

高品質画像配置

How to Build

01

Step 1: 商品ページ設計

40分

ギャラリー＋スペック表＋レビュー＋関連商品の構成を設計。

成果物: ページ構成図

02

Step 2: HTML構造

90分

商品セクション（画像＋情報）→レビュー→関連商品→フッター。

成果物: 完全なHTML

03

Step 3: ナチュラル配色

90分

オフホワイト×ウッド色。商品画像のレイアウト、スペックテーブル。

成果物: ビジュアル完成

04

Step 4: レビュー＋関連商品

120分

星評価のスタイリング、レビューカード、関連商品4カラムGrid。

成果物: ほぼ完成形

05

Step 5: レスポンシブ＋仕上げ

60分

関連商品の列数調整。サムネ切替JS。在庫表示の色分け。

成果物: 完成版

Source Code

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ash Wood Dining Table | HOME LIVING</title>
  <meta name="description" content="天然アッシュ材を使用したダイニングテーブル。北欧モダンデザインで、暮らしに温もりを。">
  <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=Playfair+Display:wght@400;500;600;700&family=Outfit:wght@300;400;500;600&family=Zen+Kaku+Gothic+New:wght@400;500&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-text">HOME LIVING</span>
      </a>
      <button class="header__menu-btn" aria-label="メニューを開く">
        <span class="header__menu-icon"></span>
      </button>
      <nav class="header__nav" aria-label="メインナビゲーション">
        <ul class="header__nav-list">
          <li class="header__nav-item"><a href="#" class="header__nav-link">Products</a></li>
          <li class="header__nav-item"><a href="#" class="header__nav-link">Coordinate</a></li>
          <li class="header__nav-item"><a href="#" class="header__nav-link">About</a></li>
          <li class="header__nav-item">
            <a href="#" class="header__nav-link header__nav-link--cart">
              Cart<span class="header__cart-count">2</span>
            </a>
          </li>
        </ul>
      </nav>
    </div>
  </header>

  <main class="main">

    <!-- ========== Breadcrumb ========== -->
    <nav class="breadcrumb" aria-label="パンくずリスト">
      <ol class="breadcrumb__list">
        <li class="breadcrumb__item"><a href="#" class="breadcrumb__link">Home</a></li>
        <li class="breadcrumb__item"><a href="#" class="breadcrumb__link">テーブル</a></li>
        <li class="breadcrumb__item breadcrumb__item--current" aria-current="page">Ash Wood Dining Table</li>
      </ol>
    </nav>

    <!-- ========== Product Section ========== -->
    <section class="product" aria-label="商品詳細">
      <div class="product__inner">

        <!-- Gallery -->
        <div class="product__gallery">
          <div class="product__main-image-wrap">
            <img
              src="https://images.unsplash.com/photo-1555041469-a586c61ea9bc?w=800&q=80"
              alt="Ash Wood Dining Table — 天然アッシュ材のダイニングテーブル全体像"
              class="product__main-image"
              id="js-main-image"
            >
          </div>
          <ul class="product__thumbs">
            <li class="product__thumb product__thumb--active">
              <img
                src="https://images.unsplash.com/photo-1555041469-a586c61ea9bc?w=200&q=80"
                alt="Ash Wood Dining Table — メイン画像"
                class="product__thumb-image"
                data-full="https://images.unsplash.com/photo-1555041469-a586c61ea9bc?w=800&q=80"
              >
            </li>
            <li class="product__thumb">
              <img
                src="https://images.unsplash.com/photo-1506439773649-6e0eb8cfb237?w=200&q=80"
                alt="Ash Wood Dining Table — 木目のディテール"
                class="product__thumb-image"
                data-full="https://images.unsplash.com/photo-1506439773649-6e0eb8cfb237?w=800&q=80"
              >
            </li>
            <li class="product__thumb">
              <img
                src="https://images.unsplash.com/photo-1524758631624-e2822e304c36?w=200&q=80"
                alt="Ash Wood Dining Table — インテリアコーディネート例"
                class="product__thumb-image"
                data-full="https://images.unsplash.com/photo-1524758631624-e2822e304c36?w=800&q=80"
              >
            </li>
            <li class="product__thumb">
              <img
                src="https://images.unsplash.com/photo-1556228453-efd6c1ff04f6?w=200&q=80"
                alt="Ash Wood Dining Table — 部屋に設置したイメージ"
                class="product__thumb-image"
                data-full="https://images.unsplash.com/photo-1556228453-efd6c1ff04f6?w=800&q=80"
              >
            </li>
          </ul>
        </div>

        <!-- Product Info -->
        <div class="product__info">
          <p class="product__category">Dining Table</p>
          <h1 class="product__name">Ash Wood Dining Table</h1>
          <p class="product__name-jp">アッシュウッド ダイニングテーブル</p>

          <div class="product__price-area">
            <p class="product__price">&yen;89,800<span class="product__price-tax">（税込）</span></p>
          </div>

          <div class="product__stock">
            <span class="product__stock-dot"></span>
            <span class="product__stock-text">在庫あり</span>
          </div>

          <p class="product__description">
            北欧の森から届いた天然アッシュ材を贅沢に使用したダイニングテーブル。
            木目の美しさと滑らかな手触りが、毎日の食卓に温もりを添えます。
            シンプルながらも存在感のあるデザインは、どんなインテリアにも調和します。
            4人掛けにちょうど良いサイズ感で、家族の団欒を優しく包み込みます。
          </p>

          <div class="product__actions">
            <div class="product__quantity">
              <label for="quantity" class="product__quantity-label">数量</label>
              <select id="quantity" class="product__quantity-select">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
              </select>
            </div>
            <button class="product__cart-btn" type="button">カートに入れる</button>
            <button class="product__fav-btn" type="button" aria-label="お気に入りに追加">&#9825;</button>
          </div>

          <!-- Specs Table -->
          <table class="product__specs">
            <caption class="product__specs-caption">商品仕様</caption>
            <tbody>
              <tr class="product__specs-row">
                <th class="product__specs-label">素材</th>
                <td class="product__specs-value">天然アッシュ材（無垢材）</td>
              </tr>
              <tr class="product__specs-row">
                <th class="product__specs-label">仕上げ</th>
                <td class="product__specs-value">オイル仕上げ（自然塗料）</td>
              </tr>
              <tr class="product__specs-row">
                <th class="product__specs-label">サイズ</th>
                <td class="product__specs-value">W1400 × D800 × H720 mm</td>
              </tr>
              <tr class="product__specs-row">
                <th class="product__specs-label">重量</th>
                <td class="product__specs-value">約25kg</td>
              </tr>
              <tr class="product__specs-row">
                <th class="product__specs-label">耐荷重</th>
                <td class="product__specs-value">約80kg</td>
              </tr>
              <tr class="product__specs-row">
                <th class="product__specs-label">生産国</th>
                <td class="product__specs-value">日本</td>
              </tr>
              <tr class="product__specs-row">
                <th class="product__specs-label">配送</th>
                <td class="product__specs-value">大型家具便（組立不要・完成品）</td>
              </tr>
            </tbody>
          </table>
        </div>

      </div>
    </section>

    <!-- ========== Reviews Section ========== -->
    <section class="reviews" aria-label="カスタマーレビュー">
      <div class="reviews__inner">
        <h2 class="reviews__heading">Customer Reviews</h2>
        <p class="reviews__summary">
          <span class="reviews__stars" aria-label="平均評価 4.3">★★★★☆</span>
          <span class="reviews__average">4.3</span>
          <span class="reviews__count">（12件のレビュー）</span>
        </p>

        <div class="reviews__list">

          <!-- Review 1 -->
          <article class="review-card">
            <div class="review-card__header">
              <span class="review-card__stars" aria-label="評価 5">★★★★★</span>
              <time class="review-card__date" datetime="2026-03-15">2026.03.15</time>
            </div>
            <h3 class="review-card__title">想像以上の質感でした</h3>
            <p class="review-card__comment">
              写真で見た印象よりもずっと木目が美しく、触り心地も最高です。
              家族4人で使っていますが、サイズ感もぴったり。
              オイル仕上げなので手入れも簡単で、毎日の食事が楽しみになりました。
            </p>
            <p class="review-card__reviewer">
              <span class="review-card__name">田中 美咲</span>
              <span class="review-card__badge">購入済み</span>
            </p>
          </article>

          <!-- Review 2 -->
          <article class="review-card">
            <div class="review-card__header">
              <span class="review-card__stars" aria-label="評価 4">★★★★☆</span>
              <time class="review-card__date" datetime="2026-02-28">2026.02.28</time>
            </div>
            <h3 class="review-card__title">北欧インテリアにぴったり</h3>
            <p class="review-card__comment">
              ずっと探していた理想のダイニングテーブルに出会えました。
              シンプルなデザインが他の家具とも合わせやすく、部屋全体の雰囲気が格上げされました。
              配送も丁寧で、完成品で届くのは本当に助かります。
            </p>
            <p class="review-card__reviewer">
              <span class="review-card__name">佐藤 健一</span>
              <span class="review-card__badge">購入済み</span>
            </p>
          </article>

          <!-- Review 3 -->
          <article class="review-card">
            <div class="review-card__header">
              <span class="review-card__stars" aria-label="評価 4">★★★★☆</span>
              <time class="review-card__date" datetime="2026-01-10">2026.01.10</time>
            </div>
            <h3 class="review-card__title">長く使えそうな一品</h3>
            <p class="review-card__comment">
              無垢材のしっかりとした作りで、長く愛用できそうです。
              強いて言えば、もう少し軽いと移動が楽なのですが、その分安定感があるので安心。
              価格以上の価値を感じています。
            </p>
            <p class="review-card__reviewer">
              <span class="review-card__name">山本 あゆみ</span>
              <span class="review-card__badge">購入済み</span>
            </p>
          </article>

        </div>
      </div>
    </section>

    <!-- ========== Related Products ========== -->
    <section class="related" aria-label="関連商品">
      <div class="related__inner">
        <h2 class="related__heading">この商品を見た人はこちらも</h2>

        <div class="related__grid">

          <article class="product-card">
            <a href="#" class="product-card__link">
              <div class="product-card__image-wrap">
                <img
                  src="https://images.unsplash.com/photo-1555041469-a586c61ea9bc?w=400&q=80"
                  alt="Oak Round Coffee Table — オーク材のラウンドコーヒーテーブル"
                  class="product-card__image"
                >
              </div>
              <div class="product-card__body">
                <h3 class="product-card__name">Oak Round Coffee Table</h3>
                <p class="product-card__price">&yen;45,800</p>
              </div>
            </a>
          </article>

          <article class="product-card">
            <a href="#" class="product-card__link">
              <div class="product-card__image-wrap">
                <img
                  src="https://images.unsplash.com/photo-1506439773649-6e0eb8cfb237?w=400&q=80"
                  alt="Walnut Bookshelf — ウォールナットのブックシェルフ"
                  class="product-card__image"
                >
              </div>
              <div class="product-card__body">
                <h3 class="product-card__name">Walnut Bookshelf</h3>
                <p class="product-card__price">&yen;67,200</p>
              </div>
            </a>
          </article>

          <article class="product-card">
            <a href="#" class="product-card__link">
              <div class="product-card__image-wrap">
                <img
                  src="https://images.unsplash.com/photo-1524758631624-e2822e304c36?w=400&q=80"
                  alt="Linen Dining Chair — リネンダイニングチェア"
                  class="product-card__image"
                >
              </div>
              <div class="product-card__body">
                <h3 class="product-card__name">Linen Dining Chair</h3>
                <p class="product-card__price">&yen;34,500</p>
              </div>
            </a>
          </article>

          <article class="product-card">
            <a href="#" class="product-card__link">
              <div class="product-card__image-wrap">
                <img
                  src="https://images.unsplash.com/photo-1556228453-efd6c1ff04f6?w=400&q=80"
                  alt="Ceramic Table Lamp — セラミックテーブルランプ"
                  class="product-card__image"
                >
              </div>
              <div class="product-card__body">
                <h3 class="product-card__name">Ceramic Table Lamp</h3>
                <p class="product-card__price">&yen;18,900</p>
              </div>
            </a>
          </article>

        </div>
      </div>
    </section>

  </main>

  <!-- ========== Footer ========== -->
  <footer class="footer">
    <div class="footer__inner">
      <div class="footer__top">
        <div class="footer__brand">
          <p class="footer__logo">HOME LIVING</p>
          <p class="footer__tagline">Nordic modern. Texture of living.</p>
        </div>
        <div class="footer__links">
          <div class="footer__col">
            <h3 class="footer__col-title">Shop</h3>
            <ul class="footer__col-list">
              <li><a href="#" class="footer__col-link">テーブル</a></li>
              <li><a href="#" class="footer__col-link">チェア</a></li>
              <li><a href="#" class="footer__col-link">ソファ</a></li>
              <li><a href="#" class="footer__col-link">収納</a></li>
            </ul>
          </div>
          <div class="footer__col">
            <h3 class="footer__col-title">Support</h3>
            <ul class="footer__col-list">
              <li><a href="#" class="footer__col-link">配送について</a></li>
              <li><a href="#" class="footer__col-link">返品・交換</a></li>
              <li><a href="#" class="footer__col-link">お問い合わせ</a></li>
              <li><a href="#" class="footer__col-link">FAQ</a></li>
            </ul>
          </div>
          <div class="footer__col">
            <h3 class="footer__col-title">Company</h3>
            <ul class="footer__col-list">
              <li><a href="#" class="footer__col-link">ブランドストーリー</a></li>
              <li><a href="#" class="footer__col-link">店舗一覧</a></li>
              <li><a href="#" class="footer__col-link">採用情報</a></li>
              <li><a href="#" class="footer__col-link">プライバシーポリシー</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="footer__bottom">
        <p class="footer__copyright">&copy; 2026 HOME LIVING. All rights reserved.</p>
      </div>
    </div>
  </footer>

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

Self Check

0 / 8

Submit

Discord #提出-ec チャンネルに投稿

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

Freelance Value

インテリア・雑貨EC。相場：150,000〜350,000円

EC・通販系の他の課題を見る