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

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

Overview

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

Colors

• 地はライトグレーと水色の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

• 見出しは英字の大見出し、カタカナの小見出し、手書き吹き出しの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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。