DESIGN.md — 青灰×生成りの休養ウェア通販 LP（Calm Blue-Gray Recovery Wear LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: 信頼・誠実、シンプル・ミニマル、やさしい・柔らかい、清潔・爽やか
• キーワード: くすみブルーグレー・生成り・休養・科学的根拠・上品な余白・ライフスタイル写真
• 地の質感: グラデーションや柄はほぼ使わず、マットな単色の面を重ねる。写真は自然光で柔らかい。
• 形: 四角い写真ブロックと、小さく角丸にしたラベルやピル型の見出しバッジ。効果は丸いぼかし円で表す。
• 温度感: やや寒色寄りで落ち着いている。生成りとオレンジで少しだけ温かみを足す。

Colors

• 地は白・青灰・生成りを交互に使い、セクションの切り替えを色面で示す
• 見出しバッジやラベルはダークネイビーで、文字は白にする
• オレンジは購入ボタンと効果の丸だけに使う
• 本文はグレー寄りの濃色で、真っ黒は使わない
• 赤は注意書きの文字だけに使う
• サイズ表は青灰の見出しセルと薄いグレーのセルで作る
• button-primary は文字 #FFFFFF × 背景 #F66E01 のコントラスト比が 2.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#C15601、4.57:1）を使う。
• effect-circle は文字 #FFFFFF × 背景 #D98C55 のコントラスト比が 2.68:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#B26128、4.53:1）を使う。
• notice-box は文字 #D9333A × 背景 #F8F8F8 のコントラスト比が 4.41:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら marker-accessible（#D82F36、4.51:1）を使う。

Typography

• ゴシック 1 書体で揃え、大きさと太さで階層を作る
• 見出しは中央揃えで、下に細い罫線を引く
• 本文は左揃えで行間を広めにとる
• 価格は太字で大きくし、円記号を付ける
• 悩みの文は「」で囲み、白い枠に入れて並べる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム（PC は特長・商品とサイズ表が 2 カラム、シーン写真は 3 カラム）
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 写真とテキストを左右に交互に置き、SP では写真を上にする
• セクションごとに地の色を変え、上下に広い余白をとる
• 商品ブロックは写真スライダー→色選択→商品名→価格→評価→ボタンの順に並べる
• サイズ表はトップスとボトムスで分け、下に寸法の線画を置く

Elevation & Depth

• 影はほぼ使わず、色面と罫線で区切る
• シーンのラベルだけ白地にごく薄い影を付ける
• 効果の丸は外側をぼかして柔らかく光らせる

Shapes

• 角丸: 小 4px ／ 中 6px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの四角。人物写真は横長か縦長で使う
• セクション境界: 直線で背景色を切り替える
• セクションのラベルはピル型のダークネイビーにする
• 購入ボタンは角丸小の横長長方形にする
• 効果は 3 つの丸で並べる
• 写真の左上に斜めに切ったラベルを重ねる

Components

• カート追加ボタン（button-primary）: 商品ブロックの最後に置く、幅いっぱいのオレンジのボタン
• ラインナップ誘導ボタン（button-lineup）: 左に小さな写真、右に文字と下向き矢印を入れたグレーのボタン
• ピル型セクションバッジ（badge-section）: 英字や見出しを入れたダークネイビーのピル
• 特徴ラベル（label-feature）: 前後に点を付けた小さなダークラベル。特長ブロックの頭に付ける
• 悩みの枠（worry-box）: 「」で囲んだ悩みを白い枠で 3 つ縦に並べる
• 効果の丸（effect-circle）: オレンジのぼかし円に白文字で効果を書き、3 つ並べる
• シーンの吹き出しラベル（scene-label）: 写真の上に重ねる 2 行の白いラベル
• サイズ表（size-table）: 青灰の見出し行と薄いグレーのセルで作る表
• 注意書きの枠（notice-box）: 細い赤い罫線の枠に赤い小さな文字

Do's and Don'ts

Do - 地の色は白・青灰・生成りの 3 色を交互に使う - 機能説明は線画の図解に注釈線を付けて見せる - オレンジは購入と効果だけに絞る - モデルは同じ服を着たペアで統一感を出す - 数値や規格の情報は表や箇条書きで整理する

Don't - 彩度の高い色を背景に使わない - 強い影や立体的なボタンにしない - 手書き風やポップな装飾書体を混ぜない - 購入ボタン以外にオレンジを多用しない - 写真に派手なフィルターや枠を付けない

Page Structure

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

1. ファーストビュー（商品の価値と医療機器であることを伝える）: グレー地に浮遊する男女の写真と細い波線。上に 2 行のキャッチ、右に丸いバッジを置く
2. ラインナップ誘導（商品一覧へ早めに誘導する）: 白地の中央に写真付きのグレーボタンを置く
3. コンセプト（科学的に疲れを減らす考え方を示す）: 左右に人物写真、中央に見出しと短い本文を置く
4. 悩みの提起（読み手の悩みに共感する）: 問いかけの見出しと白枠の悩み 3 つ。右に疲れた人物の写真
5. 3 つの効果（効果をひと目で伝える）: 左に寝ている写真、右にオレンジの丸を 3 つ並べる
6. 利用シーン（日常での使い方を思い浮かべさせる）: 青灰地に写真を 3 枚並べ、白い吹き出しラベルを重ねる
7. 特長（医療機器としての根拠と素材を説明する）: 罫線付きの見出しの下に 2 カラムの説明。素材の図解を添える
8. 設計上の特徴（服の形の工夫を見せる）: 生成り地に上下の線画と注釈を 2 カラムで並べる
9. お手入れ（洗濯が簡単なことを伝える）: ラベル、横長のペア写真、下線付きの小見出し、短い本文
10. 商品ラインナップ（タイプ別に比べて購入してもらう）: ピル見出しのあと、写真スライダーと購入ボタン、右にサイズ表と線画をタイプごとに並べる
11. 特記事項（使用目的や素材などの法定情報を示す）: 白地に小さな文字の箇条書きと、赤い枠の注意書き
12. 関連特集（ほかの商品へ回遊させる）: 薄いグレー地にピル見出しとバナー 3 枚

Imagery

• 自然光の明るい室内で、ベッドや作業机、ダイニングで過ごす男女を撮る
• 服はネイビーとグレージュ系の無地で、ペアで着せる
• 商品写真はグレーの無地背景に全身で立たせ、身長とサイズを添える
• 機能は黒い細線の線画と注釈線、丸いハイライトで説明する
• ファーストビューには体の動きを表す細い波線を重ねる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP は 1 カラムにし、PC の左右の写真は本文の上に重ねる
• PC の 3 枚並びの写真は、SP では横スクロールか縦に並べる
• 商品とサイズ表は、SP では商品→サイズ表の順に縦に並べる
• サイズ表は SP では横スクロールできるようにする
• 効果の丸は SP でも 3 つ横に並べ、直径を約 90px にする

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