くすみローズ×明朝の上品ランジェリー LP

Dusty Rose Elegant Lingerie LP

くすみローズ、ベージュ、生成りグレーの淡い地に、細い明朝体と細身の欧文を合わせた女性向けランジェリー LP。写真が主役。アーチ型や楕円の切り抜き、極細の罫線、筆記体の欧文を重ねて上品で柔らかい雰囲気を作る。実績セクションだけ深いワインレッドを使って締める。

ファッション・アクセサリー上品・高級やさしい・柔らかいシンプル・ミニマルSP

ダウンロード

Claude Code なら、プロジェクト直下に置いて CLAUDE.md に @DESIGN.md と書くだけで読み込まれます（ツール別の使い方）。

COLORS

配色

地は白、生成りグレー、淡いローズを交互に敷き、写真の色となじませる
強調はくすみローズのみ。原色や彩度の高い色は使わない
実績セクションだけワインレッドの地に金色を合わせて引き締める
文字は真っ黒にせず、ブラウングレーを使う
罫線や枠は淡いグレーの 1px で控えめに
見出し中のキーワードは淡いローズの帯や鉤括弧で軽く強調する

TYPOGRAPHY

書体

displayFV の縦書きキャッチ、大見出し明朝／ Shippori Mincho 500 ／ 44px ／行間 1.3

あなたの LP を、もっと伝わる形に。Aa 123

headline-lgセクションの和文見出し明朝／ Noto Serif JP 400 ／ 24px ／行間 1.6

あなたの LP を、もっと伝わる形に。Aa 123

headline-md欧文のセクション見出し（細身の大文字）欧文セリフ／ Cormorant Garamond 400 ／ 22px ／行間 1.2

あなたの LP を、もっと伝わる形に。Aa 123

headline-sm商品名などの細身の欧文ロゴ風見出し欧文サンセリフ／ Josefin Sans 300 ／ 18px ／行間 1.3

あなたの LP を、もっと伝わる形に。Aa 123

body-md説明本文（中央揃え）明朝／ Noto Serif JP 400 ／ 13px ／行間 1.9

あなたの LP を、もっと伝わる形に。Aa 123

note調査の出典・注釈ゴシック／ Noto Sans JP 400 ／ 9px ／行間 1.5

あなたの LP を、もっと伝わる形に。Aa 123

accent写真に重ねる筆記体の欧文・手書き風の和文欧文スクリプト／ Great Vibes 400 ／ 32px ／行間 1.2

あなたの LP を、もっと伝わる形に。Aa 123

label-button写真上のラベル帯（BEFORE/AFTER など）欧文セリフ／ Cormorant Garamond 500 ／ 13px ／行間 1.2

あなたの LP を、もっと伝わる形に。Aa 123

和文は細い明朝を基本にし、太字はほぼ使わない
字間は 0.1em 前後と広めにとり、ゆとりを出す
欧文見出しは細身のセリフ体かサンセリフの大文字で、和文見出しと組み合わせる
FV やビジュアルのコピーは縦書きを使う
写真の上に筆記体の欧文を半透明の白で重ねる
数値は大きなセリフ数字にし、単位は小さく添える

PAGE STRUCTURE

セクション構成

ファーストビュー商品の魅力を一言で伝えるモデル写真をアーチ型に切り抜き、右に縦書きの明朝キャッチを置く。下に評価バッジ、商品名、カラーの見本を添える
コンセプト共感を生むストーリーを伝える全面写真に筆記体の和文タイトルと、中央揃えの白文字の詩的なコピーを重ねる
アンケート結果理想像をデータで示す線枠見出しの下にローズのドーナツグラフと大きな数字を置き、出典を小さく添える
商品イメージと宣言商品で理想が叶うことを示す商品の置き撮りに縦の欧文を添える。白地に 2 行の明朝見出しを置き、続いて縦書きパネル付きのモデル写真を見せる
比較と特長効果を視覚的に証明するBEFORE/AFTER の 2 列写真を置き、ベージュの写真上に円バッジ 3 つと大きなコピーを重ねる
実績信頼を与えるワインレッドの地にアーチ線、細身の欧文タイトル、金色ローレル付きの数値、受賞メダル 3 つを並べる
口コミ多くの人に支持されていることを示す淡いローズの地に SNS 風の写真カードを 4 列 2 段で並べる
カラー展開・ショーツラインナップを紹介する欧文見出しの下に 3 色の商品を並べ、ラベル帯付きの写真で補足する
構造の秘密機能を図解する楕円の写真に正円の拡大枠と引き出し線を付け、ローズのラベルで解説する
ポイント解説機能を 3 つに分けて詳しく伝える生成りグレーの地に大きな番号、写真、中央揃えの本文を順に繰り返す
クロージングビジュアル余韻を残して商品を印象づける光がにじむ地に細身の欧文の商品名を置き、2 列の写真と小さな欧文キャプションで締める

COMPONENTS

部品

両側に罫線を伸ばす見出し heading-line-center中央の欧文大文字の左右に、画面端まで細い横罫を伸ばす
線枠見出し heading-frame細い矩形の線枠に和文見出しを入れ、下辺に小さな筆記体の欧文を重ねる
ラベル帯 label-band写真の左上にローズ地の矩形帯を置き、白い欧文ラベルを入れる
特長の円バッジ feature-circle写真の上に白い細線の正円を置き、中に明朝の短い 2 行を入れる
月桂樹の実績表示 award-laurelワインレッドの地に金色のローレルで大きな数字を挟み、下に受賞メダルを 3 つ並べる
ポイント番号 point-numberモーブ色の大きな細身セリフ数字を、写真の左上に重ねる
比較写真 before-after2 列の写真に BEFORE/AFTER のラベル帯を付け、ローズの破線で高さを比べる
SNS 口コミカード review-card白い枠付きの写真タイルを 4 列 2 段で並べ、下に小さなアイコンを付ける
縦書きコピーパネル vertical-copy-panel写真の右側に半透明の白い縦長パネルを置き、縦書きの明朝コピーを入れる

守ること

写真を大きく見せ、文字は少なく短くする
明朝と細身の欧文を組み合わせ、字間を広めにとる
アーチ型や楕円の切り抜きで柔らかさを出す
地色は淡いトーンを交互に切り替えてリズムを作る
数値の実績は暗い地の 1 か所にまとめる

DON'T

避けること

太いゴシック体や原色の大きなボタンを使わない
純黒の文字や強い影を使わない
装飾的なアイコンやイラストを多用しない
色数を増やさない。ローズ以外の強調色は入れない
写真を小さく詰め込まない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — くすみローズ×明朝の上品ランジェリー LP（Dusty Rose Elegant Lingerie LP）

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

Overview

業種: ファッション・アクセサリー／ 雰囲気: 上品・高級、やさしい・柔らかい、シンプル・ミニマル
キーワード: くすみローズ・細明朝・アーチ切り抜き・極細罫線・筆記体の欧文・写真主役
地の質感: 光がにじむ柔らかなグラデーションの地と、マットな単色面
形: アーチ型、楕円、正円の線枠、細い横罫
温度感: やや暖かいニュートラル（ベージュ・ローズ寄り）

Colors

Token	HEX	役割	面積の目安	値の出どころ
`primary`	`#A46C6B`	ブランドを代表するくすみローズ（ラベル・強調）	4%	画素の実測
`dark-section`	`#744349`	実績セクションのワインレッド地	8%	画素の実測
`on-dark`	`#EFE0DC`	暗い地の上の文字	0%	画素の主要色に補正
`accent-1`	`#BEA48E`	ローレル・数字に使う金色	0%	画素の主要色に補正
`background`	`#FFFFFF`	基本の白地	19%	画素の実測
`background-alt`	`#E6E3DE`	ポイント解説の生成りグレー地	7%	画素の実測
`tint-1`	`#EDDEE1`	口コミ・アンケートの淡いローズ地	6%	画素の実測
`tint-2`	`#A3937C`	写真背景に合わせたベージュ	7%	画素の実測
`surface`	`#F9F8F6`	オフホワイトのカード・帯	7%	画素の実測
`text`	`#3F302C`	見出しの濃いブラウングレー	2%	画素の主要色に補正
`text-body`	`#5A4E4A`	本文のグレー	1%	推定
`text-muted`	`#999999`	欧文の飾り・注記の淡いグレー	0%	画素の実測
`line`	`#C8BCAE`	極細の罫線・枠	0%	画素の主要色に補正
`secondary`	`#B58B79`	番号・グラフに使うモーブ	1%	画素の主要色に補正
`primary-accessible`	`#8B5756`	AA を満たす補正値（計算）		計算
`text-muted-accessible`	`#717171`	AA を満たす補正値（計算）		計算

地は白、生成りグレー、淡いローズを交互に敷き、写真の色となじませる
強調はくすみローズのみ。原色や彩度の高い色は使わない
実績セクションだけワインレッドの地に金色を合わせて引き締める
文字は真っ黒にせず、ブラウングレーを使う
罫線や枠は淡いグレーの 1px で控えめに
見出し中のキーワードは淡いローズの帯や鉤括弧で軽く強調する
label-band は文字 #EFE0DC × 背景 #A46C6B のコントラスト比が 3.32:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#8B5756、4.55:1）を使う。
review-card は文字 #999999 × 背景 #F9F8F6 のコントラスト比が 2.68:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#717171、4.6:1）を使う。

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	FV の縦書きキャッチ、大見出し	明朝	Shippori Mincho	500	44px	1.3	0.1em
`headline-lg`	セクションの和文見出し	明朝	Noto Serif JP	400	24px	1.6	0.12em
`headline-md`	欧文のセクション見出し（細身の大文字）	欧文セリフ	Cormorant Garamond	400	22px	1.2	0.12em
`headline-sm`	商品名などの細身の欧文ロゴ風見出し	欧文サンセリフ	Josefin Sans	300	18px	1.3	0.08em
`body-md`	説明本文（中央揃え）	明朝	Noto Serif JP	400	13px	1.9	0.1em
`note`	調査の出典・注釈	ゴシック	Noto Sans JP	400	9px	1.5	0.03em
`accent`	写真に重ねる筆記体の欧文・手書き風の和文	欧文スクリプト	Great Vibes	400	32px	1.2	0.0em
`label-button`	写真上のラベル帯（BEFORE/AFTER など）	欧文セリフ	Cormorant Garamond	500	13px	1.2	0.1em

和文は細い明朝を基本にし、太字はほぼ使わない
字間は 0.1em 前後と広めにとり、ゆとりを出す
欧文見出しは細身のセリフ体かサンセリフの大文字で、和文見出しと組み合わせる
FV やビジュアルのコピーは縦書きを使う
写真の上に筆記体の欧文を半透明の白で重ねる
数値は大きなセリフ数字にし、単位は小さく添える
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム。比較写真とギャラリーは 2〜4 列
本文ブロックの幅: 画面幅の約 88%
余白: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算）
写真は全幅か左右に小さな余白を残して配置し、ページの大半を占める
テキストは中央揃えの短い行で、写真の間に挟む
見出しの両側に細い横罫を伸ばす型を繰り返す
比較は左右 2 列で、ラベル帯と破線のガイドを使う
ポイント解説は大きな番号＋写真＋中央揃えの本文の順に並べる

Elevation & Depth

影はほぼ使わず、平面で構成する
口コミのカードだけ白地にごく薄い影を付ける
奥行きは写真の上に重ねた半透明の白帯で出す

Shapes

角丸: 小 2px ／中 8px ／大 200px。ボタンは角丸の長方形。
写真の切り抜き: 上辺が丸いアーチ型、楕円、角丸の矩形。拡大図は正円の線枠で示す
セクション境界: 直線で地色を切り替える。境界にはグラデーションでにじむ光をのせる
ラベル帯は角丸なしの矩形にする
特長は正円の細線枠に入れて縦に並べる
四角い線枠を見出しに重ねる場合は、枠の一部を欠けさせる
鋭い装飾や太い枠線は避ける

Components

両側に罫線を伸ばす見出し（heading-line-center）: 中央の欧文大文字の左右に、画面端まで細い横罫を伸ばす
線枠見出し（heading-frame）: 細い矩形の線枠に和文見出しを入れ、下辺に小さな筆記体の欧文を重ねる
ラベル帯（label-band）: 写真の左上にローズ地の矩形帯を置き、白い欧文ラベルを入れる
特長の円バッジ（feature-circle）: 写真の上に白い細線の正円を置き、中に明朝の短い 2 行を入れる
月桂樹の実績表示（award-laurel）: ワインレッドの地に金色のローレルで大きな数字を挟み、下に受賞メダルを 3 つ並べる
ポイント番号（point-number）: モーブ色の大きな細身セリフ数字を、写真の左上に重ねる
比較写真（before-after）: 2 列の写真に BEFORE/AFTER のラベル帯を付け、ローズの破線で高さを比べる
SNS 口コミカード（review-card）: 白い枠付きの写真タイルを 4 列 2 段で並べ、下に小さなアイコンを付ける
縦書きコピーパネル（vertical-copy-panel）: 写真の右側に半透明の白い縦長パネルを置き、縦書きの明朝コピーを入れる

Do's and Don'ts

Do - 写真を大きく見せ、文字は少なく短くする - 明朝と細身の欧文を組み合わせ、字間を広めにとる - アーチ型や楕円の切り抜きで柔らかさを出す - 地色は淡いトーンを交互に切り替えてリズムを作る - 数値の実績は暗い地の 1 か所にまとめる

Don't - 太いゴシック体や原色の大きなボタンを使わない - 純黒の文字や強い影を使わない - 装飾的なアイコンやイラストを多用しない - 色数を増やさない。ローズ以外の強調色は入れない - 写真を小さく詰め込まない

Page Structure

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

ファーストビュー（商品の魅力を一言で伝える）: モデル写真をアーチ型に切り抜き、右に縦書きの明朝キャッチを置く。下に評価バッジ、商品名、カラーの見本を添える
コンセプト（共感を生むストーリーを伝える）: 全面写真に筆記体の和文タイトルと、中央揃えの白文字の詩的なコピーを重ねる
アンケート結果（理想像をデータで示す）: 線枠見出しの下にローズのドーナツグラフと大きな数字を置き、出典を小さく添える
商品イメージと宣言（商品で理想が叶うことを示す）: 商品の置き撮りに縦の欧文を添える。白地に 2 行の明朝見出しを置き、続いて縦書きパネル付きのモデル写真を見せる
比較と特長（効果を視覚的に証明する）: BEFORE/AFTER の 2 列写真を置き、ベージュの写真上に円バッジ 3 つと大きなコピーを重ねる
実績（信頼を与える）: ワインレッドの地にアーチ線、細身の欧文タイトル、金色ローレル付きの数値、受賞メダル 3 つを並べる
口コミ（多くの人に支持されていることを示す）: 淡いローズの地に SNS 風の写真カードを 4 列 2 段で並べる
カラー展開・ショーツ（ラインナップを紹介する）: 欧文見出しの下に 3 色の商品を並べ、ラベル帯付きの写真で補足する
構造の秘密（機能を図解する）: 楕円の写真に正円の拡大枠と引き出し線を付け、ローズのラベルで解説する
ポイント解説（機能を 3 つに分けて詳しく伝える）: 生成りグレーの地に大きな番号、写真、中央揃えの本文を順に繰り返す
クロージングビジュアル（余韻を残して商品を印象づける）: 光がにじむ地に細身の欧文の商品名を置き、2 列の写真と小さな欧文キャプションで締める

Imagery

自然光の室内でモデルを撮影し、ベージュや白の壁を背景にした柔らかなトーンにする
肌色を明るく、全体を低めの彩度に整える
商品の置き撮りは淡いグレーの布の上で、小物を少し添える
画面の端にカーテン越しのような光のにじみを入れる
装飾は筆記体の欧文、細線の円、破線のガイド程度に抑える
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PC 画像はないため、SP の 1 カラムを中央に最大 480〜600px 幅で置く案を推奨する
PC では左右に淡いベージュのグラデーションの余白を敷く
比較写真や口コミカードは PC でも列数を変えず、拡大だけにとどめる
縦書きコピーは PC でも縦書きのまま残す

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 行書くと起動時に読み込まれる。

---
version: alpha
name: Dusty Rose Elegant Lingerie LP
description: くすみローズ、ベージュ、生成りグレーの淡い地に、細い明朝体と細身の欧文を合わせた女性向けランジェリー LP。写真が主役。アーチ型や楕円の切り抜き、極細の罫線、筆記体の欧文を重ねて上品で柔らかい雰囲気を作る。実績セクションだけ深いワインレッドを使って締める。
colors:
  primary: '#A46C6B'
  dark-section: '#744349'
  on-dark: '#EFE0DC'
  accent-1: '#BEA48E'
  background: '#FFFFFF'
  background-alt: '#E6E3DE'
  tint-1: '#EDDEE1'
  tint-2: '#A3937C'
  surface: '#F9F8F6'
  text: '#3F302C'
  text-body: '#5A4E4A'
  text-muted: '#999999'
  line: '#C8BCAE'
  secondary: '#B58B79'
  primary-accessible: '#8B5756'
  text-muted-accessible: '#717171'
typography:
  display:
    fontFamily: Shippori Mincho
    fontSize: 44px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0.1em
  headline-lg:
    fontFamily: Noto Serif JP
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.12em
  headline-md:
    fontFamily: Cormorant Garamond
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.12em
  headline-sm:
    fontFamily: Josefin Sans
    fontSize: 18px
    fontWeight: 300
    lineHeight: 1.3
    letterSpacing: 0.08em
  body-md:
    fontFamily: Noto Serif JP
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.9
    letterSpacing: 0.1em
  note:
    fontFamily: Noto Sans JP
    fontSize: 9px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.03em
  accent:
    fontFamily: Great Vibes
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.2
  label-button:
    fontFamily: Cormorant Garamond
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0.1em
rounded:
  sm: 2px
  md: 8px
  lg: 200px
  full: 999px
spacing:
  unit: 8px
  card: 16px
  section: 72px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  heading-line-center:
    textColor: '{colors.text-muted}'
    typography: '{typography.headline-md}'
    height: 40px
  heading-frame:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
    height: 72px
  label-band:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.label-button}'
    height: 28px
  feature-circle:
    textColor: '{colors.on-dark}'
    typography: '{typography.body-md}'
    rounded: '{rounded.full}'
    height: 110px
  award-laurel:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.display}'
    height: 140px
  point-number:
    textColor: '{colors.secondary}'
    typography: '{typography.display}'
    height: 60px
  before-after:
    backgroundColor: '{colors.background-alt}'
    textColor: '{colors.text}'
    typography: '{typography.label-button}'
    height: 260px
  review-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text-muted}'
    typography: '{typography.note}'
    rounded: '{rounded.sm}'
    height: 120px
  vertical-copy-panel:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.display}'
    height: 480px
---

# DESIGN.md — くすみローズ×明朝の上品ランジェリー LP（Dusty Rose Elegant Lingerie LP）

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

## Overview

- **業種**: ファッション・アクセサリー ／ **雰囲気**: 上品・高級、やさしい・柔らかい、シンプル・ミニマル
- **キーワード**: くすみローズ・細明朝・アーチ切り抜き・極細罫線・筆記体の欧文・写真主役
- **地の質感**: 光がにじむ柔らかなグラデーションの地と、マットな単色面
- **形**: アーチ型、楕円、正円の線枠、細い横罫
- **温度感**: やや暖かいニュートラル（ベージュ・ローズ寄り）

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#A46C6B` | ブランドを代表するくすみローズ（ラベル・強調） | 4% | 画素の実測 |
| `dark-section` | `#744349` | 実績セクションのワインレッド地 | 8% | 画素の実測 |
| `on-dark` | `#EFE0DC` | 暗い地の上の文字 | 0% | 画素の主要色に補正 |
| `accent-1` | `#BEA48E` | ローレル・数字に使う金色 | 0% | 画素の主要色に補正 |
| `background` | `#FFFFFF` | 基本の白地 | 19% | 画素の実測 |
| `background-alt` | `#E6E3DE` | ポイント解説の生成りグレー地 | 7% | 画素の実測 |
| `tint-1` | `#EDDEE1` | 口コミ・アンケートの淡いローズ地 | 6% | 画素の実測 |
| `tint-2` | `#A3937C` | 写真背景に合わせたベージュ | 7% | 画素の実測 |
| `surface` | `#F9F8F6` | オフホワイトのカード・帯 | 7% | 画素の実測 |
| `text` | `#3F302C` | 見出しの濃いブラウングレー | 2% | 画素の主要色に補正 |
| `text-body` | `#5A4E4A` | 本文のグレー | 1% | 推定 |
| `text-muted` | `#999999` | 欧文の飾り・注記の淡いグレー | 0% | 画素の実測 |
| `line` | `#C8BCAE` | 極細の罫線・枠 | 0% | 画素の主要色に補正 |
| `secondary` | `#B58B79` | 番号・グラフに使うモーブ | 1% | 画素の主要色に補正 |
| `primary-accessible` | `#8B5756` | AA を満たす補正値（計算） |  | 計算 |
| `text-muted-accessible` | `#717171` | AA を満たす補正値（計算） |  | 計算 |

- 地は白、生成りグレー、淡いローズを交互に敷き、写真の色となじませる
- 強調はくすみローズのみ。原色や彩度の高い色は使わない
- 実績セクションだけワインレッドの地に金色を合わせて引き締める
- 文字は真っ黒にせず、ブラウングレーを使う
- 罫線や枠は淡いグレーの 1px で控えめに
- 見出し中のキーワードは淡いローズの帯や鉤括弧で軽く強調する
- `label-band` は文字 `#EFE0DC` × 背景 `#A46C6B` のコントラスト比が 3.32:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#8B5756`、4.55:1）を使う。
- `review-card` は文字 `#999999` × 背景 `#F9F8F6` のコントラスト比が 2.68:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-muted-accessible`（`#717171`、4.6:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FV の縦書きキャッチ、大見出し | 明朝 | Shippori Mincho | 500 | 44px | 1.3 | 0.1em |
| `headline-lg` | セクションの和文見出し | 明朝 | Noto Serif JP | 400 | 24px | 1.6 | 0.12em |
| `headline-md` | 欧文のセクション見出し（細身の大文字） | 欧文セリフ | Cormorant Garamond | 400 | 22px | 1.2 | 0.12em |
| `headline-sm` | 商品名などの細身の欧文ロゴ風見出し | 欧文サンセリフ | Josefin Sans | 300 | 18px | 1.3 | 0.08em |
| `body-md` | 説明本文（中央揃え） | 明朝 | Noto Serif JP | 400 | 13px | 1.9 | 0.1em |
| `note` | 調査の出典・注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.03em |
| `accent` | 写真に重ねる筆記体の欧文・手書き風の和文 | 欧文スクリプト | Great Vibes | 400 | 32px | 1.2 | 0.0em |
| `label-button` | 写真上のラベル帯（BEFORE/AFTER など） | 欧文セリフ | Cormorant Garamond | 500 | 13px | 1.2 | 0.1em |

- 和文は細い明朝を基本にし、太字はほぼ使わない
- 字間は 0.1em 前後と広めにとり、ゆとりを出す
- 欧文見出しは細身のセリフ体かサンセリフの大文字で、和文見出しと組み合わせる
- FV やビジュアルのコピーは縦書きを使う
- 写真の上に筆記体の欧文を半透明の白で重ねる
- 数値は大きなセリフ数字にし、単位は小さく添える
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。比較写真とギャラリーは 2〜4 列
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算）
- 写真は全幅か左右に小さな余白を残して配置し、ページの大半を占める
- テキストは中央揃えの短い行で、写真の間に挟む
- 見出しの両側に細い横罫を伸ばす型を繰り返す
- 比較は左右 2 列で、ラベル帯と破線のガイドを使う
- ポイント解説は大きな番号＋写真＋中央揃えの本文の順に並べる

## Elevation & Depth

- 影はほぼ使わず、平面で構成する
- 口コミのカードだけ白地にごく薄い影を付ける
- 奥行きは写真の上に重ねた半透明の白帯で出す

## Shapes

- **角丸**: 小 2px ／ 中 8px ／ 大 200px。ボタンは角丸の長方形。
- **写真の切り抜き**: 上辺が丸いアーチ型、楕円、角丸の矩形。拡大図は正円の線枠で示す
- **セクション境界**: 直線で地色を切り替える。境界にはグラデーションでにじむ光をのせる
- ラベル帯は角丸なしの矩形にする
- 特長は正円の細線枠に入れて縦に並べる
- 四角い線枠を見出しに重ねる場合は、枠の一部を欠けさせる
- 鋭い装飾や太い枠線は避ける

## Components

- **両側に罫線を伸ばす見出し**（`heading-line-center`）: 中央の欧文大文字の左右に、画面端まで細い横罫を伸ばす
- **線枠見出し**（`heading-frame`）: 細い矩形の線枠に和文見出しを入れ、下辺に小さな筆記体の欧文を重ねる
- **ラベル帯**（`label-band`）: 写真の左上にローズ地の矩形帯を置き、白い欧文ラベルを入れる
- **特長の円バッジ**（`feature-circle`）: 写真の上に白い細線の正円を置き、中に明朝の短い 2 行を入れる
- **月桂樹の実績表示**（`award-laurel`）: ワインレッドの地に金色のローレルで大きな数字を挟み、下に受賞メダルを 3 つ並べる
- **ポイント番号**（`point-number`）: モーブ色の大きな細身セリフ数字を、写真の左上に重ねる
- **比較写真**（`before-after`）: 2 列の写真に BEFORE/AFTER のラベル帯を付け、ローズの破線で高さを比べる
- **SNS 口コミカード**（`review-card`）: 白い枠付きの写真タイルを 4 列 2 段で並べ、下に小さなアイコンを付ける
- **縦書きコピーパネル**（`vertical-copy-panel`）: 写真の右側に半透明の白い縦長パネルを置き、縦書きの明朝コピーを入れる

## Do's and Don'ts

**Do**
- 写真を大きく見せ、文字は少なく短くする
- 明朝と細身の欧文を組み合わせ、字間を広めにとる
- アーチ型や楕円の切り抜きで柔らかさを出す
- 地色は淡いトーンを交互に切り替えてリズムを作る
- 数値の実績は暗い地の 1 か所にまとめる

**Don't**
- 太いゴシック体や原色の大きなボタンを使わない
- 純黒の文字や強い影を使わない
- 装飾的なアイコンやイラストを多用しない
- 色数を増やさない。ローズ以外の強調色は入れない
- 写真を小さく詰め込まない

## Page Structure

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

1. **ファーストビュー**（商品の魅力を一言で伝える）: モデル写真をアーチ型に切り抜き、右に縦書きの明朝キャッチを置く。下に評価バッジ、商品名、カラーの見本を添える
2. **コンセプト**（共感を生むストーリーを伝える）: 全面写真に筆記体の和文タイトルと、中央揃えの白文字の詩的なコピーを重ねる
3. **アンケート結果**（理想像をデータで示す）: 線枠見出しの下にローズのドーナツグラフと大きな数字を置き、出典を小さく添える
4. **商品イメージと宣言**（商品で理想が叶うことを示す）: 商品の置き撮りに縦の欧文を添える。白地に 2 行の明朝見出しを置き、続いて縦書きパネル付きのモデル写真を見せる
5. **比較と特長**（効果を視覚的に証明する）: BEFORE/AFTER の 2 列写真を置き、ベージュの写真上に円バッジ 3 つと大きなコピーを重ねる
6. **実績**（信頼を与える）: ワインレッドの地にアーチ線、細身の欧文タイトル、金色ローレル付きの数値、受賞メダル 3 つを並べる
7. **口コミ**（多くの人に支持されていることを示す）: 淡いローズの地に SNS 風の写真カードを 4 列 2 段で並べる
8. **カラー展開・ショーツ**（ラインナップを紹介する）: 欧文見出しの下に 3 色の商品を並べ、ラベル帯付きの写真で補足する
9. **構造の秘密**（機能を図解する）: 楕円の写真に正円の拡大枠と引き出し線を付け、ローズのラベルで解説する
10. **ポイント解説**（機能を 3 つに分けて詳しく伝える）: 生成りグレーの地に大きな番号、写真、中央揃えの本文を順に繰り返す
11. **クロージングビジュアル**（余韻を残して商品を印象づける）: 光がにじむ地に細身の欧文の商品名を置き、2 列の写真と小さな欧文キャプションで締める

## Imagery

- 自然光の室内でモデルを撮影し、ベージュや白の壁を背景にした柔らかなトーンにする
- 肌色を明るく、全体を低めの彩度に整える
- 商品の置き撮りは淡いグレーの布の上で、小物を少し添える
- 画面の端にカーテン越しのような光のにじみを入れる
- 装飾は筆記体の欧文、細線の円、破線のガイド程度に抑える
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC 画像はないため、SP の 1 カラムを中央に最大 480〜600px 幅で置く案を推奨する
- PC では左右に淡いベージュのグラデーションの余白を敷く
- 比較写真や口コミカードは PC でも列数を変えず、拡大だけにとどめる
- 縦書きコピーは PC でも縦書きのまま残す

## 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-0e61e74a`（元 LP の URL から採番）
- **元 LP**: https://www.tu-hacci.co.jp/c/product/u376a?utm_source=official_hp_251104_u376a&utm_medium=official_hp&utm_campaign=official_hp/sp=1
- **解析に使った画像**: SP（スマホ版）
- **確度**: 色 高（8/14 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。

SOURCE

出典と注意

元の LP: https://www.tu-hacci.co.jp/c/product/u376a?utm_source=official_hp_251104_u376a&utm_medium=official_hp&utm_campaign=official_hp/sp=1（公開状況により表示できない場合があります）
この design.md は、公開されている LP の見た目を独自に分析した非公式の資料です。元 LP の運営企業・制作会社とは関係ありません。
元 LP のロゴ・写真・イラスト・文章・商品名は含みません。生成する LP でも使わず、自社の素材に置き換えてください。
色は画像の画素から実測した値、書体・サイズ・余白は画像からの推定です。
元 LP の権利者の方は、掲載の削除依頼からご連絡ください。受付から 24 時間以内に非公開にします。

似た LP の design.md

ファッション・アクセサリー桜色×淡青の雑誌風ベビー服 LPSoft Pastel Editorial Baby Apparel LP ファッション・アクセサリーミントティール×黒の機能性サンダル LPTeal Glass Active Footwear LP ファッション・アクセサリー7色帯で切り替えるTシャツ特集LPColor-Block Category Catalog Apparel LP ファッション・アクセサリーくすみブルー×液体シェイプのネイル・アクセ LPPastel Fluid Shapes Accessory & Nail LP ファッション・アクセサリースマイル花柄×原色ポップのアパレルコラボLPMaximal Happy Pop Fashion Collab LP ファッション・アクセサリー生成り×ボルドーのバレンタイン部屋着特集 LPValentine Burgundy Editorial Roomwear LP