--- version: alpha name: Soft Gray Sleep Mattress Sale LP description: 明るいグレーと白を地にして、山吹色のアクセントとくすんだ紺の帯で組んだマットレス通販 LP。期間限定セールの価格訴求と、悩みから科学的根拠、Point 番号付きの特長、口コミへと流れる説得型の構成。写真は波形の曲線で切り抜き、柔らかい寝室の空気感を出している。 colors: primary: '#EDAD26' cta: '#F1AB2B' on-cta: '#FFFFFF' background: '#FFFFFF' background-alt: '#F7F7F7' dark-section: '#62697B' secondary: '#5562A0' accent-1: '#EB0B65' accent-2: '#45C2F3' text: '#494C4E' text-muted: '#8D9391' line: '#64BFE4' tint-1: '#B7C8C3' marker: '#FFE65A' cta-accessible: '#A16C0B' accent-2-accessible: '#0B7EAB' primary-accessible: '#9B6D0D' typography: display: fontFamily: M PLUS Rounded 1c fontSize: 34px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.45 letterSpacing: 0.04em headline-md: fontFamily: Noto Serif JP fontSize: 20px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.06em headline-sm: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em accent: fontFamily: Dancing Script fontSize: 18px fontWeight: 600 lineHeight: 1.1 label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 4px md: 8px lg: 16px 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 price-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-lg}' rounded: '{rounded.md}' height: 260px badge-discount: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 56px price-table: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 200px point-heading: textColor: '{colors.primary}' typography: '{typography.accent}' height: 60px faq-bar: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 40px satisfaction-donut: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 80px review-card: backgroundColor: '{colors.background}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 150px size-selector: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 36px --- # DESIGN.md — グレー×山吹色の寝具セール LP（Soft Gray Sleep Mattress Sale LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 日用品・生活雑貨 ／ **雰囲気**: やさしい・柔らかい、情報量多め・訴求型、信頼・誠実、清潔・爽やか - **キーワード**: 寝室の自然光・波形の切り抜き・山吹色アクセント・セール価格表・Point 番号・満足度ドーナツ - **地の質感**: フラットな面にライトグレーのグラデーションと寝室写真を重ねる。紙のような柔らかい質感 - **形**: 波打つ曲線のセクション境界、角丸カード、細い角丸のバー状ボタン - **温度感**: やや涼しめのニュートラルに、暖色の山吹色で温度を足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#EDAD26` | アクセント・FAQバー・購入ボタン | 5% | 画素の実測 | | `cta` | `#F1AB2B` | 購入手続きボタン | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上文字 | 0% | 画素の主要色に補正 | | `background` | `#FFFFFF` | 基本の地 | 28% | 画素の実測 | | `background-alt` | `#F7F7F7` | ライトグレーの地 | 25% | 画素の実測 | | `dark-section` | `#62697B` | サイズ・問題提起の紺グレー帯 | 7% | 画素の実測 | | `secondary` | `#5562A0` | 悩み提起の青紫ブロック | 2% | 推定 | | `accent-1` | `#EB0B65` | セール価格のマゼンタ | 1% | 画素の実測 | | `accent-2` | `#45C2F3` | 割引バッジ・セール帯の水色 | 1% | 画素の実測 | | `text` | `#494C4E` | 見出し文字 | 2% | 画素の実測 | | `text-muted` | `#8D9391` | 注釈・補足 | 0% | 画素の主要色に補正 | | `line` | `#64BFE4` | カード・表の枠線 | 0% | 画素の実測 | | `tint-1` | `#B7C8C3` | セージグレーの写真背景 | 7% | 画素の主要色に補正 | | `marker` | `#FFE65A` | 差額の黄色マーカー | 0% | 推定 | | `cta-accessible` | `#A16C0B` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#0B7EAB` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#9B6D0D` | AA を満たす補正値（計算） | | 計算 | - 地は白とライトグレーを交互に置き、重い説明だけ紺グレー帯にする - 山吹色は Point 番号・FAQバー・購入ボタンなど行動と順序に集中させる - マゼンタはセール価格だけ、水色は割引バッジとセール帯だけに使う - 差額や強調語には黄色のマーカー線を敷く - 本文は真っ黒ではなく紺寄りのチャコールにする - `button-primary` は文字 `#FFFFFF` × 背景 `#F1AB2B` のコントラスト比が 1.98:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#A16C0B`、4.5:1）を使う。 - `badge-discount` は文字 `#FFFFFF` × 背景 `#45C2F3` のコントラスト比が 2.05:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#0B7EAB`、4.58:1）を使う。 - `faq-bar` は文字 `#FFFFFF` × 背景 `#EDAD26` のコントラスト比が 1.98:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#9B6D0D`、4.58:1）を使う。 - `satisfaction-donut` は文字 `#EDAD26` × 背景 `#FFFFFF` のコントラスト比が 1.98:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#9B6D0D`、4.58:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの商品名 | 丸ゴシック | M PLUS Rounded 1c | 800 | 34px | 1.2 | 0.02em | | `headline-lg` | セクション大見出し | ゴシック | Noto Sans JP | 700 | 22px | 1.45 | 0.04em | | `headline-md` | メディア紹介・口コミ見出し（明朝） | 明朝 | Noto Serif JP | 500 | 20px | 1.5 | 0.06em | | `headline-sm` | Point の小見出し | ゴシック | Noto Sans JP | 700 | 17px | 1.5 | 0.03em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.03em | | `note` | 出典・注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.02em | | `accent` | Point 数字・筆記体英字 | 欧文スクリプト | Dancing Script | 600 | 18px | 1.1 | 0.0em | | `label-button` | ボタン・FAQ質問 | ゴシック | Noto Sans JP | 700 | 14px | 1.4 | 0.05em | - Point 番号は大きな山吹色の数字にし、左上に筆記体の英字を斜めに添える - 価格は太い数字を大きく、税込表記は小さく横に並べる - 情緒的な見出しは明朝、機能説明はゴシックで書き分ける - 強調語だけ山吹色やマゼンタにし、黄色マーカーを敷く - 注釈は 10px のグレーで本文の直下に置く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。満足度は横並び 3〜5 個、SNS は 2 列グリッド - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - 中央寄せのブロックを積み、写真は全幅で敷く - Point は番号＋見出し、写真、本文の順に縦に並べる - 価格カードは同じ形でページ内に複数回繰り返す - FAQ は全幅の山吹色バーを 8px 間隔で積む - 口コミは横スクロールのカルーセルにする ## Elevation & Depth - 価格カードは水色の細枠と薄い影でわずかに浮かせる - 口コミカードはグレー枠の角丸で影は付けない - 円形写真に柔らかい影を付けて浮かせる ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。 - **写真の切り抜き**: 全幅写真は波形の曲線で上下を切り抜く。素材のアップは円形切り抜き - **セクション境界**: ゆるい波形カーブと下向き三角 - CTA は角丸 2〜4px の横長バーで右端に矢印を付ける - 割引バッジは水色の正円 - 満足度はオレンジのドーナツグラフで示す - サイズ選択はグレー枠の角丸ボタンにし、選択中は紺グレーで塗る ## Components - **購入手続きボタン**（`button-primary`）: 山吹色の横長バー。白文字を中央に置き、右端に矢印を付ける - **価格カード**（`price-card`）: 水色の枠。商品写真の横に送料無料バッジ、大きな価格、取り消し線の通常価格、セール帯、保証メダルを並べる - **割引円バッジ**（`badge-discount`）: 水色の正円に白抜きの割引率を入れ、カードや写真の角に重ねる - **サイズ別価格表**（`price-table`）: セール価格の列をマゼンタで塗り、差額の列に黄色マーカーを敷く - **Point 番号見出し**（`point-heading`）: 筆記体の英字＋山吹色の大きな 2 桁数字＋2 行の太字見出し - **FAQ アコーディオン**（`faq-bar`）: 山吹色のバー。左に Q.、右端に＋を置き、文字は白 - **満足度ドーナツ**（`satisfaction-donut`）: オレンジの円グラフの中に項目名と大きな%を入れて横に並べる - **口コミカード**（`review-card`）: 円形アイコン、名前、星、タイトル、抜粋文、グレーの Read More ボタンを入れる - **サイズ選択ボタン**（`size-selector`）: グレー枠の角丸ボタンを 3 列に並べる。選択中は紺グレーで塗る ## Do's and Don'ts **Do** - 価格カードと購入ボタンを 3〜4 回繰り返し配置する - 写真の境界は波形カーブにして柔らかさを保つ - 根拠のブロックには出典の注釈を必ず添える - 山吹色は順序と行動の部品に限定する - 地の色を白とライトグレーで交互に切り替え、リズムを作る **Don't** - 原色の赤や黒ベタを大面積に使わない - セール用のマゼンタと水色を見出しや装飾に広げない - 写真を角ばった長方形のまま全幅に並べ続けない - フォントを太いポップ体に統一しない - 余白を詰めすぎて寝室写真の静けさを損なわない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **告知バー**（値上げ前セールの期限を知らせる）: 最上部の細い帯に、値上げ表示・割引率・残り時間のブロックを横に並べる 2. **ファーストビュー**（商品と上質な寝心地を一目で伝える）: 寝室写真の上に丸ゴシックの商品名を置く。保証メダル・割引円バッジ・手書き風の吹き出しを重ね、下端は波形にする 3. **推薦コメント・満足度**（第三者の評価で信頼を得る）: グレーのボックスに推薦文を入れ、その下にオレンジのドーナツを 5 つ並べる 4. **価格改定と価格表**（今買う理由を示す）: 紺のラベル見出し＋マゼンタの強調。サイズ別の表を置き、続けて価格カードを出す 5. **メディア掲載**（権威付け）: 写真の上に明朝見出しを置き、ロゴを 4 列の白タイルで並べ、動画サムネイルを続ける 6. **悩みの提起**（睡眠の悩みに共感する）: 青紫のブロックに白丸アイコンを 4 つ並べ、原因を大見出しで示す 7. **原因の解説・根拠**（寝返りの大切さを論理的に示す）: 体の図解とチェックアイコンのリスト、引用符付きの出典カード。紺グレー帯で比較図を見せる 8. **商品の解決提示**（商品を解決策として示す）: 波形に切り抜いた全幅写真に白文字のコピーを重ね、円形写真を添える 9. **特長 Point01〜05**（機能と品質の根拠を示す）: 山吹色の番号見出し＋写真＋本文。構造は層の分解図と番号付き円写真 5 つで見せる 10. **お客様の声**（実体験で後押しする）: 満足度ドーナツと大見出し、明朝のレビュー見出し、横スクロールの口コミカード 11. **SNS投稿**（話題性を示す）: 4 列×2 段の投稿サムネイルグリッドを並べ、もっと見るリンクを付ける 12. **サイズ一覧**（サイズ選びを助ける）: 紺グレー帯に人型入りのサイズ図を 5 つ並べ、価格カードを再掲する 13. **よくある質問**（不安を解消する）: 括弧装飾の見出しの下に山吹色のアコーディオンを 9 本積む 14. **購入エリア**（その場で購入させる）: 商品写真ギャラリー＋サイズ選択＋価格＋セール帯＋購入ボタンを商品ごとに繰り返す 15. **フッター**（規約などへの導線）: 紺グレーのグラデーション地に白ロゴと規約リンクを横に並べる ## Imagery - 自然光が入る白とベージュの寝室で、木製フレームのベッドを撮る - 白いパジャマの女性が伸びをする・眠る姿を淡いトーンで撮る - コイルやウレタンの素材は手で押すアップを円形に切り抜く - 体の圧力図や層の分解図はグレーと山吹色の簡素なイラストで描く - グリーンの葉を散らして爽やかさを加える - 保証は金色の月桂樹メダルで表す - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央 480px 相当の縦長 LP。SP でもほぼ同じ 1 カラムで組める - 購入エリアは PC で写真と情報の 2 カラム。SP では写真を上、情報を下に縦積みする - SNS グリッドは PC 4 列、SP は 2 列にする - 満足度ドーナツは SP で 3 個＋2 個の 2 段にする - 価格表は SP で横スクロールを許可するか、列を 3 つに絞る ## 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-0daba60c`（元 LP の URL から採番） - **元 LP**: https://nell.life/lp/nellfriends/oharu_hoooome?route=fb_ig-all_lal_ig-ac-action1-5%25_bc&utm_source=facebook&utm_medium=display&utm_campaign=fb_ig-all_lal_ig-ac-action1-5%25_bc&utm_id=120227938582200195_v2_s91_e9&utm_content=120227938582310195&utm_term=120 - **解析に使った画像**: PC（PC版） - **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。