--- version: alpha name: Pastel Pink Polka Dot Character Apparel LP description: ピンク地に白い水玉を全面に敷き、白枠の見出しプレートと水色帯つきの商品カードを並べたキャラクターコラボのアパレル告知 LP。ゆるい手描きキャラを余白に添えて、かわいく軽い印象にしている。 colors: primary: '#F8C9CF' background: '#FEFEFE' secondary: '#BCDDE2' accent-1: '#F4C1C9' cta: '#F88A97' on-cta: '#2A2A2A' line: '#1A1A1A' tint-1: '#CCC3B4' accent-2: '#E396A2' text: '#222222' on-primary: '#FFFBF8' on-primary-accessible: '#923F00' typography: display: fontFamily: Yomogi fontSize: 44px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.1em headline-lg: fontFamily: Josefin Sans fontSize: 26px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.15em headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em 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.6 label-button: fontFamily: Montserrat fontSize: 18px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 0px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 16px section: 72px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' section-plate: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-primary}' typography: '{typography.headline-lg}' height: 56px product-card: backgroundColor: '{colors.secondary}' textColor: '{colors.on-primary}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 230px info-box: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 600px info-subhead: textColor: '{colors.accent-2}' typography: '{typography.headline-sm}' height: 28px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 56px hero-logo-frame: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.display}' height: 300px mascot-filler: height: 120px --- # DESIGN.md — ピンク水玉×水色のキャラコラボ服 LP（Pastel Pink Polka Dot Character Apparel LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ファッション・アクセサリー ／ **雰囲気**: かわいい、ポップ・元気、やさしい・柔らかい - **キーワード**: ピンク水玉・パステル・白枠プレート・商品カードグリッド・手描きキャラ - **地の質感**: フラットな単色に白い水玉柄を繰り返す。影もグラデーションもない - **形**: 角丸の大きい商品カード、白い二重枠の矩形見出し、黒フチのピル型ボタン - **温度感**: 暖かく甘い。差し色の水色で甘さを抑えている ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#F8C9CF` | 全面の地のピンク | 50% | 画素の実測 | | `background` | `#FEFEFE` | 水玉と情報ボックスの白 | 14% | 画素の実測 | | `secondary` | `#BCDDE2` | 商品カード下部の水色帯 | 6% | 画素の実測 | | `accent-1` | `#F4C1C9` | 見出しプレートの濃いめピンク | 2% | 画素の実測 | | `cta` | `#F88A97` | ボタン・情報ボックス見出し帯 | 2% | 画素の実測 | | `on-cta` | `#2A2A2A` | ボタン上の文字 | 0% | 推定 | | `line` | `#1A1A1A` | ボタンの黒フチ・キャラの線 | 0% | 推定 | | `tint-1` | `#CCC3B4` | 商品写真のベージュ床 | 10% | 画素の実測 | | `accent-2` | `#E396A2` | 小見出しのピンク文字・下線 | 0% | 画素の実測 | | `text` | `#222222` | 本文・店舗リスト | 1% | 推定 | | `on-primary` | `#FFFBF8` | カード帯・プレート上の白文字 | 0% | 画素の実測 | | `on-primary-accessible` | `#923F00` | AA を満たす補正値（計算） | | 計算 | - 地は全ページでピンク＋白水玉に統一し、セクションごとに地色を変えない - 商品名と価格は水色帯に白文字で置く - 見出しプレートは濃いめピンクの面に白文字、外側を白の細枠で囲む - 情報エリアだけは白い面に黒文字で読みやすくする - CTA は濃いピンクに黒フチ・黒文字。ほかの要素に黒フチは使わない - `section-plate` は文字 `#FFFBF8` × 背景 `#F4C1C9` のコントラスト比が 1.53:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `on-primary-accessible`（`#923F00`、4.54:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ロゴ風の手描きタイトル | 手書き・筆 | Yomogi | 700 | 44px | 1.2 | 0.1em | | `headline-lg` | セクション見出しプレートの英字 | 欧文サンセリフ | Josefin Sans | 400 | 26px | 1.2 | 0.15em | | `headline-md` | 情報ボックスの帯見出し | ゴシック | Noto Sans JP | 700 | 18px | 1.4 | 0.05em | | `headline-sm` | 日時・店舗などの小見出し | ゴシック | Noto Sans JP | 700 | 16px | 1.4 | 0.02em | | `body-md` | 商品名・本文・店舗リスト | ゴシック | Noto Sans JP | 400 | 13px | 1.7 | 0.02em | | `note` | 価格の税込表記・注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `label-button` | CTA の英字ラベル | 欧文サンセリフ | Montserrat | 600 | 18px | 1.2 | 0.05em | - セクション見出しは英字 1 語だけにし、字間を広く取る - 日本語の見出しはゴシックの太字に限る - 価格は数字を本文サイズ、税込表記を小さく添える - 手描き書体はタイトルロゴだけに使う - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は商品 2 カラムのグリッド、情報は 1 カラム - **本文ブロックの幅**: 画面幅の約 82% - **余白**: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算） - 商品カードは同じ大きさで 2 列に並べ、奇数個のときは端数を左右どちらかに寄せる - 空いたマスには手描きキャラを置いて余白を埋める - 見出しプレートは中央揃えで幅 60% 程度 - 情報ボックスは白地の箱にまとめ、上に帯見出しを付ける ## Elevation & Depth - 影は使わない。全体をフラットに組む - 奥行きは白枠と水色帯の色差だけで出す ## Shapes - **角丸**: 小 0px ／ 中 12px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 正方形に近い角丸カードの上部に写真を置き、下部を水色帯にする - **セクション境界**: 区切り線は入れない。水玉の地と余白で区切る - 見出しプレートは角丸なしの矩形＋白細枠 - 商品カードは大きめの角丸 - CTA は黒フチのピル型 ## Components - **見出しプレート**（`section-plate`）: 濃いめピンクの矩形に白い英字、外側を白の細枠で囲む - **商品カード**（`product-card`）: 上 75% が平置き写真、下が水色帯で商品名と税込価格を中央揃え - **情報ボックス**（`info-box`）: 白地の箱。上部に濃いピンクの帯見出しを付ける - **ピンク下線の小見出し**（`info-subhead`）: ピンク文字の下に太いピンクの下線を引く - **店舗一覧ボタン**（`button-primary`）: 濃いピンクのピル型に黒フチ。英字ラベルと小さな日本語の補足を 2 段で入れる - **タイトルロゴ枠**（`hero-logo-frame`）: 手描きロゴ、キャラの集合イラスト、英字帯を白枠で縦に 3 段重ねる - **余白キャラ**（`mascot-filler`）: グリッドの空きに手描きキャラと擬音を添える ## Do's and Don'ts **Do** - 地はピンク＋白水玉を最後まで続ける - 商品写真はベージュの床に平置きし、色違いを並べて撮る - 価格には必ず税込表記を小さく添える - 見出しは英字 1 語の白枠プレートで統一する - グリッドの空きはキャラのイラストで埋める **Don't** - 濃い色・ダークな地を使わない - ドロップシャドウやグラデーションを入れない - 見出しに明朝体や太すぎる装飾書体を使わない - 水色をピンクより目立たせない - 商品カードの角丸サイズを揃えずに並べない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（コラボ企画であることを伝える）: 手描きロゴ、キャラ集合絵、英字帯を白枠の 3 段プレートで中央に積む 2. **商品ラインナップ**（大人向け商品と価格を見せる）: 見出しプレートの下に角丸の商品カードを 2 列グリッドで並べる 3. **キッズ商品**（子ども向け商品を見せる）: 同じカードで 2 列に組み、空きマスにキャラを置く 4. **販売情報**（発売日時と販売店舗を伝える）: 白い情報ボックスに帯見出し、ピンク下線の小見出し、■付きの見出しと店舗リストを並べる 5. **CTA**（取扱店舗一覧ページへ送る）: 黒フチの濃いピンクのピル型ボタンを中央に 1 つ置く 6. **フッター**（権利表記を示す）: 水玉の地にコピーライトを小さく中央揃えで置く ## Imagery - 商品はグレージュの床に真上から平置きし、色違いを 3 着並べる - 自然光でやわらかく、影は薄くする - キャラは黒の太い手描き線と白い塗り、頬にピンクのチークを入れる - 擬音や動きの線を手描きで添える - 水玉は白の正円を一定間隔で互い違いに並べる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC も中央に約 360px 幅のカラムで組み、両脇は水玉の地を見せる - SP では商品カードを 2 列のまま幅いっぱいに広げる - SP では見出しプレートを画面幅の 60〜70% にする - SP の情報ボックスは左右の余白を 16px にする ## 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-3537942b`（元 LP の URL から採番） - **元 LP**: https://www.dot-st.com/lowrysfarm/disp/itemlist/?dispNo=002001054 - **解析に使った画像**: PC（PC版） - **確度**: 色 高（8/11 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。