ピンク×パステル手描き食器柄のカラコン LP

Pastel Sweets Illustrated Color Contact LP

ピンク地に白線の手描きキッチン雑貨柄を敷きつめたカラコン LP。カラーごとに色の違うポスター型カードを縦に並べる。各カードはモデル写真・レンズ画像・食べ物イラストを一枚にまとめる。丸ゴシックの白フチ文字とミントの差し色で、かわいく元気な印象に仕上げる。

化粧品・スキンケアかわいいポップ・元気親しみ・手作り感情報量多め・訴求型SP

ダウンロード

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

COLORS

配色

ページ全体の地はピンクにする。白い線画柄を重ねて単調さをなくす
カラー別カードは、その商品のイメージ色で一面を塗る（ベリー、オレンジ、ピンク、ブルーグレー、ミント、クリームの 6 色）
見出しはティールまたは白の文字に、白か濃色のフチを付ける
ミントは、アイコンパネルや下部の帯など情報ブロックの地にだけ使う
黒は使わない。濃色は細い枠線と小さな注記に限る

TYPOGRAPHY

書体

displayロゴ風の大見出し丸ゴシック／ M PLUS Rounded 1c 800 ／ 56px ／行間 1.1

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

headline-lgカードのキャッチ（白フチ付き）装飾・ディスプレイ／ Dela Gothic One 400 ／ 26px ／行間 1.2

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

headline-mdカラー名丸ゴシック／ Zen Maru Gothic 900 ／ 20px ／行間 1.2

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

accent英字の装飾ロゴ欧文サンセリフ／ Montserrat 800 ／ 24px ／行間 1.1

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

headline-smNew などの筆記体あしらい欧文スクリプト／ Pacifico 400 ／ 28px ／行間 1.0

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

body-md本文・スペック丸ゴシック／ Zen Maru Gothic 700 ／ 11px ／行間 1.9

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

noteアイコン下の説明ゴシック／ Noto Sans JP 500 ／ 8px ／行間 1.7

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

見出しは太い丸ゴシックにして、白か濃色で 2〜3px のフチを付ける
本文は中央揃えの白文字にする。ピンク地で読めるよう、うっすら影を付ける
スペックは 2 行 3 列で、等間隔に並べた短い単語のみ
英字ロゴは和文ロゴの下に小さく添える

PAGE STRUCTURE

セクション構成

ファーストビューブランドとプロデューサーを印象づける淡い水色地にロゴを大きく置き、縦書きコピー、モデル写真、6 色のレンズの円を並べる
ラインナップ一覧全カラーとスペックを一覧で見せるピンク地の上にピル帯見出しを置き、スペックの箇条書きと 6 列グリッドを続ける
カラー別紹介各色の魅力を伝える色違いのポスターカードを 6 枚縦に並べる
集合ビジュアル世界観を楽しく見せる中央に人物を置き、周りに食べ物イラストを散らす
特長機能面の安心を伝えるミントのパネルに丸アイコンを 4 つ並べる
プロデューサーメッセージ共感と想いを伝えるロゴの下に中央揃えの白文字で本文を置き、左下に人物写真を添える
フッター帯ブランドを締めくくるミントのロゴ帯の下にスペックアイコンを並べる

COMPONENTS

部品

カラー別ポスターカード color-poster-card単色地に食べ物イラスト、レンズの円画像、キャッチ、スペック、モデル写真、パッケージを収めた横長カード
ラインナップ帯見出し lineup-pillピンクのピル型帯の上に白文字を置く
レンズ一覧グリッド lens-grid6 列に、色名、レンズの円、着用した目元、パッケージを縦に並べる
特長アイコンパネル feature-iconsミントの角丸パネルに白線の丸アイコンを 4 つ並べ、下に短い説明を添える
スペック表記 spec-row短い単語を 3 列 2 行に並べた白文字
ロゴ帯 logo-bandページ下部に置く、ミントの全幅帯とロゴ

守ること

地には必ず白い線画のキッチン雑貨柄を敷く
カラーごとに地色を変え、食べ物イラストと組み合わせる
見出しは丸文字に白フチを付ける
レンズは円形で大きく見せる

DON'T

避けること

黒地や無彩色の地は使わない
細い明朝体は使わない
写真に角丸の影を付けない
原色のビビッドな赤や青は使わない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — ピンク×パステル手描き食器柄のカラコン LP（Pastel Sweets Illustrated Color Contact LP）

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

Overview

業種: 化粧品・スキンケア／ 雰囲気: かわいい、ポップ・元気、親しみ・手作り感、情報量多め・訴求型
キーワード: パステル・手描き線画・スイーツ・ごはん・ポスター型カード・白フチ丸文字・カラー展開
地の質感: 紙のようなざらつきのある単色地に、白い細線の手描き食器・調理器具イラストを敷きつめる
形: 角丸の細枠カード、丸いレンズ画像、丸アイコン
温度感: 暖かく甘い。ピンクとクリームが主役で、ミントとブルーグレーを差し色にする

Colors

Token	HEX	役割	面積の目安	値の出どころ
`primary`	`#F4C2CD`	ページ地のピンク	30%	画素の実測
`secondary`	`#B5E1DD`	ミントの帯・アイコンパネル	7%	画素の実測
`background`	`#ADC3CF`	FV の淡い水色グレー地	8%	画素の主要色に補正
`accent-1`	`#B34B5A`	カードの濃いベリー色	6%	画素の主要色に補正
`accent-2`	`#EDAC73`	カードの明るいオレンジ	6%	画素の実測
`accent-3`	`#92AFC1`	カードのブルーグレー	5%	画素の主要色に補正
`tint-1`	`#F5D284`	カードのクリームイエロー	4%	画素の実測
`cta`	`#E87A9A`	ラインナップ見出しのピンク帯	1%	推定
`on-cta`	`#FFFFFF`	帯の上の白文字	1%	推定
`text`	`#4FA7B5`	見出しのティール文字	2%	推定
`text-body`	`#FFFFFF`	本文の白抜き文字	2%	推定
`marker`	`#F0B030`	カラー名の黄色見出し	1%	推定
`line`	`#4A4A4A`	カード内の細枠	1%	推定
`background-accessible`	`#547A8F`	AA を満たす補正値（計算）		計算
`cta-accessible`	`#DB3062`	AA を満たす補正値（計算）		計算

ページ全体の地はピンクにする。白い線画柄を重ねて単調さをなくす
カラー別カードは、その商品のイメージ色で一面を塗る（ベリー、オレンジ、ピンク、ブルーグレー、ミント、クリームの 6 色）
見出しはティールまたは白の文字に、白か濃色のフチを付ける
ミントは、アイコンパネルや下部の帯など情報ブロックの地にだけ使う
黒は使わない。濃色は細い枠線と小さな注記に限る
page は文字 #FFFFFF × 背景 #ADC3CF のコントラスト比が 1.83:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら background-accessible（#547A8F、4.61:1）を使う。
lineup-pill は文字 #FFFFFF × 背景 #E87A9A のコントラスト比が 2.73:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#DB3062、4.55:1）を使う。

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	ロゴ風の大見出し	丸ゴシック	M PLUS Rounded 1c	800	56px	1.1	0.02em
`headline-lg`	カードのキャッチ（白フチ付き）	装飾・ディスプレイ	Dela Gothic One	400	26px	1.2	0.03em
`headline-md`	カラー名	丸ゴシック	Zen Maru Gothic	900	20px	1.2	0.05em
`accent`	英字の装飾ロゴ	欧文サンセリフ	Montserrat	800	24px	1.1	0.08em
`headline-sm`	New などの筆記体あしらい	欧文スクリプト	Pacifico	400	28px	1.0	0.0em
`body-md`	本文・スペック	丸ゴシック	Zen Maru Gothic	700	11px	1.9	0.05em
`note`	アイコン下の説明	ゴシック	Noto Sans JP	500	8px	1.7	0.03em

見出しは太い丸ゴシックにして、白か濃色で 2〜3px のフチを付ける
本文は中央揃えの白文字にする。ピンク地で読めるよう、うっすら影を付ける
スペックは 2 行 3 列で、等間隔に並べた短い単語のみ
英字ロゴは和文ロゴの下に小さく添える
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム。ラインナップ部分は 6 列のグリッド
本文ブロックの幅: 画面幅の約 94%
余白: セクション間 24px、基本単位 8px、カード内 14px（375px 幅換算）
カラー別カードは横幅いっぱいの横長ポスターにする。モデルを右、テキストを左に置く
カード同士は 16〜20px 空けて縦に並べる
レンズ画像は円形にして、カードの上部中央に置く
アイコンは 4 つを横一列に並べる

Elevation & Depth

影はほぼ使わない。平面的に構成する
カードは細線の内枠で区切る
白い角丸パネルには薄い白フチを付ける

Shapes

角丸: 小 4px ／中 10px ／大 16px。ボタンはピル型。
写真の切り抜き: 人物は切り抜きか背景を含めた角版。レンズ・アイコンは正円
セクション境界: 直線で区切り、地色の切り替えだけで見せる
カードの角は小さめの角丸にする
丸アイコンは白い線の円にする
帯見出しはピル型にする

Components

カラー別ポスターカード（color-poster-card）: 単色地に食べ物イラスト、レンズの円画像、キャッチ、スペック、モデル写真、パッケージを収めた横長カード
ラインナップ帯見出し（lineup-pill）: ピンクのピル型帯の上に白文字を置く
レンズ一覧グリッド（lens-grid）: 6 列に、色名、レンズの円、着用した目元、パッケージを縦に並べる
特長アイコンパネル（feature-icons）: ミントの角丸パネルに白線の丸アイコンを 4 つ並べ、下に短い説明を添える
スペック表記（spec-row）: 短い単語を 3 列 2 行に並べた白文字
ロゴ帯（logo-band）: ページ下部に置く、ミントの全幅帯とロゴ

Do's and Don'ts

Do - 地には必ず白い線画のキッチン雑貨柄を敷く - カラーごとに地色を変え、食べ物イラストと組み合わせる - 見出しは丸文字に白フチを付ける - レンズは円形で大きく見せる

Don't - 黒地や無彩色の地は使わない - 細い明朝体は使わない - 写真に角丸の影を付けない - 原色のビビッドな赤や青は使わない

Page Structure

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

ファーストビュー（ブランドとプロデューサーを印象づける）: 淡い水色地にロゴを大きく置き、縦書きコピー、モデル写真、6 色のレンズの円を並べる
ラインナップ一覧（全カラーとスペックを一覧で見せる）: ピンク地の上にピル帯見出しを置き、スペックの箇条書きと 6 列グリッドを続ける
カラー別紹介（各色の魅力を伝える）: 色違いのポスターカードを 6 枚縦に並べる
集合ビジュアル（世界観を楽しく見せる）: 中央に人物を置き、周りに食べ物イラストを散らす
特長（機能面の安心を伝える）: ミントのパネルに丸アイコンを 4 つ並べる
プロデューサーメッセージ（共感と想いを伝える）: ロゴの下に中央揃えの白文字で本文を置き、左下に人物写真を添える
フッター帯（ブランドを締めくくる）: ミントのロゴ帯の下にスペックアイコンを並べる

Imagery

モデルは明るいハイキーで撮り、頬に手を添えるなど顔まわりのポーズにする
食べ物やスイーツは、色付きの手描き風イラストにする
地の装飾は、白い細線で描いたポット・泡立て器・食器
レンズは正面から撮った円形の画像に、着用した目元のアップを添える
パッケージは各カラーの色で横長に見せる
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PC では中央 750px 前後の幅に SP と同じ構成を置く
左右の余白はピンク地の線画柄で埋める
カードは横長のまま拡大する
レンズグリッドは 6 列を保つ

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: Pastel Sweets Illustrated Color Contact LP
description: ピンク地に白線の手描きキッチン雑貨柄を敷きつめたカラコン LP。カラーごとに色の違うポスター型カードを縦に並べる。各カードはモデル写真・レンズ画像・食べ物イラストを一枚にまとめる。丸ゴシックの白フチ文字とミントの差し色で、かわいく元気な印象に仕上げる。
colors:
  primary: '#F4C2CD'
  secondary: '#B5E1DD'
  background: '#ADC3CF'
  accent-1: '#B34B5A'
  accent-2: '#EDAC73'
  accent-3: '#92AFC1'
  tint-1: '#F5D284'
  cta: '#E87A9A'
  on-cta: '#FFFFFF'
  text: '#4FA7B5'
  text-body: '#FFFFFF'
  marker: '#F0B030'
  line: '#4A4A4A'
  background-accessible: '#547A8F'
  cta-accessible: '#DB3062'
typography:
  display:
    fontFamily: M PLUS Rounded 1c
    fontSize: 56px
    fontWeight: 800
    lineHeight: 1.1
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: Dela Gothic One
    fontSize: 26px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.03em
  headline-md:
    fontFamily: Zen Maru Gothic
    fontSize: 20px
    fontWeight: 900
    lineHeight: 1.2
    letterSpacing: 0.05em
  accent:
    fontFamily: Montserrat
    fontSize: 24px
    fontWeight: 800
    lineHeight: 1.1
    letterSpacing: 0.08em
  headline-sm:
    fontFamily: Pacifico
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.0
  body-md:
    fontFamily: Zen Maru Gothic
    fontSize: 11px
    fontWeight: 700
    lineHeight: 1.9
    letterSpacing: 0.05em
  note:
    fontFamily: Noto Sans JP
    fontSize: 8px
    fontWeight: 500
    lineHeight: 1.7
    letterSpacing: 0.03em
rounded:
  sm: 4px
  md: 10px
  lg: 16px
  full: 999px
spacing:
  unit: 8px
  card: 14px
  section: 24px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  color-poster-card:
    backgroundColor: '{colors.accent-1}'
    textColor: '{colors.on-cta}'
    typography: '{typography.headline-lg}'
    rounded: '{rounded.sm}'
    height: 330px
  lineup-pill:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.full}'
    height: 22px
  lens-grid:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.marker}'
    typography: '{typography.note}'
    height: 220px
  feature-icons:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.on-cta}'
    typography: '{typography.note}'
    rounded: '{rounded.lg}'
    height: 150px
  spec-row:
    textColor: '{colors.on-cta}'
    typography: '{typography.body-md}'
    height: 36px
  logo-band:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.on-cta}'
    typography: '{typography.accent}'
    height: 44px
---

# DESIGN.md — ピンク×パステル手描き食器柄のカラコン LP（Pastel Sweets Illustrated Color Contact LP）

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

## Overview

- **業種**: 化粧品・スキンケア ／ **雰囲気**: かわいい、ポップ・元気、親しみ・手作り感、情報量多め・訴求型
- **キーワード**: パステル・手描き線画・スイーツ・ごはん・ポスター型カード・白フチ丸文字・カラー展開
- **地の質感**: 紙のようなざらつきのある単色地に、白い細線の手描き食器・調理器具イラストを敷きつめる
- **形**: 角丸の細枠カード、丸いレンズ画像、丸アイコン
- **温度感**: 暖かく甘い。ピンクとクリームが主役で、ミントとブルーグレーを差し色にする

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#F4C2CD` | ページ地のピンク | 30% | 画素の実測 |
| `secondary` | `#B5E1DD` | ミントの帯・アイコンパネル | 7% | 画素の実測 |
| `background` | `#ADC3CF` | FV の淡い水色グレー地 | 8% | 画素の主要色に補正 |
| `accent-1` | `#B34B5A` | カードの濃いベリー色 | 6% | 画素の主要色に補正 |
| `accent-2` | `#EDAC73` | カードの明るいオレンジ | 6% | 画素の実測 |
| `accent-3` | `#92AFC1` | カードのブルーグレー | 5% | 画素の主要色に補正 |
| `tint-1` | `#F5D284` | カードのクリームイエロー | 4% | 画素の実測 |
| `cta` | `#E87A9A` | ラインナップ見出しのピンク帯 | 1% | 推定 |
| `on-cta` | `#FFFFFF` | 帯の上の白文字 | 1% | 推定 |
| `text` | `#4FA7B5` | 見出しのティール文字 | 2% | 推定 |
| `text-body` | `#FFFFFF` | 本文の白抜き文字 | 2% | 推定 |
| `marker` | `#F0B030` | カラー名の黄色見出し | 1% | 推定 |
| `line` | `#4A4A4A` | カード内の細枠 | 1% | 推定 |
| `background-accessible` | `#547A8F` | AA を満たす補正値（計算） |  | 計算 |
| `cta-accessible` | `#DB3062` | AA を満たす補正値（計算） |  | 計算 |

- ページ全体の地はピンクにする。白い線画柄を重ねて単調さをなくす
- カラー別カードは、その商品のイメージ色で一面を塗る（ベリー、オレンジ、ピンク、ブルーグレー、ミント、クリームの 6 色）
- 見出しはティールまたは白の文字に、白か濃色のフチを付ける
- ミントは、アイコンパネルや下部の帯など情報ブロックの地にだけ使う
- 黒は使わない。濃色は細い枠線と小さな注記に限る
- `page` は文字 `#FFFFFF` × 背景 `#ADC3CF` のコントラスト比が 1.83:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `background-accessible`（`#547A8F`、4.61:1）を使う。
- `lineup-pill` は文字 `#FFFFFF` × 背景 `#E87A9A` のコントラスト比が 2.73:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#DB3062`、4.55:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | ロゴ風の大見出し | 丸ゴシック | M PLUS Rounded 1c | 800 | 56px | 1.1 | 0.02em |
| `headline-lg` | カードのキャッチ（白フチ付き） | 装飾・ディスプレイ | Dela Gothic One | 400 | 26px | 1.2 | 0.03em |
| `headline-md` | カラー名 | 丸ゴシック | Zen Maru Gothic | 900 | 20px | 1.2 | 0.05em |
| `accent` | 英字の装飾ロゴ | 欧文サンセリフ | Montserrat | 800 | 24px | 1.1 | 0.08em |
| `headline-sm` | New などの筆記体あしらい | 欧文スクリプト | Pacifico | 400 | 28px | 1.0 | 0.0em |
| `body-md` | 本文・スペック | 丸ゴシック | Zen Maru Gothic | 700 | 11px | 1.9 | 0.05em |
| `note` | アイコン下の説明 | ゴシック | Noto Sans JP | 500 | 8px | 1.7 | 0.03em |

- 見出しは太い丸ゴシックにして、白か濃色で 2〜3px のフチを付ける
- 本文は中央揃えの白文字にする。ピンク地で読めるよう、うっすら影を付ける
- スペックは 2 行 3 列で、等間隔に並べた短い単語のみ
- 英字ロゴは和文ロゴの下に小さく添える
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。ラインナップ部分は 6 列のグリッド
- **本文ブロックの幅**: 画面幅の約 94%
- **余白**: セクション間 24px、基本単位 8px、カード内 14px（375px 幅換算）
- カラー別カードは横幅いっぱいの横長ポスターにする。モデルを右、テキストを左に置く
- カード同士は 16〜20px 空けて縦に並べる
- レンズ画像は円形にして、カードの上部中央に置く
- アイコンは 4 つを横一列に並べる

## Elevation & Depth

- 影はほぼ使わない。平面的に構成する
- カードは細線の内枠で区切る
- 白い角丸パネルには薄い白フチを付ける

## Shapes

- **角丸**: 小 4px ／ 中 10px ／ 大 16px。ボタンはピル型。
- **写真の切り抜き**: 人物は切り抜きか背景を含めた角版。レンズ・アイコンは正円
- **セクション境界**: 直線で区切り、地色の切り替えだけで見せる
- カードの角は小さめの角丸にする
- 丸アイコンは白い線の円にする
- 帯見出しはピル型にする

## Components

- **カラー別ポスターカード**（`color-poster-card`）: 単色地に食べ物イラスト、レンズの円画像、キャッチ、スペック、モデル写真、パッケージを収めた横長カード
- **ラインナップ帯見出し**（`lineup-pill`）: ピンクのピル型帯の上に白文字を置く
- **レンズ一覧グリッド**（`lens-grid`）: 6 列に、色名、レンズの円、着用した目元、パッケージを縦に並べる
- **特長アイコンパネル**（`feature-icons`）: ミントの角丸パネルに白線の丸アイコンを 4 つ並べ、下に短い説明を添える
- **スペック表記**（`spec-row`）: 短い単語を 3 列 2 行に並べた白文字
- **ロゴ帯**（`logo-band`）: ページ下部に置く、ミントの全幅帯とロゴ

## Do's and Don'ts

**Do**
- 地には必ず白い線画のキッチン雑貨柄を敷く
- カラーごとに地色を変え、食べ物イラストと組み合わせる
- 見出しは丸文字に白フチを付ける
- レンズは円形で大きく見せる

**Don't**
- 黒地や無彩色の地は使わない
- 細い明朝体は使わない
- 写真に角丸の影を付けない
- 原色のビビッドな赤や青は使わない

## Page Structure

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

1. **ファーストビュー**（ブランドとプロデューサーを印象づける）: 淡い水色地にロゴを大きく置き、縦書きコピー、モデル写真、6 色のレンズの円を並べる
2. **ラインナップ一覧**（全カラーとスペックを一覧で見せる）: ピンク地の上にピル帯見出しを置き、スペックの箇条書きと 6 列グリッドを続ける
3. **カラー別紹介**（各色の魅力を伝える）: 色違いのポスターカードを 6 枚縦に並べる
4. **集合ビジュアル**（世界観を楽しく見せる）: 中央に人物を置き、周りに食べ物イラストを散らす
5. **特長**（機能面の安心を伝える）: ミントのパネルに丸アイコンを 4 つ並べる
6. **プロデューサーメッセージ**（共感と想いを伝える）: ロゴの下に中央揃えの白文字で本文を置き、左下に人物写真を添える
7. **フッター帯**（ブランドを締めくくる）: ミントのロゴ帯の下にスペックアイコンを並べる

## Imagery

- モデルは明るいハイキーで撮り、頬に手を添えるなど顔まわりのポーズにする
- 食べ物やスイーツは、色付きの手描き風イラストにする
- 地の装飾は、白い細線で描いたポット・泡立て器・食器
- レンズは正面から撮った円形の画像に、着用した目元のアップを添える
- パッケージは各カラーの色で横長に見せる
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC では中央 750px 前後の幅に SP と同じ構成を置く
- 左右の余白はピンク地の線画柄で埋める
- カードは横長のまま拡大する
- レンズグリッドは 6 列を保つ

## 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-3754c966`（元 LP の URL から採番）
- **元 LP**: https://www.queen-eyes.com/c/treatee/sp=1
- **解析に使った画像**: SP（スマホ版）
- **確度**: 色 高（4/13 色を画素から実測）、書体 中、余白 中
- **生成**: 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

化粧品・スキンケア生成り×モカと葉・真珠の上品カラコンLPPearl Ivory Botanical Beauty Lens LP 化粧品・スキンケア朱赤×肌色ベージュの化粧下地訴求 LPCoral Red Beauty Primer Appeal LP 化粧品・スキンケア赤い有機形と白地のアスリート起用スキンケアLPRed Blob Athlete Muse Skincare LP 化粧品・スキンケアパステル市松×Y2Kステッカーのカラコン LPPastel Y2K Checker Color Contact LP 化粧品・スキンケア紫×深緑と淡いグラデの植物系スキンケアLPBotanical Purple Cleansing Skincare LP 化粧品・スキンケアくすみモーヴ×キャンディ質感のリップ LPDreamy Mauve Candy Cosmetics LP