--- 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/）からご連絡ください。