DESIGN.md — 紫×黒影のポップなキャラ文具 LP（Pop Violet Character Stationery LP）

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

Overview

• 業種: 日用品・生活雑貨 ／ 雰囲気: ポップ・元気、レトロ、クール・先進的
• キーワード: ラベンダー紫・藍紫・斜体ブラック欧文・オフセット影・カートゥーンキャラ・大きな曲線
• 地の質感: フラットなベタ塗り。グラデーションは使わず、黒いずらし影で立体感を出す
• 形: 角丸カード、ピル型ボタン、大きな弧を描く帯、円形の矢印ボタン
• 温度感: ややクールな紫に黄色・赤・水色の差し色を入れた、陽気な温度感

Colors

• 地の色は紫（primary）→白→グレー→藍紫の順に切り替え、セクションの区切りにする
• 紫地の上の文字は白。白・グレー地の上の文字は紫にし、黒の本文は使わない
• 主ボタンは藍紫の塗り＋白文字。暗い地の上では白い塗り＋藍紫文字に反転させる
• 黄・赤・水色はキャラとゲーム関連の装飾だけに使う
• 影は必ず黒かグレーのベタ。ぼかした影は使わない
• slider-arrow は文字 #6D6DC6 × 背景 #DEDEDE のコントラスト比が 3.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#5555BD、4.56:1）を使う。
• diagram-card は文字 #6D6DC6 × 背景 #DEDEDE のコントラスト比が 3.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#5555BD、4.56:1）を使う。

Typography

• 英字ラベルは斜体の極太にし、下に細い線を引く
• 和文はすべて太字。細いウェイトは使わない
• 物語調のリードは中央揃えにし、1行を短く区切って行間を広く取る
• FVのリード文字には暗い紫の縁取り（テキスト影）を付けて読ませる
• ゲーム用ボタンは英字の斜体極太で大きく見せる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードは横スワイプのカルーセル
• 本文ブロックの幅: 画面幅の約 87%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• 中央に幅約94%の紙面を置き、左右の外側は幾何学柄の背景を見せる
• セクションの最初は英字ラベル→和文見出しの順で中央に置く
• カード・ボタンは左右に約20pxの余白を取る
• キャラ紹介はイラストと文を左右交互にジグザグで並べる
• 目次は丸い矢印アイコン＋英字小見出し＋和文名を縦に並べる

Elevation & Depth

• カード・ボタンは右下へ約6px、ぼかしなしの黒（グレー）影でずらす
• 丸い矢印ボタンにも黒の三日月状の影を付ける
• 動画の枠には小さな黒影を付ける
• グラデーション影やぼかし影は使わない

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 製品は切り抜き写真をそのまま並べる。キャラは輪郭線付きのイラストを切り抜いて使う
• セクション境界: FVの下は大きな弧の帯で波打たせる。それ以降は直線で地の色を切り替える
• 主ボタンは太い黒の輪郭線が付いたピル型
• カードは角丸10px程度
• スライダーの矢印は円形ボタン
• 色見本の丸は輪郭線付きの円にする

Components

• 主ボタン（button-primary）: 藍紫のピル型。太い黒の輪郭線と右下への黒影を付け、末尾に▶を置く
• 反転ボタン（button-game）: 暗い地の上に置く白いピル型。藍紫の斜体英字で大きく書く
• 英字ラベル見出し（section-label）: 斜体極太の英字に下線を引き、その下に大きな和文見出しを置く
• 目次リンク（menu-item）: 白い円に紫の▶と黒影。右に英字の小見出しと和文名を並べる
• 機能カード（feature-card）: 紫の角丸カードにアイコン、英字名、図解、見出し、本文、注釈を入れる。グレーのずらし影を付けてカルーセルで見せる
• スライド矢印（slider-arrow）: 円形のグレーボタンに紫の三角。現在の側は黒い影
• 部位図解カード（diagram-card）: グレーのカードに斜めの製品を置き、円と引き出し線で部位の説明を付ける
• 仕様表（spec-table）: 項目名と値の2列。行ごとに細い紫の線で区切る
• 色見本（color-chip）: 輪郭線付きの小さな丸を5色並べ、製品の下に色の帯と色名を付ける

Do's and Don'ts

Do - 影は右下へ、ぼかしなしの黒でずらして付ける - 紫の2トーンを地の主役にし、差し色はキャラだけに使う - 英字ラベルは斜体の極太にして勢いを出す - キャラを各所に配置し、動きのあるポーズで見せる - 文字はすべて太字にしてポップに見せる

Don't - 細い明朝体や細いウェイトを使わない - ぼかし影やグラデーションを入れない - 黒い本文を白地に置かない（文字は紫で統一する） - 黄や赤を大きな背景面に使わない - 写真の背景を使わない（切り抜きかフラットな面にする）

Page Structure

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

1. ファーストビュー（商品とキャラの世界観を一目で伝える）: 紫の面に、飛び跳ねるキャラ、極太英字ロゴ、短いコピー、全色の製品を並べる。外側には幾何学柄
2. ストーリーリード（利用シーンへの共感をつくる）: 藍紫の大きな弧の帯の上に、白抜きの短文を中央揃えで改行多めに置く
3. 目次（各セクションへ誘導する）: 紫地に英字ラベルと、丸矢印付きのリンクを4つ縦に並べる
4. 機能紹介（3つの機能を説明する）: 白地に見出しとアイコン3つ。紫のカードを横カルーセルで並べ、下に円形矢印
5. 部位図解（構造の特徴を見せる）: グレーのカードに斜めの製品を置き、引き出し線で注記する
6. カラーバリエーション（色の選択肢を見せる）: 紫地に色の丸、製品のクリップ部分、色の帯と色名を並べる
7. 製品情報（仕様を示して詳細ページへ送る）: グレー地に横向きの製品、2列の仕様表、藍紫のピル型ボタン
8. 特別コンテンツ（ゲームで遊んでもらう）: 藍紫地に立体ロゴ、動画、白い説明文、白い大きなボタン
9. キャラクター紹介（キャラへの愛着をつくる）: 星形の背景に全身キャラと大きな赤ロゴ。プロフィールをジグザグに並べ、ポーズや表情を一覧にする
10. フッター（ページ上部へ戻す）: 小さなキャラと斜体の英字の戻るリンク、淡い紫のコピーライト

Imagery

• キャラは太い黒の輪郭線とフラットな塗りで描く、1930年代ラバーホース調のカートゥーン
• キャラは大きなスニーカー、白い手袋、帽子姿で、走る・跳ぶ・ぶら下がるなど動きのあるポーズ
• 製品は影の少ない切り抜きCGで、色違いを等間隔に並べる
• 機能の説明は線画とピンク系の差し色を使った簡潔な図解
• ゲームロゴは赤い文字に黒・黄・水色の多重縁取りを付けたコミック調
• 背景には黄・水色・紫の円や帯の幾何学柄を使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では中央に SP 幅（約480px）の紙面を固定し、左右に幾何学柄の背景を広げるのを推奨
• カルーセルは PC で 2〜3 枚を同時に見せてもよい
• キャラ紹介のジグザグは PC で左右の余白を広げる
• 見出しは PC で 1.3 倍程度にし、ボタン幅は最大400pxに抑える

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 行書くと起動時に読み込まれる。