--- version: alpha name: Fresh Green Turf Horse Racing Info LP description: 生成り地と若草色の帯を交互に重ね、朱赤の丸ボタンと黄色のハイライトで目を引く競馬情報サービスの LP。見出しは明朝体で上品にまとめ、本文はゴシックで読みやすくしている。比較表やレビューカードを使った訴求型の構成。 colors: background: '#FCFFF4' background-alt: '#E6F2CC' surface: '#FFFFFF' primary: '#30A147' cta: '#D05454' on-cta: '#FFFFFF' text: '#1D1D1D' dark-section: '#2C2C2C' on-dark: '#F8FCF9' accent-1: '#FEE34C' accent-2: '#F6B23C' tint-1: '#C7D7AA' text-muted: '#666C6B' cta-accessible: '#CD4848' primary-accessible: '#27843A' typography: display: fontFamily: Shippori Mincho fontSize: 40px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.1em headline-lg: fontFamily: Shippori Mincho fontSize: 24px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.08em accent: fontFamily: Playfair Display fontSize: 12px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em headline-sm: fontFamily: Noto Serif JP fontSize: 18px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.1em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em rounded: sm: 4px md: 16px lg: 24px 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: 72px button-circle: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.note}' rounded: '{rounded.full}' height: 96px badge-pickup: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.note}' rounded: '{rounded.full}' height: 56px heading-section: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 60px ticker-band: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' height: 50px compare-table: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' height: 56px card-review: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 520px button-secondary: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px card-result: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 680px nav-footer: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 48px --- # DESIGN.md — 若草色×朱赤の明朝系競馬情報サイト LP（Fresh Green Turf Horse Racing Info LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ナチュラル、情報量多め・訴求型、親しみ・手作り感 - **キーワード**: 若草色・芝生・明朝見出し・朱赤の丸CTA・黄色ハイライト・比較表 - **地の質感**: フラットな単色面。写真とフラットイラストを混ぜて使う - **形**: 角丸カードとピル型ボタン。セクション上辺に小さな下向き三角のノッチを付ける - **温度感**: 明るく爽やか。芝生の緑が基調で温かみもある ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#FCFFF4` | 基本の地色（生成り） | 23% | 画素の実測 | | `background-alt` | `#E6F2CC` | 交互に入るセクション帯の若草色 | 17% | 画素の実測 | | `surface` | `#FFFFFF` | カード・表のセル面 | 20% | 画素の実測 | | `primary` | `#30A147` | 芝生グリーン（フッター・アバター） | 8% | 画素の実測 | | `cta` | `#D05454` | 朱赤の主CTA・pickupバッジ | 3% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTA上の白文字 | 0% | 画素の主要色に補正 | | `text` | `#1D1D1D` | 見出し・本文の濃い墨色 | 4% | 画素の実測 | | `dark-section` | `#2C2C2C` | 比較表の見出し帯・フッター下段 | 5% | 画素の実測 | | `on-dark` | `#F8FCF9` | 黒帯上の白文字 | 0% | 画素の実測 | | `accent-1` | `#FEE34C` | 自社行・続きを読むボタンの黄色 | 3% | 画素の実測 | | `accent-2` | `#F6B23C` | 星評価のオレンジ | 0% | 推定 | | `tint-1` | `#C7D7AA` | CTA下の影楕円のくすんだ緑 | 1% | 画素の実測 | | `text-muted` | `#666C6B` | 英字サブ見出しのグレー | 0% | 画素の実測 | | `cta-accessible` | `#CD4848` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#27843A` | AA を満たす補正値（計算） | | 計算 | - 地は生成りと若草色を交互にし、セクションの区切りを色で示す - 主CTAとpickupバッジは朱赤だけにする - 自社の優位点は黄色い面で強調する。比較表の自社行や小ボタンに使う - 比較表の項目見出しは黒帯に白文字 - 緑の面はフッターとアバターに限って使い、面積を広げすぎない - 注意書きのリンク語は朱赤の文字にする - `button-primary` は文字 `#FFFFFF` × 背景 `#D05454` のコントラスト比が 4.14:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#CD4848`、4.55:1）を使う。 - `button-circle` は文字 `#FFFFFF` × 背景 `#D05454` のコントラスト比が 4.14:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#CD4848`、4.55:1）を使う。 - `badge-pickup` は文字 `#FFFFFF` × 背景 `#D05454` のコントラスト比が 4.14:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#CD4848`、4.55:1）を使う。 - `ticker-band` は文字 `#FFFFFF` × 背景 `#D05454` のコントラスト比が 4.14:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#CD4848`、4.55:1）を使う。 - `nav-footer` は文字 `#F8FCF9` × 背景 `#30A147` のコントラスト比が 3.21:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#27843A`、4.56:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの縦書きキャッチ | 明朝 | Shippori Mincho | 500 | 40px | 1.4 | 0.1em | | `headline-lg` | セクション見出し（明朝） | 明朝 | Shippori Mincho | 500 | 24px | 1.4 | 0.08em | | `accent` | 見出し下の英字サブタイトル | 欧文セリフ | Playfair Display | 400 | 12px | 1.3 | 0.02em | | `headline-md` | 特徴ブロックの太字リード | ゴシック | Noto Sans JP | 700 | 20px | 1.5 | 0.02em | | `headline-sm` | pickup横の明朝小見出し | 明朝 | Noto Serif JP | 400 | 18px | 1.4 | 0.1em | | `body-md` | 本文・レビュー文 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.03em | | `note` | 注意書き・表のセル文字 | ゴシック | Noto Sans JP | 400 | 12px | 1.6 | 0.02em | | `label-button` | ボタン・ナビ文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.3 | 0.05em | - セクション見出しは明朝。下に小さな英字セリフのサブタイトルを添える - 本文と表はゴシックにして読みやすくする - FVのキャッチは明朝の縦書きにし、字間を広めに取る - 主CTAの文字は明朝寄りの柔らかい書体で 2 行にする - 金額などの数字は大きなセリフ体で見せる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC はレビューを 3 カラム、比較表を横並びにする - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算） - セクションごとに地色を切り替え、上辺中央に下向き三角のノッチを付ける - 見出しは中央揃え、本文は左揃え - 特徴ブロックは丸バッジと小見出しを横に並べ、その下にリードと本文を置く - 実績カードは横スライダーにし、両隣のカードを少しはみ出させる - 比較表は 2 列。白いセルとし、自社行だけ黄色にする ## Elevation & Depth - カードは影を付けず、黒の細い枠線と下方向にずらした若草色のベタ影で浮かせる - 黄色ボタンは下側に濃い黄の帯を付け、立体的に見せる - CTAの下に楕円の影を敷く ## Shapes - **角丸**: 小 4px ／ 中 16px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: アバターは正円。FVの写真は人物のシルエット形に切り抜く - **セクション境界**: 直線で区切り、上辺中央に小さな下向き三角を付ける - 主CTAはピル型にし、片側を大きく膨らませる - pickupバッジは朱赤の正円 - フッターのナビは白枠線のピル型 ## Components - **LINE登録CTA**（`button-primary`）: 朱赤のピル型。左にアイコン、右に白文字 2 行。下に楕円の影を敷く - **FVの丸CTA**（`button-circle`）: 朱赤の正円に矢印と短い誘導文を入れる - **pickup番号バッジ**（`badge-pickup`）: 朱赤の丸に英字と番号。明朝の小見出しの左に置く - **明朝見出し＋英字サブ**（`heading-section`）: 中央揃えの明朝見出しの下に、小さなグレーの英字を添える - **流れるテロップ帯**（`ticker-band`）: 朱赤の帯と、上下に罫線を引いた生成りの帯を重ね、馬のイラストと明朝の文字を横に流す - **比較表**（`compare-table`）: 黒帯の項目名の下に、白いセルで他社を並べ、自社行だけ黄色にする。記号は ○×△◎ - **レビューカード**（`card-review`）: 黒枠の角丸白カード。上から円形アバター、星、本文、返信を並べ、フェードの上に黄色の小ボタンを重ねる - **黄色ボタン**（`button-secondary`）: 黄色のピル型に黒文字。もっと見る・続きを読む用 - **実績カード**（`card-result`）: 上に画像、黒帯のタイトル、大きな金額、芝のイラスト。下は若草色の地に、縦長の赤いラベルと明細を置く - **フッターナビ**（`nav-footer`）: 緑の地に、白枠線の全幅ピル型リンクを縦に並べる ## Do's and Don'ts **Do** - 生成りと若草色の地を交互に使う - 見出しは明朝、本文はゴシックで使い分ける - 強調は朱赤（行動）と黄色（優位点）に絞る - カードには黒の細い枠線と若草色のずらし影を付ける - フラットイラストの人物や馬で親しみやすさを出す **Don't** - 濃いグラデーションや光沢のあるボタンは使わない - 朱赤をCTA以外の広い面に使わない - 見出しを太いゴシックだけで組まない - 地色を真っ白一色にしない - ドロップシャドウでぼかしを強くしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（世界観と安心感を伝える）: シルエット形に切り抜いた写真、縦書きの明朝キャッチ、朱赤の丸CTAを生成りの地に置く 2. **テロップ帯**（開催情報や実績額で賑やかさを出す）: 朱赤の帯と罫線の帯を重ね、馬のイラストと一緒に横に流す 3. **キャンペーン告知**（登録特典を訴求する）: ポップなバナーと、黒×黄の段階別特典リストを並べる 4. **CTA**（LINE登録を促す）: 若草色の帯に明朝見出しを置き、朱赤のピル型ボタンと注意書きを続ける 5. **特長**（仕組みとメリットを説明する）: pickupバッジ、太字リード、若草色の囲み、番号リスト、困りごととメリットの顔アイコンリストの順に並べる 6. **期間限定キャンペーン**（特典を強く印象付ける）: 全幅の暗い写真に白い明朝の縦書きを重ね、白いピル型ボタンを置く 7. **無料コンテンツ紹介**（無料でも価値があることを示す）: 若草色の地に本文と、緑の地図イラストを置く 8. **実績**（成果の証拠を見せる）: 横スライダーの実績カードとドットのページャー 9. **他社比較**（優位性を示す）: 黒帯で区切った比較表。自社行は黄色にする 10. **お客様の声**（信頼を補強する）: 総合の星評価のあとに、レビューカードを縦に並べ、黄色のもっと見るボタンで締める 11. **CTA**（最後のひと押し）: 冒頭と同じLINE登録ブロックを繰り返す 12. **フッター**（ナビと信頼情報）: 芝生と人物のイラストの上に、丸いロゴと緑の地のピル型ナビを置き、黒帯にコピーライトを入れる ## Imagery - 躍動感のある競馬写真を、人と馬のシルエット形に切り抜く - 人物と馬はフラットなベクターイラスト。手足を大きく動かした表情豊かなポーズにする - フッター上部に芝生・木・観客のイラストを横に並べ、地平線を作る - アバターは正円で、写真か緑のベタ塗りに名前を白文字で重ねる - キャンペーンバナーはコイン・旗・水色の地のポップなイラストにする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCも中央寄せで同じ地色の帯構成にする - PCのFVは写真を中央に置き、キャッチと丸CTAを左右に振り分ける - PCの特長セクションでは、pickupの小見出しを左側に縦書きで置く - PCのレビューは 3 カラムのグリッドにする - 比較表はPCで横に並べた 4 列の表にする - フッターナビはPCで 3 列のピル型にする ## 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-ae3e0bdd`（元 LP の URL から採番） - **元 LP**: https://www.every-keiba.jp/?code=vadph_kbd01 - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（11/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。