NWA Coding Lab
E04🛒EC・通販系上級

GLOW Serum

化粧品D2C / 1商品LP

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

Client Brief

渡

渡辺 美咲マーケティング部長

GLOW Cosmetics株式会社

件名: 新規制作（LP）のご依頼

新発売の美容液「GLOWセラム」の単品LPを制作。Instagram広告からの流入をCVRに変換したい。D2Cブランドとして高いCVRが必須。

ご要望

  • 1追従CTAボタン（常に購入導線が見える）
  • 2ビフォーアフター比較
  • 3ユーザーレビュー（社会的証明）
  • 4FAQ
  • 5キャンペーン価格の強調

予算

¥400,000

納期

3週間

種別

新規制作（LP）

クライアントの人柄

データドリブン、CVR至上主義、韓国コスメのトレンドに敏感

避けてほしいこと

ブランド感の薄い安売りLPテキスト過多おばさんぽいデザイン

成功指標

LP経由のCVR 5%以上、初月売上1000万円

追加メモ

"Glossierやrom&ndのような、ピンク×白のフェミニンだけど媚びないデザインで。追従CTAは絶対に欲しい。"

Preview

フル画面で開く →
/demo/E04-glow-serum/index.html

Learning Points

1

縦長LP構成

2

追従CTA

3

ビフォーアフター

4

ユーザーレビュー

5

FAQ

How to Build

01

Step 1: LP構成設計

60分

縦長LPの6セクション構成を設計。ヒーロー→悩み→解決→使い方→レビュー→価格のCVR最適化フロー。

成果物: LP構成図

02

Step 2: HTML構造

120分

全セクション＋追従CTAバー＋FAQ（details/summary）のマークアップ。

成果物: 完全なHTML

03

Step 3: フェミニンCSS

120分

薄桃×ローズゴールド配色、Fraunces見出し。ビフォーアフター、レビュー星評価。

成果物: ビジュアル完成

04

Step 4: 追従CTA + JS

90分

固定ボトムCTA（スクロール位置で表示/非表示）。スムーズスクロール。

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

05

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

90分

ビフォーアフターの1カラム化、追従CTAのモバイル最適化。FAQ開閉。

成果物: 完成版

Source Code

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>GLOW Serum | あなたの肌に、透明感を。</title>
  <meta name="description" content="GLOWセラムは、厳選された3つの美容成分で肌本来の透明感を引き出す、新しい美容液です。">
  <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=Fraunces:opsz,wght@9..144,300;500;700;900&family=Inter+Tight: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" id="header">
    <div class="header__inner">
      <a href="#" class="header__logo">GLOW</a>
      <nav class="header__nav">
        <ul class="header__nav-list">
          <li class="header__nav-item"><a href="#ingredients" class="header__nav-link">成分</a></li>
          <li class="header__nav-item"><a href="#reviews" class="header__nav-link">口コミ</a></li>
          <li class="header__nav-item"><a href="#faq" class="header__nav-link">FAQ</a></li>
        </ul>
      </nav>
      <a href="#pricing" class="header__cta-btn">購入する</a>
    </div>
  </header>

  <!-- ========== Hero ========== -->
  <section class="hero" id="hero">
    <div class="hero__inner">
      <div class="hero__content">
        <p class="hero__subtitle">GLOW SERUM</p>
        <h1 class="hero__title">あなたの肌に、<br>透明感を。</h1>
        <p class="hero__description">
          韓国発の美容テクノロジーと天然由来成分の融合。<br>
          毎日のスキンケアに、ワンステップ加えるだけで<br class="hero__br-sp">
          あなたの肌が変わります。
        </p>
        <a href="#pricing" class="hero__cta-btn">今すぐ手に入れる</a>
        <p class="hero__note">※ 初回限定 62%OFF ／ 送料無料</p>
      </div>
      <div class="hero__image">
        <img
          src="https://images.unsplash.com/photo-1620916566398-39f1143ab7be?w=800&q=80"
          alt="GLOW Serum 美容液のボトル"
          class="hero__image-img"
          width="800"
          height="800"
          loading="eager"
        >
      </div>
    </div>
  </section>

  <!-- ========== Problems ========== -->
  <section class="problems" id="problems">
    <div class="problems__inner">
      <h2 class="problems__heading">こんなお悩み<br class="problems__br-sp">ありませんか？</h2>
      <ul class="problems__list">
        <li class="problems__item">
          <span class="problems__icon">💧</span>
          <p class="problems__text">朝起きると肌がカサカサで<br>化粧ノリが悪い</p>
        </li>
        <li class="problems__item">
          <span class="problems__icon">😔</span>
          <p class="problems__text">くすみが気になって<br>すっぴんに自信が持てない</p>
        </li>
        <li class="problems__item">
          <span class="problems__icon">🧴</span>
          <p class="problems__text">色々な美容液を試したけど<br>効果を実感できない</p>
        </li>
        <li class="problems__item">
          <span class="problems__icon">⏰</span>
          <p class="problems__text">忙しくてスキンケアに<br>時間をかけられない</p>
        </li>
      </ul>
    </div>
  </section>

  <!-- ========== Solution / Ingredients ========== -->
  <section class="solution" id="ingredients">
    <div class="solution__inner">
      <p class="solution__label">SOLUTION</p>
      <h2 class="solution__heading">GLOWセラムが<br>選ばれる理由</h2>
      <p class="solution__lead">
        韓国の皮膚科学研究から生まれた独自処方。<br>
        厳選された3つの美容成分が、肌の奥深くまで浸透し、<br class="solution__br-pc">
        内側から輝く透明感を引き出します。
      </p>
      <div class="solution__image-wrap">
        <img
          src="https://images.unsplash.com/photo-1608248543803-ba4f8c70ae0b?w=400&q=80"
          alt="天然由来のボタニカル成分"
          class="solution__image"
          width="400"
          height="300"
          loading="lazy"
        >
      </div>
      <div class="solution__cards">
        <article class="solution__card">
          <span class="solution__card-number">01</span>
          <h3 class="solution__card-title">ナイアシンアミド</h3>
          <p class="solution__card-text">
            メラニンの生成を抑制し、シミ・くすみを防ぎます。
            肌のバリア機能を強化し、透明感のある肌へと導きます。
          </p>
        </article>
        <article class="solution__card">
          <span class="solution__card-number">02</span>
          <h3 class="solution__card-title">ヒアルロン酸</h3>
          <p class="solution__card-text">
            3種類のヒアルロン酸が角質層の隅々まで浸透。
            24時間持続する深いうるおいで、もちもち肌を実現します。
          </p>
        </article>
        <article class="solution__card">
          <span class="solution__card-number">03</span>
          <h3 class="solution__card-title">ツボクサエキス</h3>
          <p class="solution__card-text">
            韓国コスメの定番CICA成分。肌荒れを鎮静し、
            ゆらぎやすい肌をやさしく整えます。
          </p>
        </article>
      </div>
    </div>
  </section>

  <!-- ========== Before / After ========== -->
  <section class="before-after" id="before-after">
    <div class="before-after__inner">
      <p class="before-after__label">BEFORE &amp; AFTER</p>
      <h2 class="before-after__heading">30日間の変化</h2>
      <p class="before-after__note">※ 個人の感想であり、効果を保証するものではありません。</p>
      <div class="before-after__grid">
        <div class="before-after__column">
          <div class="before-after__badge before-after__badge--before">BEFORE</div>
          <img
            src="https://images.unsplash.com/photo-1616394584738-fc6e612e71b9?w=400&q=80"
            alt="使用前の肌の状態"
            class="before-after__image"
            width="400"
            height="400"
            loading="lazy"
          >
          <p class="before-after__caption">くすみ・乾燥が気になる状態</p>
        </div>
        <div class="before-after__column">
          <div class="before-after__badge before-after__badge--after">AFTER</div>
          <img
            src="https://images.unsplash.com/photo-1596755389378-c31d21fd1273?w=400&q=80"
            alt="使用後の透明感のある肌"
            class="before-after__image"
            width="400"
            height="400"
            loading="lazy"
          >
          <p class="before-after__caption">透明感・ツヤのある肌へ</p>
        </div>
      </div>
    </div>
  </section>

  <!-- ========== How to Use ========== -->
  <section class="howto" id="howto">
    <div class="howto__inner">
      <p class="howto__label">HOW TO USE</p>
      <h2 class="howto__heading">カンタン3ステップ</h2>
      <div class="howto__steps">
        <article class="howto__step">
          <div class="howto__step-number">1</div>
          <div class="howto__step-image-wrap">
            <img
              src="https://images.unsplash.com/photo-1556228578-0d85b1a4d571?w=300&q=80"
              alt="洗顔後の肌にセラムを準備"
              class="howto__step-image"
              width="300"
              height="300"
              loading="lazy"
            >
          </div>
          <h3 class="howto__step-title">洗顔後、化粧水で整える</h3>
          <p class="howto__step-text">
            いつもの洗顔後、化粧水で肌を整えてください。
            清潔な肌に使うことで浸透力がアップします。
          </p>
        </article>
        <article class="howto__step">
          <div class="howto__step-number">2</div>
          <div class="howto__step-image-wrap">
            <img
              src="https://images.unsplash.com/photo-1556228578-0d85b1a4d571?w=300&q=80"
              alt="セラムを2〜3滴手に取る"
              class="howto__step-image"
              width="300"
              height="300"
              loading="lazy"
            >
          </div>
          <h3 class="howto__step-title">セラムを2〜3滴なじませる</h3>
          <p class="howto__step-text">
            スポイトで2〜3滴を手のひらに取り、
            顔全体にやさしくなじませます。
          </p>
        </article>
        <article class="howto__step">
          <div class="howto__step-number">3</div>
          <div class="howto__step-image-wrap">
            <img
              src="https://images.unsplash.com/photo-1556228578-0d85b1a4d571?w=300&q=80"
              alt="ハンドプレスで浸透させる"
              class="howto__step-image"
              width="300"
              height="300"
              loading="lazy"
            >
          </div>
          <h3 class="howto__step-title">ハンドプレスで浸透させる</h3>
          <p class="howto__step-text">
            両手で顔を包み込み、10秒ほどハンドプレス。
            体温で美容成分が肌の奥まで届きます。
          </p>
        </article>
      </div>
    </div>
  </section>

  <!-- ========== Reviews ========== -->
  <section class="reviews" id="reviews">
    <div class="reviews__inner">
      <p class="reviews__label">REVIEWS</p>
      <h2 class="reviews__heading">お客様の声</h2>
      <p class="reviews__summary">満足度 <strong>96.8%</strong> ／ 累計販売数 <strong>120,000本</strong> 突破</p>
      <div class="reviews__list">
        <article class="reviews__card">
          <div class="reviews__stars" aria-label="5つ星中5">★★★★★</div>
          <p class="reviews__comment">
            「使い始めて2週間で、朝の肌のもちもち感が全然違います。
            ファンデーションの量が半分になりました！」
          </p>
          <div class="reviews__author">
            <span class="reviews__name">Yui S.</span>
            <span class="reviews__age">28歳・乾燥肌</span>
          </div>
        </article>
        <article class="reviews__card">
          <div class="reviews__stars" aria-label="5つ星中5">★★★★★</div>
          <p class="reviews__comment">
            「韓国コスメが好きでいろいろ試してきましたが、
            これは本当に別格。肌がワントーン明るくなりました。」
          </p>
          <div class="reviews__author">
            <span class="reviews__name">Mika T.</span>
            <span class="reviews__age">34歳・混合肌</span>
          </div>
        </article>
        <article class="reviews__card">
          <div class="reviews__stars" aria-label="5つ星中4">★★★★☆</div>
          <p class="reviews__comment">
            「ベタつかないのにしっかり潤う。忙しい朝でも
            サッと使えるのが嬉しいです。リピート確定！」
          </p>
          <div class="reviews__author">
            <span class="reviews__name">Rina K.</span>
            <span class="reviews__age">25歳・普通肌</span>
          </div>
        </article>
        <article class="reviews__card">
          <div class="reviews__stars" aria-label="5つ星中5">★★★★★</div>
          <p class="reviews__comment">
            「敏感肌ですが、ピリピリ感ゼロ。CICA配合なので
            肌荒れしやすい時期も安心して使えます。」
          </p>
          <div class="reviews__author">
            <span class="reviews__name">Aoi M.</span>
            <span class="reviews__age">31歳・敏感肌</span>
          </div>
        </article>
        <article class="reviews__card">
          <div class="reviews__stars" aria-label="5つ星中5">★★★★★</div>
          <p class="reviews__comment">
            「娘に勧められて購入。50代の私でも透明感が出てきて、
            周りから「肌キレイ」と言われるようになりました。」
          </p>
          <div class="reviews__author">
            <span class="reviews__name">Keiko H.</span>
            <span class="reviews__age">52歳・乾燥肌</span>
          </div>
        </article>
      </div>
    </div>
  </section>

  <!-- ========== FAQ ========== -->
  <section class="faq" id="faq">
    <div class="faq__inner">
      <p class="faq__label">FAQ</p>
      <h2 class="faq__heading">よくあるご質問</h2>
      <div class="faq__list">
        <details class="faq__item">
          <summary class="faq__question">
            <span class="faq__question-text">敏感肌でも使えますか？</span>
            <span class="faq__icon" aria-hidden="true"></span>
          </summary>
          <div class="faq__answer">
            <p>はい、敏感肌の方にもお使いいただけます。パラベン・アルコール・合成香料・合成着色料は不使用。皮膚科医監修のもと、アレルギーテスト済みです。万が一お肌に合わない場合は、30日間の全額返金保証をご利用ください。</p>
          </div>
        </details>
        <details class="faq__item">
          <summary class="faq__question">
            <span class="faq__question-text">効果が出るまでどのくらいかかりますか？</span>
            <span class="faq__icon" aria-hidden="true"></span>
          </summary>
          <div class="faq__answer">
            <p>個人差はありますが、多くのお客様が2〜4週間で肌の変化を実感されています。肌のターンオーバーに合わせて、まずは1本（約1ヶ月分）お試しいただくことをおすすめします。</p>
          </div>
        </details>
        <details class="faq__item">
          <summary class="faq__question">
            <span class="faq__question-text">他のスキンケアと併用できますか？</span>
            <span class="faq__icon" aria-hidden="true"></span>
          </summary>
          <div class="faq__answer">
            <p>はい、お手持ちのスキンケアと併用可能です。化粧水のあと、乳液やクリームの前にご使用ください。水溶性の美容液なので、他の製品との相性も良好です。</p>
          </div>
        </details>
        <details class="faq__item">
          <summary class="faq__question">
            <span class="faq__question-text">定期購入の解約はいつでもできますか？</span>
            <span class="faq__icon" aria-hidden="true"></span>
          </summary>
          <div class="faq__answer">
            <p>はい、回数の縛りはありません。次回お届け予定日の10日前までにマイページまたはお電話にて、いつでも解約・休止が可能です。</p>
          </div>
        </details>
        <details class="faq__item">
          <summary class="faq__question">
            <span class="faq__question-text">返品・返金はできますか？</span>
            <span class="faq__icon" aria-hidden="true"></span>
          </summary>
          <div class="faq__answer">
            <p>初回ご購入に限り、30日間の全額返金保証を設けております。お肌に合わない場合は、商品到着後30日以内にカスタマーサポートまでご連絡ください。開封済みでも返金いたします。</p>
          </div>
        </details>
      </div>
    </div>
  </section>

  <!-- ========== Pricing ========== -->
  <section class="pricing" id="pricing">
    <div class="pricing__inner">
      <p class="pricing__label">SPECIAL OFFER</p>
      <h2 class="pricing__heading">初回限定キャンペーン</h2>
      <div class="pricing__card">
        <p class="pricing__product-name">GLOW Serum 30mL<br><span class="pricing__supply">（約1ヶ月分）</span></p>
        <div class="pricing__prices">
          <p class="pricing__original">通常価格 <span class="pricing__original-amount">¥7,980</span>（税込）</p>
          <p class="pricing__sale">初回限定</p>
          <p class="pricing__sale-price"><span class="pricing__yen">¥</span>2,980<span class="pricing__tax">（税込）</span></p>
          <p class="pricing__discount">62%OFF</p>
        </div>
        <ul class="pricing__benefits">
          <li class="pricing__benefit">✓ 全国どこでも送料無料</li>
          <li class="pricing__benefit">✓ 30日間全額返金保証</li>
          <li class="pricing__benefit">✓ 2回目以降もずっと20%OFF</li>
          <li class="pricing__benefit">✓ 回数縛りなし・いつでも解約OK</li>
        </ul>
        <a href="#" class="pricing__cta-btn">今すぐ申し込む</a>
        <p class="pricing__cta-note">※ クレジットカード・Amazon Pay・後払い対応</p>
      </div>
    </div>
  </section>

  <!-- ========== Footer ========== -->
  <footer class="footer">
    <div class="footer__inner">
      <p class="footer__logo">GLOW</p>
      <nav class="footer__nav">
        <a href="#" class="footer__link">特定商取引法に基づく表記</a>
        <a href="#" class="footer__link">プライバシーポリシー</a>
        <a href="#" class="footer__link">利用規約</a>
        <a href="#" class="footer__link">お問い合わせ</a>
      </nav>
      <p class="footer__legal">
        ※ 本ページに掲載されている口コミ・体験談は個人の感想であり、効果・効能を保証するものではありません。<br>
        ※ 画像はイメージです。
      </p>
      <p class="footer__copyright">&copy; 2026 GLOW Cosmetics Inc. All Rights Reserved.</p>
    </div>
  </footer>

  <!-- ========== Sticky CTA Bar ========== -->
  <div class="sticky-cta" id="sticky-cta" aria-hidden="true">
    <div class="sticky-cta__inner">
      <div class="sticky-cta__info">
        <p class="sticky-cta__price"><span class="sticky-cta__price-original">¥7,980</span> → ¥2,980</p>
        <p class="sticky-cta__badge">62%OFF 送料無料</p>
      </div>
      <a href="#pricing" class="sticky-cta__btn">今すぐ購入</a>
    </div>
  </div>

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

Self Check

0 / 9

Submit

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

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

Freelance Value

D2Cブランド・健康食品LP。相場：200,000〜500,000円

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