NWA Coding Lab
E01🛒EC・通販系初級

TOTE & CO

アパレルEC / 商品ページ

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

Client Brief

鈴

鈴木 麻衣ブランドディレクター

TOTE & CO

件名: 新規制作のご依頼

東京発のミニマルアパレルブランド。Shopify既存だが商品ページのデザインが弱い。ルックブック風の世界観で購買意欲を高めたい。

ご要望

  • 1商品写真のギャラリー（メイン＋サムネ切替）
  • 2サイズ・カラー選択UI
  • 3カート追加ボタンの目立つ配置

予算

¥150,000

納期

2週間

種別

新規制作

クライアントの人柄

ミニマル志向、余白とタイポグラフィにこだわる、雑誌の世界観が好き

避けてほしいこと

賑やかすぎる装飾安売り感ポップな配色

成功指標

商品ページのカート追加率を現状の3%から5%に上げる

追加メモ

"Acne StudiosやTheoryの商品ページのように、写真で語るシンプルなページにしたい。"

Preview

フル画面で開く →
/demo/E01-tote-and-co/index.html

Learning Points

1

商品ギャラリー

2

サムネ切替

3

サイズ選択ボタン

4

カート追加CTA

How to Build

01

Step 1: 商品ページ設計

30分

商品ギャラリーの構造（メイン画像＋サムネ4枚）とサイズ選択UIを設計。

成果物: UI設計メモ

02

Step 2: HTML構造

60分

商品セクション（画像＋情報の2カラム）、関連商品グリッドをマークアップ。

成果物: 完全なHTML

03

Step 3: ミニマルCSS

120分

白基調の配色、Italianaの見出し。ギャラリー、サイズボタン、CTAのスタイリング。

成果物: ビジュアル完成

04

Step 4: JavaScript

90分

サムネクリックでメイン画像切替、サイズ・カラーのactive切替。

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

05

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

60分

2カラム→1カラム切替。モバイルでのCTA配置最適化。

成果物: 完成版

Source Code

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Wool Blend Overcoat | TOTE & CO</title>
  <meta name="description" content="TOTE & CO - Wool Blend Overcoat. Tokyo minimal apparel brand.">
  <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=Italiana&family=Manrope: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">
      <a href="#" class="header__logo">TOTE & CO</a>
      <nav class="header__nav">
        <ul class="header__nav-list">
          <li class="header__nav-item"><a href="#" class="header__nav-link">Shop</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" aria-label="Cart">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                <path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z"/>
                <line x1="3" y1="6" x2="21" y2="6"/>
                <path d="M16 10a4 4 0 01-8 0"/>
              </svg>
            </a>
          </li>
        </ul>
      </nav>
    </div>
  </header>

  <main class="main">

    <!-- Product Section -->
    <section class="product">
      <div class="product__inner">

        <!-- Product Gallery -->
        <div class="product__gallery">
          <div class="product__main-image">
            <img
              id="js-main-image"
              src="https://images.unsplash.com/photo-1591047139829-d91aecb6caea?w=800&q=80"
              alt="Wool Blend Overcoat - front view"
              class="product__image"
            >
          </div>
          <div class="product__thumbnails">
            <button class="product__thumb product__thumb--active" data-image="https://images.unsplash.com/photo-1591047139829-d91aecb6caea?w=800&q=80" type="button">
              <img src="https://images.unsplash.com/photo-1591047139829-d91aecb6caea?w=200&q=80" alt="Overcoat front view">
            </button>
            <button class="product__thumb" data-image="https://images.unsplash.com/photo-1594938298603-c8148c4dae35?w=800&q=80" type="button">
              <img src="https://images.unsplash.com/photo-1594938298603-c8148c4dae35?w=200&q=80" alt="Overcoat fabric detail">
            </button>
            <button class="product__thumb" data-image="https://images.unsplash.com/photo-1551028719-00167b16eac5?w=800&q=80" type="button">
              <img src="https://images.unsplash.com/photo-1551028719-00167b16eac5?w=200&q=80" alt="Overcoat styling">
            </button>
            <button class="product__thumb" data-image="https://images.unsplash.com/photo-1539185441755-769473a23570?w=800&q=80" type="button">
              <img src="https://images.unsplash.com/photo-1539185441755-769473a23570?w=200&q=80" alt="Coordinating shoes detail">
            </button>
            <button class="product__thumb" data-image="https://images.unsplash.com/photo-1556906781-9a412961c28c?w=800&q=80" type="button">
              <img src="https://images.unsplash.com/photo-1556906781-9a412961c28c?w=200&q=80" alt="Coordinating bag">
            </button>
          </div>
        </div>

        <!-- Product Info -->
        <div class="product__info">
          <p class="product__category">Outerwear</p>
          <h1 class="product__name">Wool Blend Overcoat</h1>
          <p class="product__price">&yen;34,800<span class="product__price-tax">(税込)</span></p>

          <!-- Color Swatches -->
          <div class="product__colors">
            <p class="product__label">Color</p>
            <div class="product__color-list">
              <button class="product__color-swatch product__color-swatch--active" style="background-color: #1A1A1A;" aria-label="Black" data-color="Black" type="button"></button>
              <button class="product__color-swatch" style="background-color: #1B2A4A;" aria-label="Navy" data-color="Navy" type="button"></button>
              <button class="product__color-swatch" style="background-color: #C8A96E;" aria-label="Camel" data-color="Camel" type="button"></button>
            </div>
            <p class="product__color-name" id="js-color-name">Black</p>
          </div>

          <!-- Size Selector -->
          <div class="product__sizes">
            <p class="product__label">Size</p>
            <div class="product__size-list">
              <button class="product__size-btn" data-size="S" type="button">S</button>
              <button class="product__size-btn product__size-btn--active" data-size="M" type="button">M</button>
              <button class="product__size-btn" data-size="L" type="button">L</button>
              <button class="product__size-btn" data-size="XL" type="button">XL</button>
            </div>
          </div>

          <!-- Add to Cart -->
          <button class="product__cart-btn" type="button">Add to Cart</button>

          <!-- Description -->
          <div class="product__description">
            <p>上質なウールブレンド素材を使用したオーバーコート。ミニマルなデザインでありながら、計算されたシルエットが美しいドレープを生み出します。オンオフ問わず活躍する一着。</p>
          </div>

          <!-- Accordion: Details -->
          <div class="accordion">
            <div class="accordion__item">
              <button class="accordion__trigger" type="button" aria-expanded="false">
                <span>素材・組成</span>
                <span class="accordion__icon">+</span>
              </button>
              <div class="accordion__content">
                <ul class="accordion__list">
                  <li>表地: ウール 70%, ポリエステル 25%, カシミヤ 5%</li>
                  <li>裏地: キュプラ 100%</li>
                  <li>原産国: 日本</li>
                </ul>
              </div>
            </div>
            <div class="accordion__item">
              <button class="accordion__trigger" type="button" aria-expanded="false">
                <span>お手入れ方法</span>
                <span class="accordion__icon">+</span>
              </button>
              <div class="accordion__content">
                <ul class="accordion__list">
                  <li>ドライクリーニングを推奨</li>
                  <li>アイロンは当て布を使用し中温で</li>
                  <li>直射日光を避けて保管してください</li>
                  <li>ハンガーにかけて保管することで型崩れを防止</li>
                </ul>
              </div>
            </div>
          </div>
        </div>

      </div>
    </section>

    <!-- Related Products -->
    <section class="related">
      <div class="related__inner">
        <h2 class="related__title">You May Also Like</h2>
        <div class="related__grid">
          <a href="#" class="related__card">
            <div class="related__card-image">
              <img src="https://images.unsplash.com/photo-1523381210434-271e8be1f52b?w=400&q=80" alt="Cotton Oxford Shirt">
            </div>
            <div class="related__card-body">
              <h3 class="related__card-name">Cotton Oxford Shirt</h3>
              <p class="related__card-price">&yen;12,800</p>
            </div>
          </a>
          <a href="#" class="related__card">
            <div class="related__card-image">
              <img src="https://images.unsplash.com/photo-1516762689617-e1cffcef479d?w=400&q=80" alt="Selvedge Denim Trousers">
            </div>
            <div class="related__card-body">
              <h3 class="related__card-name">Selvedge Denim Trousers</h3>
              <p class="related__card-price">&yen;18,500</p>
            </div>
          </a>
          <a href="#" class="related__card">
            <div class="related__card-image">
              <img src="https://images.unsplash.com/photo-1523381210434-271e8be1f52b?w=400&q=80" alt="Merino Wool Knit">
            </div>
            <div class="related__card-body">
              <h3 class="related__card-name">Merino Wool Knit</h3>
              <p class="related__card-price">&yen;15,200</p>
            </div>
          </a>
        </div>
      </div>
    </section>

  </main>

  <!-- Footer -->
  <footer class="footer">
    <div class="footer__inner">
      <p class="footer__logo">TOTE & CO</p>
      <nav class="footer__nav">
        <a href="#" class="footer__link">Privacy Policy</a>
        <a href="#" class="footer__link">Terms of Service</a>
        <a href="#" class="footer__link">Shipping & Returns</a>
        <a href="#" class="footer__link">Contact</a>
      </nav>
      <p class="footer__copy">&copy; 2026 TOTE & CO. All rights reserved.</p>
    </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

ShopifyテーマカスタマイズやECサイト構築。相場：100,000〜200,000円

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