S02💄サービス・美容系中級
PILATES STUDIO

フィットネス
想定時間12h
技術HTML / CSS
完成形を見るソースコードを見る
Client Brief

藤
藤原沙織代表インストラクター
PILATES STUDIO FORM
件名: 新規制作のご依頼
恵比寿にオープンするピラティス専門スタジオ。体験レッスンの集客が最優先。ストイックで品のある世界観で、意識の高い30-40代女性をターゲットにしたい。
ご要望

1週間スケジュール表（曜日×時間帯）
2料金プラン比較（3プラン）
3体験申込フォーム
4インストラクター紹介
予算
¥250,000
納期
1ヶ月
種別
新規制作
クライアントの人柄

ストイック、身体の美学にこだわる、余白を大切にする
避けてほしいこと

ガチガチのジム感マッチョ系の雰囲気安っぽいスポーツクラブ感
成功指標

体験レッスンの申込を月30件以上
追加メモ
"BDC PilatesやPure Pilatesのような、余白が効いたストイックなデザインが理想です。"
Preview

フル画面で開く →
/demo/S02-pilates-studio/index.html
Learning Points

スケジュール表
料金プラン比較
体験申込CTA
強い印象画像
How to Build

Step 1: スケジュール表設計

40分
7曜日×時間帯のテーブル構造、クラス種別の色分けを計画。
成果物: テーブル設計図
Step 2: HTML構造

90分
ヒーロー→About→スケジュール→プラン→体験申込→インストラクター→アクセス。
成果物: 完全なHTML
Step 3: ストイック配色

90分
オフホワイト×テラコッタ配色。Libre Caslon Display見出し。強い余白。
成果物: ビジュアル完成
Step 4: テーブル＋フォーム

120分
スケジュールテーブルのスタイリング、プランカード比較、体験フォーム。
成果物: ほぼ完成形
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>PILATES STUDIO | 身体と対話する時間。</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=Libre+Caslon+Display&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">PILATES STUDIO</a>
      <button class="header__hamburger" aria-label="メニューを開く" aria-expanded="false">
        <span class="header__hamburger-line"></span>
        <span class="header__hamburger-line"></span>
        <span class="header__hamburger-line"></span>
      </button>
      <nav class="header__nav">
        <ul class="header__nav-list">
          <li class="header__nav-item"><a href="#about" class="header__nav-link">About</a></li>
          <li class="header__nav-item"><a href="#schedule" class="header__nav-link">Schedule</a></li>
          <li class="header__nav-item"><a href="#plan" class="header__nav-link">Plan</a></li>
          <li class="header__nav-item"><a href="#trial" class="header__nav-link">Trial</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <!-- ========== Hero ========== -->
  <section class="hero">
    <div class="hero__image-wrapper">
      <img
        src="https://images.unsplash.com/photo-1518611012118-696072aa579a?w=2000&q=80"
        alt="ピラティスのポーズをとる女性"
        class="hero__image"
      >
      <div class="hero__overlay"></div>
    </div>
    <div class="hero__content">
      <h1 class="hero__tagline">身体と対話する時間。</h1>
      <p class="hero__sub">Dialogue with your body.</p>
    </div>
  </section>

  <!-- ========== About ========== -->
  <section class="about section" id="about">
    <div class="about__inner container">
      <div class="section__heading">
        <h2 class="section__title">About</h2>
        <p class="section__subtitle">私たちについて</p>
      </div>
      <div class="about__body">
        <div class="about__text">
          <p class="about__lead">
            静寂の中で、自分の身体と向き合う。<br>
            それが、私たちの考えるピラティスです。
          </p>
          <p class="about__description">
            PILATES STUDIOは、都心にありながら喧騒から離れた白いスタジオ空間。
            余計な装飾を排し、身体の動きだけに集中できる環境を追求しました。
            一人ひとりの身体と丁寧に向き合い、正しいアライメントと呼吸を通じて、
            本来あるべき美しい姿勢と動きを取り戻すことを目指しています。
          </p>
          <p class="about__description">
            初心者の方から経験者まで、少人数制のクラスで
            きめ細やかな指導をお約束します。
          </p>
        </div>
        <div class="about__image-wrapper">
          <img
            src="https://images.unsplash.com/photo-1540497077202-7c8a3999166f?w=800&q=80"
            alt="白を基調としたスタジオ内観"
            class="about__image"
          >
        </div>
      </div>
    </div>
  </section>

  <!-- ========== Schedule ========== -->
  <section class="schedule section" id="schedule">
    <div class="schedule__inner container">
      <div class="section__heading">
        <h2 class="section__title">Schedule</h2>
        <p class="section__subtitle">週間スケジュール</p>
      </div>
      <div class="schedule__table-wrapper">
        <table class="schedule__table">
          <thead>
            <tr>
              <th class="schedule__th schedule__th--time">時間帯</th>
              <th class="schedule__th">Mon</th>
              <th class="schedule__th">Tue</th>
              <th class="schedule__th">Wed</th>
              <th class="schedule__th">Thu</th>
              <th class="schedule__th">Fri</th>
              <th class="schedule__th">Sat</th>
              <th class="schedule__th">Sun</th>
            </tr>
          </thead>
          <tbody>
            <!-- Morning 10:00 -->
            <tr class="schedule__row">
              <td class="schedule__td schedule__td--time">
                <span class="schedule__period">Morning</span>
                <span class="schedule__time">10:00-11:00</span>
              </td>
              <td class="schedule__td"><span class="schedule__class">Beginner</span><span class="schedule__mark">&#9675;</span></td>
              <td class="schedule__td"><span class="schedule__class">Mat</span><span class="schedule__mark">&#9675;</span></td>
              <td class="schedule__td"><span class="schedule__class">Beginner</span><span class="schedule__mark">&#9675;</span></td>
              <td class="schedule__td"><span class="schedule__dash">&mdash;</span></td>
              <td class="schedule__td"><span class="schedule__class">Mat</span><span class="schedule__mark">&#9675;</span></td>
              <td class="schedule__td"><span class="schedule__class">Beginner</span><span class="schedule__mark">&#9675;</span></td>
              <td class="schedule__td"><span class="schedule__class">Beginner</span><span class="schedule__mark">&#9675;</span></td>
            </tr>
            <!-- Morning 11:30 -->
            <tr class="schedule__row schedule__row--alt">
              <td class="schedule__td schedule__td--time">
                <span class="schedule__period">Morning</span>
                <span class="schedule__time">11:30-12:30</span>
              </td>
              <td class="schedule__td"><span class="schedule__class">Intermediate</span><span class="schedule__mark">&#9675;</span></td>
              <td class="schedule__td"><span class="schedule__dash">&mdash;</span></td>
              <td class="schedule__td"><span class="schedule__class">Reformer</span><span class="schedule__mark">&#9675;</span></td>
              <td class="schedule__td"><span class="schedule__class">Intermediate</span><span class="schedule__mark">&#9675;</span></td>
              <td class="schedule__td"><span class="schedule__dash">&mdash;</span></td>
              <td class="schedule__td"><span class="schedule__class">Intermediate</span><span class="schedule__mark">&#9675;</span></td>
              <td class="schedule__td"><span class="schedule__class">Reformer</span><span class="schedule__mark">&#9675;</span></td>
            </tr>
            <!-- Afternoon 14:00 -->
            <tr class="schedule__row">
              <td class="schedule__td schedule__td--time">
                <span class="schedule__period">Afternoon</span>
                <span class="schedule__time">14:00-15:00</span>
              </td>
              <td class="schedule__td"><span class="schedule__dash">&mdash;</span></td>
              <td class="schedule__td"><span class="schedule__class">Reformer</span><span class="schedule__mark">&#9675;</span></td>
              <td class="schedule__td"><span class="schedule__dash">&mdash;</span></td>
              <td class="schedule__td"><span class="schedule__class">Mat</span><span class="schedule__mark">&#9675;</span></td>
              <td class="schedule__td"><span class="schedule__class">Reformer</span><span class="schedule__mark">&#9675;</span></td>
              <td class="schedule__td"><span class="schedule__class">Advanced</span><span class="schedule__mark">&#9675;</span></td>
              <td class="schedule__td"><span class="schedule__dash">&mdash;</span></td>
            </tr>
            <!-- Afternoon 15:30 -->
            <tr class="schedule__row schedule__row--alt">
              <td class="schedule__td schedule__td--time">
                <span class="schedule__period">Afternoon</span>
                <span class="schedule__time">15:30-16:30</span>
              </td>
              <td class="schedule__td"><span class="schedule__class">Mat</span><span class="schedule__mark">&#9675;</span></td>
              <td class="schedule__td"><span class="schedule__dash">&mdash;</span></td>
              <td class="schedule__td"><span class="schedule__class">Advanced</span><span class="schedule__mark">&#9675;</span></td>
              <td class="schedule__td"><span class="schedule__dash">&mdash;</span></td>
              <td class="schedule__td"><span class="schedule__class">Intermediate</span><span class="schedule__mark">&#9675;</span></td>
              <td class="schedule__td"><span class="schedule__class">Reformer</span><span class="schedule__mark">&#9675;</span></td>
              <td class="schedule__td"><span class="schedule__class">Mat</span><span class="schedule__mark">&#9675;</span></td>
            </tr>
            <!-- Evening 18:30 -->
            <tr class="schedule__row">
              <td class="schedule__td schedule__td--time">
                <span class="schedule__period">Evening</span>
                <span class="schedule__time">18:30-19:30</span>
              </td>
              <td class="schedule__td"><span class="schedule__class">Intermediate</span><span class="schedule__mark">&#9675;</span></td>
              <td class="schedule__td"><span class="schedule__class">Beginner</span><span class="schedule__mark">&#9675;</span></td>
              <td class="schedule__td"><span class="schedule__class">Intermediate</span><span class="schedule__mark">&#9675;</span></td>
              <td class="schedule__td"><span class="schedule__class">Advanced</span><span class="schedule__mark">&#9675;</span></td>
              <td class="schedule__td"><span class="schedule__class">Beginner</span><span class="schedule__mark">&#9675;</span></td>
              <td class="schedule__td"><span class="schedule__dash">&mdash;</span></td>
              <td class="schedule__td"><span class="schedule__dash">&mdash;</span></td>
            </tr>
            <!-- Evening 20:00 -->
            <tr class="schedule__row schedule__row--alt">
              <td class="schedule__td schedule__td--time">
                <span class="schedule__period">Evening</span>
                <span class="schedule__time">20:00-21:00</span>
              </td>
              <td class="schedule__td"><span class="schedule__class">Advanced</span><span class="schedule__mark">&#9675;</span></td>
              <td class="schedule__td"><span class="schedule__class">Reformer</span><span class="schedule__mark">&#9675;</span></td>
              <td class="schedule__td"><span class="schedule__dash">&mdash;</span></td>
              <td class="schedule__td"><span class="schedule__class">Reformer</span><span class="schedule__mark">&#9675;</span></td>
              <td class="schedule__td"><span class="schedule__class">Advanced</span><span class="schedule__mark">&#9675;</span></td>
              <td class="schedule__td"><span class="schedule__dash">&mdash;</span></td>
              <td class="schedule__td"><span class="schedule__dash">&mdash;</span></td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="schedule__legend">
        <span class="schedule__legend-item"><span class="schedule__mark">&#9675;</span> 受付中</span>
        <span class="schedule__legend-item"><span class="schedule__dash">&mdash;</span> クラスなし</span>
      </div>
    </div>
  </section>

  <!-- ========== Plan ========== -->
  <section class="plan section" id="plan">
    <div class="plan__inner container">
      <div class="section__heading">
        <h2 class="section__title">Plan</h2>
        <p class="section__subtitle">料金プラン</p>
      </div>
      <div class="plan__cards">
        <!-- Light -->
        <div class="plan__card">
          <div class="plan__card-header">
            <h3 class="plan__card-name">Light</h3>
            <p class="plan__card-freq">月4回</p>
          </div>
          <div class="plan__card-body">
            <p class="plan__card-price"><span class="plan__card-yen">&yen;</span>12,800<span class="plan__card-tax">/月（税込）</span></p>
            <ul class="plan__card-features">
              <li>グループレッスン月4回</li>
              <li>全クラス受講可能</li>
              <li>ウェア・タオルレンタル無料</li>
              <li>予約繰越不可</li>
            </ul>
          </div>
        </div>
        <!-- Standard (recommended) -->
        <div class="plan__card plan__card--recommended">
          <div class="plan__card-badge">おすすめ</div>
          <div class="plan__card-header">
            <h3 class="plan__card-name">Standard</h3>
            <p class="plan__card-freq">月8回</p>
          </div>
          <div class="plan__card-body">
            <p class="plan__card-price"><span class="plan__card-yen">&yen;</span>19,800<span class="plan__card-tax">/月（税込）</span></p>
            <ul class="plan__card-features">
              <li>グループレッスン月8回</li>
              <li>全クラス受講可能</li>
              <li>ウェア・タオルレンタル無料</li>
              <li>リフォーマークラス優先予約</li>
              <li>翌月繰越2回まで可</li>
            </ul>
          </div>
        </div>
        <!-- Unlimited -->
        <div class="plan__card">
          <div class="plan__card-header">
            <h3 class="plan__card-name">Unlimited</h3>
            <p class="plan__card-freq">通い放題</p>
          </div>
          <div class="plan__card-body">
            <p class="plan__card-price"><span class="plan__card-yen">&yen;</span>29,800<span class="plan__card-tax">/月（税込）</span></p>
            <ul class="plan__card-features">
              <li>全レッスン通い放題</li>
              <li>全クラス受講可能</li>
              <li>ウェア・タオルレンタル無料</li>
              <li>リフォーマークラス優先予約</li>
              <li>パーソナル月1回付き</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- ========== Trial ========== -->
  <section class="trial section" id="trial">
    <div class="trial__inner container">
      <div class="section__heading">
        <h2 class="section__title">Trial Lesson</h2>
        <p class="section__subtitle">体験レッスン</p>
      </div>
      <div class="trial__body">
        <div class="trial__info">
          <p class="trial__price">体験レッスン <span class="trial__price-amount">&yen;3,300</span><span class="trial__price-tax">（税込）</span></p>
          <p class="trial__note">
            初めての方限定の体験レッスンです。<br>
            ウェア・タオルは無料でレンタルいたします。<br>
            手ぶらでお気軽にお越しください。
          </p>
        </div>
        <form class="trial__form" id="trial-form" novalidate>
          <div class="trial__form-group">
            <label for="trial-name" class="trial__label">お名前 <span class="trial__required">*</span></label>
            <input type="text" id="trial-name" name="name" class="trial__input" placeholder="山田 花子" required>
            <span class="trial__error" id="error-name"></span>
          </div>
          <div class="trial__form-group">
            <label for="trial-email" class="trial__label">メールアドレス <span class="trial__required">*</span></label>
            <input type="email" id="trial-email" name="email" class="trial__input" placeholder="example@email.com" required>
            <span class="trial__error" id="error-email"></span>
          </div>
          <div class="trial__form-group">
            <label for="trial-date" class="trial__label">ご希望日 <span class="trial__required">*</span></label>
            <input type="date" id="trial-date" name="date" class="trial__input" required>
            <span class="trial__error" id="error-date"></span>
          </div>
          <button type="submit" class="trial__submit">体験レッスンを予約する</button>
          <p class="trial__form-note">※ ご予約後、確認メールをお送りいたします。</p>
        </form>
      </div>
    </div>
  </section>

  <!-- ========== Instructor ========== -->
  <section class="instructor section" id="instructor">
    <div class="instructor__inner container">
      <div class="section__heading">
        <h2 class="section__title">Instructor</h2>
        <p class="section__subtitle">インストラクター</p>
      </div>
      <div class="instructor__list">
        <!-- Instructor 1 -->
        <div class="instructor__card">
          <div class="instructor__image-wrapper">
            <img
              src="https://images.unsplash.com/photo-1594381898411-846e7d193883?w=400&q=80"
              alt="インストラクター 藤井 美咲"
              class="instructor__image"
            >
          </div>
          <div class="instructor__info">
            <h3 class="instructor__name">藤井 美咲<span class="instructor__name-en">Misaki Fujii</span></h3>
            <p class="instructor__role">Head Instructor</p>
            <p class="instructor__bio">
              BASIピラティス認定インストラクター。クラシックバレエの経験を活かし、
              美しい姿勢と身体の使い方を丁寧に指導します。
              「身体の声を聴くこと」をモットーに、一人ひとりに合わせたアプローチで
              レッスンを行います。指導歴12年。
            </p>
            <ul class="instructor__certs">
              <li>BASI Pilates Certified</li>
              <li>Reformer Specialist</li>
              <li>解剖学アドバンスコース修了</li>
            </ul>
          </div>
        </div>
        <!-- Instructor 2 -->
        <div class="instructor__card">
          <div class="instructor__image-wrapper">
            <img
              src="https://images.unsplash.com/photo-1571019614242-c5c5dee9f50b?w=400&q=80"
              alt="インストラクター 田中 健太"
              class="instructor__image"
            >
          </div>
          <div class="instructor__info">
            <h3 class="instructor__name">田中 健太<span class="instructor__name-en">Kenta Tanaka</span></h3>
            <p class="instructor__role">Senior Instructor</p>
            <p class="instructor__bio">
              PHI Pilates認定インストラクター。理学療法士の資格を持ち、
              リハビリテーションの知見を活かしたレッスンが特徴。
              身体の不調や痛みを抱える方にも安心して受けていただける
              丁寧な指導を心がけています。指導歴8年。
            </p>
            <ul class="instructor__certs">
              <li>PHI Pilates Certified</li>
              <li>理学療法士</li>
              <li>スポーツ医学認定資格</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- ========== Access ========== -->
  <section class="access section" id="access">
    <div class="access__inner container">
      <div class="section__heading">
        <h2 class="section__title">Access</h2>
        <p class="section__subtitle">アクセス</p>
      </div>
      <div class="access__body">
        <dl class="access__info">
          <div class="access__row">
            <dt class="access__label">スタジオ名</dt>
            <dd class="access__value">PILATES STUDIO</dd>
          </div>
          <div class="access__row">
            <dt class="access__label">住所</dt>
            <dd class="access__value">〒150-0001 東京都渋谷区神宮前3-15-8 White Bldg. 2F</dd>
          </div>
          <div class="access__row">
            <dt class="access__label">最寄り駅</dt>
            <dd class="access__value">東京メトロ表参道駅 A2出口より徒歩5分</dd>
          </div>
          <div class="access__row">
            <dt class="access__label">営業時間</dt>
            <dd class="access__value">平日 10:00 - 21:00 / 土日 10:00 - 17:00</dd>
          </div>
          <div class="access__row">
            <dt class="access__label">定休日</dt>
            <dd class="access__value">毎週木曜日・祝日</dd>
          </div>
          <div class="access__row">
            <dt class="access__label">電話</dt>
            <dd class="access__value">03-1234-5678</dd>
          </div>
          <div class="access__row">
            <dt class="access__label">メール</dt>
            <dd class="access__value">info@pilates-studio.example.com</dd>
          </div>
        </dl>
      </div>
    </div>
  </section>

  <!-- ========== Footer ========== -->
  <footer class="footer">
    <div class="footer__inner container">
      <div class="footer__top">
        <p class="footer__logo">PILATES STUDIO</p>
        <nav class="footer__nav">
          <a href="#about" class="footer__link">About</a>
          <a href="#schedule" class="footer__link">Schedule</a>
          <a href="#plan" class="footer__link">Plan</a>
          <a href="#trial" class="footer__link">Trial</a>
          <a href="#instructor" class="footer__link">Instructor</a>
          <a href="#access" class="footer__link">Access</a>
        </nav>
      </div>
      <p class="footer__copy">&copy; 2026 PILATES STUDIO. All rights reserved.</p>
    </div>
  </footer>

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

0 / 8
Submit

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

ジム・ヨガスタジオ・パーソナル系。相場：150,000〜300,000円
サービス・美容系の他の課題を見る