--- version: alpha name: Soft White Gold Bedding Reform LP description: 白と生成りの地に、ゴールドの装飾見出しと藍色の帯見出し、えんじ色のCTAを組み合わせた寝具サービスLP。羽根の浮遊装飾や柔らかな写真で軽さと清潔感を出しつつ、比較表・工程図・料金表で情報をしっかり伝える。 colors: primary: '#9D8543' secondary: '#3A7EB4' cta: '#7A0202' on-cta: '#FFFFFF' background: '#FFFFFF' background-alt: '#F3F4EE' tint-1: '#DFE2E9' dark-section: '#4C3F39' accent-1: '#847E98' text: '#333333' text-muted: '#888888' line: '#D1D5D5' surface: '#EBF3FA' secondary-accessible: '#397BB0' primary-accessible: '#89743B' typography: display: fontFamily: Cormorant Garamond fontSize: 36px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.08em headline-lg: fontFamily: Noto Serif JP fontSize: 22px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.08em headline-md: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em headline-sm: fontFamily: Cormorant Garamond fontSize: 24px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.06em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em accent: fontFamily: Playfair Display fontSize: 40px fontWeight: 400 lineHeight: 1.1 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 3px md: 6px lg: 12px full: 999px spacing: unit: 8px card: 16px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 44px heading-band: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' height: 40px heading-en: textColor: '{colors.primary}' typography: '{typography.headline-sm}' height: 60px badge-laurel: textColor: '{colors.primary}' typography: '{typography.accent}' height: 48px label-gold: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 22px nav-card: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' height: 150px comparison-table: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 260px review-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 110px step-row: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 56px faq-item: textColor: '{colors.text}' typography: '{typography.body-md}' height: 48px --- # DESIGN.md — 白×金×藍の上品な寝具リフォームLP（Soft White Gold Bedding Reform LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 日用品・生活雑貨 ／ **雰囲気**: 上品・高級、やさしい・柔らかい、信頼・誠実、情報量多め・訴求型 - **キーワード**: ふんわり・清潔・老舗の信頼・ゴールド装飾・工程の透明性・比較で納得 - **地の質感**: 白〜生成りのフラットな面に、半透明の羽根イラストや淡い霧状の写真を重ねた軽い質感 - **形**: 角丸小さめの四角カードと細い枠線。見出しは帯やリボン、月桂樹装飾。ボタンは角丸小の長方形 - **温度感**: やや暖かいニュートラル。白とベージュに金、藍の寒色をアクセントにする ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#9D8543` | ブランドの金色。英字見出し・ラベル・帯 | 3% | 画素の実測 | | `secondary` | `#3A7EB4` | 藍色の帯見出し・工程図の枠・比較表の強調 | 3% | 画素の実測 | | `cta` | `#7A0202` | 申込ボタンのえんじ色 | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTA上の文字 | 0% | 画素の主要色に補正 | | `background` | `#FFFFFF` | 基本の白地 | 38% | 画素の実測 | | `background-alt` | `#F3F4EE` | 生成り色の交互セクション地 | 17% | 画素の実測 | | `tint-1` | `#DFE2E9` | 淡いグレーブルーの問題提起セクション地 | 7% | 画素の実測 | | `dark-section` | `#4C3F39` | 料金表のヘッダーやフッターのこげ茶 | 5% | 画素の実測 | | `accent-1` | `#847E98` | 上位プランを示すくすみ紫 | 2% | 画素の実測 | | `text` | `#333333` | 見出し・本文の濃いグレー | 2% | 推定 | | `text-muted` | `#888888` | 注釈・補足の灰色 | 0% | 推定 | | `line` | `#D1D5D5` | カード・表の細い枠線 | 2% | 画素の主要色に補正 | | `surface` | `#EBF3FA` | 薄い水色の小見出し帯 | 1% | 画素の実測 | | `secondary-accessible` | `#397BB0` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#89743B` | AA を満たす補正値（計算） | | 計算 | - 白と生成りを交互に敷き、セクションの切り替えを示す - 金色は英字見出し・ラベル・満足度装飾など格を出す場所だけに使う - 藍色は説明系の帯見出し・工程図・比較表の自社列に使う - えんじ色は申込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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの英字キャッチ | 欧文セリフ | Cormorant Garamond | 500 | 36px | 1.2 | 0.08em | | `headline-lg` | セクションの和文見出し | 明朝 | Noto Serif JP | 500 | 22px | 1.6 | 0.08em | | `headline-md` | 帯見出し・カード見出し | ゴシック | Noto Sans JP | 700 | 17px | 1.5 | 0.05em | | `headline-sm` | 英字の小見出し（BRAND・FLOWなど） | 欧文セリフ | Cormorant Garamond | 500 | 24px | 1.2 | 0.06em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.9 | 0.04em | | `note` | 注釈・表の補足 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.02em | | `accent` | 満足度などの大きな数字 | 欧文セリフ | Playfair Display | 400 | 40px | 1.1 | 0.02em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.4 | 0.05em | - 英字見出しは金色の細いセリフ体にし、下に和文の小さな添え字を置く - 情緒的な見出しは明朝、説明・表はゴシックで使い分ける - 本文は中央揃えで短く改行し、行間を広くとる - 強調語は藍色や太字で部分的に色を付ける - 数字は大きなイタリックのセリフ体で月桂樹と組み合わせる - 書体は画像からの推定で、フォント名は近い印象の 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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-e774e2ca`（元 LP の URL から採番） - **元 LP**: https://www.fujishinkou.jp/lp/reform/ - **解析に使った画像**: PC（PC版） - **確度**: 色 中（9/13 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。