--- version: alpha name: Coral and Sage Soft Shapewear LP description: コーラルピンクとくすみセージグリーンを交互に使う、女性向け着圧ウェアの縦長 LP。細い明朝の大きな数字と見出し、角丸の帯ラベル、円グラフのアンケート、番号付きの特長ポイントで、やさしい雰囲気のまま情報をしっかり伝える。 colors: primary: '#F79D87' secondary: '#6FA89A' background: '#FFFFFF' background-alt: '#EAF2F3' tint-1: '#FFF6ED' tint-2: '#F0CAB4' dark-section: '#5E5E5E' text: '#353037' text-body: '#4A4A4A' accent-1: '#E8B060' accent-2: '#3F6B5E' line: '#D6D6CF' on-primary: '#FFFFFF' marker: '#E8737A' primary-accessible: '#DE370F' accent-1-accessible: '#A46A18' typography: display: fontFamily: Shippori Mincho fontSize: 40px fontWeight: 500 lineHeight: 1.25 letterSpacing: 0.05em headline-lg: fontFamily: Noto Serif JP fontSize: 26px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.05em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em accent: fontFamily: Cormorant Garamond fontSize: 56px fontWeight: 400 lineHeight: 1.0 headline-sm: fontFamily: Allura fontSize: 22px fontWeight: 400 lineHeight: 1.2 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 label-button: fontFamily: Zen Kaku Gothic New fontSize: 15px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.08em rounded: sm: 4px md: 10px lg: 20px full: 999px spacing: unit: 8px card: 16px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' label-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 36px pill-tag: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 36px point-number: textColor: '{colors.text}' typography: '{typography.accent}' height: 64px survey-donut: backgroundColor: '{colors.background-alt}' textColor: '{colors.accent-2}' typography: '{typography.accent}' height: 220px stat-badge: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-primary}' typography: '{typography.accent}' rounded: '{rounded.md}' height: 160px worry-circle: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-primary}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 72px merit-card: backgroundColor: '{colors.background-alt}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 360px size-table: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 260px guarantee-box: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 120px --- # DESIGN.md — コーラル×セージの着圧インナー LP（Coral and Sage Soft Shapewear LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ファッション・アクセサリー ／ **雰囲気**: やさしい・柔らかい、上品・高級、情報量多め・訴求型 - **キーワード**: コーラルピンク・セージグリーン・細い明朝の数字・帯ラベル・淡いグラデーション・実績訴求 - **地の質感**: 白〜生成りの地に、淡いピンクとミントの抽象的なにじみ・波形を重ねた柔らかい質感。 - **形**: 角丸の帯ラベル、斜めにカットした見出し帯、角丸の枠カード、円グラフ、ドーナツ型の数値表示。 - **温度感**: ややあたたかい（コーラル主体に、セージで落ち着かせる） ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#F79D87` | ブランドのコーラル（帯・ラベル・強調） | 11% | 画素の主要色に補正 | | `secondary` | `#6FA89A` | セージグリーン（見出し帯・円グラフ） | 6% | 推定 | | `background` | `#FFFFFF` | 基本の白地 | 26% | 画素の実測 | | `background-alt` | `#EAF2F3` | 淡いミントの面 | 8% | 画素の実測 | | `tint-1` | `#FFF6ED` | 生成りのピーチ地（サイズ表・保証枠） | 7% | 画素の実測 | | `tint-2` | `#F0CAB4` | 淡いピーチのグラデ地 | 5% | 画素の主要色に補正 | | `dark-section` | `#5E5E5E` | 悩み提起のグレー帯・濃色ラベル | 5% | 推定 | | `text` | `#353037` | 見出しの濃いチャコール | 4% | 画素の主要色に補正 | | `text-body` | `#4A4A4A` | 本文 | 2% | 推定 | | `accent-1` | `#E8B060` | ゴールド（実績バッジ・保証帯） | 3% | 推定 | | `accent-2` | `#3F6B5E` | 深いグリーン（アンケート円グラフ） | 2% | 推定 | | `line` | `#D6D6CF` | 枠線・区切り | 1% | 画素の主要色に補正 | | `on-primary` | `#FFFFFF` | 帯上の白文字 | 1% | 画素の主要色に補正 | | `marker` | `#E8737A` | 本文中の強調文字 | 1% | 推定 | | `primary-accessible` | `#DE370F` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#A46A18` | AA を満たす補正値（計算） | | 計算 | - 地は白・淡いミント・生成りピーチをセクションごとに切り替える。 - コーラルは帯ラベル・数値・強調ボタンに使い、面積は全体の1割程度に抑える。 - セージグリーンは見出し帯やグラフに使い、コーラルと交互に並べる。 - 悩みのセクションだけグレーの地に切り替え、落ち着いた空気をつくる。 - 実績・保証はゴールドのグラデで特別感を出す。 - 本文中の強調はコーラル系の文字色に変える。 - `label-band` は文字 `#FFFFFF` × 背景 `#F79D87` のコントラスト比が 2.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#DE370F`、4.51:1）を使う。 - `pill-tag` は文字 `#FFFFFF` × 背景 `#F79D87` のコントラスト比が 2.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#DE370F`、4.51:1）を使う。 - `stat-badge` は文字 `#FFFFFF` × 背景 `#E8B060` のコントラスト比が 1.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#A46A18`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの大きなキャッチ | 明朝 | Shippori Mincho | 500 | 40px | 1.25 | 0.05em | | `headline-lg` | セクション見出し | 明朝 | Noto Serif JP | 500 | 26px | 1.4 | 0.05em | | `headline-md` | 帯ラベル内の見出し | ゴシック | Zen Kaku Gothic New | 700 | 18px | 1.4 | 0.05em | | `accent` | 番号・パーセント等の大きな数字 | 欧文セリフ | Cormorant Garamond | 400 | 56px | 1.0 | 0.0em | | `headline-sm` | 英字の飾り見出し（筆記体） | 欧文スクリプト | Allura | 400 | 22px | 1.2 | 0.0em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.03em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `label-button` | ピル型ラベル・ボタン | ゴシック | Zen Kaku Gothic New | 700 | 15px | 1.3 | 0.08em | - 大見出しは細めの明朝で、上品さを出す。 - 数値（%、hPa、番号）は欧文セリフで特大にし、単位は小さくする。 - 帯の中はゴシック太字の白抜きにする。 - 英字の筆記体は見出しの背後に薄く重ねる飾りとして使う。 - 主張の後には※を付け、セクション末尾に小さな注釈をまとめる。 - キャッチは2〜3行で、強調語だけ大きくする。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。特長の比較は 2〜4 列のミニカード - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - セクション冒頭は小さな英字キャプション、帯ラベル、明朝の見出しの順に縦に積む。 - 番号付きの特長は大きな数字、帯、見出しの順で構成する。 - 数値の訴求は円グラフと大きな%を左右に並べる。 - 商品写真の上に吹き出しラベルや矢印を重ねて説明する。 - 表やメリットは角丸枠のカードにまとめる。 - セクションのつなぎに「だから」「さらに」などの短い接続ラベルを入れる。 ## Elevation & Depth - 基本はフラットで、影はほぼ使わない。 - 帯ラベルやバッジにはごく薄いドロップシャドウを付ける。 - 枠カードは影ではなく細い線と淡い地色で区切る。 ## Shapes - **角丸**: 小 4px ／ 中 10px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 人物は切り抜きか角丸の矩形。コーディネート写真はアーチ型に切り抜く。 - **セクション境界**: 柔らかな波形のにじみや斜めの帯で区切る。直線の境界は少なめにする。 - 帯ラベルは角丸の長方形かピル型にする。 - 見出し帯は片側を斜めにカットしてもよい。 - 悩みは丸いバッジを横に並べる。 - サイズ表は色違いのタブ見出しを付けた角丸のセルにする。 ## Components - **帯ラベル**（`label-band`）: コーラルかセージで塗った横長の帯に白抜き文字を入れた、見出しの部品。 - **ピルタグ**（`pill-tag`）: セクションの導入やつなぎに置くピル型のラベル。 - **ポイント番号**（`point-number`）: 細い欧文セリフの大きな番号に、筆記体の英字と横線を添える。 - **アンケート円グラフ**（`survey-donut`）: 左にドーナツグラフと質問、右に大きな%を置いて回答率を見せる。 - **実績バッジ**（`stat-badge`）: ゴールドのグラデ地に月桂冠と大きな数字を置いた実績表示。 - **悩みの丸バッジ**（`worry-circle`）: グレー地に、白文字の悩みを入れた円を4つ並べる。 - **メリット枠カード**（`merit-card`）: 細い線で囲んだ角丸の枠に、写真と小見出し・本文を左右交互に配置する。 - **サイズ表**（`size-table`）: 列ごとに色を変えたタブ見出しと、淡い色のセルで組んだ表。 - **保証ボックス**（`guarantee-box`）: ゴールドの帯見出しと交換のイラストを並べた、保証の案内枠。 ## Do's and Don'ts **Do** - コーラルとセージをセクションごとに交互に使う。 - 数値は細い欧文セリフで大きく見せる。 - 人物写真は明るく自然光で、多様な体型を並べる。 - 主張には※を付け、注釈を小さく添える。 - 地には淡いにじみや波形を入れ、柔らかさを出す。 **Don't** - 原色の赤や青を使わない。 - 太い角ゴシックの極太見出しを多用しない。 - 影を強くしない。 - 背景を真っ白だけで続けない。 - 一つのセクションでコーラルを広い面に塗りすぎない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（体型を問わず効果が出ることと、実績を一目で伝える。）: コーラルのグラデ地に、異なる体型のモデル4人を並べる。明朝の大きなキャッチと実績バッジを置く。 2. **商品概要**（商品の特徴を要約する。）: パッケージ写真と商品名、コーラルの四角い特長バッジを3つ並べる。 3. **訴求コピー**（核になるベネフィットを強く打ち出す。）: ピルタグ、明朝の一文、セージの帯を縦に積む。 4. **販売実績**（権威付けをする。）: ゴールドの地に月桂冠と特大の数字。販売サイトのロゴを並べる。 5. **アンケート**（利用者の不満とニーズを数値で示す。）: セージの見出し帯、ドーナツグラフ、理由を示す4色の棒グラフカード。 6. **悩みの提起**（読者の悩みに共感する。）: グレーの地に、斜めの黒帯コピーと丸い悩みバッジを4つ置く。 7. **解決の提示**（開発の姿勢と商品を示す。）: コーラルのグラデに明朝の大見出し。動きのある人物写真に吹き出しを重ねる。 8. **特長ポイント01〜03**（機能を順に説明する。）: 大きな番号と帯見出しに、図解写真・矢印・数値ラベル・比較写真を組み合わせる。 9. **メリット**（得られる効果を補足する。）: ミントの角丸枠の中に、写真と本文を左右交互に配置する。 10. **サイズ展開**（誰でも選べることを示す。）: 生成りの枠に、4体型のモデル写真と色分けしたサイズ表を置く。 11. **保証**（購入の不安をなくす。）: ゴールドの帯見出しと交換のイラストを並べた保証ボックスを2つ置く。 12. **コーディネート**（普段使いをイメージさせる。）: アーチ型に切り抜いた写真を横スライダーで見せる。 ## Imagery - スタジオの白〜ベージュ背景に自然光を当て、多様な体型の女性が黒いスパッツを履いて並ぶ写真。 - ヨガやストレッチのポーズで、伸びやかさを見せる人物写真。 - 生地のアップや手で引っ張る写真で、質感と伸縮性を伝える。 - 着圧箇所を示すコーラルの矢印と、数値の吹き出し。 - ピンクとミントの水彩風のにじみや、波形の背景装飾。 - 細い線のアイコン（防臭・UVなど）を円の中に入れる。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - 元はSP幅の縦長デザインで、PCでも中央に約750px幅で配置する想定。 - PCでは左右の余白を淡いグラデ地で埋める。 - SPでは数値を48〜56px、見出しを24〜28pxにする。 - 4列のカードはSPでも4列のまま維持し、文字を小さくする。 - スライダーはSPでは1枚ずつ、左右の写真を少しのぞかせる。 ## 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-5ba1ba14`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/glamorousseries/new-daily/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（3/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。