---
version: alpha
name: Electric Blue Night Countdown Webinar LP
description: 鮮やかなロイヤルブルーと漆黒を交互に敷き、オレンジのグラデーションCTAで申込を促す訴求型の無料オンラインセミナーLP。日付を極太数字で大きく見せ、締切カウントダウン・特典カードを繰り返し積み上げる。中盤に夜空風の紺グラデと金装飾の明朝見出しを挟み、高級感と特別感を足している。
colors:
  primary: '#085CFE'
  background: '#F4F7FC'
  dark-section: '#020101'
  secondary: '#01134C'
  cta: '#FE5A0A'
  on-cta: '#FEEEE4'
  accent-1: '#F2C21B'
  accent-2: '#2EE6C8'
  text-body: '#044FDB'
  text: '#000001'
  on-dark: '#FEFEFE'
  tint-1: '#DCEBFC'
  accent-3: '#C9A85A'
  line: '#A8A8A8'
  cta-accessible: '#C24001'
  primary-accessible: '#1F6BFE'
typography:
  display:
    fontFamily: Noto Sans JP
    fontSize: 38px
    fontWeight: 900
    lineHeight: 1.1
  headline-lg:
    fontFamily: Noto Sans JP
    fontSize: 30px
    fontWeight: 900
    lineHeight: 1.3
    letterSpacing: 0.04em
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 22px
    fontWeight: 800
    lineHeight: 1.35
    letterSpacing: 0.02em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 17px
    fontWeight: 700
    lineHeight: 1.45
    letterSpacing: 0.02em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.75
    letterSpacing: 0.05em
  note:
    fontFamily: Noto Sans JP
    fontSize: 11px
    fontWeight: 500
    lineHeight: 1.5
  accent:
    fontFamily: Shippori Mincho
    fontSize: 34px
    fontWeight: 800
    lineHeight: 1.3
    letterSpacing: 0.04em
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 21px
    fontWeight: 900
    lineHeight: 1.3
    letterSpacing: 0.02em
rounded:
  sm: 2px
  md: 8px
  lg: 14px
  full: 999px
spacing:
  unit: 8px
  card: 16px
  section: 56px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.lg}'
    height: 105px
  deadline-banner:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.cta}'
    typography: '{typography.display}'
    height: 90px
  date-tag:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-sm}'
    height: 36px
  bonus-card:
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.md}'
    height: 230px
  schedule-row:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.text}'
    typography: '{typography.display}'
    rounded: '{rounded.sm}'
    height: 64px
  bullet-list:
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    height: 60px
  warning-box:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.accent-1}'
    typography: '{typography.headline-lg}'
    rounded: '{rounded.md}'
    height: 520px
  highlight-box:
    backgroundColor: '{colors.on-dark}'
    textColor: '{colors.text-body}'
    typography: '{typography.headline-md}'
    height: 40px
  section-title-line:
    textColor: '{colors.text-body}'
    typography: '{typography.headline-md}'
    height: 60px
  profile-list:
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 56px
---

# DESIGN.md — 青×黒×橙の期間限定AI無料セミナーLP（Electric Blue Night Countdown Webinar LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。
上の YAML（トークン）が正、本文はその使い方の説明です。
**元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。**
公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

## Overview

- **業種**: 教育・スクール・資格 ／ **雰囲気**: 情報量多め・訴求型、力強い・インパクト、クール・先進的、ポップ・元気
- **キーワード**: 極太日付・締切カウントダウン・青黒交互・特典カード連打・オレンジCTA・夜空グラデ
- **地の質感**: ブルーはベタ塗り。黒帯はフラット、またはコンクリート調のザラつき。中盤は星屑が散った紺グラデ。特典エリアは淡い水色の地に青い紙吹雪を散らす
- **形**: 角丸小さめの長方形カードと太い青枠が基本。CTAだけ大きめの角丸でグラデ＋影をつける。日付ラベルは角のない四角いタグにする
- **温度感**: 寒色が主役。オレンジと黄色を差して熱量を出す、高コントラストな配色

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#085CFE` | ブランド青・セクション地・日付ラベル | 18% | 画素の実測 |
| `background` | `#F4F7FC` | プログラム紹介の淡い地 | 14% | 画素の実測 |
| `dark-section` | `#020101` | 締切・CTA帯の黒地 | 13% | 画素の実測 |
| `secondary` | `#01134C` | 夜空グラデの紺地 | 16% | 画素の実測 |
| `cta` | `#FE5A0A` | 申込ボタン・締切帯のオレンジ | 4% | 画素の実測 |
| `on-cta` | `#FEEEE4` | CTA上の白文字 | 1% | 画素の実測 |
| `accent-1` | `#F2C21B` | 注意喚起の黄（ストライプ・ボタン・期間限定タグ） | 3% | 推定 |
| `accent-2` | `#2EE6C8` | 暗地上の強調シアン文字 | 0% | 推定 |
| `text-body` | `#044FDB` | 明るい地の強調青文字 | 0% | 画素の主要色に補正 |
| `text` | `#000001` | 見出し・日付の黒文字 | 2% | 画素の実測 |
| `on-dark` | `#FEFEFE` | 暗地上の白文字 | 2% | 画素の主要色に補正 |
| `tint-1` | `#DCEBFC` | 特典エリアの淡い水色地 | 9% | 画素の実測 |
| `accent-3` | `#C9A85A` | コンプリート特典の金装飾線 | 0% | 推定 |
| `line` | `#A8A8A8` | プロフィールの点線区切り | 0% | 画素の実測 |
| `cta-accessible` | `#C24001` | AA を満たす補正値（計算） |  | 計算 |
| `primary-accessible` | `#1F6BFE` | AA を満たす補正値（計算） |  | 計算 |

- ページは青ベタ、黒、淡い青白の3つの地を交互に切り替えてリズムを作る
- オレンジは申込CTA・締切帯・締切日付の数字に限定する
- 黄はCTA左の期間限定タグ、警告ストライプ、注意ボタンだけに使う
- 暗い地の強調語はシアンか黄、明るい地の強調語は青で色を変える
- 金の装飾線は紺グラデのコンプリート特典セクションでのみ使う
- 特典カードは白い面に太い青枠をつけ、青い地に浮かせる
- `button-primary` は文字 `#FEEEE4` × 背景 `#FE5A0A` のコントラスト比が 2.78:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#C24001`、4.61:1）を使う。
- `schedule-row` は文字 `#000001` × 背景 `#085CFE` のコントラスト比が 3.97:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#1F6BFE`、4.59:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | 開催日時の極太数字 | 欧文サンセリフ | Noto Sans JP | 900 | 38px | 1.1 | 0em |
| `headline-lg` | 暗転セクションの大見出し | ゴシック | Noto Sans JP | 900 | 30px | 1.3 | 0.04em |
| `headline-md` | セクション見出し・特典名 | ゴシック | Noto Sans JP | 800 | 22px | 1.35 | 0.02em |
| `headline-sm` | 箇条書きリード・小見出し | ゴシック | Noto Sans JP | 700 | 17px | 1.45 | 0.02em |
| `body-md` | 暗い地の中央揃え本文 | ゴシック | Noto Sans JP | 700 | 15px | 1.75 | 0.05em |
| `note` | CTA下の補足・注釈 | ゴシック | Noto Sans JP | 500 | 11px | 1.5 | 0em |
| `accent` | 高級感を出す特典大見出し | 明朝 | Shippori Mincho | 800 | 34px | 1.3 | 0.04em |
| `label-button` | CTAボタンの3行文言 | ゴシック | Noto Sans JP | 900 | 21px | 1.3 | 0.02em |

- 全体を極太ゴシックで統一し、細いウェイトは注釈にだけ使う
- 日付は数字を大きくし、曜日は黒丸の中に白抜きで小さく入れる
- 本文は中央揃えで短く改行し、強調語だけ色を変える
- CTAは3行構成にし、キーワードだけ黄で抜く
- 明朝は特別感を出す1セクションの見出しだけに使う
- 締切の数字はオレンジで、曜日の括弧は小さく添える
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。特典の画像は 2 列並び
- **本文ブロックの幅**: 画面幅の約 90%
- **余白**: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
- セクションは全幅の地色ブロックで区切る
- 日付見出しは左にラベルタグ、右に極太日付を横一列で置く
- プログラムごとにバナー画像、三角マーカーの箇条書き、青枠の特典カードの順で繰り返す
- CTAは黒帯の中に置き、締切表示とセットにする
- CTAを3〜4回繰り返し配置する
- 本文は中央揃え、箇条書きとプロフィールは左揃え

## Elevation & Depth

- CTAボタンは下に濃い影を落とし、立体的なグラデにする
- 特典カードは太い青枠で囲み、影はつけない
- 夜空セクションは星の光とグロウで奥行きを出す
- それ以外はフラットにする

## Shapes

- **角丸**: 小 2px ／ 中 8px ／ 大 14px。ボタンは角丸の長方形。
- **写真の切り抜き**: バナーは角なしの長方形。登壇者だけ青枠の正円で切り抜く
- **セクション境界**: 直線で地色を切り替える。黄黒の警告ストライプ帯と金の装飾罫も使う
- 日付ラベルは角丸なしの青い四角
- 特典カードは角丸8px程度で、青枠を3〜4pxにする
- CTAは角丸14px前後の横長長方形
- 締切表示の左右に斜線を入れて挟む

## Components

- **オレンジ申込CTA**（`button-primary`）: オレンジのグラデ角丸ボタン。左端に黄の縦書き期間限定タグ、右端に白い三角を置く。文言は白の3行で、一部を黄にする
- **締切カウントダウン帯**（`deadline-banner`）: 黒い地に小見出しを置き、オレンジの大きな日付と白の時刻を並べる。左右をオレンジの斜線で挟む
- **Day日付ラベル**（`date-tag`）: 青い四角に白い太字で回の名前を入れ、右に黒の極太日付と曜日の黒丸を並べる
- **参加特典カード**（`bonus-card`）: 白い面に太い青枠。上部に左右の罫線つき見出しを置き、2列の画像と特典名を中央に並べる
- **スケジュール行**（`schedule-row`）: 青い地の上に白い横長の行を4本並べる。各行は日付ラベルと黒の極太日時
- **三角マーカー箇条書き**（`bullet-list`）: 小さな三角の後に黒い太字を置き、成果の数字だけ青にする
- **警告ストライプセクション**（`warning-box`）: 黄黒ストライプで上下を挟み、黒い地に注意アイコン、黄の見出し、黄のボタン型注意文を置く
- **白箱強調**（`highlight-box`）: 暗い地の本文中で、強調語を白い箱に青や黒の文字で抜く
- **上下罫線見出し**（`section-title-line`）: 青い文字の見出しを上下2本の青い細線で挟む
- **実績リスト**（`profile-list`）: 黒い四角マーカーに黒い太字を続け、実績の数字は青にする。行の間は点線で区切る

## Do's and Don'ts

**Do**
- 日付と締切は画面幅いっぱいの極太数字で見せる
- CTAは必ず黒帯の中で締切表示とセットにする
- 特典は番号タブつきのカードにして、同じ型で繰り返す
- 暗い地の強調語はシアン、明るい地の強調語は青で統一する
- 青・黒・淡色の地を交互に並べ、スクロールのリズムを保つ

**Don't**
- オレンジを申込以外のボタンや装飾に使わない
- 細い書体や小さい日付で控えめにしない
- パステル系や暖色の地を大面積に使わない
- 特典カードの青枠を省いたり細くしたりしない
- 明朝や金装飾を全体に広げない

## Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. **ファーストビュー**（テーマと開催日程を一目で伝える）: グレーの地にフィギュア調のキャラを密集させたコラージュを置く。左右に縦書きの大見出し、中央にロゴを置き、下に青帯で日程を入れる
2. **締切・CTA**（期間限定を伝え、即申込させる）: シアンの帯、黒の締切表示、オレンジの申込期限帯、オレンジCTA、注釈の順に縦へ積む
3. **停止予告**（緊急性を高める）: 黒い地に白の文と、黄の大きな太字。キーワードには黄の下線をつける
4. **成果の提示**（実績と開発背景で信頼を作る）: ステージ幕の写真から紺の星空へ続くグラデ。白の中央揃え本文で、数字だけシアンにする
5. **プログラム内容**（各回の学べることを示す）: 淡い地に上下罫線の見出しを置き、回ごとに日付ラベル、バナー、箇条書き、特典カードの順で並べる
6. **注意喚起**（全回参加を促す）: 黄黒ストライプで挟んだ黒いセクション。注意アイコンと黄の見出しを入れる
7. **スケジュール**（日程を再確認させる）: 青い地に白い日程行を4本並べ、キャラのイラストを添える
8. **CTA**（申込を促す）: 黒帯に締切を置き、オレンジCTAと注釈を続ける
9. **参加特典一覧**（特典の豪華さで背中を押す）: 水色の地に紙吹雪を散らす。大きな青い見出しの後、回ごとに番号タブつきの青枠カードと説明の白箱を並べる
10. **全回参加の特典**（全回参加の動機をつくる）: 紺の星空グラデに金の装飾罫を入れ、明朝の大見出しを置く。青い細枠のカードとチェックリストを並べる
11. **CTA**（最終の申込を促す）: 黒い地に締切表示とひと言メッセージ、オレンジCTAを置く
12. **登壇者紹介**（講師の権威を示す）: 白い地に罫線見出しを置き、正円の写真、大きな氏名、点線区切りの実績リストを続ける
13. **最終CTA・フッター**（最後の申込と規約への導線）: 黒帯のCTAの後、白い地に小さな規約リンクを置く

## Imagery

- 光沢のあるフィギュア調3Dキャラ（動物・玩具・だるま等）を密集させたコラージュ
- 講師の写真はハイキーで明るく撮り、帽子と眼鏡で個性を出す
- 特典はYouTubeサムネ風の高彩度バナーにし、太字タイトルを重ねる
- 紺の宇宙・星屑・青いステージ幕で期待感を演出する
- 青いリボン状の紙吹雪を淡い地に散らす
- 黄黒の警告ストライプ帯と金のアール・ヌーヴォー調装飾罫
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC では 375〜480px 幅の SP レイアウトを中央に置き、左右は地色で埋める
- PC の左右余白は各セクションの地色か濃紺を延長する
- 特典画像の2列並びは PC でも維持する
- 日付の極太数字は最大 56px 程度まで拡大する
- CTAは最大幅 480px 程度に抑える

## Agent Prompt Guide

```text
この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる
```

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。

## Provenance

- **ID**: `xd-c1d562ce`（元 LP の URL から採番）
- **元 LP**: https://www.harukaze.inc/p/4VITna4r6B0f
- **解析に使った画像**: SP（スマホ版）
- **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-12、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。