DESIGN.md — 深紅×黒の斜め分割キャラクタードール LP（Crimson and Black Diagonal Collectible Doll LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: 力強い・インパクト、ラグジュアリー・ダーク、クール・先進的、情報量多め・訴求型
• キーワード: 深紅・黒・斜めカット・ヒーロー・コレクター向け・予約販売
• 地の質感: 黒地に大きな欧文ロゴを透かしで敷き、写真と斜めの赤い面を重ねた立体的な質感
• 形: 斜め45度前後の三角形・平行四辺形で面を区切る。カードは角丸を小さくした白い箱
• 温度感: 熱い赤と冷たい黒のコントラストで、熱量が高く引き締まった印象

Colors

• 地は黒→深紅→黒→深紅と大きく交互に切り替える
• 赤い斜め面を黒地に差し込み、セクション境界にも使う
• 販売条件などの読ませる情報は白カードに載せる
• 日付・価格・重要語は赤文字、ポイント特典は黄色で強調
• 黒地の本文は白、注釈はグレーで階層を付ける
• 購入ボタンは赤と黄の 2 色で支払い方法を区別する

Typography

• 見出しの頭文字 1 字を赤で大きくする
• 見出しの左右に細い横線を伸ばす
• キャラクターのセリフは縦書きで黒帯の白抜き文字にする
• 日付は数字を大きく、曜日は丸括弧で小さくする
• 斜体の極太書体は商品名と発売日だけに使う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム（PC はテキストと写真の 2 カラム、パーツ写真は 2〜3 列）
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 写真は画面幅いっぱいに置き、文字ブロックを重ねる
• 斜めの面で写真とテキストの領域を区切る
• 販売方法は同じ型のカードを並べる
• ディテール写真は正方形タイルの格子にする
• スペック表はラベルの黒地セルと値の白地セルで組む

Elevation & Depth

• カードは影なしのフラットで、背景との色差で浮かせる
• 写真の上の文字帯は黒の半透明か黒ベタにする
• 白カードにごく薄い影を付けてもよい

Shapes

• 角丸: 小 2px ／ 中 6px ／ 大 10px。ボタンは角丸の長方形。
• 写真の切り抜き: 人形写真は角版または斜めのマスクで切り抜く。パーツ写真は正方形
• セクション境界: 斜めの直線や三角形（下向き V 字を含む）で切り替える
• 曲線は使わず直線と鋭角でまとめる
• ボタンは小さい角丸の長方形にし、右に矢印を付ける
• 見出しの前に赤い斜線を置く

Components

• 購入ボタン（button-primary）: 赤地に白文字の角丸長方形。上に商品名を小さく、右に矢印
• 分割払いボタン（button-secondary）: 黄地に黒文字で、もう一つの支払い方法を示すボタン
• 下部固定購入バー（sticky-cta-bar）: 黒帯に発売日と 2 つの購入ボタンを並べる
• 頭文字赤見出し（section-heading）: 頭文字を赤で大きくし、中央揃えで左右に細線を伸ばす
• 縦書きセリフ帯（vertical-quote）: 写真の端に置く黒帯の縦書き白文字
• 黒帯コピー（black-copy-tag）: 特長の短い言葉を 4 本、階段状にずらして並べる
• 販売方法カード（sales-card）: 白カードの上部に赤帯の見出し。期間・決済方法をラベル付きの行で並べる
• 発売日バッジ（release-badge）: 黒の箱に英字の発売表記と大きな日付、下に赤帯
• ディテール写真タイル（detail-tile）: 正方形の写真の下に、黒帯のラベルと＋アイコン
• スペック表（spec-table）: 黒地のラベルセルと白地の値セル。細線で区切る

Do's and Don'ts

Do - 赤と黒の斜めの面を、どのセクションにも必ず入れる - 人形は大きく高精細に見せ、顔のアップを入れる - 販売の日付と価格は赤の太字で目立たせる - 黒地に大きな欧文の名前を透かしで敷く - 発売日と予約受付の告知は FV と最下部の両方に置く

Don't - パステルや丸っこい装飾は使わない - ボタンをピル型にしない - 赤と黒以外の色を地の色にしない（黄色は特典の強調だけ） - 情報カードの中に写真を詰め込みすぎない - 斜めの面を曲線や波線に置き換えない

Page Structure

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

1. ファーストビュー（商品とキャラクターの世界観を一目で伝える）: 人形写真のスライダーに赤い斜めの面を重ね、左下に斜体のロゴ、右に発売日バッジと縦書きのセリフを置く
2. お知らせ（最新情報を告知する）: 赤いラベル付きの白い枠に、日付と 1 行ずつのニュースを並べる
3. 導入（商品の背景と魅力を説明する）: 白地にキャラクターのイラストと、赤字の強調を入れたキャッチと本文。左に赤い斜めの面
4. 質感訴求（人形ならではの美しさを伝える）: 顔アップの写真を斜めに分割し、黒帯の短いコピーを 4 本置く。下に商品ジャンルの説明枠
5. ディテール（造形・衣装の作り込みを見せる）: 黒地に頭文字赤の見出し、本文と全身写真、パーツ写真の正方形格子
6. 取り扱い注意（購入前の注意を伝える）: 濃いグレーの枠に箇条書きと、取扱説明書へのボタン
7. 販売情報（予約方法と期間を伝える）: 深紅の地に透かしロゴ、黒帯の限定ラベル、白カード 2 枚、お届け時期の帯
8. 分割払いの案内（支払いの選択肢を説明する）: 白い大きなカードに条件の文章と、流れを示すフローチャート。ポイント特典を黒帯と黄色で強調
9. 注意事項（送料・キャンセル条件を伝える）: 左が黒ラベル、右が淡い黄色の箱の 2 分割
10. 展示情報（実物を見られる場所を案内する）: 2 体並んだ写真に黄色の斜体コピー、黒地にイベントと店舗の情報ブロック、右に写真の縦列
11. エモーショナル写真（購入前に世界観を印象付ける）: 全幅の写真に縦書きのセリフ帯。下端は赤の斜め面
12. 商品概要・CTA（スペックと価格をまとめて購入へ誘導する）: 赤地に全身写真と白いスペック表、下部に黒帯の固定購入バー
13. フッター（コラボ元と権利表記）: 黒地にロゴを並べ、小さな権利表記と SNS リンク

Imagery

• 暗い背景で撮った人形写真。リムライトで髪と肌の質感を出す
• 顔・手・衣装の質感が分かるクローズアップを多くする
• パーツは単品の正方形写真にそろえる
• アニメ調の全身イラストを導入に添える
• 背景に赤く色付けしたビル群のシルエットや斜めの網点を敷く
• 名前の欧文を大きく斜めに透かし配置する
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP は 1 カラムにして、写真を全幅、テキストを写真の下に置く
• SP では販売方法カード 2 枚を縦に積む
• パーツ写真の格子は SP で 2 列にする
• 縦書きのセリフ帯は SP でも写真の端に残し、文字を小さくする
• SP では購入バーを画面下に固定し、ボタン 2 つを横に並べる
• 斜めの面は SP では角度をゆるくして、文字に被らないようにする

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