---
version: alpha
name: Gold Diamond Pattern Dramatic Anime Game LP
description: 金色の菱形模様を地に、黒に近い濃い紫の帯を斜めに入れたスマホゲームの LP。劇画調のキャラクターイラスト、大きな欧文セリフの見出し、ネオンマゼンタの矢印で、熱量と重厚感を出している。
colors:
  primary: '#1B0619'
  background: '#F3DB79'
  background-alt: '#A18243'
  surface: '#FFFADD'
  secondary: '#DCB244'
  accent-1: '#E040C8'
  on-primary: '#FEF5BA'
  cta: '#020202'
  on-cta: '#FBFBFB'
  text: '#1A0515'
  surface-dark-placeholder: '#735D35'
  accent-2: '#B99863'
  on-dark: '#FFFFFF'
typography:
  display:
    fontFamily: Cinzel
    fontSize: 48px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: Yuji Syuku
    fontSize: 34px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0.02em
  headline-md:
    fontFamily: Shippori Mincho B1
    fontSize: 28px
    fontWeight: 800
    lineHeight: 1.3
    letterSpacing: 0.02em
  headline-sm:
    fontFamily: Noto Serif JP
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: 0.05em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.7
    letterSpacing: 0.02em
  label-button:
    fontFamily: Montserrat
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0.15em
  note:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 500
    lineHeight: 1.6
    letterSpacing: 0.05em
rounded:
  sm: 0px
  md: 4px
  lg: 8px
  full: 999px
spacing:
  unit: 8px
  card: 16px
  section: 80px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  button-primary:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.label-button}'
    height: 40px
  store-badge:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.md}'
    height: 48px
  section-title:
    textColor: '{colors.primary}'
    typography: '{typography.display}'
    height: 90px
  news-row:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 30px
  ornament-frame:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    height: 200px
  diamond-thumb:
    backgroundColor: '{colors.primary}'
    height: 110px
  banner-stripe:
    backgroundColor: '{colors.primary}'
    height: 180px
  info-panel:
    textColor: '{colors.on-dark}'
    typography: '{typography.body-md}'
    height: 210px
  fixed-footer-cta:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-lg}'
    height: 60px
---

# DESIGN.md — 金菱柄×濃紫の劇画調アニメゲーム LP（Gold Diamond Pattern Dramatic Anime Game LP）

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

## Overview

- **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: 力強い・インパクト、ラグジュアリー・ダーク、情報量多め・訴求型
- **キーワード**: 金の菱形パターン・濃紫の斜め帯・劇画調イラスト・欧文セリフ見出し・ネオンマゼンタ矢印・擬音の装飾文字
- **地の質感**: 菱形を並べた金のパターンに、紙のような汚しと縦の帯状の明暗を重ねる。ベタ塗りの平面は使わない。
- **形**: 斜めの帯、菱形のサムネイル、刃物のような白い筆の払い、アンティーク調の飾り罫で囲んだ額縁。
- **温度感**: 暖色の金に冷たい濃紫を合わせ、コントラストを強くした熱い印象。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#1B0619` | 濃紫の帯・ボタン・見出しの文字 | 22% | 画素の実測 |
| `background` | `#F3DB79` | 明るい金の菱形柄の地 | 20% | 画素の主要色に補正 |
| `background-alt` | `#A18243` | くすんだ金茶の菱形柄の地 | 18% | 画素の実測 |
| `surface` | `#FFFADD` | ニュース一覧の行の地（クリーム色） | 3% | 画素の実測 |
| `secondary` | `#DCB244` | 濃い金（ボタンの影・飾り罫） | 6% | 画素の実測 |
| `accent-1` | `#E040C8` | ネオンマゼンタの矢印・下線帯 | 1% | 推定 |
| `on-primary` | `#FEF5BA` | 濃紫のボタン上の金色の欧文 | 1% | 画素の実測 |
| `cta` | `#020202` | ストアのダウンロードボタン | 1% | 画素の実測 |
| `on-cta` | `#FBFBFB` | ストアボタンの白い文字 | 0% | 画素の実測 |
| `text` | `#1A0515` | 本文・ニュース見出しの濃い文字 | 1% | 画素の主要色に補正 |
| `surface-dark-placeholder` | `#735D35` |  | 3% | 画素の実測 |
| `accent-2` | `#B99863` | フッターのリンク・コピーライトの金茶の文字 | 1% | 画素の主要色に補正 |
| `on-dark` | `#FFFFFF` | 濃紫・暗色面の上の白い文字 | 1% | 推定 |

- 地は明るい金と金茶の菱形柄を交互に使い、セクションの区切りを色で示す。
- 濃紫は斜めの帯、ボタン、見出しの文字、フッターに使い、全体を引き締める。
- マゼンタは矢印と見出しの下線帯だけに使う。
- ストアボタンは公式の黒×白のままにする。
- 情報パネルは半透明の暗い茶色の面にし、文字は金と白にする。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | セクション見出しの欧文（頭文字を特大にする） | 欧文セリフ | Cinzel | 600 | 48px | 1.0 | 0.02em |
| `headline-lg` | 筆文字風のキャッチコピー | 手書き・筆 | Yuji Syuku | 700 | 34px | 1.3 | 0.02em |
| `headline-md` | 劇画調の配信告知（太い明朝） | 明朝 | Shippori Mincho B1 | 800 | 28px | 1.3 | 0.02em |
| `headline-sm` | 欧文見出しの下に添える和文の小見出し | 明朝 | Noto Serif JP | 600 | 14px | 1.3 | 0.05em |
| `body-md` | キャラクター説明・ニュース本文 | ゴシック | Noto Sans JP | 700 | 12px | 1.7 | 0.02em |
| `label-button` | MORE などのボタンの欧文ラベル | 欧文サンセリフ | Montserrat | 700 | 15px | 1.0 | 0.15em |
| `note` | 日付・注釈・コピーライト | ゴシック | Noto Sans JP | 500 | 10px | 1.6 | 0.05em |

- 欧文見出しは頭文字を 2 倍ほどにし、残りの字に和文の小見出しを重ねる。
- キャッチは筆文字か太い明朝にし、斜めに傾けて劇画らしさを出す。
- 本文は太めのゴシックにし、暗い面の上では白で書く。
- ボタンの欧文は字間を広く取り、金色で書く。
- 擬音の装飾文字は大きく半透明にして背景に置く。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム（ギャラリーのサムネイルは 3 列）
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
- セクションの境は斜めの帯か背景の切り替えで区切る。
- 欧文見出しは左右に寄せ、刃のような白い筆の払いと重ねる。
- ボタンは中央に置き、幅は 75% ほどにする。
- キャラクター紹介は大きな立ち絵に縦書きの名前と説明文を重ねる。

## Elevation & Depth

- ボタンは濃紫の面の右下に金色の影をずらして重ねる（ぼかさない）。
- 動画や埋め込みの枠はアンティーク調の飾り罫で額縁にする。
- ソフトな影は使わず、平面を重ねて奥行きを出す。

## Shapes

- **角丸**: 小 0px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
- **写真の切り抜き**: キャラクターのサムネイルは菱形に、ギャラリーは枠付きの長方形に切り抜く。立ち絵は切り抜いて重ねる。
- **セクション境界**: 斜めの直線で切り替える。濃紫の帯を斜めに通す。
- 角丸はほぼ使わず、角を立てる。
- 選択中のサムネイルはマゼンタの枠で示す。
- SNS 共有ボタンだけ円形にする。

## Components

- **欧文ラベルのボタン**（`button-primary`）: 濃紫の長方形に金色の欧文を置き、右にマゼンタの矢印を付ける。金色の影をずらして重ねる。
- **ストアのダウンロードボタン**（`store-badge`）: 黒の角丸ボタンにストアのロゴを入れ、2 つを横に並べる。
- **欧文セリフの見出し**（`section-title`）: 頭文字を特大にし、和文の小見出しを添えて、白い筆の払いを重ねる。
- **ニュースの行**（`news-row`）: 日付を上に置き、クリーム色の帯に 1 行の見出しを入れる。下の縁はギザギザにする。
- **飾り罫の額縁**（`ornament-frame`）: 動画や埋め込みを、金の細線とアンティーク調の角飾りで囲む。
- **菱形のキャラクター選択**（`diamond-thumb`）: 顔のアップを菱形に切り抜き、濃紫の斜めの帯に沿って並べる。
- **斜めの帯のバナー**（`banner-stripe`）: 傾けた濃紫の帯の上に、告知バナーを横スクロールで並べる。
- **アプリ情報のパネル**（`info-panel`）: 半透明の暗い茶色の面に、金色の項目名と白い値を縦に並べる。
- **下部に固定する CTA**（`fixed-footer-cta`）: 筆文字の配信告知とストアボタンを、画面下に固定して並べる。

## Do's and Don'ts

**Do**
- 金の菱形柄と濃紫の 2 色を軸に、強いコントラストを保つ。
- セクションの境は斜めにして、動きを出す。
- 見出しは欧文セリフと和文の小見出しを組み合わせる。
- 擬音の装飾文字や筆の払いを背景に散らす。
- CTA はファーストビューの直後とページ下部の固定バーに置く。

**Don't**
- 淡いパステル色や柔らかい丸ゴシックを使わない。
- ピル型のボタンやぼかした影を使わない。
- 背景を単色のベタ塗りにしない。
- マゼンタを広い面に使わない。
- 整然とした水平のグリッドだけで組まない。

## Page Structure

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

1. **ファーストビュー**（作品の世界観と主要キャラを一目で伝える）: 集合のキービジュアルの下にタイトルロゴを重ねる。左上に告知バッジ、右上にメニューを置く。
2. **キャッチと動画**（感情に訴え、PV へ誘導する）: 濃紫の地に斜めの筆文字キャッチを置き、額縁付きの動画サムネイルを続ける。
3. **配信告知とダウンロード**（インストールを促す）: 金の地に太い明朝の告知とマゼンタの下線帯を置き、ストアボタンを 2 つ並べる。
4. **告知バナー**（キャンペーンや実績を見せる）: 斜めの濃紫の帯の上に、バナーを横スクロールで並べる。
5. **ニュース**（最新情報を伝える）: 欧文見出しの下にクリーム色の帯を 3 行並べ、MORE ボタンを置く。
6. **公式 SNS**（フォローを促す）: 額縁で囲んだ埋め込み、大きなロゴと明朝の見出し、FOLLOW ボタンを並べる。
7. **キャラクター紹介**（キャラクターの魅力を伝える）: 立ち絵に縦書きの名前と暗い面の説明文を重ね、菱形のサムネイルで切り替える。
8. **ギャラリー**（ゲーム画面を見せる）: 額縁付きの大きな画面の下に、3 列 2 段のサムネイルと注釈を置く。
9. **アプリ情報**（基本情報をまとめる）: 飾り罫で挟み、アイコンと半透明のパネルに項目を縦に並べる。
10. **フッター**（規約やリンク、権利表記を載せる）: 斜めの境から濃紫の地にし、円形の共有ボタン、矢印付きのリンク、コピーライトを置く。下部に CTA を固定する。

## Imagery

- キャラクターは劇画調で太い主線と強い陰影で描き、ポーズは迫力を出す。
- 金の菱形パターンに紙の汚しと縦の帯状の明暗を重ねる。
- 白い刃や筆の払いのような曲線を、見出しの後ろに置く。
- カタカナの擬音を立体的な半透明の文字で斜めに配置する。
- 背景に集中線や星のシルエットを使って、熱量を出す。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC は中央寄せの横長のレイアウトにし、キービジュアルを全幅で見せる。
- PC は動画と配信告知を横に並べる。
- PC はニュースと SNS の埋め込みを左右に振り分ける。
- 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-aaff916d`（元 LP の URL から採番）
- **元 LP**: https://jojo-oradora.com/
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（8/13 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。