P04🎨ポートフォリオ・LP系中級

Seminar 2026

イベントLP

想定時間12h

技術HTML / CSS / JS

完成形を見るソースコードを見る

Client Brief

山

山本浩司事務局長

一般社団法人未来教育協会

件名: 新規制作（イベントLP）のご依頼

高校生向けのキャリア教育セミナーを開催する。今年は1000名規模を目指していて、若者の心に刺さるLPが必要。

ご要望

1開催日までのカウントダウン表示
2登壇者紹介、タイムテーブル、料金プラン
3申込フォームへの導線が明確
4若者ウケする攻めたデザイン（ブルータリスト系希望）

予算

¥180,000

納期

3週間

種別

新規制作（イベントLP）

クライアントの人柄

真面目だが新しいものを取り入れる柔軟さがある。前年比150%の集客が目標。

避けてほしいこと

お役所感古い印象大人向けすぎるトーン

成功指標

LPからの申込が500件以上集まること

追加メモ

"去年は普通の白背景LPで300名集客でした。今年は完全に振り切ったデザインで勝負したいです。マスタード色とか、新聞みたいな構成、面白そうですね。"

Preview

フル画面で開く →

/demo/P04-seminar-2026/index.html

Learning Points

カウントダウンタイマー

申込フォーム

登壇者紹介

タイムテーブル

How to Build

Step 1: セクション設計

60分

ヒーロー、スピーカー、スケジュール、登録の4セクション構造を設計。カウントダウンのロジックを整理。

成果物: セクション構成図 + カウントダウン仕様

Step 2: HTML構造

90分

ヒーロー→スピーカー→スケジュール→登録の順でマークアップ。フォームのinput/buttonも作る。

成果物: 完全なHTMLファイル

Step 3: ブルータリストCSS

120分

太罫線3px、Big Shoulders Display、マスタード配色を実装。斜めストライプの背景装飾も。

成果物: ビジュアルベース完成

Step 4: JavaScript

60分

requestAnimationFrameでカウントダウンタイマーを実装。padStartで桁揃え。

成果物: カウントダウン動作

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

90分

4カラム→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>DESIGN CONF 2026 — Tokyo</title>
  <meta name="description" content="DESIGN CONF 2026。東京で開催されるデザインカンファレンス。2026年9月12日・13日。">

  <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=Outfit: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">
    <span class="header__brand">DC—26</span>
    <nav class="header__nav">
      <a href="#speakers" class="header__link">Speakers</a>
      <a href="#schedule" class="header__link">Schedule</a>
      <a href="#register" class="header__link header__link--cta">Register</a>
    </nav>
  </header>

  <!-- ============ HERO ============ -->
  <section class="hero">
    <div class="hero__bg">
      <div class="hero__stripe hero__stripe--1"></div>
      <div class="hero__stripe hero__stripe--2"></div>
      <div class="hero__stripe hero__stripe--3"></div>
    </div>
    <div class="hero__content">
      <div class="hero__meta">
        <span class="hero__date-label">Sep 12–13, 2026</span>
        <span class="hero__location">Tokyo, Shibuya Hikarie</span>
      </div>
      <h1 class="hero__title">
        <span class="hero__title-line">DESIGN</span>
        <span class="hero__title-line">CONF</span>
        <span class="hero__title-year">2026</span>
      </h1>
      <p class="hero__subtitle">
        デザインの境界を越える2日間。<br>
        テクノロジー × クラフト × ビジネスの交差点。
      </p>

      <!-- Countdown -->
      <div class="countdown" id="countdown">
        <div class="countdown__item">
          <span class="countdown__number" id="cd-days">000</span>
          <span class="countdown__label">Days</span>
        </div>
        <div class="countdown__sep">:</div>
        <div class="countdown__item">
          <span class="countdown__number" id="cd-hours">00</span>
          <span class="countdown__label">Hrs</span>
        </div>
        <div class="countdown__sep">:</div>
        <div class="countdown__item">
          <span class="countdown__number" id="cd-mins">00</span>
          <span class="countdown__label">Min</span>
        </div>
        <div class="countdown__sep">:</div>
        <div class="countdown__item">
          <span class="countdown__number" id="cd-secs">00</span>
          <span class="countdown__label">Sec</span>
        </div>
      </div>
    </div>
  </section>

  <!-- ============ SPEAKERS ============ -->
  <section id="speakers" class="speakers">
    <div class="speakers__header">
      <h2 class="speakers__title">Speakers</h2>
      <span class="speakers__count">8 Speakers</span>
    </div>
    <div class="speakers__grid">
      <article class="speaker">
        <div class="speaker__photo">
          <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=400&q=80" alt="高橋麻衣">
        </div>
        <h3 class="speaker__name">高橋 麻衣</h3>
        <p class="speaker__role">Creative Director, IDEO Tokyo</p>
      </article>
      <article class="speaker">
        <div class="speaker__photo">
          <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?w=400&q=80" alt="James Chen">
        </div>
        <h3 class="speaker__name">James Chen</h3>
        <p class="speaker__role">Principal Designer, Figma</p>
      </article>
      <article class="speaker">
        <div class="speaker__photo">
          <img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?w=400&q=80" alt="木村奈々">
        </div>
        <h3 class="speaker__name">木村 奈々</h3>
        <p class="speaker__role">Type Designer, Independent</p>
      </article>
      <article class="speaker">
        <div class="speaker__photo">
          <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&q=80" alt="Marcus Webb">
        </div>
        <h3 class="speaker__name">Marcus Webb</h3>
        <p class="speaker__role">Partner, Pentagram NY</p>
      </article>
      <article class="speaker">
        <div class="speaker__photo">
          <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=400&q=80" alt="田中利恵">
        </div>
        <h3 class="speaker__name">田中 利恵</h3>
        <p class="speaker__role">UX Lead, Mercari</p>
      </article>
      <article class="speaker">
        <div class="speaker__photo">
          <img src="https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?w=400&q=80" alt="Erik Larsen">
        </div>
        <h3 class="speaker__name">Erik Larsen</h3>
        <p class="speaker__role">Architect, OMA Rotterdam</p>
      </article>
      <article class="speaker">
        <div class="speaker__photo">
          <img src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?w=400&q=80" alt="佐藤遥">
        </div>
        <h3 class="speaker__name">佐藤 遥</h3>
        <p class="speaker__role">Art Director, Dentsu Lab</p>
      </article>
      <article class="speaker">
        <div class="speaker__photo">
          <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&q=80" alt="David Park">
        </div>
        <h3 class="speaker__name">David Park</h3>
        <p class="speaker__role">Design Technologist, Google</p>
      </article>
    </div>
  </section>

  <!-- ============ SCHEDULE ============ -->
  <section id="schedule" class="schedule">
    <h2 class="schedule__title">Timetable</h2>
    <div class="schedule__days">
      <div class="schedule__day">
        <h3 class="schedule__day-title">Day 1 — Sep 12</h3>
        <div class="schedule__list">
          <div class="schedule__item">
            <span class="schedule__time">10:00</span>
            <div class="schedule__detail">
              <span class="schedule__talk">Opening Keynote</span>
              <span class="schedule__speaker">高橋 麻衣</span>
            </div>
          </div>
          <div class="schedule__item">
            <span class="schedule__time">11:30</span>
            <div class="schedule__detail">
              <span class="schedule__talk">The Future of Variable Fonts</span>
              <span class="schedule__speaker">木村 奈々</span>
            </div>
          </div>
          <div class="schedule__item schedule__item--break">
            <span class="schedule__time">13:00</span>
            <div class="schedule__detail">
              <span class="schedule__talk">Lunch Break</span>
            </div>
          </div>
          <div class="schedule__item">
            <span class="schedule__time">14:30</span>
            <div class="schedule__detail">
              <span class="schedule__talk">Design Systems at Scale</span>
              <span class="schedule__speaker">James Chen</span>
            </div>
          </div>
          <div class="schedule__item">
            <span class="schedule__time">16:00</span>
            <div class="schedule__detail">
              <span class="schedule__talk">Workshop: Prototyping with AI</span>
              <span class="schedule__speaker">田中 利恵</span>
            </div>
          </div>
        </div>
      </div>

      <div class="schedule__day">
        <h3 class="schedule__day-title">Day 2 — Sep 13</h3>
        <div class="schedule__list">
          <div class="schedule__item">
            <span class="schedule__time">10:00</span>
            <div class="schedule__detail">
              <span class="schedule__talk">Space as Interface</span>
              <span class="schedule__speaker">Erik Larsen</span>
            </div>
          </div>
          <div class="schedule__item">
            <span class="schedule__time">11:30</span>
            <div class="schedule__detail">
              <span class="schedule__talk">Brand × Culture × Commerce</span>
              <span class="schedule__speaker">Marcus Webb</span>
            </div>
          </div>
          <div class="schedule__item schedule__item--break">
            <span class="schedule__time">13:00</span>
            <div class="schedule__detail">
              <span class="schedule__talk">Lunch Break</span>
            </div>
          </div>
          <div class="schedule__item">
            <span class="schedule__time">14:30</span>
            <div class="schedule__detail">
              <span class="schedule__talk">The New Visual Language</span>
              <span class="schedule__speaker">佐藤 遥</span>
            </div>
          </div>
          <div class="schedule__item">
            <span class="schedule__time">16:00</span>
            <div class="schedule__detail">
              <span class="schedule__talk">Closing: Design as Code</span>
              <span class="schedule__speaker">David Park</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- ============ REGISTER ============ -->
  <section id="register" class="register">
    <div class="register__inner">
      <h2 class="register__heading">Register<br>Now<span class="register__dot">.</span></h2>
      <div class="register__form-area">
        <p class="register__text">
          2日間の全セッション + ネットワーキングディナー込み。<br>
          早割は2026年6月30日まで。
        </p>
        <div class="register__pricing">
          <div class="register__price-card">
            <span class="register__price-label">Early Bird</span>
            <span class="register__price-amount">¥15,000</span>
            <span class="register__price-note">〜6/30</span>
          </div>
          <div class="register__price-card register__price-card--regular">
            <span class="register__price-label">Regular</span>
            <span class="register__price-amount">¥25,000</span>
            <span class="register__price-note">7/1〜</span>
          </div>
          <div class="register__price-card">
            <span class="register__price-label">Student</span>
            <span class="register__price-amount">¥8,000</span>
            <span class="register__price-note">学生証必要</span>
          </div>
        </div>
        <form class="register__form" onsubmit="return false;">
          <input type="email" class="register__input" placeholder="your@email.com" required>
          <button type="submit" class="register__btn">申し込む</button>
        </form>
      </div>
    </div>
  </section>

  <!-- ============ FOOTER ============ -->
  <footer class="footer">
    <div class="footer__inner">
      <span class="footer__brand">DC—26</span>
      <div class="footer__links">
        <a href="#">Twitter</a>
        <a href="#">Instagram</a>
        <a href="mailto:info@designconf.jp">Contact</a>
      </div>
      <span class="footer__copy">&copy; 2026 DESIGN CONF</span>
    </div>
  </footer>

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

Self Check

0 / 11

Submit

Discord #提出-portfolio チャンネルに以下を投稿

1デプロイURL（Vercel or Netlify、無料でOK）
2GitHubリポジトリURL
3実装で工夫した点を3つ箇条書きで
4クライアントへの提案メッセージ案（実際に納品するつもりで）

Freelance Value

セミナー・イベント・ウェビナーLP。相場：100,000〜250,000円

ポートフォリオ・LP系の他の課題を見る