DESIGN.md — 若草色×朱赤の明朝系競馬情報サイト LP（Fresh Green Turf Horse Racing Info LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ナチュラル、情報量多め・訴求型、親しみ・手作り感
• キーワード: 若草色・芝生・明朝見出し・朱赤の丸CTA・黄色ハイライト・比較表
• 地の質感: フラットな単色面。写真とフラットイラストを混ぜて使う
• 形: 角丸カードとピル型ボタン。セクション上辺に小さな下向き三角のノッチを付ける
• 温度感: 明るく爽やか。芝生の緑が基調で温かみもある

Colors

• 地は生成りと若草色を交互にし、セクションの区切りを色で示す
• 主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

• セクション見出しは明朝。下に小さな英字セリフのサブタイトルを添える
• 本文と表はゴシックにして読みやすくする
• 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

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

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