DESIGN.md — ラベンダー×くすみパステルの女性向けジム LP（Lavender Pastel Women's Fitness Gym LP）

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

Overview

• 業種: 美容サロン・エステ・脱毛 ／ 雰囲気: やさしい・柔らかい、上品・高級、情報量多め・訴求型
• キーワード: ラベンダー・くすみパステル・明朝見出し・色分けカード・女性向けフィットネス
• 地の質感: フラットな単色面。色帯つきのカードに薄い影を付け、写真は明るいハイキー調
• 形: ほぼ角丸なしの四角いカードと帯。小さなボタンだけ角を少し丸める
• 温度感: やや暖かいパステル。ラベンダーとくすみピンクで柔らかく、ブルーグレーとセージで清潔感を足す

Colors

• 白地とラベンダー帯を交互に置き、実績紹介・体験申込・店舗一覧はラベンダー帯に載せる
• 理由カードはピンク・ブルーグレー・セージ・マスタードなどくすみ色を 1 枚ずつ割り当て、上の見出し帯と右の縁に同じ色を使う
• 料金・FAQ 回答などの補足面はクリーム色にして白と区別する
• CTA は濃い紫 1 色に統一し、パステルの中で目立たせる
• 原色や彩度の高い蛍光色は使わず、すべてくすみトーンにそろえる
• ラベンダー帯の上の文字は白、白地の上は濃いグレーにする
• hero-triptych は文字 #444444 × 背景 #E18A9D のコントラスト比が 3.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#E69CAC、4.51:1）を使う。
• free-badge は文字 #A796C3 × 背景 #FFFFFF のコントラスト比が 2.69:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#826AAA、4.57:1）を使う。

Typography

• セクション見出しと価格は明朝体で上品に、本文はゴシックで読みやすくする
• セクション見出しは 2 行に分けて中央揃えにする
• 本文内の重要な語は紫の文字で目立たせる
• 価格は数字を大きく、単位と税込表記は小さく添える
• FAQ は Q を紫字にし、A をクリーム地のボックスに入れる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は理由カード 2 列、店舗カード 3 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• コンテンツは中央に寄せ、PC では最大幅 約 760px
• 理由カードは見出し帯・テキスト・写真を縦に重ねる
• 店舗カードは同じ高さの白カードを格子状に並べる
• フォームは白いパネルをラベンダー帯の中央に置く
• 料金は左右に写真を置き、中央のクリーム面に表で並べる

Elevation & Depth

• カードには薄い影（0 2px 6px rgba(0,0,0,.08)）だけを付ける
• 理由カードは右と下に色の縁を太めにずらして入れ、立体感を出す
• 強い影や浮き上がる演出は使わない

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物写真は長方形に切る。無料特典は円形のアイコンにし、吹き出しは円形の半透明バッジにする
• セクション境界: 直線で色帯を切り替える
• カード・帯は四角を基本にする
• 円形はアイコンとバッジにだけ使う
• ボタンは角丸 4px 程度の小さめの長方形にする

Components

• 3 分割ヒーロー（hero-triptych）: 左ピンク・右ブルーグレーの面に人物写真を置き、中央の白い面に明朝コピーとグレーの価格ボックスを入れる
• 色帯つき理由カード（reason-card）: 上に色帯の見出しを置き、右下にずらした同色の縁を付ける。中はリード文・本文・写真
• 実績カード（achievement-card）: ピンクとセージの見出し帯を付け、写真の上に半透明の白い面で本文を重ねる
• 料金表（price-table）: クリーム地に項目と大きな明朝数字を罫線で区切って並べる
• 無料特典の丸アイコン（free-badge）: 淡いラベンダーの円に線画アイコンと「無料」の文字を入れ、3 つ並べる
• 体験申込フォーム（trial-form）: 白いパネルにラジオボタンとエリア別のプルダウンを並べ、下に紫の送信ボタンを置く
• 紫 CTA ボタン（button-primary）: 濃い紫の小さな長方形に白い太字
• FAQ 項目（faq-item）: 紫の下線付き Q と、クリーム地のボックスに入れた A
• 店舗カード（store-card）: 白カードに店舗名・最寄り駅・住所を入れ、下に紫の MAP ボタンを置く
• お客様の声スライダー（testimonial-slider）: セージの帯見出しと薄いミント地の本文、下にドットのページ送り

Do's and Don'ts

Do - くすみパステルのトーンを守り、ラベンダーを主役にする - 見出しは明朝体で中央に揃え、上品に見せる - カードは色ごとに分け、色帯と縁の色をそろえる - 申込フォームと店舗一覧はラベンダー帯の上に白カードで載せる - 人物写真は明るく清潔なスタジオ・ジムの雰囲気にする

Don't - 鮮やかな赤や黒い背景で強く煽らない - 大きな角丸やピル型ボタンで形を揃えないまま混ぜない - CTA に紫以外の色を使わない - 本文に装飾的な書体を使わない - カードの色を 1 色だけで単調にしない

Page Structure

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

1. ファーストビュー（サービスの概要と入会特典を伝える）: 3 分割パネルに人物写真、中央に明朝コピーと価格ボックス、角に丸バッジ
2. 実績（成果の数字で信頼を得る）: 白地に 2 枚の色帯カードを並べ、下に小さな CTA
3. 権威性（コンテスト指導などの実績を示す）: ラベンダー帯に月桂冠バッジ、白文字、写真のコラージュ
4. 選ばれる理由（6 つの特長を説明する）: 色分けしたカードを 2 列 × 3 段に並べる
5. 料金（コース料金を提示する）: 左右にトレーニング写真、中央にクリーム地の料金表
6. 無料特典（手ぶらで通える手軽さを示す）: 丸アイコンを 3 つ横に並べる
7. 体験申込（カウンセリング・体験に申し込ませる）: ラベンダー帯に装飾見出しと写真 2 枚、白いフォームパネル
8. お客様の声（利用者の体験談で安心させる）: セージ帯見出しのスライダー
9. よくある質問（不安を解消する）: Q を紫字、A をクリーム地のボックスにして縦に並べ、最後にもっと見るボタン
10. 店舗一覧（最寄り店舗を探させる）: ラベンダー地に白い店舗カードを地域ごとに格子状に並べる
11. フッター（ナビゲーションを置く）: サーモンピンクの帯に白い小さなリンクを横に並べる

Imagery

• スポーツウェアの女性が動く全身写真を、単色の背景から切り抜いて使う
• ジム店内は明るい自然光で、トレーナーが補助しているシーン
• 食事写真は白い器に彩りのよい料理を並べ、俯瞰で撮る
• アイコンは細い線画をパステルの円に入れる
• 見出しの両脇に幾何学的な和柄風の装飾をピンクで添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP では理由カード・実績カードを 1 列に並べる
• 店舗カードは PC 3 列 → SP 1〜2 列にする
• ヒーローの 3 分割は SP では写真を背景にして、中央のコピーを上に重ねる
• 料金セクションの左右の写真は SP では上に 1 枚だけ置く
• PC のヘッダーは横並びのナビ、SP ではハンバーガーメニューと固定 CTA にする

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