DESIGN.md — 白×金×藍の上品な寝具リフォームLP（Soft White Gold Bedding Reform LP）

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

Overview

• 業種: 日用品・生活雑貨 ／ 雰囲気: 上品・高級、やさしい・柔らかい、信頼・誠実、情報量多め・訴求型
• キーワード: ふんわり・清潔・老舗の信頼・ゴールド装飾・工程の透明性・比較で納得
• 地の質感: 白〜生成りのフラットな面に、半透明の羽根イラストや淡い霧状の写真を重ねた軽い質感
• 形: 角丸小さめの四角カードと細い枠線。見出しは帯やリボン、月桂樹装飾。ボタンは角丸小の長方形
• 温度感: やや暖かいニュートラル。白とベージュに金、藍の寒色をアクセントにする

Colors

• 白と生成りを交互に敷き、セクションの切り替えを示す
• 金色は英字見出し・ラベル・満足度装飾など格を出す場所だけに使う
• 藍色は説明系の帯見出し・工程図・比較表の自社列に使う
• えんじ色は申込CTAだけに使い、他の要素に流用しない
• 料金表はこげ茶ヘッダーに白文字、上位プランはくすみ紫で区別する
• 不可・注意の情報は濃いグレー紫の箱、可能な情報は金の箱で対比させる
• heading-band は文字 #FFFFFF × 背景 #3A7EB4 のコントラスト比が 4.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#397BB0、4.53:1）を使う。
• label-gold は文字 #FFFFFF × 背景 #9D8543 のコントラスト比が 3.58:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#89743B、4.54:1）を使う。
• nav-card は文字 #FFFFFF × 背景 #3A7EB4 のコントラスト比が 4.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#397BB0、4.53:1）を使う。

Typography

• 英字見出しは金色の細いセリフ体にし、下に和文の小さな添え字を置く
• 情緒的な見出しは明朝、説明・表はゴシックで使い分ける
• 本文は中央揃えで短く改行し、行間を広くとる
• 強調語は藍色や太字で部分的に色を付ける
• 数字は大きなイタリックのセリフ体で月桂樹と組み合わせる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カード群は 2 列グリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 各セクションは英字見出し→和文見出し→導入文の順で中央揃え
• 画像カード・理由ブロックは写真と文章を左右交互に配置（SPは縦積み）
• 比較表・料金表は横スクロール可能にして列を崩さない
• セクション末にえんじCTAを中央配置で繰り返す
• STEP工程は縦に並べ、間を下向き三角で繋ぐ

Elevation & Depth

• 基本はフラット。影はほぼ使わない
• カードは細い枠線か白地＋生成り背景のコントラストで浮かせる
• お客様の声カードはごく弱い影で白く浮かせる

Shapes

• 角丸: 小 3px ／ 中 6px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角丸なしの長方形。悩み提示は円形の枠、FVの比較写真は大きな円で切り抜く
• セクション境界: 基本は水平の直線切り替え。FV下はゆるい波状の曲線で区切る
• ボタンは角丸小の長方形で右に小さな矢印
• ラベルは金地の小さな角丸タグ
• 工程図・注意箱は細枠＋上部の色帯見出し
• Q&Aは細い区切り線と右端の＋アイコン

Components

• 申込CTAボタン（button-primary）: えんじ地に白文字、右に丸矢印。セクション末に中央配置
• 藍色の帯見出し（heading-band）: 幅いっぱいの藍色帯に白抜き明朝見出し
• 英字＋和文見出し（heading-en）: 金色の英字セリフ見出しの下に小さな和文添え字
• 月桂樹実績バッジ（badge-laurel）: 金の月桂樹で数字実績を挟む。FVと声セクション冒頭に使用
• 理由番号ラベル（label-gold）: 金地に白文字の小タグで番号を示す
• 目次画像カード（nav-card）: 写真の下に藍色帯のタイトルと下向き矢印
• 比較表（comparison-table）: 自社列を藍色枠で囲み、◯と△で比較
• お客様の声カード（review-card）: 白カードに金の星、プラン名、太字見出し、本文
• STEPカード（step-row）: 左に生成り地のSTEP番号、右に説明。枠は細い金茶線、下に三角
• Q&A項目（faq-item）: 金のQ記号、質問文、右端に＋、細い区切り線

Do's and Don'ts

Do - 白と生成りの地を交互にし、余白を広くとる - 金色は格を出す要素だけに絞って使う - 羽根イラストを半透明で散らし軽さを演出する - 工程・比較・料金は図表で可視化する - CTAは同じデザインで繰り返し配置する

Don't - 原色や蛍光色を使わない - えんじ色をCTA以外に使わない - 太く重いゴシックを見出し全体に使わない - 大きな角丸やピル型ボタンにしない - 濃い影や立体的な装飾を付けない

Page Structure

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

1. ファーストビュー（サービスの価値と実績を一目で伝える）: 白い寝具の写真に英字セリフのキャッチ、月桂樹の実績バッジ3つ、円形のビフォー写真
2. 目次ナビ（各セクションへ誘導する）: 写真＋藍色帯の画像カードを3列2段
3. 悩みの提起（劣化した状態を自分ごと化させる）: 霧がかった写真の上に明朝見出しと円形の悩み3つ
4. 劣化の解説（放置した場合の問題を示す）: 淡いグレーブルー地に羽根装飾、黒背景の比較写真2枚、枠付きのおすすめ箱とCTA
5. サービス紹介（内容とビフォーアフターを説明）: 藍色帯見出し、写真と文章の横並び、前後の比較パネル、おすすめポイント3つ
6. 工程の流れ（丁寧な作業を見せて信頼を得る）: STEP番号付き写真カードを矢印で繋ぎ、こだわり工程は色枠で囲む。動画埋め込み
7. 比較（他の仕上げとの違いを示す）: 生成り地に比較表、ボリューム差を示す写真と丸バッジ
8. 選ばれる理由（老舗としての信頼を示す）: 金ラベル付きの3ブロックを写真と左右交互に配置
9. お客様の声（満足度で後押し）: 月桂樹と大きな数字、金帯見出し、白カードの声3件
10. ブランド紹介（2つのブランドの選択肢を示す）: 2列の写真カードにロゴとボタン
11. 料金・プラン（価格と申込先を示す）: こげ茶ヘッダーの大型料金表、サイズ別えんじボタン、上位プランは紫枠
12. 対象の確認（対応可否を判断させる）: 金枠の可能箱と灰紫枠の不可箱を上下に
13. 申込の流れ（手順の不安を解消）: STEPカードを縦に並べ三角で繋ぐ
14. よくある質問・問い合わせ（疑問解消と連絡手段）: アコーディオンのQ&A、電話とフォームの2枚カード、こげ茶フッター

Imagery

• 白い寝具や羽毛を明るい自然光で、ハイキーかつ柔らかく撮る
• 赤ちゃんや女性がくつろぐ温かい生活写真を差し込む
• 工場の作業風景で職人の手仕事と設備を見せる
• 半透明の白い羽根イラストを背景に散らす
• 比較用の素材写真は黒背景で白さを際立たせる
• 線画アイコンや柔らかいキャラクター風イラストを工程図に添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央約55%幅のコンテンツ、SPは90%幅の1カラムにする
• 目次カードはPCの3列からSPでは2列にする
• 理由ブロックの左右交互配置はSPで写真→文章の縦積みにする
• 料金表・比較表はSPで横スクロールにする
• PCのヘッダー横並びナビはSPでハンバーガーと固定CTAにする
• 左下の固定問い合わせボタンは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 行書くと起動時に読み込まれる。