NWA Coding Lab
S04💄サービス・美容系上級

Eikaiwa First

英会話スクール

想定時間18h
技術HTML / CSS / JS

Client Brief

伊藤 大輔スクール長

Eikaiwa First株式会社

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

渋谷の英会話スクール。生徒数が頭打ちで、Web経由の体験レッスン申込を増やしたい。講師の多国籍さとコースの多様性が強み。

ご要望

  • 1多国籍な講師陣のカード紹介
  • 24コースの分かりやすい比較
  • 3料金プラン3段階
  • 4受講生の声
  • 5体験レッスンCTAに目を引くアニメーション

予算

¥380,000

納期

1ヶ月

種別

リニューアル

クライアントの人柄

国際感覚豊か、教育への情熱、マーケティングにも明るい

避けてほしいこと

古い英会話教室のイメージ日本ローカル感子供向けすぎるポップさ

成功指標

体験レッスン申込を月50件以上(現状の2倍)

追加メモ

"BerlitzやECCのような国際的な印象で。NYTのような雑誌風タイポグラフィが理想。講師の多様性を前面に。"

Preview

フル画面で開く →
/demo/S04-eikaiwa-first/index.html

Learning Points

1

講師カード

2

コース比較表

3

アニメーション付きCTA

4

受講生の声

How to Build

01

Step 1: コンテンツ設計

60分

4コース×4講師×3プランの情報整理。CTA動線の設計。

成果物: コンテンツマップ

02

Step 2: HTML構造

120分

ヒーロー→コース→講師→料金→受講生の声→体験CTA→FAQ→アクセス。

成果物: 完全なHTML

03

Step 3: 国際的CSS

120分

深青×白×レンガ赤。Instrument Serif英字見出し。コースカード色分け。

成果物: ビジュアル完成

04

Step 4: アニメ+FAQ

90分

CTAパルスアニメーション(@keyframes)、FAQ開閉、スクロールfade-in。

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

05

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

90分

講師カード・コースカードの列数調整、料金表のモバイル対応。

成果物: 完成版

Source Code

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Eikaiwa First — 英語で、世界が広がる。</title>
  <meta name="description" content="Eikaiwa First — 日常英会話からビジネス英語、TOEIC対策まで。経験豊富なネイティブ講師陣があなたの英語力を確実に伸ばします。">
  <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=Instrument+Serif:ital@0;1&family=Inter+Tight:wght@300;400;500;600;700&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">
        <span class="header__logo-mark">E</span>
        <span class="header__logo-text">Eikaiwa First</span>
      </a>
      <button class="header__hamburger" id="hamburger" aria-label="メニューを開く">
        <span class="header__hamburger-line"></span>
        <span class="header__hamburger-line"></span>
        <span class="header__hamburger-line"></span>
      </button>
      <nav class="header__nav" id="nav">
        <ul class="header__nav-list">
          <li class="header__nav-item"><a href="#courses" class="header__nav-link">Courses</a></li>
          <li class="header__nav-item"><a href="#teachers" class="header__nav-link">Teachers</a></li>
          <li class="header__nav-item"><a href="#pricing" class="header__nav-link">Price</a></li>
          <li class="header__nav-item"><a href="#voice" class="header__nav-link">Voice</a></li>
          <li class="header__nav-item"><a href="#trial" class="header__nav-link header__nav-link--cta">Trial Lesson</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <!-- Hero -->
  <section class="hero" id="hero">
    <div class="hero__overlay"></div>
    <img
      src="https://images.unsplash.com/photo-1529156069898-49953e39b3ac?w=2000&q=80"
      alt="多様な人々が英語でコミュニケーションする様子"
      class="hero__image"
    >
    <div class="hero__content">
      <p class="hero__subtitle">Your World, Expanded</p>
      <h1 class="hero__title">英語で、世界が広がる。</h1>
      <p class="hero__description">
        経験豊富なネイティブ講師と日本人バイリンガル講師が、<br>
        あなたの目標に合わせた最適なレッスンをお届けします。
      </p>
      <a href="#trial" class="hero__cta btn btn--primary btn--pulse">
        無料体験レッスンを予約する
      </a>
    </div>
  </section>
  <!-- Courses -->
  <section class="courses section" id="courses">
    <div class="section__inner">
      <p class="section__label">Our Courses</p>
      <h2 class="section__title">目標に合わせた<br class="sp-only">4つのコース</h2>
      <p class="section__lead">初心者から上級者まで、一人ひとりのレベルと目的に最適化されたカリキュラム。</p>

      <div class="courses__grid">
        <!-- Course 1 -->
        <article class="course-card course-card--daily">
          <div class="course-card__icon">
            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
          </div>
          <h3 class="course-card__title">日常英会話</h3>
          <p class="course-card__level">Level: Beginner — Advanced</p>
          <p class="course-card__lessons">全48レッスン / 12ヶ月</p>
          <p class="course-card__desc">日常会話に必要なフレーズと表現力を、実践的なロールプレイで身につけます。旅行、ショッピング、レストランなど、すぐに使えるシーン別レッスン。</p>
          <a href="#trial" class="course-card__link">詳しく見る &rarr;</a>
        </article>
        <!-- Course 2 -->
        <article class="course-card course-card--business">
          <div class="course-card__icon">
            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>
          </div>
          <h3 class="course-card__title">ビジネス英語</h3>
          <p class="course-card__level">Level: Intermediate — Advanced</p>
          <p class="course-card__lessons">全36レッスン / 9ヶ月</p>
          <p class="course-card__desc">プレゼン、会議、メール、電話対応など、ビジネスシーンで即戦力となる英語力を養成。実際のケーススタディを使った実践型レッスン。</p>
          <a href="#trial" class="course-card__link">詳しく見る &rarr;</a>
        </article>
        <!-- Course 3 -->
        <article class="course-card course-card--toeic">
          <div class="course-card__icon">
            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
          </div>
          <h3 class="course-card__title">TOEIC対策</h3>
          <p class="course-card__level">Level: All Levels</p>
          <p class="course-card__lessons">全24レッスン / 6ヶ月</p>
          <p class="course-card__desc">スコアアップに直結する戦略的アプローチ。リスニング・リーディングの弱点を分析し、効率的にスコアを伸ばす集中プログラム。</p>
          <a href="#trial" class="course-card__link">詳しく見る &rarr;</a>
        </article>
        <!-- Course 4 -->
        <article class="course-card course-card--kids">
          <div class="course-card__icon">
            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
          </div>
          <h3 class="course-card__title">キッズ英会話</h3>
          <p class="course-card__level">Level: Ages 4 — 12</p>
          <p class="course-card__lessons">全48レッスン / 12ヶ月</p>
          <p class="course-card__desc">歌やゲームを通じて自然に英語に触れる環境を提供。フォニックスを取り入れた発音指導で、正しい英語の基礎を楽しく学べます。</p>
          <a href="#trial" class="course-card__link">詳しく見る &rarr;</a>
        </article>
      </div>
    </div>
  </section>
  <!-- Teachers -->
  <section class="teachers section section--blue" id="teachers">
    <div class="section__inner">
      <p class="section__label section__label--light">Our Teachers</p>
      <h2 class="section__title section__title--light">世界各国から集まった<br class="sp-only">プロフェッショナル講師陣</h2>
      <p class="section__lead section__lead--light">厳しい選考を通過した講師だけが在籍。全員が英語教授法の資格を保有しています。</p>

      <div class="teachers__grid">
        <!-- Teacher 1 -->
        <article class="teacher-card">
          <div class="teacher-card__photo-wrap">
            <img
              src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=400&q=80"
              alt="Sarah Miller"
              class="teacher-card__photo"
            >
          </div>
          <div class="teacher-card__info">
            <h3 class="teacher-card__name">Sarah Miller <span class="teacher-card__flag">&#x1F1FA;&#x1F1F8;</span></h3>
            <p class="teacher-card__qual">TEFL Certified / 指導歴8年</p>
            <p class="teacher-card__message">"英語を学ぶ楽しさを一緒に見つけましょう。間違いを恐れず、たくさん話すことが上達の近道です。"</p>
          </div>
        </article>
        <!-- Teacher 2 -->
        <article class="teacher-card">
          <div class="teacher-card__photo-wrap">
            <img
              src="https://images.unsplash.com/photo-1560250097-0b93528c311a?w=400&q=80"
              alt="James Wilson"
              class="teacher-card__photo"
            >
          </div>
          <div class="teacher-card__info">
            <h3 class="teacher-card__name">James Wilson <span class="teacher-card__flag">&#x1F1EC;&#x1F1E7;</span></h3>
            <p class="teacher-card__qual">Cambridge CELTA / 指導歴12年</p>
            <p class="teacher-card__message">"ビジネス英語のプロとして、実践的なスキルを確実に身につけていただきます。目標達成まで全力でサポートします。"</p>
          </div>
        </article>
        <!-- Teacher 3 -->
        <article class="teacher-card">
          <div class="teacher-card__photo-wrap">
            <img
              src="https://images.unsplash.com/photo-1580489944761-15a19d654956?w=400&q=80"
              alt="田中 美咲"
              class="teacher-card__photo"
            >
          </div>
          <div class="teacher-card__info">
            <h3 class="teacher-card__name">田中 美咲 <span class="teacher-card__flag">&#x1F1EF;&#x1F1F5;</span></h3>
            <p class="teacher-card__qual">TOEIC 990 / バイリンガル講師</p>
            <p class="teacher-card__message">"日本人だからこそわかる英語学習のつまずきポイント。文法の「なぜ?」を丁寧に解説します。"</p>
          </div>
        </article>
        <!-- Teacher 4 -->
        <article class="teacher-card">
          <div class="teacher-card__photo-wrap">
            <img
              src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&q=80"
              alt="Mark Thompson"
              class="teacher-card__photo"
            >
          </div>
          <div class="teacher-card__info">
            <h3 class="teacher-card__name">Mark Thompson <span class="teacher-card__flag">&#x1F1E6;&#x1F1FA;</span></h3>
            <p class="teacher-card__qual">MA Applied Linguistics / 指導歴10年</p>
            <p class="teacher-card__message">"言語学の知見を活かした効率的な学習法で、最短ルートでの英語力アップをお約束します。"</p>
          </div>
        </article>
      </div>
    </div>
  </section>

  <!-- Pricing -->
  <section class="pricing section" id="pricing">
    <div class="section__inner">
      <p class="section__label">Pricing</p>
      <h2 class="section__title">シンプルで<br class="sp-only">わかりやすい料金体系</h2>
      <p class="section__lead">入会金 ¥22,000(税込)/教材費込み/途中プラン変更OK</p>

      <div class="pricing__grid">
        <!-- Plan 1 -->
        <article class="pricing-card">
          <div class="pricing-card__header">
            <h3 class="pricing-card__name">Light</h3>
            <p class="pricing-card__frequency">月4回プラン</p>
          </div>
          <div class="pricing-card__price">
            <span class="pricing-card__yen">&yen;</span>
            <span class="pricing-card__amount">16,500</span>
            <span class="pricing-card__tax">/月(税込)</span>
          </div>
          <ul class="pricing-card__features">
            <li class="pricing-card__feature">マンツーマン50分 &times; 月4回</li>
            <li class="pricing-card__feature">オンライン受講可</li>
            <li class="pricing-card__feature">レッスン録音提供</li>
            <li class="pricing-card__feature">学習カウンセリング(年2回)</li>
            <li class="pricing-card__feature">オリジナル教材</li>
          </ul>
          <a href="#trial" class="pricing-card__btn btn btn--outline">無料体験に申し込む</a>
        </article>
        <!-- Plan 2: Recommended -->
        <article class="pricing-card pricing-card--recommended">
          <div class="pricing-card__badge">Most Popular</div>
          <div class="pricing-card__header">
            <h3 class="pricing-card__name">Standard</h3>
            <p class="pricing-card__frequency">月8回プラン</p>
          </div>
          <div class="pricing-card__price">
            <span class="pricing-card__yen">&yen;</span>
            <span class="pricing-card__amount">28,600</span>
            <span class="pricing-card__tax">/月(税込)</span>
          </div>
          <ul class="pricing-card__features">
            <li class="pricing-card__feature">マンツーマン50分 &times; 月8回</li>
            <li class="pricing-card__feature">オンライン受講可</li>
            <li class="pricing-card__feature">レッスン録音提供</li>
            <li class="pricing-card__feature">学習カウンセリング(年4回)</li>
            <li class="pricing-card__feature">オリジナル教材</li>
            <li class="pricing-card__feature">自習スペース利用</li>
            <li class="pricing-card__feature">グループレッスン参加無料</li>
          </ul>
          <a href="#trial" class="pricing-card__btn btn btn--primary">無料体験に申し込む</a>
        </article>
        <!-- Plan 3 -->
        <article class="pricing-card">
          <div class="pricing-card__header">
            <h3 class="pricing-card__name">Unlimited</h3>
            <p class="pricing-card__frequency">通い放題プラン</p>
          </div>
          <div class="pricing-card__price">
            <span class="pricing-card__yen">&yen;</span>
            <span class="pricing-card__amount">44,000</span>
            <span class="pricing-card__tax">/月(税込)</span>
          </div>
          <ul class="pricing-card__features">
            <li class="pricing-card__feature">マンツーマン50分 &times; 無制限</li>
            <li class="pricing-card__feature">オンライン受講可</li>
            <li class="pricing-card__feature">レッスン録音提供</li>
            <li class="pricing-card__feature">学習カウンセリング(毎月)</li>
            <li class="pricing-card__feature">オリジナル教材</li>
            <li class="pricing-card__feature">自習スペース利用</li>
            <li class="pricing-card__feature">グループレッスン参加無料</li>
            <li class="pricing-card__feature">専属カウンセラー</li>
          </ul>
          <a href="#trial" class="pricing-card__btn btn btn--outline">無料体験に申し込む</a>
        </article>
      </div>
    </div>
  </section>

  <!-- Student Voice -->
  <section class="voice section section--ecru" id="voice">
    <div class="section__inner">
      <p class="section__label">Student Voice</p>
      <h2 class="section__title">受講生の声</h2>
      <p class="section__lead">Eikaiwa Firstで英語力を伸ばした受講生のリアルな声をお届けします。</p>

      <div class="voice__grid">
        <!-- Testimonial 1 -->
        <article class="testimonial">
          <div class="testimonial__quote-mark">&ldquo;</div>
          <blockquote class="testimonial__text">
            仕事で急に英語でのプレゼンが必要になり、慌てて入会しました。James先生のビジネス英語コースのおかげで、3ヶ月後には自信を持って英語でプレゼンできるようになりました。同僚からも「発音が変わった」と褒められました。
          </blockquote>
          <div class="testimonial__author">
            <img
              src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=300&q=80"
              alt="山田 恵子"
              class="testimonial__photo"
            >
            <div class="testimonial__meta">
              <p class="testimonial__name">山田 恵子</p>
              <p class="testimonial__course">ビジネス英語コース / 受講歴1年</p>
            </div>
          </div>
        </article>
        <!-- Testimonial 2 -->
        <article class="testimonial">
          <div class="testimonial__quote-mark">&ldquo;</div>
          <blockquote class="testimonial__text">
            TOEIC 450点から始めて、半年で780点まで伸びました。田中先生の「なぜそうなるのか」を丁寧に解説してくれるスタイルが自分に合っていたと思います。今は800点超えを目指して継続中です。
          </blockquote>
          <div class="testimonial__author">
            <img
              src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=300&q=80"
              alt="佐藤 健太"
              class="testimonial__photo"
            >
            <div class="testimonial__meta">
              <p class="testimonial__name">佐藤 健太</p>
              <p class="testimonial__course">TOEIC対策コース / 受講歴8ヶ月</p>
            </div>
          </div>
        </article>
        <!-- Testimonial 3 -->
        <article class="testimonial">
          <div class="testimonial__quote-mark">&ldquo;</div>
          <blockquote class="testimonial__text">
            海外旅行が趣味で、もっと現地の人と話したいと思い入会しました。Sarah先生はいつも明るくて、間違えても優しくフォローしてくれるので、楽しく続けられています。先日のハワイ旅行では、現地のお店で自然に英語で会話できました!
          </blockquote>
          <div class="testimonial__author">
            <img
              src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?w=300&q=80"
              alt="鈴木 美穂"
              class="testimonial__photo"
            >
            <div class="testimonial__meta">
              <p class="testimonial__name">鈴木 美穂</p>
              <p class="testimonial__course">日常英会話コース / 受講歴1年半</p>
            </div>
          </div>
        </article>
      </div>
    </div>
  </section>

  <!-- Trial CTA -->
  <section class="trial section section--blue" id="trial">
    <div class="section__inner trial__inner">
      <p class="trial__en">Start Your Journey</p>
      <h2 class="trial__title">まずは無料体験から</h2>
      <p class="trial__desc">
        50分間のマンツーマン体験レッスン + レベルチェック + 学習カウンセリング。<br>
        すべて無料で、入会の義務はありません。
      </p>
      <a href="#" class="trial__cta btn btn--cta btn--pulse-cta">
        無料体験レッスンを予約する
        <span class="btn__arrow">&rarr;</span>
      </a>
      <p class="trial__note">※ オンラインでの体験レッスンも対応しております</p>
    </div>
  </section>

  <!-- FAQ -->
  <section class="faq section" id="faq">
    <div class="section__inner">
      <p class="section__label">FAQ</p>
      <h2 class="section__title">よくあるご質問</h2>

      <div class="faq__list">
        <details class="faq__item">
          <summary class="faq__question">
            <span class="faq__q-text">全くの初心者ですが大丈夫ですか?</span>
            <span class="faq__icon">+</span>
          </summary>
          <div class="faq__answer">
            <p>もちろんです。当校の受講生の約40%が初心者からのスタートです。日本人バイリンガル講師が日本語でのサポートも行いますので、安心してレッスンを受けていただけます。レベルチェックテストで最適なクラスをご提案いたします。</p>
          </div>
        </details>
        <details class="faq__item">
          <summary class="faq__question">
            <span class="faq__q-text">レッスンの振替はできますか?</span>
            <span class="faq__icon">+</span>
          </summary>
          <div class="faq__answer">
            <p>レッスン開始の24時間前までにご連絡いただければ、同月内で振替が可能です。急な体調不良や仕事の都合にも柔軟に対応いたしますので、お気軽にご相談ください。</p>
          </div>
        </details>
        <details class="faq__item">
          <summary class="faq__question">
            <span class="faq__q-text">オンラインと対面、どちらがおすすめですか?</span>
            <span class="faq__icon">+</span>
          </summary>
          <div class="faq__answer">
            <p>どちらもレッスンの質は同じです。通学の時間が取れない方にはオンラインが便利ですが、対面レッスンではより細かな発音指導やジェスチャーを交えたコミュニケーション練習が可能です。多くの受講生は併用されています。</p>
          </div>
        </details>
        <details class="faq__item">
          <summary class="faq__question">
            <span class="faq__q-text">途中でプランの変更は可能ですか?</span>
            <span class="faq__icon">+</span>
          </summary>
          <div class="faq__answer">
            <p>はい、月単位でプラン変更が可能です。「まずはLightプランで始めて、慣れてきたらStandardに変更」という方も多くいらっしゃいます。変更は毎月15日までにお申し出いただければ、翌月から反映されます。</p>
          </div>
        </details>
        <details class="faq__item">
          <summary class="faq__question">
            <span class="faq__q-text">解約に違約金はかかりますか?</span>
            <span class="faq__icon">+</span>
          </summary>
          <div class="faq__answer">
            <p>違約金は一切かかりません。月末の2週間前までにお申し出いただければ、翌月から解約となります。未受講分のレッスン料の返金も対応しております。安心してお始めください。</p>
          </div>
        </details>
      </div>
    </div>
  </section>

  <!-- Access -->
  <section class="access section section--ecru" id="access">
    <div class="section__inner">
      <p class="section__label">Access</p>
      <h2 class="section__title">スクール案内</h2>

      <div class="access__grid">
        <div class="access__info">
          <dl class="access__list">
            <div class="access__row">
              <dt class="access__term">スクール名</dt>
              <dd class="access__detail">Eikaiwa First 渋谷校</dd>
            </div>
            <div class="access__row">
              <dt class="access__term">所在地</dt>
              <dd class="access__detail">〒150-0002<br>東京都渋谷区渋谷2-10-15 渋谷Firstビル 3F</dd>
            </div>
            <div class="access__row">
              <dt class="access__term">アクセス</dt>
              <dd class="access__detail">JR渋谷駅 東口より徒歩3分<br>東京メトロ 渋谷駅 B3出口より徒歩1分</dd>
            </div>
            <div class="access__row">
              <dt class="access__term">営業時間</dt>
              <dd class="access__detail">平日 10:00 — 21:00<br>土日祝 9:00 — 18:00</dd>
            </div>
            <div class="access__row">
              <dt class="access__term">電話</dt>
              <dd class="access__detail"><a href="tel:03-1234-5678" class="access__link">03-1234-5678</a></dd>
            </div>
            <div class="access__row">
              <dt class="access__term">メール</dt>
              <dd class="access__detail"><a href="mailto:info@eikaiwa-first.jp" class="access__link">info@eikaiwa-first.jp</a></dd>
            </div>
          </dl>
        </div>
        <div class="access__map">
          <iframe
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.7479754683745!2d139.7016358!3d35.6594945!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188b57a4fbe3e1%3A0x341c41a6e19963!2z5riL6LC36aeF!5e0!3m2!1sja!2sjp!4v1700000000000!5m2!1sja!2sjp"
            width="100%"
            height="350"
            style="border:0; border-radius: 8px;"
            allowfullscreen=""
            loading="lazy"
            referrerpolicy="no-referrer-when-downgrade"
            title="Eikaiwa First 渋谷校の地図"
          ></iframe>
        </div>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer class="footer">
    <div class="footer__inner">
      <div class="footer__top">
        <div class="footer__brand">
          <a href="#" class="footer__logo">
            <span class="footer__logo-mark">E</span>
            <span class="footer__logo-text">Eikaiwa First</span>
          </a>
          <p class="footer__tagline">Your World, Expanded.</p>
        </div>
        <div class="footer__links">
          <div class="footer__col">
            <h4 class="footer__heading">Courses</h4>
            <ul class="footer__list">
              <li><a href="#courses" class="footer__link">日常英会話</a></li>
              <li><a href="#courses" class="footer__link">ビジネス英語</a></li>
              <li><a href="#courses" class="footer__link">TOEIC対策</a></li>
              <li><a href="#courses" class="footer__link">キッズ英会話</a></li>
            </ul>
          </div>
          <div class="footer__col">
            <h4 class="footer__heading">Information</h4>
            <ul class="footer__list">
              <li><a href="#teachers" class="footer__link">講師紹介</a></li>
              <li><a href="#pricing" class="footer__link">料金プラン</a></li>
              <li><a href="#faq" class="footer__link">よくある質問</a></li>
              <li><a href="#access" class="footer__link">アクセス</a></li>
            </ul>
          </div>
          <div class="footer__col">
            <h4 class="footer__heading">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>
            </ul>
          </div>
        </div>
      </div>
      <div class="footer__bottom">
        <p class="footer__copyright">&copy; 2024 Eikaiwa First. All rights reserved.</p>
      </div>
    </div>
  </footer>

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

Self Check

0 / 9

Submit

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

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

Freelance Value

教育系スクール・オンラインスクール。相場:200,000〜500,000円