宇宙背景×青白の模型ホビー商品 LP

Dark Space Mecha Hobby Product LP

濃紺〜黒の星空を背景に、青と白の組立模型の写真を大きく重ねた縦長一枚絵の LP。白い太ゴシックの見出しに青い縦線を添えて特長を並べ、最後に商品情報と青いグラデーションの購入ボタンで締める。

エンタメ・ゲーム・アプリラグジュアリー・ダーク力強い・インパクトクール・先進的SP

ダウンロード

Claude Code なら、プロジェクト直下に置いて CLAUDE.md に @DESIGN.md と書くだけで読み込まれます（ツール別の使い方）。

COLORS

配色

地は濃紺〜黒の宇宙グラデーションを全面に敷き、白い背景面は使わない
文字は白とグレーのみ。強調は大きさと太さでつける
青は機体の色、見出しの縦線、CTA にだけ使う
金色はロゴやシリーズの印に限る
下へ行くほど黒に近づけ、商品情報と CTA を目立たせる

TYPOGRAPHY

書体

display縦書きの欧文大型ロゴ・機体名欧文サンセリフ／ Montserrat 700 ／ 72px ／行間 1.0

あなたの LP を、もっと伝わる形に。Aa 123

headline-lgメインのキャッチ見出しゴシック／ Noto Sans JP 900 ／ 32px ／行間 1.2

あなたの LP を、もっと伝わる形に。Aa 123

accent型番などの細い欧文欧文サンセリフ／ Montserrat 300 ／ 22px ／行間 1.2

あなたの LP を、もっと伝わる形に。Aa 123

headline-md特長ごとの見出しゴシック／ Noto Sans JP 700 ／ 17px ／行間 1.35

あなたの LP を、もっと伝わる形に。Aa 123

body-md特長の補足説明・商品説明ゴシック／ Noto Sans JP 400 ／ 9px ／行間 1.5

あなたの LP を、もっと伝わる形に。Aa 123

note注意書き・画像の注記ゴシック／ Noto Sans JP 400 ／ 8px ／行間 1.4

あなたの LP を、もっと伝わる形に。Aa 123

label-button購入ボタンの文字ゴシック／ Noto Sans JP 700 ／ 15px ／行間 1.2

あなたの LP を、もっと伝わる形に。Aa 123

見出しは極太ゴシックの白にして、暗い背景の上に薄い影をつける
機体名の欧文は画面の左端に縦書きで巨大に置く
補足文はかなり小さくし、見出しとのサイズ差をはっきりつける
型番は細い欧文、商品名は太い和文で組み合わせる

PAGE STRUCTURE

セクション構成

ファーストビュー主役の迫力を一目で伝える下から見上げる巨大な写真と縦書きの欧文名を宇宙背景に置き、左上にシリーズロゴ、右上に作品ロゴを置く
キャッチコピー商品化を告知する全身写真 2 体の横に型番・商品名・感嘆の一文を右寄せで積み、細い罫線とサブコピーを添える
特長1造形の再現度を訴える縦線付きの見出しを 2 行で置く
特長2可動ギミックを説明する構えたポーズの写真の左に見出しと小さな補足文を置く
特長3（付属品）付属フィギュアを紹介する見出しの下にキャラクターイラストと作例写真を並べ、注記をつける
特長4（デカール）付属シールを紹介する水色の台紙写真に拡大ラベルを付け、下に括弧付きのキャプションと注記を置く
商品情報品名・価格・仕様を伝える黒地に左ロゴ、右に品名・価格と小さな説明文を置き、下に注意書きを並べる
CTA購入ページへ誘導する中央に青いグラデーションの横長ボタンを置く

COMPONENTS

部品

縦書きの巨大欧文名 hero-vertical-logo画面左端に白い欧文名を縦書きで置き、写真と重ねる
型番＋商品名キャッチ headline-catch細い欧文の型番、極太の商品名、感嘆の一文を右寄せで積み、下に細い罫線とサブコピーを置く
縦線付き特長見出し feature-heading-bar左に青い縦線を引いた白い太字見出し。下に小さな補足文を添える
付属品の作例写真 inset-photo小さな作例写真や台紙写真を四角いまま並べ、下に注記をつける
拡大ラベル zoom-label写真の左上に置く小さな「＋拡大」タグ
商品情報ブロック product-infoロゴを左に、品名・価格・説明文を右に並べる黒地のブロック
購入ボタン button-primary青いグラデーションの横長ボタン。白い太字で中央寄せ

守ること

背景は星空風の濃紺グラデーションで統一する
主役の写真は画面からはみ出すくらい大きく、斜めのアングルで見せる
見出しは白の極太文字にして影をつける
特長は短い見出しと小さな補足文の 2 段で書く
CTA はページの最後に 1 つだけ、青く光るボタンで置く

DON'T

避けること

白や明るい色の背景面を使わない
暖色やポップな色を強調色にしない
角丸カードやイラスト調の装飾を入れない
丸ゴシックや手書き風の書体を使わない
写真を小さく並べるだけのカタログ調にしない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — 宇宙背景×青白の模型ホビー商品 LP（Dark Space Mecha Hobby Product LP）

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

Overview

業種: エンタメ・ゲーム・アプリ／ 雰囲気: ラグジュアリー・ダーク、力強い・インパクト、クール・先進的
キーワード: 星空・濃紺・メカ・白抜き太字・縦長一枚絵・迫力
地の質感: 星が散る宇宙空間のグラデーション背景。光沢のある模型写真を重ねる
形: 直線主体。見出しの左に縦線、ボタンだけ少し角丸
温度感: 寒色で、冷たくクールな印象

Colors

Token	HEX	役割	面積の目安	値の出どころ
`background`	`#0B0C1C`	宇宙背景の濃紺	45%	画素の実測
`dark-section`	`#000000`	下部の黒い商品情報エリア	12%	画素の実測
`primary`	`#2C3E7A`	機体の青・ブランド青	7%	画素の実測
`secondary`	`#293354`	中間の紺色	7%	画素の主要色に補正
`text`	`#F1F4FA`	白抜きの見出し文字	2%	画素の実測
`text-body`	`#C4C7D0`	補足本文の薄いグレー	1%	画素の実測
`text-muted`	`#AAA8A7`	注釈のグレー	0%	画素の主要色に補正
`accent-1`	`#3C7BE0`	見出し脇の青い縦線	0%	推定
`cta`	`#2F5BE0`	購入ボタンの青	1%	推定
`on-cta`	`#E5E5E2`	購入ボタン文字	0%	画素の主要色に補正
`accent-2`	`#C9A43A`	ロゴ・シリーズの金	0%	推定
`surface`	`#B1C8DC`	デカール台紙の水色面	3%	画素の主要色に補正

地は濃紺〜黒の宇宙グラデーションを全面に敷き、白い背景面は使わない
文字は白とグレーのみ。強調は大きさと太さでつける
青は機体の色、見出しの縦線、CTA にだけ使う
金色はロゴやシリーズの印に限る
下へ行くほど黒に近づけ、商品情報と CTA を目立たせる

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	縦書きの欧文大型ロゴ・機体名	欧文サンセリフ	Montserrat	700	72px	1.0	0.02em
`headline-lg`	メインのキャッチ見出し	ゴシック	Noto Sans JP	900	32px	1.2	0.0em
`accent`	型番などの細い欧文	欧文サンセリフ	Montserrat	300	22px	1.2	0.04em
`headline-md`	特長ごとの見出し	ゴシック	Noto Sans JP	700	17px	1.35	0.0em
`body-md`	特長の補足説明・商品説明	ゴシック	Noto Sans JP	400	9px	1.5	0.0em
`note`	注意書き・画像の注記	ゴシック	Noto Sans JP	400	8px	1.4	0.0em
`label-button`	購入ボタンの文字	ゴシック	Noto Sans JP	700	15px	1.2	0.02em

見出しは極太ゴシックの白にして、暗い背景の上に薄い影をつける
機体名の欧文は画面の左端に縦書きで巨大に置く
補足文はかなり小さくし、見出しとのサイズ差をはっきりつける
型番は細い欧文、商品名は太い和文で組み合わせる
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム。写真と文字を左右にずらして重ねる
本文ブロックの幅: 画面幅の約 92%
余白: セクション間 24px、基本単位 4px、カード内 8px（375px 幅換算）
ページ全体を区切りのない一枚の縦長ビジュアルとして作る
写真が占める側の反対側に文字ブロックを寄せる
特長ブロックは左寄せで縦に積み、間に小さな作例写真を挟む
最下部に商品情報（ロゴ・品名・価格）を横に並べ、その下に CTA を中央に置く

Elevation & Depth

文字に暗い色のドロップシャドウをつけて背景から浮かせる
模型写真は背景を切り抜き、周りに淡い光をにじませる
CTA は上部ハイライト付きの立体グラデーションにする

Shapes

角丸: 小 2px ／中 6px ／大 8px。ボタンは角丸の長方形。
写真の切り抜き: 模型は背景を切り抜いて重ねる。資料写真は四角いまま
セクション境界: 境界線は引かず、背景のグラデーションで自然につなぐ
見出しの左に細い青の縦線を添える
四角いカード枠は使わない
ボタンだけ小さい角丸にする

Components

縦書きの巨大欧文名（hero-vertical-logo）: 画面左端に白い欧文名を縦書きで置き、写真と重ねる
型番＋商品名キャッチ（headline-catch）: 細い欧文の型番、極太の商品名、感嘆の一文を右寄せで積み、下に細い罫線とサブコピーを置く
縦線付き特長見出し（feature-heading-bar）: 左に青い縦線を引いた白い太字見出し。下に小さな補足文を添える
付属品の作例写真（inset-photo）: 小さな作例写真や台紙写真を四角いまま並べ、下に注記をつける
拡大ラベル（zoom-label）: 写真の左上に置く小さな「＋拡大」タグ
商品情報ブロック（product-info）: ロゴを左に、品名・価格・説明文を右に並べる黒地のブロック
購入ボタン（button-primary）: 青いグラデーションの横長ボタン。白い太字で中央寄せ

Do's and Don'ts

Do - 背景は星空風の濃紺グラデーションで統一する - 主役の写真は画面からはみ出すくらい大きく、斜めのアングルで見せる - 見出しは白の極太文字にして影をつける - 特長は短い見出しと小さな補足文の 2 段で書く - CTA はページの最後に 1 つだけ、青く光るボタンで置く

Don't - 白や明るい色の背景面を使わない - 暖色やポップな色を強調色にしない - 角丸カードやイラスト調の装飾を入れない - 丸ゴシックや手書き風の書体を使わない - 写真を小さく並べるだけのカタログ調にしない

Page Structure

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

ファーストビュー（主役の迫力を一目で伝える）: 下から見上げる巨大な写真と縦書きの欧文名を宇宙背景に置き、左上にシリーズロゴ、右上に作品ロゴを置く
キャッチコピー（商品化を告知する）: 全身写真 2 体の横に型番・商品名・感嘆の一文を右寄せで積み、細い罫線とサブコピーを添える
特長1（造形の再現度を訴える）: 縦線付きの見出しを 2 行で置く
特長2（可動ギミックを説明する）: 構えたポーズの写真の左に見出しと小さな補足文を置く
特長3（付属品）（付属フィギュアを紹介する）: 見出しの下にキャラクターイラストと作例写真を並べ、注記をつける
特長4（デカール）（付属シールを紹介する）: 水色の台紙写真に拡大ラベルを付け、下に括弧付きのキャプションと注記を置く
商品情報（品名・価格・仕様を伝える）: 黒地に左ロゴ、右に品名・価格と小さな説明文を置き、下に注意書きを並べる
CTA（購入ページへ誘導する）: 中央に青いグラデーションの横長ボタンを置く

Imagery

光沢のある模型を暗い背景で撮り、背景を切り抜いて使う
下からあおるアングルや斜め構図で、巨大さと動きを出す
背景は細かい星が散る濃紺の宇宙グラデーション
アニメ調の人物イラストや作例写真を補助として小さく添える
主役の後ろに大きくぼかした頭部のアップを重ねて奥行きを出す
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PC 画像はないため SP を基準に推奨する
PC ではビジュアルを中央 750px 前後に固定し、左右は宇宙背景を延長する
縦書きの欧文名と主役写真の重なり方は保ち、写真をさらに大きくする
特長ブロックは写真と文字の左右 2 列にしてもよい
商品情報と CTA は中央にまとめ、ボタンの幅は 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 行書くと起動時に読み込まれる。

---
version: alpha
name: Dark Space Mecha Hobby Product LP
description: 濃紺〜黒の星空を背景に、青と白の組立模型の写真を大きく重ねた縦長一枚絵の LP。白い太ゴシックの見出しに青い縦線を添えて特長を並べ、最後に商品情報と青いグラデーションの購入ボタンで締める。
colors:
  background: '#0B0C1C'
  dark-section: '#000000'
  primary: '#2C3E7A'
  secondary: '#293354'
  text: '#F1F4FA'
  text-body: '#C4C7D0'
  text-muted: '#AAA8A7'
  accent-1: '#3C7BE0'
  cta: '#2F5BE0'
  on-cta: '#E5E5E2'
  accent-2: '#C9A43A'
  surface: '#B1C8DC'
typography:
  display:
    fontFamily: Montserrat
    fontSize: 72px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: Noto Sans JP
    fontSize: 32px
    fontWeight: 900
    lineHeight: 1.2
  accent:
    fontFamily: Montserrat
    fontSize: 22px
    fontWeight: 300
    lineHeight: 1.2
    letterSpacing: 0.04em
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 17px
    fontWeight: 700
    lineHeight: 1.35
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 9px
    fontWeight: 400
    lineHeight: 1.5
  note:
    fontFamily: Noto Sans JP
    fontSize: 8px
    fontWeight: 400
    lineHeight: 1.4
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.02em
rounded:
  sm: 2px
  md: 6px
  lg: 8px
  full: 999px
spacing:
  unit: 4px
  card: 8px
  section: 24px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  hero-vertical-logo:
    textColor: '{colors.text}'
    typography: '{typography.display}'
    height: 560px
  headline-catch:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
    height: 110px
  feature-heading-bar:
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    height: 50px
  inset-photo:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text-muted}'
    typography: '{typography.note}'
    height: 100px
  zoom-label:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.text}'
    typography: '{typography.note}'
    rounded: '{rounded.sm}'
    height: 12px
  product-info:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
    height: 80px
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.md}'
    height: 36px
---

# DESIGN.md — 宇宙背景×青白の模型ホビー商品 LP（Dark Space Mecha Hobby Product LP）

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

## Overview

- **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ラグジュアリー・ダーク、力強い・インパクト、クール・先進的
- **キーワード**: 星空・濃紺・メカ・白抜き太字・縦長一枚絵・迫力
- **地の質感**: 星が散る宇宙空間のグラデーション背景。光沢のある模型写真を重ねる
- **形**: 直線主体。見出しの左に縦線、ボタンだけ少し角丸
- **温度感**: 寒色で、冷たくクールな印象

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `background` | `#0B0C1C` | 宇宙背景の濃紺 | 45% | 画素の実測 |
| `dark-section` | `#000000` | 下部の黒い商品情報エリア | 12% | 画素の実測 |
| `primary` | `#2C3E7A` | 機体の青・ブランド青 | 7% | 画素の実測 |
| `secondary` | `#293354` | 中間の紺色 | 7% | 画素の主要色に補正 |
| `text` | `#F1F4FA` | 白抜きの見出し文字 | 2% | 画素の実測 |
| `text-body` | `#C4C7D0` | 補足本文の薄いグレー | 1% | 画素の実測 |
| `text-muted` | `#AAA8A7` | 注釈のグレー | 0% | 画素の主要色に補正 |
| `accent-1` | `#3C7BE0` | 見出し脇の青い縦線 | 0% | 推定 |
| `cta` | `#2F5BE0` | 購入ボタンの青 | 1% | 推定 |
| `on-cta` | `#E5E5E2` | 購入ボタン文字 | 0% | 画素の主要色に補正 |
| `accent-2` | `#C9A43A` | ロゴ・シリーズの金 | 0% | 推定 |
| `surface` | `#B1C8DC` | デカール台紙の水色面 | 3% | 画素の主要色に補正 |

- 地は濃紺〜黒の宇宙グラデーションを全面に敷き、白い背景面は使わない
- 文字は白とグレーのみ。強調は大きさと太さでつける
- 青は機体の色、見出しの縦線、CTA にだけ使う
- 金色はロゴやシリーズの印に限る
- 下へ行くほど黒に近づけ、商品情報と CTA を目立たせる

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | 縦書きの欧文大型ロゴ・機体名 | 欧文サンセリフ | Montserrat | 700 | 72px | 1.0 | 0.02em |
| `headline-lg` | メインのキャッチ見出し | ゴシック | Noto Sans JP | 900 | 32px | 1.2 | 0.0em |
| `accent` | 型番などの細い欧文 | 欧文サンセリフ | Montserrat | 300 | 22px | 1.2 | 0.04em |
| `headline-md` | 特長ごとの見出し | ゴシック | Noto Sans JP | 700 | 17px | 1.35 | 0.0em |
| `body-md` | 特長の補足説明・商品説明 | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.0em |
| `note` | 注意書き・画像の注記 | ゴシック | Noto Sans JP | 400 | 8px | 1.4 | 0.0em |
| `label-button` | 購入ボタンの文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.2 | 0.02em |

- 見出しは極太ゴシックの白にして、暗い背景の上に薄い影をつける
- 機体名の欧文は画面の左端に縦書きで巨大に置く
- 補足文はかなり小さくし、見出しとのサイズ差をはっきりつける
- 型番は細い欧文、商品名は太い和文で組み合わせる
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。写真と文字を左右にずらして重ねる
- **本文ブロックの幅**: 画面幅の約 92%
- **余白**: セクション間 24px、基本単位 4px、カード内 8px（375px 幅換算）
- ページ全体を区切りのない一枚の縦長ビジュアルとして作る
- 写真が占める側の反対側に文字ブロックを寄せる
- 特長ブロックは左寄せで縦に積み、間に小さな作例写真を挟む
- 最下部に商品情報（ロゴ・品名・価格）を横に並べ、その下に CTA を中央に置く

## Elevation & Depth

- 文字に暗い色のドロップシャドウをつけて背景から浮かせる
- 模型写真は背景を切り抜き、周りに淡い光をにじませる
- CTA は上部ハイライト付きの立体グラデーションにする

## Shapes

- **角丸**: 小 2px ／ 中 6px ／ 大 8px。ボタンは角丸の長方形。
- **写真の切り抜き**: 模型は背景を切り抜いて重ねる。資料写真は四角いまま
- **セクション境界**: 境界線は引かず、背景のグラデーションで自然につなぐ
- 見出しの左に細い青の縦線を添える
- 四角いカード枠は使わない
- ボタンだけ小さい角丸にする

## Components

- **縦書きの巨大欧文名**（`hero-vertical-logo`）: 画面左端に白い欧文名を縦書きで置き、写真と重ねる
- **型番＋商品名キャッチ**（`headline-catch`）: 細い欧文の型番、極太の商品名、感嘆の一文を右寄せで積み、下に細い罫線とサブコピーを置く
- **縦線付き特長見出し**（`feature-heading-bar`）: 左に青い縦線を引いた白い太字見出し。下に小さな補足文を添える
- **付属品の作例写真**（`inset-photo`）: 小さな作例写真や台紙写真を四角いまま並べ、下に注記をつける
- **拡大ラベル**（`zoom-label`）: 写真の左上に置く小さな「＋拡大」タグ
- **商品情報ブロック**（`product-info`）: ロゴを左に、品名・価格・説明文を右に並べる黒地のブロック
- **購入ボタン**（`button-primary`）: 青いグラデーションの横長ボタン。白い太字で中央寄せ

## Do's and Don'ts

**Do**
- 背景は星空風の濃紺グラデーションで統一する
- 主役の写真は画面からはみ出すくらい大きく、斜めのアングルで見せる
- 見出しは白の極太文字にして影をつける
- 特長は短い見出しと小さな補足文の 2 段で書く
- CTA はページの最後に 1 つだけ、青く光るボタンで置く

**Don't**
- 白や明るい色の背景面を使わない
- 暖色やポップな色を強調色にしない
- 角丸カードやイラスト調の装飾を入れない
- 丸ゴシックや手書き風の書体を使わない
- 写真を小さく並べるだけのカタログ調にしない

## Page Structure

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

1. **ファーストビュー**（主役の迫力を一目で伝える）: 下から見上げる巨大な写真と縦書きの欧文名を宇宙背景に置き、左上にシリーズロゴ、右上に作品ロゴを置く
2. **キャッチコピー**（商品化を告知する）: 全身写真 2 体の横に型番・商品名・感嘆の一文を右寄せで積み、細い罫線とサブコピーを添える
3. **特長1**（造形の再現度を訴える）: 縦線付きの見出しを 2 行で置く
4. **特長2**（可動ギミックを説明する）: 構えたポーズの写真の左に見出しと小さな補足文を置く
5. **特長3（付属品）**（付属フィギュアを紹介する）: 見出しの下にキャラクターイラストと作例写真を並べ、注記をつける
6. **特長4（デカール）**（付属シールを紹介する）: 水色の台紙写真に拡大ラベルを付け、下に括弧付きのキャプションと注記を置く
7. **商品情報**（品名・価格・仕様を伝える）: 黒地に左ロゴ、右に品名・価格と小さな説明文を置き、下に注意書きを並べる
8. **CTA**（購入ページへ誘導する）: 中央に青いグラデーションの横長ボタンを置く

## Imagery

- 光沢のある模型を暗い背景で撮り、背景を切り抜いて使う
- 下からあおるアングルや斜め構図で、巨大さと動きを出す
- 背景は細かい星が散る濃紺の宇宙グラデーション
- アニメ調の人物イラストや作例写真を補助として小さく添える
- 主役の後ろに大きくぼかした頭部のアップを重ねて奥行きを出す
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC 画像はないため SP を基準に推奨する
- PC ではビジュアルを中央 750px 前後に固定し、左右は宇宙背景を延長する
- 縦書きの欧文名と主役写真の重なり方は保ち、写真をさらに大きくする
- 特長ブロックは写真と文字の左右 2 列にしてもよい
- 商品情報と CTA は中央にまとめ、ボタンの幅は 400px 前後にする

## 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-03a60099`（元 LP の URL から採番）
- **元 LP**: https://p-bandai.jp/hobby/special-1000002904/
- **解析に使った画像**: SP（スマホ版）
- **確度**: 色 中（5/12 色を画素から実測）、書体 中、余白 低
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。

SOURCE

出典と注意

元の LP: https://p-bandai.jp/hobby/special-1000002904/（公開状況により表示できない場合があります）
この design.md は、公開されている LP の見た目を独自に分析した非公式の資料です。元 LP の運営企業・制作会社とは関係ありません。
元 LP のロゴ・写真・イラスト・文章・商品名は含みません。生成する LP でも使わず、自社の素材に置き換えてください。
色は画像の画素から実測した値、書体・サイズ・余白は画像からの推定です。
元 LP の権利者の方は、掲載の削除依頼からご連絡ください。受付から 24 時間以内に非公開にします。

似た LP の design.md

エンタメ・ゲーム・アプリ漆黒×金装飾のゲーム周年記念 LPDark Gold Fantasy Anniversary Portal LP エンタメ・ゲーム・アプリ黒地×生成りカプセルのアイドルイベントLPBlack Stage Cream Capsule Idol Event LP エンタメ・ゲーム・アプリ黒×紫の巻物フレーム玩具コレクション LPDark Purple Fantasy Scroll Collectible LP エンタメ・ゲーム・アプリ漆黒と夜の街灯色のドキュメンタリー映画 LPNocturnal Urban Documentary Film LP エンタメ・ゲーム・アプリ黒地×金とオレンジの模型商品 LPDark Metallic Hobby Product LP エンタメ・ゲーム・アプリ桃ベージュ×空色のやさしいポイ活アプリ LPSoft Peach and Sky Blue Point App LP