DESIGN.md — ティール×ピンクの爽やかオンラインフィットネスLP（Fresh Teal and Pink Online Fitness LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: 清潔・爽やか、ポップ・元気、情報量多め・訴求型、やさしい・柔らかい
• キーワード: ティールグラデーション・ピンク強調・黄色ピルCTA・斜めストライプ・白抜き英字見出し・白カード
• 地の質感: 淡いグラデーション地に細い斜めストライプと太い斜めの帯を重ねる。紙の質感はなく、フラットで明るい。
• 形: 角丸カード、ピル型ボタン、円形の講師写真、六角リボン型ラベル、斜めのセクション境界
• 温度感: 爽やかで明るい。ややクール寄りで、ピンクが温かみを足す

Colors

• 地は白、淡いティール、淡いピンクをセクションごとに交互に使う。
• CTA帯は、ミントからティールのグラデーションに白の斜めストライプを重ねて目立たせる。
• 黄色はCTAボタンと数字の強調だけに使う。
• ピンクは強調語・リボンラベル・比較表の自社列に限って使う。
• 見出しはティールと黒の二色にする。英字見出しは白抜きの線文字で背景に溶かす。
• 不安を提起するセクションだけ、写真の上に暗いトーンを敷き、白文字にする。
• cta-band は文字 #FFFFFF × 背景 #65CFCF のコントラスト比が 1.85:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#288282、4.56:1）を使う。
• ribbon-label は文字 #FFFFFF × 背景 #FB7393 のコントラスト比が 2.63:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#EA073C、4.57:1）を使う。
• compare-table は文字 #FB7393 × 背景 #FEFEFE のコントラスト比が 2.61:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#EA073C、4.53:1）を使う。
• instructor-card は文字 #4FB1C2 × 背景 #FEFEFE のコントラスト比が 2.48:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#31808E、4.52:1）を使う。
• faq-item は文字 #4FB1C2 × 背景 #FEFEFE のコントラスト比が 2.48:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#31808E、4.52:1）を使う。

Typography

• 見出しは太字の丸ゴシックにし、助詞だけ小さくして強弱をつける。
• 大見出しの上に、斜線で挟んだ小見出しを置く。
• 英字見出しはティールの細い線で白抜きにし、斜体で日本語見出しの背面か上に置く。
• 本文の中の強調語はピンクの太字にする。
• 数字は大きく太くして、単位は小さくする。
• 写真の上の文字には白か色の縁取りを付けて読みやすくする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。メニューの選択肢だけ 2 列、講師写真は 4 列のグリッド。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは左右に約 20px の余白を取って中央に置く。
• セクションの冒頭は、英字見出し・小見出し・大見出しの三段で揃える。
• CTA帯は 3〜4 セクションごとに同じ形で繰り返す。
• ポイントカードは写真を上、ラベル・見出し・本文を下にする縦積み。
• 注釈は各ブロックの右下に小さく置く。

Elevation & Depth

• 白カードには薄いグレーの柔らかい影（0 2px 8px、透明度 10%）を付ける。
• CTAボタンは黒の縁取りに、下方向へずらしたベタ影を付けて立体感を出す。
• FAQ のアコーディオンは白地に軽い影を付ける。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 講師写真は円形。写真はカードの幅いっぱいの長方形。ライフシーンの写真は大きな角丸やカプセル型で切り抜く。
• セクション境界: 斜めの直線で区切る。太い斜めの帯やストライプを重ねる。
• ラベルは両端を尖らせたリボン（六角形）型にする。
• タグはピル型の枠線ボタンにする。
• 吹き出しはしっぽの付いたピンク枠の白い箱にする。
• ステップ見出しは、下辺が V 字に尖ったティールの帯にする。

Components

• 黄色ピルCTA（button-primary）: 黄色の地に黒の太い縁取りとベタ影を付ける。右端に「>」を置き、下に注釈を添える。
• ストライプCTA帯（cta-band）: ミントのグラデーションに白の斜めストライプを重ねる。ピンクのリボン、白と黄の大きなコピー、CTAボタンの順に縦に並べる。
• ピンクのリボンラベル（ribbon-label）: 両端の尖ったピンク帯に白文字を入れる。見出しの上に置いて訴求を短く伝える。
• ポイントカード（point-card）: 白カード。左上に斜体の番号、上に写真、その下にティール枠のピル型ラベル、見出し、本文を並べる。
• 比較表（compare-table）: 自社列をピンクの太枠で囲み、二重丸で示す。他社列はグレーの見出しに三角で示す。
• 講師カード（instructor-card）: 白カード。円形の顔写真、名前、淡いピンク地の経歴ボックス、ティールの得意分野を並べる。
• 口コミの吹き出し（voice-bubble）: ピンク枠の白い吹き出し。左に線画の人物アイコン、ピンクの見出し、年齢、強調入りの本文を置く。
• FAQアコーディオン（faq-item）: 白い角丸の箱に、ティールの質問文とピンクの下向き矢印を置く。

Do's and Don'ts

Do - CTA帯は同じデザインで複数回繰り返す。 - 強調語はピンク、見出しはティール、CTAは黄色と、色の役割を固定する。 - 斜めストライプと斜めの区切りで動きを出す。 - 数値の根拠には必ず小さい注釈を添える。 - 人物写真は明るい自然光の室内で、笑顔のものを使う。

Don't - 黄色を CTA 以外の大きな面に使わない。 - 角ばった重い黒い面を多用しない（濃い地は不安提起の 1 セクションのみ）。 - 明朝体を使わない。 - 白いカードを影なしで淡い地に直接置かない。 - 強調色を 3 色以上混ぜて 1 つの文の中で使わない。

Page Structure

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

1. ファーストビュー（手軽さと低価格の体験を一目で伝える）: 明るい人物写真に太い黒文字のキャッチを重ね、価格バッジとジャンルのピル型タグを置く。
2. CTA帯（体験申込に誘導する）: ストライプ地にリボンラベル、大きなコピー、黄色のピル型ボタンを置く。
3. サービスの魅力のビジュアル（レッスンの雰囲気を伝える）: 写真の帯を斜めに 3 段重ね、白い縁取り文字を載せる。
4. メディア掲載（信頼性を示す）: 雑誌の表紙を並べ、その下にティールの媒体名タグを 3 列で並べる。
5. 講師紹介（専門性を示す）: 円形の顔写真を入れた白カードを縦に並べる。
6. 悩みの提起（ターゲットの悩みに共感する）: 濃いティールの写真地に、チェックリストの白い箱と CHECK バッジを置く。
7. 選ばれる理由（3 つの強みを示す）: ティールのグラデーション地に、番号付きのポイントカードを 3 枚置く。
8. 比較表（他社に対する優位性を示す）: 自社列をピンクで強調し、記号で比較する。
9. 不安の解消（オンラインへの不安を払拭する）: 暗いトーンの写真に円形の吹き出しで不安を並べ、次に明るい写真で解決を示す。
10. レッスンの種類（選択肢の豊富さを示す）: 淡いピンク地に、写真のバナーと色付き縁取り文字を縦に並べる。目的別のカプセル型タイルは 2 列にする。
11. 利用シーン（生活に取り入れたイメージを伝える）: 時計アイコン、時刻、短い文と、角丸の写真を左右交互に並べる。
12. 実績の数値（継続率やレッスン数で納得させる）: 棒グラフと大きなピンクの数字、円弧の装飾で見せる。
13. SNS・お客様の声（社会的な証明を示す）: 投稿カードを傾けて重ね、ハッシュタグの帯を添える。その後に口コミの吹き出しを並べる。
14. 利用の流れ・FAQ・最終CTA（手順を示して不安を除き、申込を後押しする）: STEP カード 3 枚と FAQ アコーディオンの後に、斜めの帯の写真と CTA帯を置く。

Imagery

• 自然光の明るい室内でヨガやピラティスをする 20〜40 代女性の写真を使う。笑顔のものが多い。
• ノートPCやタブレットを前にした自宅レッスンのシーンを入れる。
• 写真の上にティールやピンクの半透明グラデーションを重ねる。
• 口コミの人物は線画のシンプルなイラストにする。
• 斜めのカプセル型帯、集中線、キラキラの絵文字風アイコンで装飾する。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では本文幅を約 750px に固定し、中央に置く。背景の色帯は全幅に広げる。
• ポイントカードと講師カードは、PC では 2〜3 列に並べてよい。
• CTAボタンは PC で最大幅 480px にする。
• 英字見出しと装飾ストライプは、PC で拡大して余白を埋める。

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