--- version: alpha name: Crimson and Black Diagonal Collectible Doll LP description: 深紅と黒を斜めの面で切り分けた、アニメ系コレクタブル商品の予約販売 LP。大きな人形写真、縦書きのセリフ帯、白い情報カードを組み合わせ、ヒーローものらしい勢いと高級感を両立させている。 colors: primary: '#930312' secondary: '#CA1B25' dark-section: '#131313' background: '#FEFEFE' background-alt: '#313131' tint-1: '#FFEEC2' tint-2: '#FEE6A3' accent-1: '#F5D10A' cta: '#C8202E' on-cta: '#FFFFFF' text: '#141414' on-dark: '#FFFFFF' accent-2: '#D02030' line: '#9F8F83' typography: display: fontFamily: Dela Gothic One fontSize: 36px fontWeight: 400 lineHeight: 1.2 headline-lg: fontFamily: Noto Sans JP fontSize: 26px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.05em headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.15em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Montserrat fontSize: 40px fontWeight: 800 lineHeight: 1.0 label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em rounded: sm: 2px md: 6px lg: 10px full: 999px spacing: unit: 8px card: 16px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' 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.sm}' height: 52px button-secondary: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 52px sticky-cta-bar: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' height: 72px section-heading: textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 56px vertical-quote: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 200px black-copy-tag: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 32px sales-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 260px release-badge: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.display}' height: 90px detail-tile: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.note}' height: 110px spec-table: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 240px --- # DESIGN.md — 深紅×黒の斜め分割キャラクタードール LP（Crimson and Black Diagonal Collectible Doll LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: 力強い・インパクト、ラグジュアリー・ダーク、クール・先進的、情報量多め・訴求型 - **キーワード**: 深紅・黒・斜めカット・ヒーロー・コレクター向け・予約販売 - **地の質感**: 黒地に大きな欧文ロゴを透かしで敷き、写真と斜めの赤い面を重ねた立体的な質感 - **形**: 斜め45度前後の三角形・平行四辺形で面を区切る。カードは角丸を小さくした白い箱 - **温度感**: 熱い赤と冷たい黒のコントラストで、熱量が高く引き締まった印象 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#930312` | ブランドの深紅（販売情報セクションの地・斜めの面） | 15% | 画素の実測 | | `secondary` | `#CA1B25` | 明るい赤（FV の斜め面・カード見出し帯） | 6% | 画素の実測 | | `dark-section` | `#131313` | 黒の主セクション地 | 25% | 画素の実測 | | `background` | `#FEFEFE` | 白地（導入文・カード内） | 13% | 画素の実測 | | `background-alt` | `#313131` | 濃いグレーの注意書き枠 | 6% | 画素の実測 | | `tint-1` | `#FFEEC2` | 生成りベージュの斜め面 | 2% | 画素の実測 | | `tint-2` | `#FEE6A3` | 注意事項ボックスの淡い黄色 | 1% | 画素の実測 | | `accent-1` | `#F5D10A` | ポイント・期間限定の黄色強調 | 1% | 推定 | | `cta` | `#C8202E` | 購入ボタンの赤 | 1% | 推定 | | `on-cta` | `#FFFFFF` | ボタン上の文字 | 0% | 画素の主要色に補正 | | `text` | `#141414` | 白地上の見出し・本文 | 2% | 画素の主要色に補正 | | `on-dark` | `#FFFFFF` | 黒地上の白文字 | 2% | 画素の主要色に補正 | | `accent-2` | `#D02030` | 見出し・日付の赤文字強調 | 0% | 推定 | | `line` | `#9F8F83` | 表・枠の細線 | 0% | 画素の主要色に補正 | - 地は黒→深紅→黒→深紅と大きく交互に切り替える - 赤い斜め面を黒地に差し込み、セクション境界にも使う - 販売条件などの読ませる情報は白カードに載せる - 日付・価格・重要語は赤文字、ポイント特典は黄色で強調 - 黒地の本文は白、注釈はグレーで階層を付ける - 購入ボタンは赤と黄の 2 色で支払い方法を区別する ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 商品名・発売日などの大見出し（斜体の太字） | 装飾・ディスプレイ | Dela Gothic One | 400 | 36px | 1.2 | 0.0em | | `headline-lg` | セクション見出し（頭文字だけ赤で大きく） | ゴシック | Noto Sans JP | 900 | 26px | 1.3 | 0.05em | | `headline-md` | 導入のキャッチ・カード見出し | ゴシック | Noto Sans JP | 700 | 20px | 1.5 | 0.05em | | `headline-sm` | 黒帯の白抜きコピー・小見出し | ゴシック | Zen Kaku Gothic New | 700 | 16px | 1.5 | 0.15em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.03em | | `note` | 注釈・※書き | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.0em | | `accent` | 英字の日付・透かしロゴ | 欧文サンセリフ | Montserrat | 800 | 40px | 1.0 | 0.0em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.3 | 0.05em | - 見出しの頭文字 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 ```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-c6586225`（元 LP の URL から採番） - **元 LP**: https://dolk.jp/pages/tigerandbunny2/barnabydoll/?BnrSiteType=0 - **解析に使った画像**: PC（PC版） - **確度**: 色 高（7/14 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。