E05🛒EC・通販系上級
Craft Beer Box

サブスクEC
想定時間20h
技術HTML / CSS / JS
完成形を見るソースコードを見る
Client Brief

中
中田健太CEO
Craft Beer Box株式会社
件名: 新規制作のご依頼
世界中のクラフトビールを毎月届けるサブスクサービス。ローンチに合わせて、プラン比較と申込導線が明確なLPが必要。
ご要望

13プランの明確な比較表示
2サブスク申込フロー（How It Works）
3今月のビール紹介
4信頼性指標（登録者数、満足度）
5解約ポリシーの明示
予算
¥450,000
納期
2ヶ月
種別
新規制作
クライアントの人柄

ビール愛が強い、アメリカンカルチャー好き、マーケティング感度高い
避けてほしいこと

堅すぎる企業サイト感日本的な控えめデザイン上品すぎるトーン
成功指標

ローンチ3ヶ月で有料会員1000名獲得
追加メモ
"BrewDogみたいな、太いフォントとレトロなアメリカン感で攻めたい。ビールの楽しさが伝わるデザインで。"
Preview

フル画面で開く →
/demo/E05-craft-beer-box/index.html
Learning Points

プラン比較表
サブスクUI
プログレスバー
解約導線
How to Build

Step 1: サブスクUI設計

60分
3プラン比較カードの情報設計、How It Worksの3ステップ、信頼指標の配置を計画。
成果物: UI設計書
Step 2: HTML構造

120分
ヒーロー→How It Works→プラン比較→今月のビール→信頼指標→FAQ→解約→CTA→フッター。
成果物: 完全なHTML
Step 3: レトロCSS

120分
濃褐×ホップグリーン配色、Big Shoulders Display極太見出し。太罫線、プランカード。
成果物: ビジュアル完成
Step 4: JS機能

90分
プラン選択インタラクション、FAQアコーディオン、カウンターアニメーション。
成果物: インタラクション完成
Step 5: レスポンシブ＋仕上げ

90分
プランカードの1カラム化、モバイルハンバーガー、進捗バー調整。
成果物: 完成版
Source Code

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CRAFT BEER BOX — 毎月届く、世界のクラフトビール。</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=Big+Shoulders+Display:wght@400;600;700;800;900&family=Sora:wght@300;400;500;600&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>

  <!-- ========== HEADER ========== -->
  <header class="header">
    <div class="header__inner container">
      <a href="#" class="header__logo">
        <span class="header__logo-text">CRAFT BEER BOX</span>
      </a>
      <button class="header__menu-btn" aria-label="メニューを開く" aria-expanded="false">
        <span class="header__menu-bar"></span>
        <span class="header__menu-bar"></span>
        <span class="header__menu-bar"></span>
      </button>
      <nav class="header__nav" aria-label="メインナビゲーション">
        <ul class="header__nav-list">
          <li class="header__nav-item"><a href="#plans" class="header__nav-link">Plans</a></li>
          <li class="header__nav-item"><a href="#how-it-works" class="header__nav-link">How It Works</a></li>
          <li class="header__nav-item"><a href="#beers" class="header__nav-link">Beers</a></li>
          <li class="header__nav-item"><a href="#faq" class="header__nav-link">FAQ</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <!-- ========== HERO ========== -->
  <section class="hero">
    <div class="hero__inner container">
      <div class="hero__content">
        <p class="hero__tagline">MONTHLY CRAFT BEER SUBSCRIPTION</p>
        <h1 class="hero__title">毎月届く、<br>世界のクラフトビール。</h1>
        <p class="hero__description">
          世界中のブルワリーから厳選した個性豊かなクラフトビールを、<br class="hero__br--desktop">
          毎月あなたのドアにお届けします。
        </p>
        <div class="hero__actions">
          <a href="#plans" class="hero__cta hero__cta--primary">プランを選ぶ</a>
          <a href="#how-it-works" class="hero__cta hero__cta--secondary">仕組みを見る</a>
        </div>
      </div>
      <div class="hero__visual">
        <img
          src="https://images.unsplash.com/photo-1535958636474-b021ee887b13?w=2000&q=80"
          alt="クラフトビールのイメージ"
          class="hero__image"
          loading="eager"
        >
      </div>
    </div>
  </section>

  <!-- ========== HOW IT WORKS ========== -->
  <section class="how-it-works" id="how-it-works">
    <div class="how-it-works__inner container">
      <p class="section-label">HOW IT WORKS</p>
      <h2 class="section-title">届くまでの3ステップ</h2>
      <div class="how-it-works__steps">
        <div class="step">
          <div class="step__number">01</div>
          <div class="step__icon">
            <svg width="48" height="48" viewBox="0 0 48 48" fill="none" aria-hidden="true">
              <rect x="8" y="12" width="32" height="24" rx="3" stroke="currentColor" stroke-width="3"/>
              <path d="M16 22L24 28L32 22" stroke="currentColor" stroke-width="3" stroke-linecap="round"/>
            </svg>
          </div>
          <h3 class="step__title">選ぶ</h3>
          <p class="step__description">3つのプランから、<br>お好みのプランを選択。</p>
        </div>
        <div class="step__connector" aria-hidden="true"></div>
        <div class="step">
          <div class="step__number">02</div>
          <div class="step__icon">
            <svg width="48" height="48" viewBox="0 0 48 48" fill="none" aria-hidden="true">
              <rect x="10" y="8" width="28" height="32" rx="3" stroke="currentColor" stroke-width="3"/>
              <line x1="16" y1="18" x2="32" y2="18" stroke="currentColor" stroke-width="3" stroke-linecap="round"/>
              <line x1="16" y1="24" x2="28" y2="24" stroke="currentColor" stroke-width="3" stroke-linecap="round"/>
              <line x1="16" y1="30" x2="24" y2="30" stroke="currentColor" stroke-width="3" stroke-linecap="round"/>
            </svg>
          </div>
          <h3 class="step__title">届く</h3>
          <p class="step__description">毎月15日前後に、<br>厳選ビールをお届け。</p>
        </div>
        <div class="step__connector" aria-hidden="true"></div>
        <div class="step">
          <div class="step__number">03</div>
          <div class="step__icon">
            <svg width="48" height="48" viewBox="0 0 48 48" fill="none" aria-hidden="true">
              <path d="M24 8C18 8 12 14 12 22C12 30 24 40 24 40C24 40 36 30 36 22C36 14 30 8 24 8Z" stroke="currentColor" stroke-width="3"/>
              <circle cx="24" cy="22" r="4" stroke="currentColor" stroke-width="3"/>
            </svg>
          </div>
          <h3 class="step__title">楽しむ</h3>
          <p class="step__description">仲間と一緒に、<br>新しいビール体験を。</p>
        </div>
      </div>
    </div>
  </section>

  <!-- ========== PLANS ========== -->
  <section class="plans" id="plans">
    <div class="plans__inner container">
      <p class="section-label">PLANS</p>
      <h2 class="section-title">あなたにぴったりのプラン</h2>
      <p class="section-subtitle">すべてのプランに送料無料・いつでも解約可能が含まれます。</p>
      <div class="plans__grid">

        <!-- Starter Plan -->
        <article class="plan-card">
          <div class="plan-card__header">
            <h3 class="plan-card__name">STARTER</h3>
            <p class="plan-card__bottles">3本 / 月</p>
          </div>
          <div class="plan-card__pricing">
            <span class="plan-card__price">¥2,980</span>
            <span class="plan-card__period">/ 月（税込）</span>
          </div>
          <p class="plan-card__description">クラフトビール初心者に最適。毎月3本の厳選ビールで、新しい味覚の冒険を始めよう。</p>
          <ul class="plan-card__features">
            <li class="plan-card__feature">厳選クラフトビール 3本</li>
            <li class="plan-card__feature">テイスティングノート付き</li>
            <li class="plan-card__feature">送料無料</li>
            <li class="plan-card__feature">いつでも解約OK</li>
          </ul>
          <a href="#" class="plan-card__cta">このプランを選ぶ</a>
        </article>

        <!-- Standard Plan (Recommended) -->
        <article class="plan-card plan-card--recommended">
          <div class="plan-card__badge">MOST POPULAR</div>
          <div class="plan-card__header">
            <h3 class="plan-card__name">STANDARD</h3>
            <p class="plan-card__bottles">6本 / 月</p>
          </div>
          <div class="plan-card__pricing">
            <span class="plan-card__price">¥4,980</span>
            <span class="plan-card__period">/ 月（税込）</span>
          </div>
          <p class="plan-card__description">一番人気のプラン。バラエティ豊かな6本で、週末のビールタイムがもっと楽しくなる。</p>
          <ul class="plan-card__features">
            <li class="plan-card__feature">厳選クラフトビール 6本</li>
            <li class="plan-card__feature">テイスティングノート付き</li>
            <li class="plan-card__feature">限定ビール優先アクセス</li>
            <li class="plan-card__feature">送料無料</li>
            <li class="plan-card__feature">いつでも解約OK</li>
          </ul>
          <a href="#" class="plan-card__cta">このプランを選ぶ</a>
        </article>

        <!-- Premium Plan -->
        <article class="plan-card">
          <div class="plan-card__header">
            <h3 class="plan-card__name">PREMIUM</h3>
            <p class="plan-card__bottles">12本 / 月</p>
          </div>
          <div class="plan-card__pricing">
            <span class="plan-card__price">¥8,980</span>
            <span class="plan-card__period">/ 月（税込）</span>
          </div>
          <p class="plan-card__description">ビール愛好家のための究極プラン。12本の多彩なラインナップで、毎日が発見の連続。</p>
          <ul class="plan-card__features">
            <li class="plan-card__feature">厳選クラフトビール 12本</li>
            <li class="plan-card__feature">テイスティングノート付き</li>
            <li class="plan-card__feature">限定ビール優先アクセス</li>
            <li class="plan-card__feature">オリジナルグラス付き</li>
            <li class="plan-card__feature">送料無料</li>
            <li class="plan-card__feature">いつでも解約OK</li>
          </ul>
          <a href="#" class="plan-card__cta">このプランを選ぶ</a>
        </article>

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

  <!-- ========== THIS MONTH'S BEERS ========== -->
  <section class="beers" id="beers">
    <div class="beers__inner container">
      <p class="section-label">THIS MONTH'S SELECTION</p>
      <h2 class="section-title">今月のラインナップ</h2>
      <p class="section-subtitle">4月のテーマ：「Spring Hop Explosion — 春のホップ祭り」</p>
      <div class="beers__grid">

        <article class="beer-card">
          <div class="beer-card__image-wrapper">
            <img
              src="https://images.unsplash.com/photo-1566633806327-68e152aaf26d?w=400&q=80"
              alt="Hazy Horizon IPA"
              class="beer-card__image"
              loading="lazy"
            >
          </div>
          <div class="beer-card__details">
            <span class="beer-card__style">Hazy IPA</span>
            <h3 class="beer-card__name">Hazy Horizon</h3>
            <p class="beer-card__brewery">Stone Brewing — San Diego, CA</p>
            <div class="beer-card__meta">
              <span class="beer-card__abv">ABV 6.7%</span>
              <span class="beer-card__ibu">IBU 55</span>
            </div>
          </div>
        </article>

        <article class="beer-card">
          <div class="beer-card__image-wrapper">
            <img
              src="https://images.unsplash.com/photo-1571613316887-6f8d5cbf7ef7?w=400&q=80"
              alt="Golden Wheat Ale"
              class="beer-card__image"
              loading="lazy"
            >
          </div>
          <div class="beer-card__details">
            <span class="beer-card__style">Wheat Ale</span>
            <h3 class="beer-card__name">Golden Wheat</h3>
            <p class="beer-card__brewery">志賀高原ビール — 長野県</p>
            <div class="beer-card__meta">
              <span class="beer-card__abv">ABV 5.2%</span>
              <span class="beer-card__ibu">IBU 20</span>
            </div>
          </div>
        </article>

        <article class="beer-card">
          <div class="beer-card__image-wrapper">
            <img
              src="https://images.unsplash.com/photo-1558642452-9d2a7deb7f62?w=400&q=80"
              alt="Amber Route Ale"
              class="beer-card__image"
              loading="lazy"
            >
          </div>
          <div class="beer-card__details">
            <span class="beer-card__style">Amber Ale</span>
            <h3 class="beer-card__name">Amber Route</h3>
            <p class="beer-card__brewery">BrewDog — Ellon, Scotland</p>
            <div class="beer-card__meta">
              <span class="beer-card__abv">ABV 5.8%</span>
              <span class="beer-card__ibu">IBU 35</span>
            </div>
          </div>
        </article>

        <article class="beer-card">
          <div class="beer-card__image-wrapper">
            <img
              src="https://images.unsplash.com/photo-1535958636474-b021ee887b13?w=400&q=80"
              alt="Citrus Pale Ale"
              class="beer-card__image"
              loading="lazy"
            >
          </div>
          <div class="beer-card__details">
            <span class="beer-card__style">Pale Ale</span>
            <h3 class="beer-card__name">Citrus Burst</h3>
            <p class="beer-card__brewery">Mikkeller — Copenhagen, DK</p>
            <div class="beer-card__meta">
              <span class="beer-card__abv">ABV 4.9%</span>
              <span class="beer-card__ibu">IBU 40</span>
            </div>
          </div>
        </article>

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

  <!-- ========== TRUST / PROGRESS ========== -->
  <section class="trust">
    <div class="trust__inner container">
      <p class="section-label">WHY CRAFT BEER BOX?</p>
      <h2 class="section-title">選ばれる理由</h2>
      <div class="trust__grid">
        <div class="trust__stat">
          <span class="trust__number" data-target="10000">0</span>
          <span class="trust__plus">+</span>
          <p class="trust__label">SUBSCRIBERS</p>
          <p class="trust__sublabel">定期購読者数</p>
        </div>
        <div class="trust__stat">
          <span class="trust__number" data-target="500">0</span>
          <span class="trust__plus">+</span>
          <p class="trust__label">BREWERIES</p>
          <p class="trust__sublabel">提携ブルワリー</p>
        </div>
        <div class="trust__stat">
          <span class="trust__number" data-target="50">0</span>
          <span class="trust__plus">+</span>
          <p class="trust__label">COUNTRIES</p>
          <p class="trust__sublabel">対象国</p>
        </div>
      </div>
      <div class="trust__satisfaction">
        <div class="trust__satisfaction-header">
          <span class="trust__satisfaction-title">顧客満足度</span>
          <span class="trust__satisfaction-value">94.8%</span>
        </div>
        <div class="trust__progress-bar">
          <div class="trust__progress-fill" data-width="94.8"></div>
        </div>
      </div>
    </div>
  </section>

  <!-- ========== FAQ ========== -->
  <section class="faq" id="faq">
    <div class="faq__inner container">
      <p class="section-label">FAQ</p>
      <h2 class="section-title">よくあるご質問</h2>
      <div class="faq__list">

        <details class="faq__item">
          <summary class="faq__question">配送日はいつですか？</summary>
          <div class="faq__answer">
            <p>毎月15日前後にお届けします。配送日の3日前にメールでお知らせいたします。配送業者はヤマト運輸のクール便を使用しており、日時指定も可能です。</p>
          </div>
        </details>

        <details class="faq__item">
          <summary class="faq__question">解約はいつでもできますか？</summary>
          <div class="faq__answer">
            <p>はい、いつでも解約可能です。マイページから簡単に手続きできます。次回配送日の7日前までに解約手続きを完了してください。解約金や違約金は一切かかりません。</p>
          </div>
        </details>

        <details class="faq__item">
          <summary class="faq__question">届くビールは選べますか？</summary>
          <div class="faq__answer">
            <p>基本的にはキュレーターが厳選したビールをお届けしますが、「苦手なスタイルを除外」する設定が可能です。マイページの味覚プロフィールから設定してください。</p>
          </div>
        </details>

        <details class="faq__item">
          <summary class="faq__question">プランの変更はできますか？</summary>
          <div class="faq__answer">
            <p>はい、マイページからいつでもプラン変更が可能です。変更は次回配送分から適用されます。アップグレード・ダウングレードどちらも対応しています。</p>
          </div>
        </details>

        <details class="faq__item">
          <summary class="faq__question">支払い方法は何がありますか？</summary>
          <div class="faq__answer">
            <p>クレジットカード（Visa, Mastercard, AMEX, JCB）、デビットカード、PayPayに対応しています。毎月の課金日は初回登録日と同じ日付です。</p>
          </div>
        </details>

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

  <!-- ========== CANCEL POLICY ========== -->
  <section class="cancel-policy">
    <div class="cancel-policy__inner container">
      <p class="section-label">CANCELLATION</p>
      <h2 class="section-title">解約について</h2>
      <p class="cancel-policy__intro">CRAFT BEER BOXはいつでも簡単に解約できます。違約金は一切ありません。</p>
      <div class="cancel-policy__steps">
        <div class="cancel-policy__step">
          <span class="cancel-policy__step-number">1</span>
          <div class="cancel-policy__step-content">
            <h3 class="cancel-policy__step-title">マイページにログイン</h3>
            <p class="cancel-policy__step-text">登録メールアドレスとパスワードでログインしてください。</p>
          </div>
        </div>
        <div class="cancel-policy__step">
          <span class="cancel-policy__step-number">2</span>
          <div class="cancel-policy__step-content">
            <h3 class="cancel-policy__step-title">「サブスクリプション管理」を選択</h3>
            <p class="cancel-policy__step-text">アカウント設定メニューから「サブスクリプション管理」へ進みます。</p>
          </div>
        </div>
        <div class="cancel-policy__step">
          <span class="cancel-policy__step-number">3</span>
          <div class="cancel-policy__step-content">
            <h3 class="cancel-policy__step-title">「解約する」をクリック</h3>
            <p class="cancel-policy__step-text">確認画面で「解約を確定」を押すと完了です。次回配送日の7日前までに手続きしてください。</p>
          </div>
        </div>
      </div>
      <p class="cancel-policy__note">※ 解約後も、支払い済みの月の配送は通常通り届きます。再開はいつでも可能です。</p>
    </div>
  </section>

  <!-- ========== CTA BANNER ========== -->
  <section class="cta-banner">
    <div class="cta-banner__inner container">
      <h2 class="cta-banner__title">YOUR BEER JOURNEY<br>STARTS HERE.</h2>
      <p class="cta-banner__text">今すぐ始めて、世界のクラフトビールを楽しもう。</p>
      <a href="#plans" class="cta-banner__button">プランを選ぶ</a>
    </div>
  </section>

  <!-- ========== FOOTER ========== -->
  <footer class="footer">
    <div class="footer__inner container">
      <div class="footer__top">
        <div class="footer__brand">
          <span class="footer__logo">CRAFT BEER BOX</span>
          <p class="footer__tagline">毎月届く、世界のクラフトビール。</p>
        </div>
        <div class="footer__links">
          <div class="footer__column">
            <h4 class="footer__column-title">SERVICE</h4>
            <ul class="footer__list">
              <li><a href="#plans" class="footer__link">料金プラン</a></li>
              <li><a href="#how-it-works" class="footer__link">利用方法</a></li>
              <li><a href="#beers" class="footer__link">今月のビール</a></li>
              <li><a href="#faq" class="footer__link">よくある質問</a></li>
            </ul>
          </div>
          <div class="footer__column">
            <h4 class="footer__column-title">COMPANY</h4>
            <ul class="footer__list">
              <li><a href="#" class="footer__link">会社概要</a></li>
              <li><a href="#" class="footer__link">採用情報</a></li>
              <li><a href="#" class="footer__link">お問い合わせ</a></li>
              <li><a href="#" class="footer__link">ブログ</a></li>
            </ul>
          </div>
          <div class="footer__column">
            <h4 class="footer__column-title">LEGAL</h4>
            <ul class="footer__list">
              <li><a href="#" class="footer__link">利用規約</a></li>
              <li><a href="#" class="footer__link">プライバシーポリシー</a></li>
              <li><a href="#" class="footer__link">特定商取引法に基づく表記</a></li>
              <li><a href="#" class="footer__link">解約ポリシー</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="footer__bottom">
        <p class="footer__legal">お酒は20歳になってから。飲酒運転は法律で禁止されています。</p>
        <p class="footer__copyright">&copy; 2026 CRAFT BEER BOX. All rights reserved.</p>
      </div>
    </div>
  </footer>

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

0 / 10
Submit

Discord #提出-ec チャンネルに投稿
1デプロイURL
2GitHubリポジトリURL
3工夫した点3つ
4クライアントへの提案メッセージ案
Freelance Value

サブスクD2Cブランド。相場：250,000〜500,000円
EC・通販系の他の課題を見る