ピンクギンガムと苺のなりきり玩具 LP

Pink Gingham Strawberry Character Toy LP

ピンクのギンガム柄を地に、苺モチーフ・レース縁・オーニング見出しで飾った、懐かしアニメのなりきり玩具を紹介する甘くかわいい LP。白いカードを柄の上に重ね、濃いピンクと濃いローズの文字で特長を POINT 番号付きで見せる。

エンタメ・ゲーム・アプリかわいいポップ・元気やさしい・柔らかいレトロSP

ダウンロード

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

COLORS

配色

地は常にピンクのギンガム柄、内容は白カードに載せる
見出しの番号・英字は濃いピンク、和文見出しは濃いローズ
強調コピーは濃ピンクの白抜き縁取り文字
苺の赤と金色は装飾小物だけに使う
黒や寒色はほぼ使わない

TYPOGRAPHY

書体

display英字セクション名（筆記体風の大見出し）欧文スクリプト／ Pacifico 400 ／ 44px ／行間 1.2

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

headline-lgPOINT 見出しの和文ゴシック／ M PLUS Rounded 1c 900 ／ 18px ／行間 1.3

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

headline-md強調キャッチ（縁取り文字）丸ゴシック／ M PLUS Rounded 1c 800 ／ 21px ／行間 1.4

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

accentPOINT・MOVIE などの英字ラベル欧文サンセリフ／ Montserrat 800 ／ 20px ／行間 1.2

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

body-md本文（中央揃え）ゴシック／ Noto Sans JP 500 ／ 13px ／行間 1.9

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

note写真キャプション・サイズ表記ゴシック／ Noto Sans JP 400 ／ 9px ／行間 1.5

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

headline-sm英字の小見出し欧文サンセリフ／ Montserrat 700 ／ 17px ／行間 1.3

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

本文は中央揃え、1 行を短く改行
英字見出しの下に小さな和文サブ見出しを添える
強調コピーは白文字に濃ピンクの縁取りやドロップシャドウ
見出し末尾にハートや音符記号を添えて甘さを出す

PAGE STRUCTURE

セクション構成

ファーストビュー商品と作品世界を一目で伝えるギンガム地にロゴ、キャラクター、商品写真、苺、短い吹き出しコピー
あらすじ・背景作品の懐かしさを喚起し発売理由を伝えるオーニング見出し＋点線白カードに中央揃え本文と縁取り強調、場面写真をポラロイド風に散らす
特長1（素材）質感・再現度を見せるPOINT 帯＋大きな製品写真と右側の詳細写真、引き出し線とキャプション
特長2（音）収録音を伝える左に製品写真、右にラベルタグ付き曲目と場面写真 2 枚
特長3（光）発光ギミックを見せる短い説明と光る場面写真 2 枚、右に製品写真
使用イメージサイズ感と所有感を伝える手で持つ全幅写真に斜めの縁取り決めセリフ
ブランド紹介シリーズの思想を伝えるピンク縁の大きな角丸カードに筆記体ロゴ、中央揃え本文、角に苺
動画遊び方を動画で見せる英字＋和文の白帯見出し、16:9 動画埋め込み、下に権利表記

COMPONENTS

部品

オーニング見出し awning-headingピンク縞のオーニングに筆記体英字＋和文サブ
POINT 見出し帯 point-heading苺アイコン＋POINT 番号丸＋和文見出しの白帯、上下レース
点線枠カード dotted-card白地に内側点線、角に苺装飾
縁取り強調コピー outline-catch白文字に濃ピンクの縁取り＋ハート
ラベルタグ label-tag濃ピンク地の小さな白文字ラベル＋右に曲名
ポラロイド写真 polaroid-photo白フチで傾けた場面写真の重ね配置
動画埋め込み video-embedギンガム地に 16:9 の動画プレイヤー

守ること

地は必ずピンクのギンガム柄にする
苺・ハート・肉球の小物を余白に散らす
見出しは英字＋和文の 2 段構成にする
写真は白フチで少し傾けて遊びを出す
本文は中央揃えで短く改行する

DON'T

避けること

寒色やモノトーンの面を広く使わない
角ばった硬いビジネス調の見出しにしない
装飾なしの白一色セクションを続けない
細い明朝体を使わない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — ピンクギンガムと苺のなりきり玩具 LP（Pink Gingham Strawberry Character Toy LP）

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

Overview

業種: エンタメ・ゲーム・アプリ／ 雰囲気: かわいい、ポップ・元気、やさしい・柔らかい、レトロ
キーワード: ギンガムチェック・苺モチーフ・レース縁・オーニング・白カード・ハート
地の質感: ピンクのギンガム柄と点線・レースの縁取りで布やお菓子のパッケージのような手触り感
形: 角丸の白カード、波型オーニング、スカラップ縁、ハートと苺の小物
温度感: 暖かく甘い。ピンク主体で明るい

Colors

Token	HEX	役割	面積の目安	値の出どころ
`primary`	`#F03779`	ブランドの濃いピンク（POINT 文字・見出しアクセント）	8%	画素の主要色に補正
`secondary`	`#F3709F`	オーニング縞や帯の中間ピンク	6%	画素の主要色に補正
`background`	`#FFFEFE`	カード内の白地	24%	画素の実測
`background-alt`	`#FECCE8`	ギンガム柄の淡いピンク地	12%	画素の主要色に補正
`tint-1`	`#FEF9FE`	あらすじカードの淡いピンク白地	5%	画素の主要色に補正
`tint-2`	`#FBB5D4`	ギンガムの濃い交差マス	5%	画素の主要色に補正
`text`	`#782538`	見出しの濃いローズ文字	3%	画素の主要色に補正
`text-body`	`#4A3A3E`	本文のダークグレー	3%	推定
`accent-1`	`#E0384A`	苺の赤	2%	推定
`accent-2`	`#D9B860`	金メッキ風の金色	2%	推定
`marker`	`#EC2B6E`	ラベル帯の濃ピンク地	1%	画素の実測
`on-primary`	`#FFFFFF`	ピンク地上の白文字	1%	画素の主要色に補正
`line`	`#FBB5D4`	カードの点線・枠線	1%	画素の主要色に補正
`secondary-accessible`	`#E7135F`	AA を満たす補正値（計算）		計算
`marker-accessible`	`#E6155D`	AA を満たす補正値（計算）		計算

地は常にピンクのギンガム柄、内容は白カードに載せる
見出しの番号・英字は濃いピンク、和文見出しは濃いローズ
強調コピーは濃ピンクの白抜き縁取り文字
苺の赤と金色は装飾小物だけに使う
黒や寒色はほぼ使わない
awning-heading は文字 #FFFFFF × 背景 #F3709F のコントラスト比が 2.75:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#E7135F、4.51:1）を使う。
label-tag は文字 #FFFFFF × 背景 #EC2B6E のコントラスト比が 4.09:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら marker-accessible（#E6155D、4.54:1）を使う。

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	英字セクション名（筆記体風の大見出し）	欧文スクリプト	Pacifico	400	44px	1.2	0.0em
`headline-lg`	POINT 見出しの和文	ゴシック	M PLUS Rounded 1c	900	18px	1.3	0.0em
`headline-md`	強調キャッチ（縁取り文字）	丸ゴシック	M PLUS Rounded 1c	800	21px	1.4	0.02em
`accent`	POINT・MOVIE などの英字ラベル	欧文サンセリフ	Montserrat	800	20px	1.2	0.05em
`body-md`	本文（中央揃え）	ゴシック	Noto Sans JP	500	13px	1.9	0.03em
`note`	写真キャプション・サイズ表記	ゴシック	Noto Sans JP	400	9px	1.5	0.0em
`headline-sm`	英字の小見出し	欧文サンセリフ	Montserrat	700	17px	1.3	0.02em

本文は中央揃え、1 行を短く改行
英字見出しの下に小さな和文サブ見出しを添える
強調コピーは白文字に濃ピンクの縁取りやドロップシャドウ
見出し末尾にハートや音符記号を添えて甘さを出す
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム、カード内で写真 2 列
本文ブロックの幅: 画面幅の約 88%
余白: セクション間 24px、基本単位 8px、カード内 20px（375px 幅換算）
各セクションはギンガム地の上に白カードを置く
POINT 見出しは全幅の白帯＋レース縁
写真はランダムに傾けポラロイド風に散らす
製品写真は大きく、詳細写真を右に小さく添える

Elevation & Depth

白カードはごく薄い影
写真は白フチ＋柔らかい影でポラロイド風
大きな影や立体感は避ける

Shapes

角丸: 小 4px ／中 12px ／大 20px。ボタンは角丸の長方形。
写真の切り抜き: 角型の写真に白フチ、傾けて配置。詳細写真は角丸四角
セクション境界: スカラップ・レース縁の白帯、オーニング型の波
カード枠は点線や二重線で縁取る
苺やハートの小物をカード角に重ねる
見出し帯はレースの縁取り

Components

オーニング見出し（awning-heading）: ピンク縞のオーニングに筆記体英字＋和文サブ
POINT 見出し帯（point-heading）: 苺アイコン＋POINT 番号丸＋和文見出しの白帯、上下レース
点線枠カード（dotted-card）: 白地に内側点線、角に苺装飾
縁取り強調コピー（outline-catch）: 白文字に濃ピンクの縁取り＋ハート
ラベルタグ（label-tag）: 濃ピンク地の小さな白文字ラベル＋右に曲名
ポラロイド写真（polaroid-photo）: 白フチで傾けた場面写真の重ね配置
動画埋め込み（video-embed）: ギンガム地に 16:9 の動画プレイヤー

Do's and Don'ts

Do - 地は必ずピンクのギンガム柄にする - 苺・ハート・肉球の小物を余白に散らす - 見出しは英字＋和文の 2 段構成にする - 写真は白フチで少し傾けて遊びを出す - 本文は中央揃えで短く改行する

Don't - 寒色やモノトーンの面を広く使わない - 角ばった硬いビジネス調の見出しにしない - 装飾なしの白一色セクションを続けない - 細い明朝体を使わない

Page Structure

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

ファーストビュー（商品と作品世界を一目で伝える）: ギンガム地にロゴ、キャラクター、商品写真、苺、短い吹き出しコピー
あらすじ・背景（作品の懐かしさを喚起し発売理由を伝える）: オーニング見出し＋点線白カードに中央揃え本文と縁取り強調、場面写真をポラロイド風に散らす
特長1（素材）（質感・再現度を見せる）: POINT 帯＋大きな製品写真と右側の詳細写真、引き出し線とキャプション
特長2（音）（収録音を伝える）: 左に製品写真、右にラベルタグ付き曲目と場面写真 2 枚
特長3（光）（発光ギミックを見せる）: 短い説明と光る場面写真 2 枚、右に製品写真
使用イメージ（サイズ感と所有感を伝える）: 手で持つ全幅写真に斜めの縁取り決めセリフ
ブランド紹介（シリーズの思想を伝える）: ピンク縁の大きな角丸カードに筆記体ロゴ、中央揃え本文、角に苺
動画（遊び方を動画で見せる）: 英字＋和文の白帯見出し、16:9 動画埋め込み、下に権利表記

Imagery

製品は白背景または淡い背景で正面から明るく撮る
使用イメージは白い服の人が両手で持つ寄り写真
アニメ場面写真を白フチで傾けて配置
苺はつやのある実物写真の切り抜きを装飾に散らす
肉球・ハート・きらめきの小アイコンを添える
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PC は中央に SP 幅相当のカラムを置き、左右はギンガム柄で埋める
PC では特長の写真と説明を横並びにしてもよい
動画は最大幅 720px 程度で中央配置

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: Pink Gingham Strawberry Character Toy LP
description: ピンクのギンガム柄を地に、苺モチーフ・レース縁・オーニング見出しで飾った、懐かしアニメのなりきり玩具を紹介する甘くかわいい LP。白いカードを柄の上に重ね、濃いピンクと濃いローズの文字で特長を POINT 番号付きで見せる。
colors:
  primary: '#F03779'
  secondary: '#F3709F'
  background: '#FFFEFE'
  background-alt: '#FECCE8'
  tint-1: '#FEF9FE'
  tint-2: '#FBB5D4'
  text: '#782538'
  text-body: '#4A3A3E'
  accent-1: '#E0384A'
  accent-2: '#D9B860'
  marker: '#EC2B6E'
  on-primary: '#FFFFFF'
  line: '#FBB5D4'
  secondary-accessible: '#E7135F'
  marker-accessible: '#E6155D'
typography:
  display:
    fontFamily: Pacifico
    fontSize: 44px
    fontWeight: 400
    lineHeight: 1.2
  headline-lg:
    fontFamily: M PLUS Rounded 1c
    fontSize: 18px
    fontWeight: 900
    lineHeight: 1.3
  headline-md:
    fontFamily: M PLUS Rounded 1c
    fontSize: 21px
    fontWeight: 800
    lineHeight: 1.4
    letterSpacing: 0.02em
  accent:
    fontFamily: Montserrat
    fontSize: 20px
    fontWeight: 800
    lineHeight: 1.2
    letterSpacing: 0.05em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.9
    letterSpacing: 0.03em
  note:
    fontFamily: Noto Sans JP
    fontSize: 9px
    fontWeight: 400
    lineHeight: 1.5
  headline-sm:
    fontFamily: Montserrat
    fontSize: 17px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0.02em
rounded:
  sm: 4px
  md: 12px
  lg: 20px
  full: 999px
spacing:
  unit: 8px
  card: 20px
  section: 24px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  awning-heading:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.display}'
    height: 90px
  point-heading:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
    height: 44px
  dotted-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
    rounded: '{rounded.md}'
    height: 400px
  outline-catch:
    textColor: '{colors.on-primary}'
    typography: '{typography.headline-md}'
    height: 32px
  label-tag:
    backgroundColor: '{colors.marker}'
    textColor: '{colors.on-primary}'
    typography: '{typography.note}'
    rounded: '{rounded.sm}'
    height: 18px
  polaroid-photo:
    backgroundColor: '{colors.background}'
    height: 120px
  video-embed:
    backgroundColor: '{colors.background-alt}'
    height: 240px
---

# DESIGN.md — ピンクギンガムと苺のなりきり玩具 LP（Pink Gingham Strawberry Character Toy LP）

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

## Overview

- **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: かわいい、ポップ・元気、やさしい・柔らかい、レトロ
- **キーワード**: ギンガムチェック・苺モチーフ・レース縁・オーニング・白カード・ハート
- **地の質感**: ピンクのギンガム柄と点線・レースの縁取りで布やお菓子のパッケージのような手触り感
- **形**: 角丸の白カード、波型オーニング、スカラップ縁、ハートと苺の小物
- **温度感**: 暖かく甘い。ピンク主体で明るい

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#F03779` | ブランドの濃いピンク（POINT 文字・見出しアクセント） | 8% | 画素の主要色に補正 |
| `secondary` | `#F3709F` | オーニング縞や帯の中間ピンク | 6% | 画素の主要色に補正 |
| `background` | `#FFFEFE` | カード内の白地 | 24% | 画素の実測 |
| `background-alt` | `#FECCE8` | ギンガム柄の淡いピンク地 | 12% | 画素の主要色に補正 |
| `tint-1` | `#FEF9FE` | あらすじカードの淡いピンク白地 | 5% | 画素の主要色に補正 |
| `tint-2` | `#FBB5D4` | ギンガムの濃い交差マス | 5% | 画素の主要色に補正 |
| `text` | `#782538` | 見出しの濃いローズ文字 | 3% | 画素の主要色に補正 |
| `text-body` | `#4A3A3E` | 本文のダークグレー | 3% | 推定 |
| `accent-1` | `#E0384A` | 苺の赤 | 2% | 推定 |
| `accent-2` | `#D9B860` | 金メッキ風の金色 | 2% | 推定 |
| `marker` | `#EC2B6E` | ラベル帯の濃ピンク地 | 1% | 画素の実測 |
| `on-primary` | `#FFFFFF` | ピンク地上の白文字 | 1% | 画素の主要色に補正 |
| `line` | `#FBB5D4` | カードの点線・枠線 | 1% | 画素の主要色に補正 |
| `secondary-accessible` | `#E7135F` | AA を満たす補正値（計算） |  | 計算 |
| `marker-accessible` | `#E6155D` | AA を満たす補正値（計算） |  | 計算 |

- 地は常にピンクのギンガム柄、内容は白カードに載せる
- 見出しの番号・英字は濃いピンク、和文見出しは濃いローズ
- 強調コピーは濃ピンクの白抜き縁取り文字
- 苺の赤と金色は装飾小物だけに使う
- 黒や寒色はほぼ使わない
- `awning-heading` は文字 `#FFFFFF` × 背景 `#F3709F` のコントラスト比が 2.75:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#E7135F`、4.51:1）を使う。
- `label-tag` は文字 `#FFFFFF` × 背景 `#EC2B6E` のコントラスト比が 4.09:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `marker-accessible`（`#E6155D`、4.54:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | 英字セクション名（筆記体風の大見出し） | 欧文スクリプト | Pacifico | 400 | 44px | 1.2 | 0.0em |
| `headline-lg` | POINT 見出しの和文 | ゴシック | M PLUS Rounded 1c | 900 | 18px | 1.3 | 0.0em |
| `headline-md` | 強調キャッチ（縁取り文字） | 丸ゴシック | M PLUS Rounded 1c | 800 | 21px | 1.4 | 0.02em |
| `accent` | POINT・MOVIE などの英字ラベル | 欧文サンセリフ | Montserrat | 800 | 20px | 1.2 | 0.05em |
| `body-md` | 本文（中央揃え） | ゴシック | Noto Sans JP | 500 | 13px | 1.9 | 0.03em |
| `note` | 写真キャプション・サイズ表記 | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.0em |
| `headline-sm` | 英字の小見出し | 欧文サンセリフ | Montserrat | 700 | 17px | 1.3 | 0.02em |

- 本文は中央揃え、1 行を短く改行
- 英字見出しの下に小さな和文サブ見出しを添える
- 強調コピーは白文字に濃ピンクの縁取りやドロップシャドウ
- 見出し末尾にハートや音符記号を添えて甘さを出す
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム、カード内で写真 2 列
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 24px、基本単位 8px、カード内 20px（375px 幅換算）
- 各セクションはギンガム地の上に白カードを置く
- POINT 見出しは全幅の白帯＋レース縁
- 写真はランダムに傾けポラロイド風に散らす
- 製品写真は大きく、詳細写真を右に小さく添える

## Elevation & Depth

- 白カードはごく薄い影
- 写真は白フチ＋柔らかい影でポラロイド風
- 大きな影や立体感は避ける

## Shapes

- **角丸**: 小 4px ／ 中 12px ／ 大 20px。ボタンは角丸の長方形。
- **写真の切り抜き**: 角型の写真に白フチ、傾けて配置。詳細写真は角丸四角
- **セクション境界**: スカラップ・レース縁の白帯、オーニング型の波
- カード枠は点線や二重線で縁取る
- 苺やハートの小物をカード角に重ねる
- 見出し帯はレースの縁取り

## Components

- **オーニング見出し**（`awning-heading`）: ピンク縞のオーニングに筆記体英字＋和文サブ
- **POINT 見出し帯**（`point-heading`）: 苺アイコン＋POINT 番号丸＋和文見出しの白帯、上下レース
- **点線枠カード**（`dotted-card`）: 白地に内側点線、角に苺装飾
- **縁取り強調コピー**（`outline-catch`）: 白文字に濃ピンクの縁取り＋ハート
- **ラベルタグ**（`label-tag`）: 濃ピンク地の小さな白文字ラベル＋右に曲名
- **ポラロイド写真**（`polaroid-photo`）: 白フチで傾けた場面写真の重ね配置
- **動画埋め込み**（`video-embed`）: ギンガム地に 16:9 の動画プレイヤー

## Do's and Don'ts

**Do**
- 地は必ずピンクのギンガム柄にする
- 苺・ハート・肉球の小物を余白に散らす
- 見出しは英字＋和文の 2 段構成にする
- 写真は白フチで少し傾けて遊びを出す
- 本文は中央揃えで短く改行する

**Don't**
- 寒色やモノトーンの面を広く使わない
- 角ばった硬いビジネス調の見出しにしない
- 装飾なしの白一色セクションを続けない
- 細い明朝体を使わない

## Page Structure

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

1. **ファーストビュー**（商品と作品世界を一目で伝える）: ギンガム地にロゴ、キャラクター、商品写真、苺、短い吹き出しコピー
2. **あらすじ・背景**（作品の懐かしさを喚起し発売理由を伝える）: オーニング見出し＋点線白カードに中央揃え本文と縁取り強調、場面写真をポラロイド風に散らす
3. **特長1（素材）**（質感・再現度を見せる）: POINT 帯＋大きな製品写真と右側の詳細写真、引き出し線とキャプション
4. **特長2（音）**（収録音を伝える）: 左に製品写真、右にラベルタグ付き曲目と場面写真 2 枚
5. **特長3（光）**（発光ギミックを見せる）: 短い説明と光る場面写真 2 枚、右に製品写真
6. **使用イメージ**（サイズ感と所有感を伝える）: 手で持つ全幅写真に斜めの縁取り決めセリフ
7. **ブランド紹介**（シリーズの思想を伝える）: ピンク縁の大きな角丸カードに筆記体ロゴ、中央揃え本文、角に苺
8. **動画**（遊び方を動画で見せる）: 英字＋和文の白帯見出し、16:9 動画埋め込み、下に権利表記

## Imagery

- 製品は白背景または淡い背景で正面から明るく撮る
- 使用イメージは白い服の人が両手で持つ寄り写真
- アニメ場面写真を白フチで傾けて配置
- 苺はつやのある実物写真の切り抜きを装飾に散らす
- 肉球・ハート・きらめきの小アイコンを添える
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC は中央に SP 幅相当のカラムを置き、左右はギンガム柄で埋める
- PC では特長の写真と説明を横並びにしてもよい
- 動画は最大幅 720px 程度で中央配置

## 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-084c91fe`（元 LP の URL から採番）
- **元 LP**: https://p-bandai.jp/item/item-1000220783/
- **解析に使った画像**: SP（スマホ版）
- **確度**: 色 高（2/13 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。

SOURCE

出典と注意

元の LP: https://p-bandai.jp/item/item-1000220783/（公開状況により表示できない場合があります）
この design.md は、公開されている LP の見た目を独自に分析した非公式の資料です。元 LP の運営企業・制作会社とは関係ありません。
元 LP のロゴ・写真・イラスト・文章・商品名は含みません。生成する LP でも使わず、自社の素材に置き換えてください。
色は画像の画素から実測した値、書体・サイズ・余白は画像からの推定です。
元 LP の権利者の方は、掲載の削除依頼からご連絡ください。受付から 24 時間以内に非公開にします。

似た LP の design.md

エンタメ・ゲーム・アプリ漆黒×金装飾のゲーム周年記念 LPDark Gold Fantasy Anniversary Portal LP エンタメ・ゲーム・アプリ黒地×生成りカプセルのアイドルイベントLPBlack Stage Cream Capsule Idol Event LP エンタメ・ゲーム・アプリ黒×紫の巻物フレーム玩具コレクション LPDark Purple Fantasy Scroll Collectible LP エンタメ・ゲーム・アプリ漆黒と夜の街灯色のドキュメンタリー映画 LPNocturnal Urban Documentary Film LP エンタメ・ゲーム・アプリ黒地×金とオレンジの模型商品 LPDark Metallic Hobby Product LP エンタメ・ゲーム・アプリ桃ベージュ×空色のやさしいポイ活アプリ LPSoft Peach and Sky Blue Point App LP