E02🛒EC・通販系中級

Forest Tea

お茶通販 / トップページ

想定時間12h

技術HTML / CSS / JS

完成形を見るソースコードを見る

Client Brief

林

林清志代表取締役

Forest Tea株式会社

件名: リニューアルのご依頼

静岡の茶農家が直営するお茶の通販サイト。既存サイトが古く、お茶の魅力が伝わっていない。高級茶のブランディングを強化したい。

ご要望

1茶葉の種類別にカテゴリ分け表示
2おすすめ商品のフィーチャード表示
3和の静謐な世界観
4メルマガ登録フォーム

予算

¥250,000

納期

1ヶ月

種別

リニューアル

クライアントの人柄

茶道の心得がある、品質至上主義、日本文化への深い敬意

避けてほしいこと

安売り感派手な装飾洋風すぎるデザイン

成功指標

月間EC売上を現状の2倍に

追加メモ

"お茶を飲む静かな時間を、サイトからも感じてもらいたい。抹茶の深い緑と生成りで。"

Preview

フル画面で開く →

/demo/E02-forest-tea/index.html

Learning Points

商品グリッド

カテゴリタブ

おすすめ商品

和の配色

How to Build

Step 1: 商品グリッド設計

40分

6商品のカード構造とカテゴリタブの切替仕様を設計。

成果物: グリッド・タブ設計書

Step 2: HTML構造

90分

ヒーロー→カテゴリタブ→商品グリッド→おすすめ→メルマガ→フッター。

成果物: 完全なHTML

Step 3: 和風配色＋タイポ

90分

抹茶×生成り配色、Noto Serif JP見出し、商品カードレイアウト。

成果物: ビジュアル完成

Step 4: タブ切替JS

60分

カテゴリタブのクリックで商品のフィルタ表示（activeクラス切替）。

成果物: インタラクション完成

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

60分

グリッド列数調整、タブの横スクロール対応。

成果物: 完成版

Source Code

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Forest Tea | 森から届く、一杯の静けさ。</title>
  <meta name="description" content="Forest Tea — 日本各地の厳選茶葉をお届けする、プレミアム日本茶の通販サイト。煎茶、抹茶、ほうじ茶、玉露を取り揃えています。">
  <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;700&family=Plus+Jakarta+Sans: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-mark">🍃</span>
        <span class="header__logo-text">Forest Tea</span>
      </a>
      <nav class="header__nav" aria-label="メインナビゲーション">
        <ul class="header__nav-list">
          <li class="header__nav-item"><a href="#products" class="header__nav-link">お茶一覧</a></li>
          <li class="header__nav-item"><a href="#" class="header__nav-link">ギフト</a></li>
          <li class="header__nav-item"><a href="#" class="header__nav-link">読みもの</a></li>
          <li class="header__nav-item"><a href="#" class="header__nav-link header__nav-link--cart">カート<span class="header__cart-count">0</span></a></li>
        </ul>
      </nav>
      <button class="header__menu-btn" aria-label="メニューを開く" aria-expanded="false">
        <span class="header__menu-icon"></span>
      </button>
    </div>
  </header>

  <!-- ========== Hero ========== -->
  <section class="hero">
    <div class="hero__bg">
      <img
        src="https://images.unsplash.com/photo-1556881286-fc6915169721?w=2000&q=80"
        alt="朝霧に包まれた日本の茶畑の風景"
        class="hero__bg-image"
      >
    </div>
    <div class="hero__overlay"></div>
    <div class="hero__content">
      <h1 class="hero__tagline">森から届く、一杯の静けさ。</h1>
      <p class="hero__sub">厳選された日本茶を、産地から直接あなたのもとへ。</p>
      <a href="#products" class="hero__cta">お茶を探す</a>
    </div>
  </section>

  <!-- ========== Products ========== -->
  <section class="products" id="products">
    <div class="products__inner">
      <div class="products__header">
        <h2 class="products__title">お茶一覧</h2>
        <p class="products__subtitle">日本各地から届く、選び抜かれた茶葉たち</p>
      </div>

      <!-- Category Tabs -->
      <div class="category-tabs" role="tablist" aria-label="茶葉カテゴリ">
        <button class="category-tabs__btn category-tabs__btn--active" role="tab" aria-selected="true" data-category="all">すべて</button>
        <button class="category-tabs__btn" role="tab" aria-selected="false" data-category="sencha">煎茶</button>
        <button class="category-tabs__btn" role="tab" aria-selected="false" data-category="matcha">抹茶</button>
        <button class="category-tabs__btn" role="tab" aria-selected="false" data-category="hojicha">ほうじ茶</button>
        <button class="category-tabs__btn" role="tab" aria-selected="false" data-category="gyokuro">玉露</button>
      </div>

      <!-- Product Grid -->
      <div class="product-grid" role="tabpanel">
        <article class="product-card" data-category="sencha">
          <div class="product-card__image-wrap">
            <img
              src="https://images.unsplash.com/photo-1564890369478-c89ca6d9cde9?w=400&q=80"
              alt="深蒸し煎茶 霧の雫のパッケージと茶葉"
              class="product-card__image"
            >
          </div>
          <div class="product-card__body">
            <h3 class="product-card__name">深蒸し煎茶 霧の雫</h3>
            <p class="product-card__desc">静岡県牧之原産。深い蒸しで引き出された濃厚な旨味と甘み。</p>
            <div class="product-card__meta">
              <span class="product-card__price">&yen;1,620</span>
              <span class="product-card__weight">100g</span>
            </div>
          </div>
        </article>

        <article class="product-card" data-category="matcha">
          <div class="product-card__image-wrap">
            <img
              src="https://images.unsplash.com/photo-1515823064-d6e0c04616a7?w=400&q=80"
              alt="有機抹茶 翠の峰の鮮やかな緑色"
              class="product-card__image"
            >
          </div>
          <div class="product-card__body">
            <h3 class="product-card__name">有機抹茶 翠の峰</h3>
            <p class="product-card__desc">京都宇治産の有機栽培抹茶。鮮やかな緑と豊かな香り。</p>
            <div class="product-card__meta">
              <span class="product-card__price">&yen;2,160</span>
              <span class="product-card__weight">30g</span>
            </div>
          </div>
        </article>

        <article class="product-card" data-category="hojicha">
          <div class="product-card__image-wrap">
            <img
              src="https://images.unsplash.com/photo-1597481499750-3e6b22637e12?w=400&q=80"
              alt="ほうじ茶 焙じ香の茶葉"
              class="product-card__image"
            >
          </div>
          <div class="product-card__body">
            <h3 class="product-card__name">ほうじ茶 焙じ香</h3>
            <p class="product-card__desc">加賀棒茶の伝統製法。芳ばしい香りとすっきりとした後味。</p>
            <div class="product-card__meta">
              <span class="product-card__price">&yen;1,080</span>
              <span class="product-card__weight">80g</span>
            </div>
          </div>
        </article>

        <article class="product-card" data-category="gyokuro">
          <div class="product-card__image-wrap">
            <img
              src="https://images.unsplash.com/photo-1544787219-7f47ccb76574?w=400&q=80"
              alt="玉露 朝露の茶碗に注がれた様子"
              class="product-card__image"
            >
          </div>
          <div class="product-card__body">
            <h3 class="product-card__name">玉露 朝露</h3>
            <p class="product-card__desc">福岡県八女産の最高級玉露。覆い香と深い甘みが特徴。</p>
            <div class="product-card__meta">
              <span class="product-card__price">&yen;3,240</span>
              <span class="product-card__weight">50g</span>
            </div>
          </div>
        </article>

        <article class="product-card" data-category="sencha">
          <div class="product-card__image-wrap">
            <img
              src="https://images.unsplash.com/photo-1563822249366-3efb23b8e0c9?w=400&q=80"
              alt="かぶせ煎茶 山翠の急須と茶葉"
              class="product-card__image"
            >
          </div>
          <div class="product-card__body">
            <h3 class="product-card__name">かぶせ煎茶 山翠</h3>
            <p class="product-card__desc">三重県産のかぶせ茶。被覆栽培による上品な旨味と鮮やかな水色。</p>
            <div class="product-card__meta">
              <span class="product-card__price">&yen;1,944</span>
              <span class="product-card__weight">80g</span>
            </div>
          </div>
        </article>

        <article class="product-card" data-category="hojicha">
          <div class="product-card__image-wrap">
            <img
              src="https://images.unsplash.com/photo-1571934811356-5cc061b6821f?w=400&q=80"
              alt="白折ほうじ茶 茎の薫りの茶葉"
              class="product-card__image"
            >
          </div>
          <div class="product-card__body">
            <h3 class="product-card__name">白折ほうじ茶 茎の薫り</h3>
            <p class="product-card__desc">茎を丁寧に焙じた一品。まろやかで優しい甘みが広がります。</p>
            <div class="product-card__meta">
              <span class="product-card__price">&yen;972</span>
              <span class="product-card__weight">100g</span>
            </div>
          </div>
        </article>
      </div>
    </div>
  </section>

  <!-- ========== Featured Product ========== -->
  <section class="featured" id="featured">
    <div class="featured__inner">
      <div class="featured__image-wrap">
        <img
          src="https://images.unsplash.com/photo-1556881286-fc6915169721?w=800&q=80"
          alt="今月のおすすめ商品 特選玉露 月の雫のイメージ"
          class="featured__image"
        >
      </div>
      <div class="featured__content">
        <span class="featured__label">今月のおすすめ</span>
        <h2 class="featured__name">特選玉露 月の雫</h2>
        <p class="featured__story">
          福岡県八女の奥深い山間、朝霧が茶畑を包み込む早朝。
          二十日以上の被覆栽培で育てられた茶葉は、
          海苔のような覆い香と、舌の上でとろけるような甘みを湛えています。
        </p>
        <p class="featured__story">
          一煎目は40度のぬるま湯で、じっくり二分。
          玉露本来の旨味を最大限に引き出す、特別な一杯をお楽しみください。
        </p>
        <div class="featured__meta">
          <span class="featured__price">&yen;5,400</span>
          <span class="featured__weight">50g 木箱入り</span>
        </div>
        <a href="#" class="featured__cta">詳しく見る</a>
      </div>
    </div>
  </section>

  <!-- ========== Newsletter ========== -->
  <section class="newsletter">
    <div class="newsletter__inner">
      <h2 class="newsletter__title">お茶の便りを受け取る</h2>
      <p class="newsletter__desc">
        新茶の入荷情報や、季節のお茶の楽しみ方をお届けします。
      </p>
      <form class="newsletter__form" action="#" method="post">
        <label for="newsletter-email" class="visually-hidden">メールアドレス</label>
        <input
          type="email"
          id="newsletter-email"
          class="newsletter__input"
          placeholder="メールアドレスを入力"
          required
          autocomplete="email"
        >
        <button type="submit" class="newsletter__btn">登録する</button>
      </form>
    </div>
  </section>

  <!-- ========== Footer ========== -->
  <footer class="footer">
    <div class="footer__inner">
      <div class="footer__brand">
        <span class="footer__logo">🍃 Forest Tea</span>
        <p class="footer__tagline">森から届く、一杯の静けさ。</p>
      </div>
      <nav class="footer__nav" aria-label="フッターナビゲーション">
        <ul class="footer__nav-list">
          <li><a href="#" class="footer__nav-link">お茶一覧</a></li>
          <li><a href="#" class="footer__nav-link">ギフト</a></li>
          <li><a href="#" class="footer__nav-link">読みもの</a></li>
          <li><a href="#" class="footer__nav-link">会社概要</a></li>
          <li><a href="#" class="footer__nav-link">特定商取引法</a></li>
          <li><a href="#" class="footer__nav-link">プライバシーポリシー</a></li>
        </ul>
      </nav>
      <div class="footer__sns">
        <a href="#" class="footer__sns-link" aria-label="Instagram">Instagram</a>
        <a href="#" class="footer__sns-link" aria-label="X (Twitter)">X</a>
        <a href="#" class="footer__sns-link" aria-label="LINE">LINE</a>
      </div>
      <p class="footer__copyright">&copy; 2026 Forest Tea. All rights reserved.</p>
    </div>
  </footer>

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

Self Check

0 / 8

Submit

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

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

Freelance Value

食品・飲料系ECサイトのフロント。相場：150,000〜300,000円

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