--- version: alpha name: Soft Blush and Cream Dual-Line Innerwear LP description: 敏感肌向けインナーの通販LP。前半はくすみピンク、後半はクリーム×マスタードゴールドで、2つのシリーズを色で分けている。円形の写真、白いカード型の商品スライダー、ピル型ボタンを使い、肌にやさしい柔らかな印象を出す。 colors: primary: '#D27070' secondary: '#C49C03' cta: '#CC1A76' on-cta: '#FFFFFF' background: '#FAF0EF' background-alt: '#FAF5E1' surface: '#FEFEFE' tint-1: '#F5E1E2' tint-2: '#F3EDCB' accent-1: '#BE9788' text: '#64585A' text-body: '#78706F' accent-2: '#7A5E10' marker: '#FBEFA0' text-body-accessible: '#746C6B' primary-accessible: '#C74D4D' accent-1-accessible: '#9E6A56' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 30px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 22px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.08em headline-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.04em accent: fontFamily: Playfair Display fontSize: 11px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.12em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.05em rounded: sm: 4px md: 8px lg: 16px full: 999px spacing: unit: 8px card: 12px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 40px button-outline: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 32px button-brand: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px product-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 420px number-badge: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 28px worry-bubble: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 64px review-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 300px category-tile: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.note}' rounded: '{rounded.md}' height: 64px variation-banner: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' rounded: '{rounded.sm}' height: 64px --- # DESIGN.md — 桜色×生成りの二系統インナーLP（Soft Blush and Cream Dual-Line Innerwear LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ファッション・アクセサリー ／ **雰囲気**: やさしい・柔らかい、上品・高級、清潔・爽やか、ナチュラル - **キーワード**: くすみピンク・生成り・円形トリミング・白カード・ピル型ボタン・二系統配色 - **地の質感**: 淡いグラデーションの地に白カードを浮かせる。粒感はなく、なめらかで柔らかい質感 - **形**: 円や重なる円、ピル型ボタン、角丸カード。セクション境界はゆるい弧やV字の切り欠き - **温度感**: 暖色寄りの淡いトーン。肌色に近く温かい ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#D27070` | ブランドのくすみローズ（ボタン・見出しバッジ） | | 推定 | | `secondary` | `#C49C03` | 第二シリーズのマスタードゴールド | | 画素の実測 | | `cta` | `#CC1A76` | ブランド総合CTAのマゼンタ | | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の白文字 | | 画素の主要色に補正 | | `background` | `#FAF0EF` | ピンク系セクションの地 | | 画素の実測 | | `background-alt` | `#FAF5E1` | クリーム系セクションの地 | | 画素の実測 | | `surface` | `#FEFEFE` | 商品カード・声カードの白 | | 画素の実測 | | `tint-1` | `#F5E1E2` | カテゴリ選択帯のピンク | | 画素の実測 | | `tint-2` | `#F3EDCB` | カテゴリ選択帯のオリーブクリーム | | 画素の実測 | | `accent-1` | `#BE9788` | 悩み吹き出しのモカ | | 画素の主要色に補正 | | `text` | `#64585A` | 見出しのダークブラウングレー | | 画素の実測 | | `text-body` | `#78706F` | 本文のグレー | | 画素の実測 | | `accent-2` | `#7A5E10` | 第二シリーズの見出しオリーブブラウン | | 推定 | | `marker` | `#FBEFA0` | お客様の声の黄色マーカー | | 推定 | | `text-body-accessible` | `#746C6B` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#C74D4D` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#9E6A56` | AA を満たす補正値（計算） | | 計算 | - シリーズごとに地色を変える。前半はピンク系、後半はクリーム系にする - CTAの色も系統に合わせる。ピンク系の帯ではローズ、クリーム系の帯ではゴールドを使う - ブランド全体への導線だけをマゼンタにして区別する - カードは白にし、淡い地色の上に浮かせる - 強い色はボタンとバッジだけに使い、面積を小さく抑える - 声の本文で強調したい箇所には黄色のマーカーを引く - `page` は文字 `#78706F` × 背景 `#FAF0EF` のコントラスト比が 4.32:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-body-accessible`（`#746C6B`、4.58:1）を使う。 - `button-primary` は文字 `#FFFFFF` × 背景 `#D27070` のコントラスト比が 3.34:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#C74D4D`、4.57:1）を使う。 - `button-outline` は文字 `#D27070` × 背景 `#FEFEFE` のコントラスト比が 3.31:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#C74D4D`、4.53:1）を使う。 - `number-badge` は文字 `#FFFFFF` × 背景 `#BE9788` のコントラスト比が 2.63:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#9E6A56`、4.52:1）を使う。 - `worry-bubble` は文字 `#FFFFFF` × 背景 `#BE9788` のコントラスト比が 2.63:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#9E6A56`、4.52:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの円形ロゴ内のキャッチ | ゴシック | Zen Kaku Gothic New | 700 | 30px | 1.3 | 0.05em | | `headline-lg` | セクション見出し | ゴシック | Zen Kaku Gothic New | 500 | 22px | 1.4 | 0.08em | | `headline-md` | 解決ポイント・理由の小見出し | ゴシック | Noto Sans JP | 700 | 15px | 1.5 | 0.04em | | `accent` | 見出し上の欧文ラベルとシリーズロゴ | 欧文セリフ | Playfair Display | 500 | 11px | 1.2 | 0.12em | | `body-md` | 商品名・説明文・声の本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.7 | 0.02em | | `note` | 価格の税込表記・注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.02em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 13px | 1.0 | 0.05em | - 見出しは中くらいの太さで字間を広めに取り、上品に見せる - 見出しの上に小さな欧文ラベルを淡い色で添える - シリーズ名には欧文セリフ体を使う - 見出し内の強調語だけを大きくするか、色を変える - 価格は大きめの数字に、小さな税込表記を添える - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SPは1カラムで、商品カードは横スワイプにする。PCは3カラム - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 56px、基本単位 8px、カード内 12px（375px 幅換算） - セクションは全幅の色帯で区切る - 見出しは中央揃えにする - 商品カードは写真・カラーチップ・商品名・価格・2ボタンを縦に並べる - カテゴリアイコンは正方形タイルにし、SPでは3列×2段で並べる - バナーはSPでは2列のグリッドにする ## Elevation & Depth - 白カードにはごく薄い影を付ける（0 2px 8px rgba(0,0,0,0.06)） - ボタンは影を付けず、フラットにする - カテゴリタイルには薄い影と角丸を付ける ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 人物は円形、または2つの円が重なる形で切り抜く。商品写真は角丸の長方形にする - **セクション境界**: ゆるい弧、または中央のV字切り欠きにする - 主ボタンは塗りのピル型、サブは白地に色線のピル型にする - 番号はピル型のバッジに入れる - 悩みは不定形の丸い吹き出しで示す - 比較写真の上には角丸の小さなラベルを置く ## Components - **カート投入ボタン**（`button-primary`）: ピル型の塗りボタン。右端にカートアイコンを置く - **詳細ボタン**（`button-outline`）: 白地に色線のピル型ボタン。右に矢印を付ける - **ブランド総合CTA**（`button-brand`）: マゼンタのピル型ボタン。ページ最下部に置く - **商品スライダーカード**（`product-card`）: 上部に色帯の見出し、写真、左右の矢印、カラーチップ、価格を載せた白カード - **解決番号バッジ**（`number-badge`）: 小さなラベルと大きい数字を並べたピル型のバッジ - **悩み吹き出し**（`worry-bubble`）: モカ色の丸い吹き出し。人物イラストの周りに点線で結んで配置する - **お客様の声カード**（`review-card`）: 星評価、タイトル、商品サムネ、マーカー付き本文、ボタンを載せた白カード - **カテゴリアイコンタイル**（`category-tile`）: 白い角丸の正方形に線画アイコンを入れ、下にラベルを置く - **商品バリエーションバナー**（`variation-banner`）: 淡色地に商品の切り抜き写真とコピーを置き、右端に矢印を付けた横長バナー ## Do's and Don'ts **Do** - シリーズごとに地色・ボタン色・見出し色をセットで切り替える - 人物写真は円形で柔らかく見せる - 見出しに上付きの登録商標マークや小さな欧文を添える - 商品カードは横スクロールのスライダーにする - 強調色は小さな面積にとどめる **Don't** - 原色や濃い黒の地を使わない - 角張った四角いボタンにしない - 太すぎる見出しや強い影を使わない - 1つのセクションにピンク系とゴールド系を混ぜない - 写真を角ばったまま大きく配置しない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品の価値を一言で伝える）: ラベンダーのグラデーションに人物写真を置き、右に白い円形エンブレムのキャッチを重ねる 2. **シリーズ選択**（2系統への導線を示す）: ピンクとクリームの長方形タブを2つ横に並べる 3. **悩みの提起**（肌トラブルに共感させる）: 雲形の見出しの下に人物の線画を置き、悩みの吹き出しを3つ配置する。下端はV字にする 4. **解決策**（構造上の利点を示す）: 番号バッジ付きの3列。一般品との比較写真を並べる 5. **ベストセラー**（購入へ誘導する）: 白カードの商品スライダーを3枚並べる 6. **お客様の声**（信頼を補強する）: 星評価付きの白カードを3枚並べ、本文にマーカーを引く 7. **商品バリエーション**（関連商品へ回遊させる）: 写真入りの横長バナーを2列グリッドで並べる 8. **カテゴリ選択**（アイテム別に探させる）: 色帯の上に線画アイコンのタイルを並べ、全件ボタンを置く 9. **第二シリーズ導入**（別ラインの世界観を見せる）: クリームからゴールドへのグラデーション。円形の人物写真を置き、綿花の装飾を添える 10. **選ばれる理由**（素材の利点を伝える）: ゴールドの番号バッジと写真を2列で並べる 11. **第二シリーズ商品・声・カテゴリ**（購入へ誘導する）: 前半と同じ部品をゴールド配色で繰り返す 12. **締めのCTA**（ブランド全体へ誘導する）: 白からピンクへのグラデーション。マゼンタの見出し、円形の人物写真、マゼンタのボタンを置く ## Imagery - 人物は素肌感のある女性モデル。インナー姿をソフトな自然光で撮り、背景は淡色にする - 商品写真は白背景の着用カット、または切り抜き - 素材の写真は手のひらに綿を乗せるなど、触感が伝わる構図にする - 綿花やユーカリの葉の切り抜きを装飾に使う - アイコンは細い単色線画にし、系統色で描く - 比較写真には一般品と自社品のラベルを付けて並べる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは本文幅を約760pxで中央に寄せる。SPは幅の90%にする - 商品カードはPCでは3列表示、SPでは1.2枚見えの横スワイプにする - 解決ポイントの3列はSPでは縦積みにする - カテゴリタイルはPCでは5列、SPでは3列にする - FVは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-ba5a1ae4`（元 LP の URL から採番） - **元 LP**: https://www.gunze.jp/store/e/ekireilabo/ - **解析に使った画像**: 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/）からご連絡ください。