---
version: alpha
name: Dark Mystic Gold Fortune Telling LP
description: 星空のような漆黒の背景に金色の額縁と明朝体を重ねた、神秘的で豪華な占い診断LP。紫のファーストビューにカードを配置してインタラクティブ診断に誘導する。金地に赤文字の大型CTAを何度も繰り返す訴求型の構成。
colors:
  background: '#010101'
  primary: '#DCC68A'
  dark-section: '#240C2A'
  cta: '#F1D493'
  on-cta: '#B0182A'
  secondary: '#6A1A22'
  accent-1: '#022334'
  accent-2: '#3F3F36'
  on-dark: '#F2EEE6'
  accent-3: '#F5D86A'
  surface: '#182026'
  line: '#B49A5A'
  background-alt: '#4A3A22'
typography:
  display:
    fontFamily: Shippori Mincho
    fontSize: 44px
    fontWeight: 800
    lineHeight: 1.2
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: Noto Serif JP
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.04em
  headline-md:
    fontFamily: Shippori Mincho B1
    fontSize: 28px
    fontWeight: 800
    lineHeight: 1.2
    letterSpacing: 0.02em
  headline-sm:
    fontFamily: Noto Serif JP
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.02em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.7
    letterSpacing: 0.02em
  accent:
    fontFamily: Cinzel
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0.08em
  label-button:
    fontFamily: Cinzel
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.1em
  note:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.02em
rounded:
  sm: 2px
  md: 4px
  lg: 6px
  full: 999px
spacing:
  unit: 8px
  card: 12px
  section: 48px
components:
  page:
    backgroundColor: '{colors.background}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.primary}'
    typography: '{typography.headline-lg}'
  button-cta-gold:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.sm}'
    height: 84px
  button-stop:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.label-button}'
    rounded: '{rounded.sm}'
    height: 28px
  frame-gold:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.body-md}'
  heading-flare:
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-lg}'
    height: 60px
  card-category:
    backgroundColor: '{colors.accent-1}'
    textColor: '{colors.on-dark}'
    typography: '{typography.body-md}'
    height: 120px
  badge-number:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.note}'
    height: 14px
  voice-bubble:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.on-dark}'
    typography: '{typography.body-md}'
    rounded: '{rounded.md}'
    height: 90px
  emblem-shield:
    backgroundColor: '{colors.accent-1}'
    textColor: '{colors.on-dark}'
    typography: '{typography.body-md}'
    height: 160px
---

# DESIGN.md — 漆黒×金装飾の神秘系占い診断LP（Dark Mystic Gold Fortune Telling LP）

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

## Overview

- **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ラグジュアリー・ダーク、情報量多め・訴求型、力強い・インパクト
- **キーワード**: 漆黒・金箔・星空・タロットカード・装飾額縁・神秘
- **地の質感**: 細かい星屑ノイズの黒背景。金はメタリックなグラデーションと光沢。
- **形**: 四隅に飾りが付いた金の額縁、盾形のエンブレム、縦長カード、下向きの太い矢印
- **温度感**: 暗く温かい。黒・深紫・ワインレッドに金を合わせる

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `background` | `#010101` | 星空風の漆黒のページ背景 | 60% | 画素の実測 |
| `primary` | `#DCC68A` | 金の装飾・額縁・見出し文字 | 7% | 画素の主要色に補正 |
| `dark-section` | `#240C2A` | ファーストビューの深紫の面 | 10% | 画素の実測 |
| `cta` | `#F1D493` | CTAボタンの金色の地 | 3% | 画素の実測 |
| `on-cta` | `#B0182A` | CTAボタン上の深紅の大きな文字 | 1% | 推定 |
| `secondary` | `#6A1A22` | カテゴリの見出し帯や矢印のワインレッド | 3% | 推定 |
| `accent-1` | `#022334` | カテゴリカードの濃紺の地 | 2% | 画素の実測 |
| `accent-2` | `#3F3F36` | カテゴリカードの暗いオリーブ色の地 | 2% | 画素の主要色に補正 |
| `on-dark` | `#F2EEE6` | 黒地に置く白い本文 | 2% | 推定 |
| `accent-3` | `#F5D86A` | 強調したい語句の黄色 | 0% | 推定 |
| `surface` | `#182026` | お客様の声の吹き出しの暗いグレー | 3% | 画素の主要色に補正 |
| `line` | `#B49A5A` | 金の細い罫線と額縁の線 | 1% | 推定 |
| `background-alt` | `#4A3A22` | フッターの帯のブロンズ色 | 1% | 推定 |

- 地は全体を黒にし、ファーストビューだけ深紫のグラデーションにする
- 装飾・見出し・額縁は金色に統一し、メタリックなグラデーションをかける
- CTAは金地に深紅の極太文字にして、ページ中で一番目立たせる
- 診断カテゴリのカードは紺・ワイン・オリーブ・金茶で塗り分け、見出し帯を金にする
- 本文は白にし、キーワードだけ黄色にする
- 赤は矢印・期限バッジ・CTAの文字に限って使う

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | ファーストビューのロゴ風タイトル（金のメタリック） | 明朝 | Shippori Mincho | 800 | 44px | 1.2 | 0.02em |
| `headline-lg` | セクション見出し（金または白、光の装飾付き） | 明朝 | Noto Serif JP | 700 | 22px | 1.4 | 0.04em |
| `headline-md` | CTA内の大見出し（深紅の極太） | 明朝 | Shippori Mincho B1 | 800 | 28px | 1.2 | 0.02em |
| `headline-sm` | カテゴリカードの見出し | 明朝 | Noto Serif JP | 700 | 15px | 1.4 | 0.02em |
| `body-md` | 説明文やお客様の声の本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.7 | 0.02em |
| `accent` | 英字の小見出しや飾り文字 | 欧文セリフ | Cinzel | 400 | 11px | 1.3 | 0.08em |
| `label-button` | STOPボタンなどの小さいボタン | 欧文セリフ | Cinzel | 700 | 15px | 1.2 | 0.1em |
| `note` | フッターのリンクとコピーライト | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.02em |

- 見出しは明朝体にして、格式と神秘性を出す
- 金の見出しには上から下へのメタリックグラデーションと光彩をつける
- 本文は白のゴシック体を中央揃えにする
- キャッチの中で強調する語は字を大きくするか、黄色・金色にする
- 小さな英字のセリフ体を和文見出しに添える
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。診断カテゴリのカードは SP では 1 列か 2 列にする
- **本文ブロックの幅**: 画面幅の約 90%
- **余白**: セクション間 48px、基本単位 8px、カード内 12px（375px 幅換算）
- 中身はすべて中央揃えにする
- 主要なブロックは金の額縁で囲む
- CTAはセクション2〜3つごとに同じデザインで繰り返す
- お客様の声は人物カードと吹き出しを左右交互に置く
- 最後のCTAの前に下向きの赤い矢印を置く

## Elevation & Depth

- 金の額縁やカードには外側に淡い金の光彩をつける
- 見出しの背後に星の光のようなフレアを置く
- CTAには金の縁取りと下側に軽いドロップシャドウをつける
- カードには落ち着いた暗い影をつけて浮かせる

## Shapes

- **角丸**: 小 2px ／ 中 4px ／ 大 6px。ボタンは角丸の長方形。
- **写真の切り抜き**: 縦長のタロットカード型。人物は横顔のシルエットで描く
- **セクション境界**: 直線では区切らず、黒地の余白と金の額縁でブロックを分ける
- 角はほぼ四角にして、金のコーナー装飾で飾る
- エレメントやタロットの説明は盾形のエンブレムに入れる
- 期限バッジは黒い盾形にする
- 矢印は太い下向きの台形にする

## Components

- **金地の大型CTA**（`button-cta-gold`）: 金のメタリック地の左に黒い盾形の期限バッジを置き、右に深紅の極太明朝で診断開始を入れる。下に小さく補足を添える
- **STOPボタン**（`button-stop`）: ワインレッド地に金の縁取りと白いセリフ体の文字を入れた小型ボタン。カードの下に置く
- **金の装飾額縁**（`frame-gold`）: 四隅に飾りのある細い金の枠。ファーストビューと主要なセクションを囲む
- **光る見出し**（`heading-flare`）: 小さなリード文の下に大きな明朝見出しを置き、左右に星の光と横に伸びる光の帯をつける
- **診断カテゴリのカード**（`card-category`）: 見出し帯にNo.番号を入れたタグを付け、その下に箇条書きを4行並べる。地はカードごとに違う色にする
- **番号タグ**（`badge-number`）: 見出し帯の左に付ける赤茶色の小さなNo.タグ
- **お客様の声の吹き出し**（`voice-bubble`）: 暗いグレーの角丸の箱に金の外光をつけ、白文字で感想を入れる。横に金地の人物シルエットカードと年代を添える
- **盾形の説明エンブレム**（`emblem-shield`）: 金で縁取った盾形に紺の地を敷き、見出しと短い説明を入れる。2つの盾の間に×記号を置く

## Do's and Don'ts

**Do**
- 黒地と金装飾をページ全体で一貫させる
- 見出しは明朝体にし、金のグラデーションをかける
- 同じデザインのCTAを3回以上繰り返す
- カードや天体のモチーフで占いの世界観を出す
- 強調語は文字を大きくし、色も変えてメリハリをつける

**Don't**
- 白や明るい背景のセクションを入れない
- パステル調や丸ゴシックを使わない
- 金以外の派手な色をCTAに使わない
- フラットなシンプル装飾にしない
- 本文を左揃えの長文にしない

## Page Structure

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

1. **ファーストビュー**（話題性と無料を打ち出し、その場で診断を始めさせる）: 深紫の地に金のロゴタイトルを置く。額縁の中にリード文、伏せたカード、STOPボタンを入れる
2. **仕組みの紹介**（診断の独自性をビジュアルで伝える）: 光る見出しの下に、カードが変わる前と後を矢印で並べる。帯状の画像に白い縁取り文字を重ねる
3. **2つの要素の融合**（2つの占術を掛け合わせていることを示す）: 盾形のエンブレム2つを×で並べ、その下に中央揃えの白い説明文を置く
4. **CTA**（診断の開始を促す）: 金地に深紅の文字の大型バナーを置き、左に期限バッジを付ける
5. **わかること**（診断の項目を4つ示し、興味を持たせる）: 金の額縁の中に、番号付きのカテゴリカードを2×2で並べる
6. **CTA**（もう一度申し込みを促す）: 上と同じ金のCTAバナーを置く
7. **お客様の声**（体験者の声で信頼を高める）: 光る見出しの下に、吹き出しと人物シルエットカードを左右交互に3件並べる
8. **締めのコピーと最終CTA**（期待感を高めて行動させる）: 大きな金の明朝コピーの下に赤い下向き矢印を置き、最後にCTAを置く
9. **フッター**（規約などへのリンクとコピーライト）: 縦線で区切った小さなリンクを並べ、その下にブロンズの帯でコピーライトを入れる

## Imagery

- 古典絵画風の人物を金の額縁付きタロットカードにする
- 背景に星屑と星座の円盤を薄く透かして入れる
- 人物は金地にクリーム色の横顔シルエットで描く
- 四元素は小さな色付きの円のアイコンで表す
- 光のフレアやレンズの輝きを見出しやカードに添える
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PCは幅約730pxの固定幅を中央に置き、左右は黒地で埋める
- SPではカテゴリカードを1列に並べる
- SPでは盾形エンブレムを縦に積み、×記号を間に入れる
- SPでは声のカードの人物画像を小さくして吹き出しの上に置く
- CTAバナーは画面幅いっぱいに縮め、文字を28px前後にする

## 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-82cde44f`（元 LP の URL から採番）
- **元 LP**: http://s-kiseki.jp/p.php?pr=cxo135&i=25&ac=on
- **解析に使った画像**: PC（PC版）
- **確度**: 色 高（4/13 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-18、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、掲載削除を希望される場合、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。