DESIGN.md — 赤×山吹のポップな謎解きイベント制作 LP（Red and Yellow Treasure Hunt Event BtoB LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: ポップ・元気、情報量多め・訴求型、力強い・インパクト、信頼・誠実
• キーワード: 赤と山吹・うねり模様・英字の透かし見出し・線画アイコン・実績グラフ・円弧の切り替え
• 地の質感: 赤や黄の地に同系色の太い曲線模様を敷く。白地にはごく薄いドットやアイコン線画を散らす
• 形: 白い大きな円弧でセクションを区切り、V 字の下向き切り替えも使う。カードは角丸 8〜12px、ボタンはピル型
• 温度感: 暖色中心で明るく熱量が高い

Colors

• 地色は赤→白→山吹→白→灰ピンク→淡ピンク→黄→白→山吹→黒と、暖色と白を交互に切り替える
• 赤と山吹の地には同系の濃淡で太いうねり模様を敷く
• 主 CTA は赤とオレンジの 2 色ペアで並べ、役割を分ける
• 本文の要点は赤やオレンジの太字、または赤い帯マーカーで強調する
• 数字バッジ・番号はオレンジか赤の塗りに白文字
• 見出し背後の英字透かしは地色より少し濃い淡色にする
• button-primary は文字 #FFFFFF × 背景 #CE5A43 のコントラスト比が 4.06:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#CA4E35、4.51:1）を使う。
• button-secondary は文字 #FFFFFF × 背景 #FCB118 のコントラスト比が 1.84:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#9F6B02、4.59:1）を使う。

Typography

• 見出しは極太ゴシックで、背後に大きな英字の透かしを重ねる
• 見出しの下に短い横線を添える
• 数字はディスプレイ書体で大きくし、単位は小さくする
• 本文は 14px・行間 1.8 で短く改行する
• 英字ラベルはオレンジの小さな太字で日本語見出しの上に置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。理由・約束カードは SP で 1 列、PC で 3 列。用途カードは PC 2 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションは中央寄せの見出しで始める
• 白い大きな円弧でセクションを包むように切り替える
• 実績カードは白面にグラフと数値吹き出しを組む
• フローは縦に並ぶステップをピル型の枠と曲線でつなぐ
• CTA は各ブロックの終わりに中央に配置する

Elevation & Depth

• カード・ボタンには下方向のやわらかい影（0 4px 12px 程度、黒 10%）
• 用途カードは枠線＋ずらした灰色の影で立体感を出す
• FV のロゴ帯は白いタイルを並べ、影はほぼなし

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 人物は切り抜きで地の上に置く。アイコンは線画
• セクション境界: 大きな円弧と下向きの V 字で切り替える
• ボタンはピル型で右端に丸い矢印アイコン
• 番号バッジは円形か角丸タブ
• カード角に折り返しや角飾りを付ける
• フローのステップは片側丸のピル枠

Components

• 資料請求ボタン（button-primary）: 赤のピル型。左にアイコン、右に丸矢印
• 無料相談ボタン（button-secondary）: オレンジのピル型。赤ボタンと並べる
• 英字透かし見出し（heading-watermark）: 大きな淡色の英字の上に日本語見出しと短い線
• 導入企業の声カード（voice-card）: 番号付きの見出しと、赤い枠線の本文ボックスを左右交互に置く
• 理由カード（reason-card）: オレンジ枠の縦長カード。角に番号タブ、線画アイコン、太字見出し
• 実績カード（case-card）: 番号バッジ付きタイトル帯、課題ラベル、成長グラフ、黄色の数値吹き出し
• 導入ステップ（flow-step）: STEP 番号とアイコン、見出し、説明。曲線でつないで縦に並べる
• 見出しタグ（label-tag）: 黒または赤の帯に白文字の小さなラベル
• 問い合わせカード（contact-card）: 淡クリーム面に円形アイコン、ボタン、チェックリスト

Do's and Don'ts

Do - 暖色の地と白地を交互に置いてリズムを作る - 見出しには必ず英字透かしか小さな英字ラベルを添える - 数字実績は大きく、グラフや吹き出しで見える形にする - アイコンはオレンジ単色の線画でそろえる - CTA は赤とオレンジの 2 択で何度も出す

Don't - 寒色をメインに使わない - 細い明朝体で見出しを組まない - セクション境界をすべて直線にしない - 写真を四角いまま大きく並べない - 影を強く濃くしすぎない

Page Structure

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

1. ファーストビュー（実績 No.1 と専門性を一目で伝える）: 赤地にうねり模様。左に金色の大きな数字と実績バッジ 3 つ、右に切り抜き人物、下に CTA 2 つ
2. 導入企業ロゴ（信頼の裏付け）: 白いロゴタイルを 2 段に横並び
3. お客様の声（導入効果を具体的に示す）: 白い円弧の面に、番号付きの声カード 3 件を左右交互に置く
4. 会員数の訴求と CTA（規模感を示して相談へ誘う）: 大きな数字の見出し、線画の群衆イラスト、赤いピルボタン
5. 選ばれる理由（強みを 3 点で示す）: 山吹地に白枠カード 3 枚、番号タブと線画アイコン
6. 活用シーン（用途別にイメージさせる）: 白地にオレンジのチェック付き見出し帯と、イラスト付き説明カードを 2 列×2
7. イベント実績（数値で成果を証明する）: 灰ピンク地に白い事例カード 3 枚。番号バッジ、課題ラベル、成長グラフ
8. 導入の流れ（手順を示して不安を減らす）: 縦書きの見出しと、曲線でつないだ 4 ステップ
9. 安心訴求と約束（未経験でも頼めると伝える）: 黄地のうねり模様。見出しの下に約束カード 3 枚、V 字で切り替える
10. お問い合わせ（相談と資料請求へ誘導する）: 白地に 2 枚のクリーム色カード。円形アイコン、CTA、チェックリスト
11. 会社紹介（会社とサービスの説明）: 山吹地に英字の大見出し。白い角丸パネルを左右にずらして置き、線画イラストを添える
12. フッター（運営情報）: 黒地に白の小さな文字を 1 行

Imagery

• 人物は明るい表情の家族や若者を切り抜き、地色の上に浮かせる
• アイコンはオレンジと黒の線画で、細めの均一な線にする
• 宝箱・鍵・地図など宝探しのモチーフを金色で添える
• 白地の背景に薄いベージュのモチーフ線画を散らす
• グラフは黄色の太い矢印で右肩上がりを強調する
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP は 1 カラムで、3 列カードは縦に積む
• FV の SP 版は数字見出し→人物→バッジ→CTA の順に縦に並べる
• ロゴタイルは SP で 3 列の格子にする
• 英字透かしは SP で 40px 前後に縮める
• CTA 2 つは SP で縦に積み、横幅いっぱいにする
• 円弧の切り替えは SP でもカーブを残し、高さを抑える

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 行書くと起動時に読み込まれる。