ミント×コーラルの淡色やさしい肌着 LP

Soft Pastel Mint and Coral Innerwear LP

白とグレージュを地に、淡いミント水色とコーラルを差した女性向け肌着の縦長LP。明朝の大見出し、線画の百合と金箔の飛沫、水彩のにじみで、繊細で上品なのに親しみもある雰囲気を作る。

ファッション・アクセサリーやさしい・柔らかい上品・高級清潔・爽やかナチュラルSP

ダウンロード

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

COLORS

配色

地は白とグレージュ写真地を交互にし、ミント水色の面で区切りを作る
コーラルは訴求の一文と吹き出しだけに使う
ラベンダーはマーカーと角の三角装飾に限定する
文字は黒ではなく濃いグレーで柔らかく
朱赤はロゴ専用で他に使わない
金箔の粒は各セクションの端に少量散らす

TYPOGRAPHY

書体

displayFVの大コピー・満足度数字明朝／ Shippori Mincho 500 ／ 44px ／行間 1.3

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

headline-lgセクション大見出し明朝／ Noto Serif JP 500 ／ 30px ／行間 1.5

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

headline-mdコーラルの訴求見出しゴシック／ Zen Kaku Gothic New 700 ／ 26px ／行間 1.5

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

headline-sm小見出し・カード見出し明朝／ Noto Serif JP 500 ／ 20px ／行間 1.5

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

body-md本文ゴシック／ Noto Sans JP 400 ／ 15px ／行間 1.8

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

accent吹き出し・手書き風の声手書き・筆／ Klee One 600 ／ 15px ／行間 1.6

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

note注釈ゴシック／ Noto Sans JP 400 ／ 11px ／行間 1.6

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

label-button英字の飾り見出し欧文サンセリフ／ Josefin Sans 300 ／ 40px ／行間 1.1

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

大見出しは明朝で字間を広めに
強調語はゴシック太字にマーカーを敷く
見出しの前に斜線で挟んだ短い前置きを置く
英字見出しはアーチ状に曲げて細字で配置
写真上の文字は白帯や白文字＋影で可読性を確保
縦書きの白帯コピーを写真に重ねる

PAGE STRUCTURE

セクション構成

ファーストビュー着用シーンと主効果を伝える全幅の着用写真に縦書き帯コピーと円形バッジ、下に明朝の大コピーと英字ロゴ
満足度数字で信頼を示すグラデ円環に大数字、周囲に楕円吹き出しの声
悩みの提起共感を得る大理石風地に明朝見出し、チェックリストと人物イラスト、V字区切り
解決提示商品を紹介角丸写真にコーラル吹き出し、マーカー付き見出し
開発思想ブランドの考え方ミント円形地に3つの重なる円で価値を表現
こだわり3点素材・製法の説明左写真右テキストの3段、点線区切り
支持の声評判を見せるシーツ写真地に商品写真と4つの吹き出し
最大の特徴機能を訴求空写真のアーチパネル、矢印付き商品写真、括弧囲み説明
比較違いを実証2枚並べた比較写真にミントラベル
詳細・着用提案デザイン面の利点片側角丸写真と手書き吹き出し見出し、縦書きコピー
嬉しいポイント付加価値大きな円形地に写真＋縦線見出しのリスト
お客様の声体験談アーチパネル内のスライダーカード、年代バッジ
カラー・ブランド色と世界観を伝えるアーチ枠のカラー紹介と生活シーン写真
商品仕様サイズと素材の確認商品切り抜き、ミントラベル項目、サイズ表、洗濯表示

COMPONENTS

部品

アーチ型パネル arch-panel上部が半円の縦長枠。英字見出しを弧状に置く
楕円吹き出し speech-bubbleコーラル面か白地細線の楕円に手書き風の声
悩みチェックリスト check-list角丸チェックボックスと太字ラベンダーマーカー
斜線囲みリード slash-lead＼前置き／の小見出し
マーカー強調 marker-text語の下半分にミントやラベンダーの帯
円グラフ満足度 ring-statミント〜コーラルのグラデ円環に明朝の大数字
ミントラベル label-pill比較写真下やスペック項目の角丸ラベル
サイズ表 spec-tableグレージュ見出しセルと細線の表

守ること

余白を広く取り、淡色で軽く見せる
明朝見出しとゴシック本文を組み合わせる
線画の花と金箔の粒を端に散らす
吹き出しで使用者の声を手書き風に添える
強調語にはマーカーを使う

DON'T

避けること

原色や濃い背景を広く使わない
コーラルを本文全体に使わない
太い影や立体ボタンを使わない
装飾を本文の上に重ねて読みにくくしない
黒100%の文字を使わない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — ミント×コーラルの淡色やさしい肌着 LP（Soft Pastel Mint and Coral Innerwear LP）

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

Overview

業種: ファッション・アクセサリー／ 雰囲気: やさしい・柔らかい、上品・高級、清潔・爽やか、ナチュラル
キーワード: 淡色・明朝見出し・線画の花・金箔の飛沫・水彩にじみ・アーチ枠
地の質感: 大理石風や水彩のにじみ、シーツの皺の白い写真地に、金箔の粒と線画の百合を重ねる
形: 上部アーチ型パネル、斜めの区切り、楕円の吹き出し、円形の重なり
温度感: ややあたたかい中間色。ミントで清涼感を足す

Colors

Token	HEX	役割	面積の目安	値の出どころ
`primary`	`#D1EAEB`	ブランドのミント水色（面・ラベル）	8%	画素の実測
`background`	`#FFFFFF`	基本の白地	34%	画素の実測
`background-alt`	`#F5EEEB`	グレージュの大理石風地	10%	画素の実測
`accent-1`	`#EB7453`	コーラルの強調文字	2%	画素の実測
`secondary`	`#FEBBAB`	コーラル吹き出しの面	2%	画素の実測
`accent-2`	`#E2D5E7`	ラベンダーのマーカー・三角装飾	1%	画素の実測
`marker`	`#DCECEC`	ミントの文字下マーカー	1%	画素の実測
`text`	`#4D4641`	見出しの濃いグレー	3%	画素の実測
`text-body`	`#444444`	本文のグレー	2%	画素の実測
`text-muted`	`#9E9189`	注釈の薄いグレー	0%	画素の主要色に補正
`line`	`#9E9189`	細い罫線・点線	0%	画素の主要色に補正
`tint-1`	`#E0D7D0`	表見出しセルのグレージュ	1%	画素の実測
`accent-3`	`#BB0F12`	ロゴ・家紋の朱赤	0%	画素の実測
`dark-section`	`#9E9189`	写真上のスモーキーグレー帯	3%	画素の主要色に補正

地は白とグレージュ写真地を交互にし、ミント水色の面で区切りを作る
コーラルは訴求の一文と吹き出しだけに使う
ラベンダーはマーカーと角の三角装飾に限定する
文字は黒ではなく濃いグレーで柔らかく
朱赤はロゴ専用で他に使わない
金箔の粒は各セクションの端に少量散らす

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	FVの大コピー・満足度数字	明朝	Shippori Mincho	500	44px	1.3	0.04em
`headline-lg`	セクション大見出し	明朝	Noto Serif JP	500	30px	1.5	0.08em
`headline-md`	コーラルの訴求見出し	ゴシック	Zen Kaku Gothic New	700	26px	1.5	0.04em
`headline-sm`	小見出し・カード見出し	明朝	Noto Serif JP	500	20px	1.5	0.05em
`body-md`	本文	ゴシック	Noto Sans JP	400	15px	1.8	0.04em
`accent`	吹き出し・手書き風の声	手書き・筆	Klee One	600	15px	1.6	0.05em
`note`	注釈	ゴシック	Noto Sans JP	400	11px	1.6	0.02em
`label-button`	英字の飾り見出し	欧文サンセリフ	Josefin Sans	300	40px	1.1	0.05em

大見出しは明朝で字間を広めに
強調語はゴシック太字にマーカーを敷く
見出しの前に斜線で挟んだ短い前置きを置く
英字見出しはアーチ状に曲げて細字で配置
写真上の文字は白帯や白文字＋影で可読性を確保
縦書きの白帯コピーを写真に重ねる
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム、比較・メーカー紹介のみ 2 カラム
本文ブロックの幅: 画面幅の約 88%
余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
写真は全幅か左右どちらかに寄せて余白を作る
画像＋テキストの横並びリストは画像4割
セクション間に大きめの白余白
装飾は端からはみ出させてよい

Elevation & Depth

影はほぼ使わずフラット
写真カードに薄いぼかし影
吹き出しは影なし細線

Shapes

角丸: 小 4px ／中 16px ／大 40px。ボタンはピル型。
写真の切り抜き: 角丸長方形、片側だけ大きく角丸、円形切り抜き
セクション境界: 斜めのV字・ゆるいカーブ・上部アーチ
特徴・声・カラーはアーチ型パネルに入れる
吹き出しは楕円で尻尾付き
円を3つ重ねた価値表現を使う
角にラベンダーの直角三角形を置く

Components

アーチ型パネル（arch-panel）: 上部が半円の縦長枠。英字見出しを弧状に置く
楕円吹き出し（speech-bubble）: コーラル面か白地細線の楕円に手書き風の声
悩みチェックリスト（check-list）: 角丸チェックボックスと太字ラベンダーマーカー
斜線囲みリード（slash-lead）: ＼前置き／の小見出し
マーカー強調（marker-text）: 語の下半分にミントやラベンダーの帯
円グラフ満足度（ring-stat）: ミント〜コーラルのグラデ円環に明朝の大数字
ミントラベル（label-pill）: 比較写真下やスペック項目の角丸ラベル
サイズ表（spec-table）: グレージュ見出しセルと細線の表

Do's and Don'ts

Do - 余白を広く取り、淡色で軽く見せる - 明朝見出しとゴシック本文を組み合わせる - 線画の花と金箔の粒を端に散らす - 吹き出しで使用者の声を手書き風に添える - 強調語にはマーカーを使う

Don't - 原色や濃い背景を広く使わない - コーラルを本文全体に使わない - 太い影や立体ボタンを使わない - 装飾を本文の上に重ねて読みにくくしない - 黒100%の文字を使わない

Page Structure

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

ファーストビュー（着用シーンと主効果を伝える）: 全幅の着用写真に縦書き帯コピーと円形バッジ、下に明朝の大コピーと英字ロゴ
満足度（数字で信頼を示す）: グラデ円環に大数字、周囲に楕円吹き出しの声
悩みの提起（共感を得る）: 大理石風地に明朝見出し、チェックリストと人物イラスト、V字区切り
解決提示（商品を紹介）: 角丸写真にコーラル吹き出し、マーカー付き見出し
開発思想（ブランドの考え方）: ミント円形地に3つの重なる円で価値を表現
こだわり3点（素材・製法の説明）: 左写真右テキストの3段、点線区切り
支持の声（評判を見せる）: シーツ写真地に商品写真と4つの吹き出し
最大の特徴（機能を訴求）: 空写真のアーチパネル、矢印付き商品写真、括弧囲み説明
比較（違いを実証）: 2枚並べた比較写真にミントラベル
詳細・着用提案（デザイン面の利点）: 片側角丸写真と手書き吹き出し見出し、縦書きコピー
嬉しいポイント（付加価値）: 大きな円形地に写真＋縦線見出しのリスト
お客様の声（体験談）: アーチパネル内のスライダーカード、年代バッジ
カラー・ブランド（色と世界観を伝える）: アーチ枠のカラー紹介と生活シーン写真
商品仕様（サイズと素材の確認）: 商品切り抜き、ミントラベル項目、サイズ表、洗濯表示

Imagery

自然光の室内で淡色の服を着た女性のくつろぎ写真
白背景の商品フラットレイや切り抜き
百合の細い線画を背景の端に薄く配置
金箔の粒や水彩のにじみを装飾に散らす
シンプルなフラットイラストで人物を描く
空や雲の写真で爽快感を出す
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PC は中央に SP 幅カラムを置き、左右に淡色地を敷く
アーチパネルは最大幅を約 600px に制限
比較や3点こだわりは PC で横並び3カラムも可
装飾は 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: Soft Pastel Mint and Coral Innerwear LP
description: 白とグレージュを地に、淡いミント水色とコーラルを差した女性向け肌着の縦長LP。明朝の大見出し、線画の百合と金箔の飛沫、水彩のにじみで、繊細で上品なのに親しみもある雰囲気を作る。
colors:
  primary: '#D1EAEB'
  background: '#FFFFFF'
  background-alt: '#F5EEEB'
  accent-1: '#EB7453'
  secondary: '#FEBBAB'
  accent-2: '#E2D5E7'
  marker: '#DCECEC'
  text: '#4D4641'
  text-body: '#444444'
  text-muted: '#9E9189'
  line: '#9E9189'
  tint-1: '#E0D7D0'
  accent-3: '#BB0F12'
  dark-section: '#9E9189'
typography:
  display:
    fontFamily: Shippori Mincho
    fontSize: 44px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0.04em
  headline-lg:
    fontFamily: Noto Serif JP
    fontSize: 30px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0.08em
  headline-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 26px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.04em
  headline-sm:
    fontFamily: Noto Serif JP
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0.05em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.8
    letterSpacing: 0.04em
  accent:
    fontFamily: Klee One
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1.6
    letterSpacing: 0.05em
  note:
    fontFamily: Noto Sans JP
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.02em
  label-button:
    fontFamily: Josefin Sans
    fontSize: 40px
    fontWeight: 300
    lineHeight: 1.1
    letterSpacing: 0.05em
rounded:
  sm: 4px
  md: 16px
  lg: 40px
  full: 999px
spacing:
  unit: 8px
  card: 20px
  section: 72px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  arch-panel:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.text}'
    typography: '{typography.label-button}'
    rounded: '{rounded.lg}'
    height: 900px
  speech-bubble:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.text}'
    typography: '{typography.accent}'
    rounded: '{rounded.full}'
    height: 80px
  check-list:
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
    rounded: '{rounded.sm}'
    height: 70px
  slash-lead:
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    height: 32px
  marker-text:
    backgroundColor: '{colors.marker}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 24px
  ring-stat:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.display}'
    rounded: '{rounded.full}'
    height: 320px
  label-pill:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
    rounded: '{rounded.full}'
    height: 30px
  spec-table:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 300px
---

# DESIGN.md — ミント×コーラルの淡色やさしい肌着 LP（Soft Pastel Mint and Coral Innerwear LP）

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

## Overview

- **業種**: ファッション・アクセサリー ／ **雰囲気**: やさしい・柔らかい、上品・高級、清潔・爽やか、ナチュラル
- **キーワード**: 淡色・明朝見出し・線画の花・金箔の飛沫・水彩にじみ・アーチ枠
- **地の質感**: 大理石風や水彩のにじみ、シーツの皺の白い写真地に、金箔の粒と線画の百合を重ねる
- **形**: 上部アーチ型パネル、斜めの区切り、楕円の吹き出し、円形の重なり
- **温度感**: ややあたたかい中間色。ミントで清涼感を足す

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#D1EAEB` | ブランドのミント水色（面・ラベル） | 8% | 画素の実測 |
| `background` | `#FFFFFF` | 基本の白地 | 34% | 画素の実測 |
| `background-alt` | `#F5EEEB` | グレージュの大理石風地 | 10% | 画素の実測 |
| `accent-1` | `#EB7453` | コーラルの強調文字 | 2% | 画素の実測 |
| `secondary` | `#FEBBAB` | コーラル吹き出しの面 | 2% | 画素の実測 |
| `accent-2` | `#E2D5E7` | ラベンダーのマーカー・三角装飾 | 1% | 画素の実測 |
| `marker` | `#DCECEC` | ミントの文字下マーカー | 1% | 画素の実測 |
| `text` | `#4D4641` | 見出しの濃いグレー | 3% | 画素の実測 |
| `text-body` | `#444444` | 本文のグレー | 2% | 画素の実測 |
| `text-muted` | `#9E9189` | 注釈の薄いグレー | 0% | 画素の主要色に補正 |
| `line` | `#9E9189` | 細い罫線・点線 | 0% | 画素の主要色に補正 |
| `tint-1` | `#E0D7D0` | 表見出しセルのグレージュ | 1% | 画素の実測 |
| `accent-3` | `#BB0F12` | ロゴ・家紋の朱赤 | 0% | 画素の実測 |
| `dark-section` | `#9E9189` | 写真上のスモーキーグレー帯 | 3% | 画素の主要色に補正 |

- 地は白とグレージュ写真地を交互にし、ミント水色の面で区切りを作る
- コーラルは訴求の一文と吹き出しだけに使う
- ラベンダーはマーカーと角の三角装飾に限定する
- 文字は黒ではなく濃いグレーで柔らかく
- 朱赤はロゴ専用で他に使わない
- 金箔の粒は各セクションの端に少量散らす

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FVの大コピー・満足度数字 | 明朝 | Shippori Mincho | 500 | 44px | 1.3 | 0.04em |
| `headline-lg` | セクション大見出し | 明朝 | Noto Serif JP | 500 | 30px | 1.5 | 0.08em |
| `headline-md` | コーラルの訴求見出し | ゴシック | Zen Kaku Gothic New | 700 | 26px | 1.5 | 0.04em |
| `headline-sm` | 小見出し・カード見出し | 明朝 | Noto Serif JP | 500 | 20px | 1.5 | 0.05em |
| `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 15px | 1.8 | 0.04em |
| `accent` | 吹き出し・手書き風の声 | 手書き・筆 | Klee One | 600 | 15px | 1.6 | 0.05em |
| `note` | 注釈 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.02em |
| `label-button` | 英字の飾り見出し | 欧文サンセリフ | Josefin Sans | 300 | 40px | 1.1 | 0.05em |

- 大見出しは明朝で字間を広めに
- 強調語はゴシック太字にマーカーを敷く
- 見出しの前に斜線で挟んだ短い前置きを置く
- 英字見出しはアーチ状に曲げて細字で配置
- 写真上の文字は白帯や白文字＋影で可読性を確保
- 縦書きの白帯コピーを写真に重ねる
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム、比較・メーカー紹介のみ 2 カラム
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
- 写真は全幅か左右どちらかに寄せて余白を作る
- 画像＋テキストの横並びリストは画像4割
- セクション間に大きめの白余白
- 装飾は端からはみ出させてよい

## Elevation & Depth

- 影はほぼ使わずフラット
- 写真カードに薄いぼかし影
- 吹き出しは影なし細線

## Shapes

- **角丸**: 小 4px ／ 中 16px ／ 大 40px。ボタンはピル型。
- **写真の切り抜き**: 角丸長方形、片側だけ大きく角丸、円形切り抜き
- **セクション境界**: 斜めのV字・ゆるいカーブ・上部アーチ
- 特徴・声・カラーはアーチ型パネルに入れる
- 吹き出しは楕円で尻尾付き
- 円を3つ重ねた価値表現を使う
- 角にラベンダーの直角三角形を置く

## Components

- **アーチ型パネル**（`arch-panel`）: 上部が半円の縦長枠。英字見出しを弧状に置く
- **楕円吹き出し**（`speech-bubble`）: コーラル面か白地細線の楕円に手書き風の声
- **悩みチェックリスト**（`check-list`）: 角丸チェックボックスと太字ラベンダーマーカー
- **斜線囲みリード**（`slash-lead`）: ＼ 前置き ／ の小見出し
- **マーカー強調**（`marker-text`）: 語の下半分にミントやラベンダーの帯
- **円グラフ満足度**（`ring-stat`）: ミント〜コーラルのグラデ円環に明朝の大数字
- **ミントラベル**（`label-pill`）: 比較写真下やスペック項目の角丸ラベル
- **サイズ表**（`spec-table`）: グレージュ見出しセルと細線の表

## Do's and Don'ts

**Do**
- 余白を広く取り、淡色で軽く見せる
- 明朝見出しとゴシック本文を組み合わせる
- 線画の花と金箔の粒を端に散らす
- 吹き出しで使用者の声を手書き風に添える
- 強調語にはマーカーを使う

**Don't**
- 原色や濃い背景を広く使わない
- コーラルを本文全体に使わない
- 太い影や立体ボタンを使わない
- 装飾を本文の上に重ねて読みにくくしない
- 黒100%の文字を使わない

## Page Structure

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

1. **ファーストビュー**（着用シーンと主効果を伝える）: 全幅の着用写真に縦書き帯コピーと円形バッジ、下に明朝の大コピーと英字ロゴ
2. **満足度**（数字で信頼を示す）: グラデ円環に大数字、周囲に楕円吹き出しの声
3. **悩みの提起**（共感を得る）: 大理石風地に明朝見出し、チェックリストと人物イラスト、V字区切り
4. **解決提示**（商品を紹介）: 角丸写真にコーラル吹き出し、マーカー付き見出し
5. **開発思想**（ブランドの考え方）: ミント円形地に3つの重なる円で価値を表現
6. **こだわり3点**（素材・製法の説明）: 左写真右テキストの3段、点線区切り
7. **支持の声**（評判を見せる）: シーツ写真地に商品写真と4つの吹き出し
8. **最大の特徴**（機能を訴求）: 空写真のアーチパネル、矢印付き商品写真、括弧囲み説明
9. **比較**（違いを実証）: 2枚並べた比較写真にミントラベル
10. **詳細・着用提案**（デザイン面の利点）: 片側角丸写真と手書き吹き出し見出し、縦書きコピー
11. **嬉しいポイント**（付加価値）: 大きな円形地に写真＋縦線見出しのリスト
12. **お客様の声**（体験談）: アーチパネル内のスライダーカード、年代バッジ
13. **カラー・ブランド**（色と世界観を伝える）: アーチ枠のカラー紹介と生活シーン写真
14. **商品仕様**（サイズと素材の確認）: 商品切り抜き、ミントラベル項目、サイズ表、洗濯表示

## Imagery

- 自然光の室内で淡色の服を着た女性のくつろぎ写真
- 白背景の商品フラットレイや切り抜き
- 百合の細い線画を背景の端に薄く配置
- 金箔の粒や水彩のにじみを装飾に散らす
- シンプルなフラットイラストで人物を描く
- 空や雲の写真で爽快感を出す
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC は中央に SP 幅カラムを置き、左右に淡色地を敷く
- アーチパネルは最大幅を約 600px に制限
- 比較や3点こだわりは PC で横並び3カラムも可
- 装飾は 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-13034cd8`（元 LP の URL から採番）
- **元 LP**: https://www.amepla.jp/c/beautyplus/7523/sp=1
- **解析に使った画像**: SP（スマホ版）
- **確度**: 色 中（11/14 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。

SOURCE

出典と注意

この 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