--- version: alpha name: Retro Pixel Game Valentine Sweets LP description: 携帯ゲーム機のような枠とドット絵のハートで組んだ、季節限定チョコレートの紹介LP。くすんだワイン色・ピンク・ミントを交互に使い、商品ごとに「ステージ」として色を変えたブロックを縦に並べる。 colors: primary: '#8B3856' secondary: '#82B7A5' accent-1: '#E17786' background: '#0F6A6D' tint-1: '#F6B9CA' accent-2: '#01A194' accent-3: '#5080A0' dark-section: '#63233B' cta: '#6A2F44' on-cta: '#F6C9D2' on-dark: '#FFFFFF' line: '#7FD0C8' marker: '#7BE4EB' accent-1-accessible: '#D43D52' accent-3-accessible: '#4D7B99' typography: display: fontFamily: DotGothic16 fontSize: 44px fontWeight: 700 lineHeight: 1.1 letterSpacing: 0.02em headline-md: fontFamily: DotGothic16 fontSize: 14px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.1em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 14px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.15em body-md: fontFamily: Zen Kaku Gothic New fontSize: 10px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.03em body-lg: fontFamily: M PLUS Rounded 1c fontSize: 10px fontWeight: 500 lineHeight: 2.4 letterSpacing: 0.08em label-button: fontFamily: Zen Kaku Gothic New fontSize: 10px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0.1em note: fontFamily: Noto Sans JP fontSize: 8px fontWeight: 400 lineHeight: 1.5 rounded: sm: 4px md: 12px lg: 24px full: 999px spacing: unit: 8px card: 12px section: 0px components: page: backgroundColor: '{colors.background}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' game-console-frame: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.display}' rounded: '{rounded.lg}' height: 350px stage-label: backgroundColor: '{colors.marker}' textColor: '{colors.primary}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 22px button-detail: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 22px product-desc-box: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 70px pixel-heart-border: textColor: '{colors.line}' height: 8px info-ribbon: backgroundColor: '{colors.accent-3}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 30px pixel-character: textColor: '{colors.on-dark}' height: 40px --- # DESIGN.md — ドット絵ゲーム風くすみピンクの菓子LP（Retro Pixel Game Valentine Sweets LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 菓子・スイーツ ／ **雰囲気**: かわいい、レトロ、ポップ・元気 - **キーワード**: ドット絵・レトロゲーム機・くすみパステル・ステージ構成・ハート・バレンタイン - **地の質感**: フラットな単色面とドット絵装飾。写真は色紙背景のスタジオ撮り - **形**: 角を階段状に欠いたドット枠、ゲーム機の角丸の筐体、ピクセルハート - **温度感**: 温かくて甘い。ピンクとワイン色に、冷たいミントと青を差し色にしている ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#8B3856` | ワイン色のメイン地・物語セクション | 17% | 画素の実測 | | `secondary` | `#82B7A5` | ゲーム機の画面のミント地 | 12% | 画素の実測 | | `accent-1` | `#E17786` | ゲーム機の筐体ピンク | 10% | 画素の主要色に補正 | | `background` | `#0F6A6D` | ページ外周のディープティール | 8% | 画素の実測 | | `tint-1` | `#F6B9CA` | ステージ背景のパステルピンク | 8% | 画素の実測 | | `accent-2` | `#01A194` | ステージ背景のティール | 7% | 画素の実測 | | `accent-3` | `#5080A0` | ステージ外枠のくすみ青 | 7% | 推定 | | `dark-section` | `#63233B` | 商品説明ボックスの濃いプラム | 5% | 画素の実測 | | `cta` | `#6A2F44` | 「詳しく見る」ボタンの地 | 1% | 画素の主要色に補正 | | `on-cta` | `#F6C9D2` | ボタン上の文字 | 0% | 推定 | | `on-dark` | `#FFFFFF` | 濃地の上の白文字 | 1% | 推定 | | `line` | `#7FD0C8` | ドット枠・ラベルの縁取り(ミント) | 1% | 推定 | | `marker` | `#7BE4EB` | ステージ名ラベルの淡い地 | 0% | 画素の実測 | | `accent-1-accessible` | `#D43D52` | AA を満たす補正値（計算） | | 計算 | | `accent-3-accessible` | `#4D7B99` | AA を満たす補正値（計算） | | 計算 | - ページの外側はディープティール。中にワイン、ピンク、ミント系の大きな面を重ねる - 商品ブロックごとに背景色を変える（紫→ピンク→ティール→ワインの順） - 商品ブロックの外側の色帯も変え、ステージが切り替わったと感じさせる - 説明ボックスは、ブロックより一段濃い色にミントか黄色のドット枠を付ける - 差し色はピンク、ミント、水色のピクセルハートで、小さく散らす - 文字は濃い地の上に白で置くのが基本。黒い文字はほぼ使わない - `game-console-frame` は文字 `#FFFFFF` × 背景 `#E17786` のコントラスト比が 2.92:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#D43D52`、4.58:1）を使う。 - `info-ribbon` は文字 `#FFFFFF` × 背景 `#5080A0` のコントラスト比が 4.25:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-3-accessible`（`#4D7B99`、4.56:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ロゴ風のメインタイトル（ドット調の装飾英字） | 装飾・ディスプレイ | DotGothic16 | 700 | 44px | 1.1 | 0.02em | | `headline-md` | ステージ名のラベル英字 | 装飾・ディスプレイ | DotGothic16 | 400 | 14px | 1.2 | 0.1em | | `headline-sm` | 商品名見出し（ハートで両側を挟む） | ゴシック | Zen Kaku Gothic New | 700 | 14px | 1.4 | 0.15em | | `body-md` | 物語風の導入文・商品説明 | ゴシック | Zen Kaku Gothic New | 700 | 10px | 1.6 | 0.03em | | `body-lg` | 導入セクションの中央揃え本文 | 丸ゴシック | M PLUS Rounded 1c | 500 | 10px | 2.4 | 0.08em | | `label-button` | 「詳しく見る」ボタン | ゴシック | Zen Kaku Gothic New | 500 | 10px | 1.0 | 0.1em | | `note` | 価格・入数の注記 | ゴシック | Noto Sans JP | 400 | 8px | 1.5 | 0.0em | - 本文は短い文に分けて改行し、すべて中央揃えにする - 英字の見出しはドットかピクセル風の書体に限る - 商品名は字間を広めに取り、両側にピクセルハートを付ける - 導入文は行間をかなり広く取り（2.4前後）、ゆったり見せる - 文字サイズは小さめにまとめ、絵と写真を主役にする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SPは1カラム。商品ブロックは全幅で縦に積む - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 0px、基本単位 8px、カード内 12px（375px 幅換算） - セクション同士は隙間なく接し、背景色の切り替えで区切る - 各ステージは、外側の色帯の中にドット枠の付いた写真面を置く - 写真面の下に説明ボックスを続け、上下ペアで1商品にする - ステージ名ラベルは写真面の上辺中央に重ねる - 左右の端に縦のドットハート列を装飾として置く ## Elevation & Depth - 影はほぼ使わない。平面的に作る - 立体感は濃い縁取り線と2重枠で出す - ゲーム機の画面は筐体より一段濃い縁で、へこんで見せる ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 24px。ボタンは角丸の長方形。 - **写真の切り抜き**: 四角形をそのまま使う。角は階段状に欠いたドット風 - **セクション境界**: 直線で背景色を切り替える - 枠の角は1〜2ドット分を階段状に欠く - ゲーム機の筐体だけは大きな角丸にする - ボタンとラベルは角を小さく欠いた八角形に近い形 - ハートはすべてピクセル（ドット）で描く ## Components - **ゲーム機風フレーム**（`game-console-frame`）: ピンクの筐体にミントの画面を入れ、下に十字キーとボタンを描く。ファーストビューと特典部に使う - **ステージ名ラベル**（`stage-label`）: 淡いミントやピンクの地に濃い縁取りを付け、ドット書体の英字を入れる。写真の上辺中央に重ねる - **詳しく見るボタン**（`button-detail`）: 濃いワインの地に淡いピンクの文字。細い縁取りを付け、写真面の下中央に置く - **商品説明ボックス**（`product-desc-box`）: 濃い単色の地にドット枠を付ける。ハートで挟んだ商品名と、3行程度の説明文を中央揃えで入れる - **ドットハートの縁飾り**（`pixel-heart-border`）: 小さなピクセルハートを列にして、迷路状の線やセクションの縁を作る - **情報リボン**（`info-ribbon`）: 水色の帯の両端にハートを付け、発売日や特典を一言で示す - **ドット絵の動物**（`pixel-character`）: 白い単色のドット絵で、つがいの動物がハートを作る絵。導入部の四隅に置く ## Do's and Don'ts **Do** - 商品ごとに背景色を変え、ゲームのステージのように進める - ピクセルハートとキラキラを写真の周りに散らす - 枠の角は階段状にしてドット感を保つ - 写真はパステルの色紙背景で真上から撮る - 最初と最後をゲーム機フレームで挟み、ページ全体を一つのゲームとして閉じる **Don't** - 白い地に黒い文字の一般的なレイアウトにしない - 滑らかなグラデーションや強いドロップシャドウを使わない - 大きなピル型ボタンや派手な赤いCTAを置かない - 曲線的で有機的な装飾を混ぜない - 鮮やかすぎる原色を使わない。くすみトーンを守る ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（ブランドの表示とメニュー）: ティールの帯の中央にロゴのラベルを置き、右にドット風のメニューアイコンを置く 2. **ファーストビュー**（企画タイトルと発売日を伝える）: ゲーム機フレームのミントの画面にドット書体のタイトルと発売日リボンを置き、四隅にピクセルハートを置く 3. **導入ストーリー**（ゲームに見立てた世界観を語る）: ワインの地に、ハートの迷路状の縁飾りとドット絵の動物を置く。短い文を5行ほど中央揃えで並べる 4. **商品集合写真**（ラインナップを一度に見せる）: オレンジの色紙の上で全商品を撮り、各商品にステージ名の札を添える。ドット枠で囲む 5. **商品ステージ（繰り返し）**（商品を1つずつ紹介する）: 上辺にステージ名ラベルを付けた色の違う写真面を置き、詳しく見るボタン、説明ボックスの順に続ける。これを4回繰り返す 6. **最終ステージ**（集大成のセット商品を紹介し、価格を示す）: 同じ型で作り、説明ボックスの下に価格の注記を加える 7. **特典告知**（購入特典を伝える）: ゲーム機フレームの画面に特典品の写真を置き、下に水色のリボンで説明を入れる 8. **フッター**（SNSの導線とブランド表示）: 筐体の下部に丸いSNSアイコンとロゴを置き、左右にスピーカー風の横線を描く ## Imagery - 商品はパステルの色紙背景で、真上か斜め上から撮る - ブロックや台座を組み、箱と個包装のチョコを散らす - 写真の上にピクセルハートやキラキラ、音符のドット絵を合成する - キャラクターは白い単色のドット絵で、2匹ずつ向かい合わせて描く - 背景のパステル色は、そのステージの枠の色と揃える - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでもコンテンツは中央の約75%幅に収め、両側はティールの地で埋める - PCではヘッダーのナビを、ピクセル風ラベルのボタンを2段に並べた形にする - 各ステージの構成はSPと同じまま、写真面を横に広げる - PCでは説明ボックスの文を1行を長めにして、行数を減らす ## 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-639ae196`（元 LP の URL から採番） - **元 LP**: https://parlour.shiseido.co.jp/vdLP/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（7/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。