DESIGN.md — 深紅×黒の斜め切りフィットネス LP（Crimson Black Fitness Character Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: 力強い・インパクト、スポーティ、クール・先進的、情報量多め・訴求型
• キーワード: 深紅・黒・斜めカット・イタリック欧文・光のストリーク・大きな数字
• 地の質感: 赤橙の光の筋が入ったスタジオ写真、黒地に暗いジム写真をぼかして重ねる。カードはフラット。
• 形: 写真は斜め線で切り分ける。カードは小さめの角丸。吹き出しは赤い楕円。
• 温度感: 熱い。赤とオレンジの光で高揚感を出す。

Colors

• 地色は黒→白→黒→深紅→白の順に大きく切り替え、メリハリを付ける。
• キャンペーン部は深紅の地に白カードを敷き、カード内に黒帯ラベルを付ける。
• 欧文見出し・賞の数字・小見出しは深紅の文字にする。
• 賞バッジは金・グレー・青・緑・紫と賞ごとに色を変え、等級を見分けやすくする。
• 写真の背景は赤〜オレンジの光で揃え、ブランドの赤とつなげる。
• 本文は黒、注釈はグレーにして赤を見出しだけに絞る。
• prize-badge は文字 #EDEAE9 × 背景 #B8952A のコントラスト比が 2.38:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#7E661D、4.61:1）を使う。

Typography

• 欧文見出しは太字イタリックにして勢いを出す。
• 賞の数字は特大にし、横の「名様」は小さく置いて落差を付ける。
• 和文は太字ゴシックで統一し、本文も太めにする。
• 写真上の欧文は輪郭線だけの袋文字にして縦向きに置く。
• 見出しの左右に斜線を付け、短いコピーを挟む。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。キャラクター部は写真 2 枚を斜めに分けて並べる
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• キャンペーン部は赤地に左右 12px の余白を取り、白カードを縦に積む。
• キャラクター紹介は写真→名前→小見出し→本文→タグ→動画リンクの順で毎回同じ並びにする。
• 賞の項目は画像→バッジと数字→商品名→説明の順で並べ、間に細い区切り線を引く。
• 手順は縦に積み、各ボックスの下辺を山形にして矢印のようにつなぐ。
• サービス紹介は画像→左線付き見出し→本文→右寄せの詳細リンクの順にする。

Elevation & Depth

• 基本はフラットで、影はほとんど使わない。
• 主 CTA だけ下に濃い赤の厚みを付け、立体的なボタンにする。
• 右下に追従する丸いバッジには軽い影を付ける。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物写真は斜めの直線で切り、白抜きの全身写真と並べる。商品写真は角丸の四角。
• セクション境界: 直線で色を切り替える。キャラクター部だけ斜めにカットする。
• 賞バッジとハッシュタグはピル型にする。
• 動画リンクの帯は右端を斜めに落とした赤い帯にする。
• セリフの吹き出しは赤い楕円に白文字。
• カードの角丸は 6〜8px に抑える。

Components

• 応募 CTA ボタン（button-primary）: 暗めの赤で下に厚みがあり、白い太字を中央に置く。
• 斜め端の動画リンク帯（slant-link-bar）: 赤い横帯の右端を斜めにカットし、白い小さな文字を載せる。
• キャラクターのセリフ吹き出し（speech-bubble）: 赤い楕円の吹き出しに、2 行の短いセリフを白文字で入れる。
• ハッシュタグのタグ（hashtag-chip）: グレーの枠線だけのピル型。文字は小さい黒。
• 賞バッジ＋特大数字（prize-badge）: 色付きピルに賞の名前を入れ、隣に深紅の特大数字と「名様」を並べる。
• 黒帯ラベル付き白カード（label-card）: 上部に黒帯の小見出しを置いた白カード。期間・商品・方法を入れる。
• 3 ステップ手順（step-box）: グレーのボックスを縦に積み、下辺を山形にする。赤いピルの番号、線画アイコン、説明を入れる。
• キャラクター名見出し（name-heading）: 赤い太字の欧文名の横に読み仮名を添え、下に赤い短い線と赤い小見出しを置く。
• 追従する丸バッジ（floating-badge）: 右下に固定した赤い円形バッジ。白い縁取りで、中に詳細へのリンクを入れる。

Do's and Don'ts

Do - 赤橙の光の筋がある背景で人物を撮った写真を使い、写真は斜めに切る。 - セクションごとに地色を黒・白・赤とはっきり切り替える。 - 欧文見出しは太字イタリックで統一する。 - 賞は数字を特大にし、色付きバッジで等級を見分けやすくする。 - 同じ型の紹介ブロックを繰り返してリズムを作る。

Don't - パステルカラーや淡い配色を主役にしない。 - 細い明朝体や手書き風の書体を使わない。 - 大きな角丸や柔らかい影を多用しない。 - 赤を本文に使わない。 - 人物写真を丸く切り抜かない。

Page Structure

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

1. 告知バー（特典があることを最初に知らせる）: 黒い細帯に白文字を置き、左右を斜線で挟む。
2. ファーストビュー（キャラクターとブランドを印象付ける）: 4 人の縦長ポートレートを並べ、下の深紅の帯にイタリックの欧文ロゴとサブコピーを置く。
3. コンセプト（企画の趣旨を伝える）: 暗いジム写真をぼかした黒地に、白い太字の見出しと中央揃えの本文を置く。
4. キャラクター紹介×4（マシンごとのキャラクターを紹介する）: 斜めに切ったポートレートと全身写真、吹き出し、名前、本文、タグ、動画リンクを同じ型で繰り返す。
5. スペシャル動画（動画で世界観を見せる）: 黒地に赤い欧文見出しを置き、幅いっぱいの動画サムネに赤い再生ボタンを重ねる。
6. キャンペーン概要（プレゼント企画を告知する）: 深紅の地に白い大見出しと当選数のラベルを置き、期間は黒帯ラベル付きの白カードに入れる。
7. 賞品一覧（賞品の魅力を伝える）: 白カードの中で画像、賞バッジ、特大数字、説明を縦に並べ、区切り線で分ける。
8. 応募方法（応募の手軽さを伝えて CTA へ誘導する）: 斜線で挟んだ見出しの下に山形の 3 ステップを置き、立体的な赤ボタンで締める。
9. 応募規約・お問い合わせ（条件と連絡先を示す）: 白い箱の中をスクロールさせて規約を見せ、赤地に白い小さな文字で問い合わせ先を書く。
10. ブランド紹介（ジムのサービスを紹介する）: 白地に赤い欧文見出しを置き、画像と左線付き見出し、詳細リンクのブロックを並べる。
11. 店舗検索 CTA・フッター（来店へ誘導する）: 赤い角丸ボタンと TOP へ戻るリンクの下に、暗い赤地の集合写真とロゴ、コピーライトを置く。

Imagery

• 人物は黒×赤のレザー調ウェアで、正面を向いた力強い表情。背後から赤〜オレンジの逆光と光の筋を当てる。
• 全身写真の背後にはマシンを薄い白で透かして重ねる。
• 暗いジム写真はぼかして暗くし、文字の背景に使う。
• 賞品は明るいグレー背景の物撮りにし、注釈として「イメージ」と添える。
• アイコンは赤や黒の線画でシンプルに描く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はファーストビューの 4 人の写真の上に欧文ロゴを重ね、縦書きのコピーを右端に置く。
• PC のキャラクター紹介は斜めカットのまま、テキストと写真を左右交互に配置する。
• PC の賞品一覧は画像とテキストを横 2 カラムにし、左右を交互に入れ替える。
• PC の手順は 3 ステップを横に並べ、右向きの矢印形でつなぐ。
• PC のサービス紹介は 3 カラムのカードにする。
• PC のキャンペーンカードは幅 60% 程度で中央に置く。

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