---
version: alpha
name: Aqua Gothic Maid Character Collab PC LP
description: 明るいグレーの地に水色のティール系を合わせたキャラクターコラボLP。ゲーミングPCの限定モデルを売る。ラインナップは白カードで並べ、見出し帯の色は3段階のティールで塗り分ける。特典セクションは全面を水色にして、白の大きな番号で見せる。花の線画、王冠、リボン、きらめきの装飾でかわいさとクールさを両立させる。
colors:
  primary: '#5EB8D2'
  background: '#EDEDED'
  surface: '#FEFEFE'
  cta: '#5ECBD2'
  on-cta: '#EDFFFF'
  secondary: '#47A6B8'
  accent-1: '#1C6170'
  text: '#252526'
  text-body: '#2F2F30'
  accent-2: '#6BC1C2'
  tint-1: '#5EBCD1'
  accent-3: '#D42A2A'
  on-dark: '#FBFDFE'
  tint-2: '#79C2D5'
  cta-accessible: '#258086'
  tint-1-accessible: '#2A7F92'
typography:
  display:
    fontFamily: Josefin Sans
    fontSize: 50px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: 0.08em
  headline-lg:
    fontFamily: Josefin Sans
    fontSize: 64px
    fontWeight: 700
    lineHeight: 1.0
  headline-md:
    fontFamily: M PLUS Rounded 1c
    fontSize: 21px
    fontWeight: 800
    lineHeight: 1.5
    letterSpacing: 0.12em
  headline-sm:
    fontFamily: Josefin Sans
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.45
    letterSpacing: 0.06em
  body-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 15px
    fontWeight: 500
    lineHeight: 2.0
    letterSpacing: 0.08em
  accent:
    fontFamily: Yomogi
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.05em
  note:
    fontFamily: M PLUS Rounded 1c
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.6
    letterSpacing: 0.1em
  label-button:
    fontFamily: M PLUS Rounded 1c
    fontSize: 17px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0.08em
rounded:
  sm: 8px
  md: 16px
  lg: 24px
  full: 999px
spacing:
  unit: 8px
  card: 24px
  section: 90px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 54px
  product-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
    rounded: '{rounded.lg}'
    height: 640px
  card-header-band:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.lg}'
    height: 100px
  section-title:
    textColor: '{colors.text}'
    typography: '{typography.display}'
    height: 160px
  speech-badge:
    backgroundColor: '{colors.tint-1}'
    textColor: '{colors.on-dark}'
    typography: '{typography.note}'
    rounded: '{rounded.full}'
    height: 76px
  benefit-number:
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-lg}'
    height: 110px
  audio-player:
    textColor: '{colors.on-dark}'
    typography: '{typography.note}'
    rounded: '{rounded.md}'
    height: 78px
  sns-icon:
    backgroundColor: '{colors.tint-1}'
    textColor: '{colors.on-dark}'
    rounded: '{rounded.full}'
    height: 64px
---

# DESIGN.md — 水色×チャコールのキャラコラボPC LP（Aqua Gothic Maid Character Collab PC LP）

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

## Overview

- **業種**: 家電・ガジェット ／ **雰囲気**: かわいい、クール・先進的、清潔・爽やか、ポップ・元気
- **キーワード**: キャラクターコラボ・水色ティール・ゴシックメイド・限定モデル・特典訴求・装飾シンボル
- **地の質感**: 薄いグレーに細い斜線を敷いた地と、水色の地に建物写真を薄く透かした面。境界には花の線画を白抜きで入れる
- **形**: 角の大きく丸い白カード、ピル型ボタン、吹き出し型のラベル、円形・クマ耳型に切り抜いた写真
- **温度感**: やや寒色寄り。清涼感があり、チャコールで引き締める

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#5EB8D2` | 特典セクションの地・ブランドの水色 | 28% | 画素の実測 |
| `background` | `#EDEDED` | ページの地のライトグレー | 30% | 画素の実測 |
| `surface` | `#FEFEFE` | 商品カードの白 | 18% | 画素の実測 |
| `cta` | `#5ECBD2` | 1枚目の商品ボタン・見出し帯 | 3% | 画素の実測 |
| `on-cta` | `#EDFFFF` | ボタン上の文字 | 0% | 画素の実測 |
| `secondary` | `#47A6B8` | 2枚目の商品の帯・ボタンの中間ティール | 2% | 画素の実測 |
| `accent-1` | `#1C6170` | 3枚目の商品の帯・ボタンの濃いティール | 2% | 画素の実測 |
| `text` | `#252526` | 見出し・価格のチャコール | 2% | 画素の実測 |
| `text-body` | `#2F2F30` | スペック・本文 | 2% | 画素の実測 |
| `accent-2` | `#6BC1C2` | 商品名の水色テキスト | 0% | 画素の実測 |
| `tint-1` | `#5EBCD1` | SNSアイコンの円・吹き出し | 0% | 画素の主要色に補正 |
| `accent-3` | `#D42A2A` | 「お得」系の赤いスタンプ | 0% | 推定 |
| `on-dark` | `#FBFDFE` | 水色の地の上の白文字 | 1% | 画素の実測 |
| `tint-2` | `#79C2D5` | 水色の地のやや明るい帯 | 4% | 画素の実測 |
| `cta-accessible` | `#258086` | AA を満たす補正値（計算） |  | 計算 |
| `tint-1-accessible` | `#2A7F92` | AA を満たす補正値（計算） |  | 計算 |

- 地はライトグレーと水色の2面だけ。商品は白カード、特典は水色の面に置く
- 商品カードの帯とボタンは、水色→中間ティール→濃紺ティールと順に濃くする
- 見出しの英字はチャコール。水色の地では白に反転する
- 赤はスタンプ1点だけに使い、ほかの強調には使わない
- 水色の地の文字はすべて白にし、黒文字は置かない
- グラデーションは使わず、フラットな面にする
- `button-primary` は文字 `#EDFFFF` × 背景 `#5ECBD2` のコントラスト比が 1.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#258086`、4.51:1）を使う。
- `card-header-band` は文字 `#EDFFFF` × 背景 `#5ECBD2` のコントラスト比が 1.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#258086`、4.51:1）を使う。
- `speech-badge` は文字 `#FBFDFE` × 背景 `#5EBCD1` のコントラスト比が 2.15:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `tint-1-accessible`（`#2A7F92`、4.52:1）を使う。
- `sns-icon` は文字 `#FBFDFE` × 背景 `#5EBCD1` のコントラスト比が 2.15:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `tint-1-accessible`（`#2A7F92`、4.52:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | 英字のセクション見出し | 欧文サンセリフ | Josefin Sans | 700 | 50px | 1.1 | 0.08em |
| `headline-lg` | 特典の大きな番号 | 欧文サンセリフ | Josefin Sans | 700 | 64px | 1.0 | 0.0em |
| `headline-md` | 商品の帯見出し・特典名 | 丸ゴシック | M PLUS Rounded 1c | 800 | 21px | 1.5 | 0.12em |
| `headline-sm` | 商品名 | 欧文サンセリフ | Josefin Sans | 500 | 20px | 1.45 | 0.06em |
| `body-md` | スペック・プロフィール本文 | ゴシック | Zen Kaku Gothic New | 500 | 15px | 2.0 | 0.08em |
| `accent` | 吹き出しの手書き風コメント | 手書き・筆 | Yomogi | 400 | 14px | 1.4 | 0.05em |
| `note` | 注釈・カタカナの小見出し | 丸ゴシック | M PLUS Rounded 1c | 700 | 13px | 1.6 | 0.1em |
| `label-button` | ボタンの文字 | 丸ゴシック | M PLUS Rounded 1c | 700 | 17px | 1.0 | 0.08em |

- 見出しは英字の大見出し、カタカナの小見出し、手書き吹き出しの3層で組む
- 字間は全体に広めにとる（0.06〜0.12em）
- 価格は数字を大きく、「円（税込）」は小さく添える
- 特典番号は白の極太数字にし、斜線の影を付ける
- 本文は中央揃えを基本にし、プロフィールだけ左揃えにする
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。PC は 2 カラム（カード列とキャラクター立ち絵／番号と画像の左右交互）
- **本文ブロックの幅**: 画面幅の約 83%
- **余白**: セクション間 90px、基本単位 8px、カード内 24px（375px 幅換算）
- 商品カードはミニキャラを上に乗せ、帯→画像→名称→スペック→価格→ボタンの順に縦に積む
- カード同士の間に、ミニキャラが立つ余白を約100px とる
- 特典は番号と名称を横並びにし、その下に画像を全幅で置く
- セクション見出しは中央に置き、両脇にきらめき記号を添える
- 注釈は画像の直下に中央揃えで置く

## Elevation & Depth

- 影はほぼ使わず、フラットにする
- 白カードは影なしで、地との明度差だけで浮かせる
- 特典番号には斜線ハッチの擬似影を付ける

## Shapes

- **角丸**: 小 8px ／ 中 16px ／ 大 24px。ボタンはピル型。
- **写真の切り抜き**: 商品は白い背景の切り抜き。キャラクターは円形やクマ耳型のマスクで切り抜く。特典画像は四角のまま
- **セクション境界**: 花と葉の線画を並べた波形のシルエットでグレーと水色を切り替える。ページの端は格子柄の帯にする
- カード上部の帯は角丸の上辺だけを丸め、下辺は直線にする
- ボタンは横幅の8割ほどのピル型にする
- 吹き出しには猫耳の飾りやしっぽを付ける
- 音声プレイヤーは白い線の角丸枠で囲む

## Components

- **詳細ボタン**（`button-primary`）: カードと同じティールで塗ったピル型ボタン。文字は白
- **商品カード**（`product-card`）: 白い角丸カード。上部に色帯の見出し、右上に赤スタンプを付ける
- **カード見出し帯**（`card-header-band`）: ティールの帯に白い2行の訴求コピーを入れる
- **英字セクション見出し**（`section-title`）: 手書きの吹き出し＋大きな英字＋きらめき記号＋カタカナ
- **猫耳吹き出し**（`speech-badge`）: 商品画像の右上に置く円形の吹き出し。猫耳が付き、白文字で補足を書く
- **特典番号**（`benefit-number`）: 王冠の飾りの下に白の極太の2桁数字を置き、右に特典名を並べる
- **音声試聴枠**（`audio-player`）: 白線の角丸枠の中にアバターとプレイヤーを並べる
- **SNS円ボタン**（`sns-icon`）: 淡いティールの円に白い単色アイコンを入れ、3つ並べる

## Do's and Don'ts

**Do**
- カードごとにティールの濃さを変えてリズムを作る
- ミニキャラを各カードの上に乗せる
- 白抜きの花の線画でセクションの境目を飾る
- きらめき・リボン・王冠の小さな記号を見出しに散らす
- 画像の下に「イメージです」系の注釈を必ず添える

**Don't**
- 暖色系やビビッドな多色は使わない
- 赤をスタンプ以外に使わない
- カードに強い影を付けない
- 水色の地に黒い本文を置かない
- 見出しを明朝体にしない

## Page Structure

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

1. **ファーストビュー**（コラボであることと期間限定を伝える）: キャラクターのイラストを全幅で見せ、下に白地で「期間限定」のリボン、ロゴ×ロゴ、装飾的な大見出しを置く
2. **名前の英字帯**（キャラクターの世界観を出す）: グレーの地に巨大な白い英字を流し、ミニキャラの円と花の線画を添える
3. **ラインナップ**（限定モデルを比べてもらう）: 白い商品カードを3枚縦に並べる。帯とボタンの色は段階的なティールにする
4. **特典見出し**（購入特典へ誘導する）: 花の波形で水色の地に切り替え、白の英字見出しを置く
5. **特典01〜05**（特典グッズを具体的に見せる）: 大きな番号と特典名を横並びにし、画像・音声・注釈を順に積む
6. **キャラクター紹介**（コラボ相手を紹介する）: グレーの地にクマ耳型の円いイラスト、ロゴ、名前、左揃えの本文を置く
7. **SNSリンク**（ファンの導線をつなぐ）: ティールの円アイコンを3つ並べ、最下部を格子柄の帯で締める

## Imagery

- アニメ調のキャラクターイラスト。寒色の背景にモノトーン衣装で描く
- 等身の低いミニキャラを、カードや見出しのアクセントとして各所に置く
- 商品は白い筐体を白背景で切り抜き、本体と内部の2点を並べる
- 水色の地には建物や室内の写真を低いコントラストで透かす
- 花と葉は白か淡いティールの線画で描く
- グッズ画像には斜めに「SAMPLE」の透かしを重ねる
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC はラインナップを左カラムのカード列にし、右に大きな立ち絵を置く
- PC のカードは横長にし、画像を左、情報を右に並べる
- PC の特典は番号ブロックと画像を左右交互にジグザグで配置する
- PC のファーストビューは左にイラスト、右にロゴと見出しを置く
- PC のプロフィールは円形イラストと本文を横並びにする

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