--- version: alpha name: Celebratory Orange Award Education LP description: クリーム地にオレンジのグラデーション文字と旗・紙吹雪を散らした、お祝いムードの実績訴求 LP。月桂樹付きの No.1 バッジを並べ、白カードで項目ごとに根拠を説明する。ヘッダーとフッターは濃紺で締める。 colors: primary: '#F18911' cta: '#EC8A14' on-cta: '#FFFFFF' background: '#FFFFFF' background-alt: '#FFFBE9' dark-section: '#092845' on-dark: '#FFFFFF' accent-1: '#C6AF8A' text: '#222222' secondary: '#E8851A' surface: '#FEFEFE' line: '#F5F2EB' accent-2: '#7CCBAC' cta-accessible: '#AD650E' secondary-accessible: '#AE6311' accent-2-accessible: '#348465' typography: display: fontFamily: Montserrat fontSize: 72px fontWeight: 900 lineHeight: 1.0 letterSpacing: -0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.4 accent: fontFamily: Zen Kaku Gothic New fontSize: 18px fontWeight: 900 lineHeight: 1.2 body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 label-button: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.04em rounded: sm: 4px md: 8px lg: 16px full: 999px spacing: unit: 8px card: 16px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' 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.full}' height: 56px award-badge: backgroundColor: '{colors.surface}' textColor: '{colors.secondary}' typography: '{typography.accent}' rounded: '{rounded.lg}' height: 90px proof-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 200px button-outline: backgroundColor: '{colors.background}' textColor: '{colors.secondary}' typography: '{typography.note}' rounded: '{rounded.full}' height: 28px campaign-banner: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 60px voice-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 220px feature-pill: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-cta}' rounded: '{rounded.full}' height: 32px slash-lead: textColor: '{colors.primary}' typography: '{typography.headline-md}' height: 28px --- # DESIGN.md — オレンジ×紺の受賞祝祭型 英会話スクール LP（Celebratory Orange Award Education LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 教育・スクール・資格 ／ **雰囲気**: ポップ・元気、信頼・誠実、情報量多め・訴求型、親しみ・手作り感 - **キーワード**: No.1 実績・お祝いムード・月桂樹バッジ・白カード・オレンジ CTA・濃紺フッター - **地の質感**: クリーム色のフラットな地に、三角旗・紙吹雪・風船の装飾。カードは薄い影で少し浮かせる - **形**: 角丸カード、ピル型ボタン、円形のアイコン枠 - **温度感**: 暖色寄りで明るく、濃紺が全体を引き締める ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#F18911` | ブランドのオレンジ。No.1 の文字や CTA に使う | 3% | 画素の実測 | | `cta` | `#EC8A14` | 主 CTA ボタン | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTA ボタン上の文字 | 0% | 画素の主要色に補正 | | `background` | `#FFFFFF` | ページの基本の地 | 38% | 画素の実測 | | `background-alt` | `#FFFBE9` | クリーム色の帯セクション | 14% | 画素の実測 | | `dark-section` | `#092845` | ヘッダーとフッターの濃紺 | 11% | 画素の実測 | | `on-dark` | `#FFFFFF` | 濃紺面の上の文字 | 1% | 画素の主要色に補正 | | `accent-1` | `#C6AF8A` | 月桂樹バッジのゴールド | 3% | 画素の主要色に補正 | | `text` | `#222222` | 見出しと本文の文字 | 3% | 推定 | | `secondary` | `#E8851A` | No.1 バッジ文字・リンクボタンの枠 | 0% | 推定 | | `surface` | `#FEFEFE` | カードの面 | 6% | 画素の実測 | | `line` | `#F5F2EB` | カードの枠線 | 0% | 画素の主要色に補正 | | `accent-2` | `#7CCBAC` | 特長ラベルのミント（青・黄と組み合わせる） | 0% | 画素の実測 | | `cta-accessible` | `#AD650E` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#AE6311` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#348465` | AA を満たす補正値（計算） | | 計算 | - 地は白とクリームを交互に使い、セクションを区切る - オレンジは No.1 の文字・CTA・リンクボタンの枠だけに使う - 月桂樹とメダルはくすんだゴールドで描く - ヘッダーとフッターは濃紺の面に白文字 - ミント・青・黄はアイコンラベルの補助色に限る - `button-primary` は文字 `#FFFFFF` × 背景 `#EC8A14` のコントラスト比が 2.56:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#AD650E`、4.52:1）を使う。 - `award-badge` は文字 `#E8851A` × 背景 `#FEFEFE` のコントラスト比が 2.67:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#AE6311`、4.53:1）を使う。 - `button-outline` は文字 `#E8851A` × 背景 `#FFFFFF` のコントラスト比が 2.69:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#AE6311`、4.57:1）を使う。 - `feature-pill` は文字 `#FFFFFF` × 背景 `#7CCBAC` のコントラスト比が 1.91:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#348465`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の大きな No.1 ロゴ文字 | 欧文サンセリフ | Montserrat | 900 | 72px | 1.0 | -0.02em | | `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 700 | 20px | 1.4 | 0.02em | | `headline-md` | カードの見出し | ゴシック | Noto Sans JP | 700 | 16px | 1.4 | 0.0em | | `accent` | バッジ内の No.1 表記 | ゴシック | Zen Kaku Gothic New | 900 | 18px | 1.2 | 0.0em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.7 | 0.02em | | `note` | 調査概要などの注釈 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.0em | | `label-button` | CTA ボタンの文字 | ゴシック | Noto Sans JP | 700 | 17px | 1.3 | 0.04em | - 見出しは中央揃えの太字ゴシック - 本文は左揃えで行間を広めに取る - No.1 の数字だけを大きくし、オレンジのグラデーションで強調する - CTA の上には斜線で挟んだオレンジの短い一言を置く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。バッジは 2 列、カードは文章の下に画像を置く - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算） - 実績カードは同じ形で縦に繰り返す - カードの中は見出し→本文→画像→枠線付きリンクボタンの順 - バッジは同じサイズで中央に寄せる - 注釈は最後のカードの直後に小さく置く ## Elevation & Depth - カードとバッジに薄いドロップシャドウ（0 2px 6px 程度、透明度 8%） - CTA ボタンの下に少し濃いオレンジの影 - それ以外はフラット ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: カード内の画像は角丸の四角形、人物イラストは円形の枠 - **セクション境界**: 直線で色を切り替え、旗のガーランドを境界の飾りにする - ボタンはすべてピル型 - バッジは角丸の正方形に近い形 - 背景に淡い円形の飾りを置く ## Components - **主 CTA ボタン**（`button-primary`）: 横幅いっぱいに近いオレンジのピル型ボタン。白い太字 - **月桂樹 No.1 バッジ**（`award-badge`）: 白いカードの中に項目名・ゴールドの月桂樹・オレンジの No.1・下向き矢印を入れる - **実績説明カード**（`proof-card`）: 枠線付きの白カード。見出し・本文・画像を並べる - **枠線リンクボタン**（`button-outline`）: オレンジの細い枠で囲んだ小さなピル型の詳細ボタン - **キャンペーンバナー**（`campaign-banner`）: 期限の丸ラベル・大きな金額・紺色の登録ボタンを横一列に並べる - **お祝いメッセージカード**（`voice-card`）: 線画の似顔絵と短い文章を入れた白カード。左右のオレンジ丸矢印でスライドする - **特長ラベル**（`feature-pill`）: アイコン付きで色分けしたピル型ラベル。縦に 3 つ並べる - **斜線つき一言見出し**（`slash-lead`）: 左右を斜線で挟んだ短いオレンジの文章 ## Do's and Don'ts **Do** - 実績は同じ形のバッジとカードで揃えて並べる - 旗・紙吹雪・風船でお祝い感を出す - オレンジは強調する場所だけに絞る - カードには必ず詳細へのリンクボタンを付ける - No.1 の根拠になる調査概要を注釈で添える **Don't** - 濃紺を本文エリアの地に使わない - オレンジを本文の文字色に使わない - カードの角丸や影の強さをカードごとに変えない - 装飾を本文に重ねて読みにくくしない - 写真を暗く加工しない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（ログイン・登録への導線）: 濃紺のバーにロゴと小さなボタン。その下に白いアイコン付きナビ 2. **ファーストビュー**（No.1 を一目で伝える）: クリーム地に巨大なオレンジの No.1、リボン帯、キャラクターと旗 3. **実績バッジ一覧**（No.1 の項目を見せる）: 見出しと説明の下に月桂樹バッジを 4 つ＋3 つ並べる 4. **CM 動画**（知名度を示す）: クリーム帯に再生回数の見出し、動画を 2 つ並べる 5. **キャンペーン**（特典で登録を促す）: 横長のバナーを 1 枚置く 6. **実績の詳細**（各 No.1 の根拠を説明する）: 枠線カードを 7 枚縦に並べる。文章・画像・リンクボタン入り 7. **調査概要**（表記の根拠を示す）: 小さな注釈を左揃えで書く 8. **お祝いの声**（利用者の共感を集める）: クリーム地に旗の飾り、似顔絵付きカードのスライダー 9. **CTA**（無料体験に申し込ませる）: 斜線つきの一言とオレンジのピル型ボタン 10. **フッター**（サイト内の導線）: 濃紺地にロゴ・SNS・リンク一覧 ## Imagery - 明るい色のフラットなキャラクターイラスト（動物・人物） - 線画に淡い色を付けた似顔絵アイコン - 黄・ピンク・オレンジの三角旗ガーランドと紙吹雪 - 白背景の人物写真やタイル状に並べた顔写真 - パステルの風船と淡い円形の背景装飾 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央 900px 前後の幅で組み、カードは文章を左・画像を右に置く - SP ではカードの画像を文章の下に回す - バッジは PC で 4 列、SP で 2 列 - 動画は PC で 2 列、SP で縦に並べる - スライダーは PC で 3 枚、SP で 1 枚と少しを見せる - フッターのリンクは SP でアコーディオンにまとめる ## 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-07c58b72`（元 LP の URL から採番） - **元 LP**: https://nativecamp.net/online-english-conversation-no1 - **解析に使った画像**: PC（PC版） - **確度**: 色 高（7/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。