--- 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/）からご連絡ください。