黒×紫ネオンの変身玩具 LP

Dark Metallic Purple Hero Toy LP

黒い鋼板テクスチャの地に紫ネオンと銀を重ねた、特撮ヒーロー玩具の機能紹介 LP。番号付きの斜めカット見出しで遊び方を手順ごとに見せ、商品写真に吹き出しラベルと矢印を重ねて動きを伝える。

エンタメ・ゲーム・アプリラグジュアリー・ダーク力強い・インパクトクール・先進的情報量多め・訴求型SP

ダウンロード

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

COLORS

配色

TYPOGRAPHY

書体

displayFV の縦書き大見出し装飾・ディスプレイ / Dela Gothic One 900 / 36px / 行間 1.1
あなたの LP を、もっと伝わる形に。Aa 123
headline-lg番号付きセクション見出しゴシック / Noto Sans JP 900 / 20px / 行間 1.3
あなたの LP を、もっと伝わる形に。Aa 123
headline-md黄色縁取りの機能説明ゴシック / Noto Sans JP 900 / 15px / 行間 1.3
あなたの LP を、もっと伝わる形に。Aa 123
headline-sm白縁取りの操作手順ゴシック / Noto Sans JP 800 / 12px / 行間 1.3
あなたの LP を、もっと伝わる形に。Aa 123
accent斜体の大きな番号欧文サンセリフ / Montserrat 900 / 34px / 行間 1.0
あなたの LP を、もっと伝わる形に。Aa 123
label-button吹き出しラベル内文字ゴシック / Noto Sans JP 700 / 11px / 行間 1.2
あなたの LP を、もっと伝わる形に。Aa 123
note注釈・権利表記ゴシック / Noto Sans JP 400 / 9px / 行間 1.4
あなたの LP を、もっと伝わる形に。Aa 123
PAGE STRUCTURE

セクション構成

  1. ファーストビューキャラと商品の迫力を一目で伝える人物を中央大きく、縦書き大見出し、下に商品と商品ロゴ帯
  2. 機能紹介1基本の遊び方を示す番号見出し+パネルで手順写真とラベル
  3. 機能紹介2操作による演出を示す2列の前後比較写真と矢印
  4. 機能紹介3組み替え遊びを示す大きな商品写真に周囲ラベルと緑矢印
  5. 付属品紹介同梱物と仕様の価値を伝えるカード写真の重ね置き、人物切り抜き、セット内容表
  6. フッター権利表記黒地に小さな中央寄せ文字
COMPONENTS

部品

DO

守ること

  • 黒地+紫発光で統一する
  • 文字は必ず縁取りして写真上でも読めるように
  • 手順を番号で区切り写真で状態変化を見せる
  • 部品名は矢印型ラベルで写真に添える
DON'T

避けること

  • 白や淡色の広い背景を使わない
  • 角丸カードや柔らかい装飾を入れない
  • 長い本文段落を置かない
  • 強調色を黄・緑以外に増やさない
DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — 黒×紫ネオンの変身玩具 LP(Dark Metallic Purple Hero Toy LP)

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

Overview

  • 業種: エンタメ・ゲーム・アプリ / 雰囲気: ラグジュアリー・ダーク、力強い・インパクト、クール・先進的、情報量多め・訴求型
  • キーワード: 鋼板テクスチャ・紫ネオン・銀メタリック・斜めカット・番号ステップ・吹き出しラベル
  • 地の質感: 黒い縞鋼板や金属の質感を背景に敷き、紫の光彩をにじませる
  • 形: 平行四辺形の見出し帯、矢印型ラベル、細い紫枠のパネル
  • 温度感: 冷たく硬質。紫の発光で妖しさを足す

Colors

Token HEX 役割 面積の目安 値の出どころ
primary #8A5CC8 パネル枠・見出し帯の紫 4% 推定
background #030304 黒い鋼板地 35% 画素の実測
background-alt #2F2436 FV の暗紫背景 10% 画素の主要色に補正
surface #1E1225 パネル内の濃紫面 15% 画素の主要色に補正
dark-section #010102 見出し帯の黒地 4% 画素の実測
on-dark #FAF9F9 見出し白文字 2% 画素の実測
accent-1 #FFE23A 強調の黄色文字 1% 推定
accent-2 #3DCB3A 動作を示す緑矢印 1% 推定
secondary #A4A9B2 銀メタリックの商品色 6% 画素の主要色に補正
accent-3 #B88AE6 ラベル吹き出しの明紫 1% 推定
text-muted #D6D6D6 注釈・コピーライト 0% 画素の実測
accent-3-accessible #944FD9 AA を満たす補正値(計算) 計算
  • 地は常に黒〜暗紫。白地は使わない
  • パネルは紫の細枠で囲み、内部は濃紫のグラデーション
  • 見出し帯は黒地に白文字、左に紫の斜め番号
  • 強調文言は黄色の縁取り文字、操作方向は緑矢印
  • ラベルは黒地に白文字+紫縁の矢印型
  • badge-tag は文字 #FAF9F9 × 背景 #B88AE6 のコントラスト比が 2.56:1 で、WCAG AA(4.5:1)に届かない(元 LP の配色)。通常サイズの文字で AA を満たすなら accent-3-accessible(#944FD9、4.56:1)を使う。

Typography

Token 用途 書体の分類 代替 Web フォント ウェイト サイズ(375px 幅) 行間 字間
display FV の縦書き大見出し 装飾・ディスプレイ Dela Gothic One 900 36px 1.1 0.0em
headline-lg 番号付きセクション見出し ゴシック Noto Sans JP 900 20px 1.3 0.02em
headline-md 黄色縁取りの機能説明 ゴシック Noto Sans JP 900 15px 1.3 0.0em
headline-sm 白縁取りの操作手順 ゴシック Noto Sans JP 800 12px 1.3 0.0em
accent 斜体の大きな番号 欧文サンセリフ Montserrat 900 34px 1.0 0.0em
label-button 吹き出しラベル内文字 ゴシック Noto Sans JP 700 11px 1.2 0.0em
note 注釈・権利表記 ゴシック Noto Sans JP 400 9px 1.4 0.0em
  • 説明文はすべて太ゴシックで縁取りを付ける
  • 難読語にはルビを振る(子ども向け)
  • 番号は斜体の欧文で紫グラデーション
  • 長文は置かず短い操作フレーズで構成
  • 決め台詞はやや斜めに配置し動きを出す
  • 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

  • カラム: SP は 1 カラム、パネル内は 2 列の写真比較
  • 本文ブロックの幅: 画面幅の約 94%
  • 余白: セクション間 24px、基本単位 8px、カード内 10px(375px 幅換算)
  • セクションは見出し帯+紫枠パネルのセット
  • パネル内は写真を大きく、ラベルを周囲に配置
  • 手順は左→右の矢印で状態変化を示す
  • 注釈はパネル右下外に小さく置く

Elevation & Depth

  • 影は使わず発光(紫グロー)で浮かせる
  • 文字は太い縁取りで背景から分離
  • 商品写真は切り抜きで重ねる

Shapes

  • 角丸: 小 0px / 中 0px / 大 0px。ボタンは角丸の長方形。
  • 写真の切り抜き: 商品・人物とも切り抜き、背景と重ねる
  • セクション境界: 斜めカットの見出し帯で区切る
  • 角丸は使わず斜めカットと鋭角
  • ラベルは片側が尖った矢印型
  • パネル角に小さな面取り

Components

  • 番号付き見出し帯(heading-step): 左に斜体の大番号、黒地の平行四辺形に白文字、右端に紫シェブロン
  • 紫枠パネル(panel-frame): 細い紫線で囲んだ濃紫グラデーション面
  • 矢印型ラベル(label-callout): 部品名を示す黒地白文字・紫縁の吹き出し
  • 黄色縁取り説明(text-highlight): 発光・音などの効果を黄文字+黒縁で強調
  • 緑矢印(arrow-action): 操作方向を示す縁取り付き緑矢印
  • 紫タグ見出し(badge-tag): 付属物グループ名の紫グラデーション帯
  • セット内容表(spec-table): 左に黒見出しセル、右に白地の品目リスト

Do's and Don'ts

Do - 黒地+紫発光で統一する - 文字は必ず縁取りして写真上でも読めるように - 手順を番号で区切り写真で状態変化を見せる - 部品名は矢印型ラベルで写真に添える

Don't - 白や淡色の広い背景を使わない - 角丸カードや柔らかい装飾を入れない - 長い本文段落を置かない - 強調色を黄・緑以外に増やさない

Page Structure

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

  1. ファーストビュー(キャラと商品の迫力を一目で伝える): 人物を中央大きく、縦書き大見出し、下に商品と商品ロゴ帯
  2. 機能紹介1(基本の遊び方を示す): 番号見出し+パネルで手順写真とラベル
  3. 機能紹介2(操作による演出を示す): 2列の前後比較写真と矢印
  4. 機能紹介3(組み替え遊びを示す): 大きな商品写真に周囲ラベルと緑矢印
  5. 付属品紹介(同梱物と仕様の価値を伝える): カード写真の重ね置き、人物切り抜き、セット内容表
  6. フッター(権利表記): 黒地に小さな中央寄せ文字

Imagery

  • 商品は光る LED を強調した切り抜き写真
  • 人物はローアングルで迫力あるポーズ
  • 背景は黒い縞鋼板と紫の光の帯
  • 光彩・スパークを周囲にあしらう
  • カード類は斜めに重ねて立体感を出す
  • 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

  • PC は中央に SP 幅相当のカラムを置き左右は鋼板背景
  • PC ではパネル内を 3〜4 列に広げてもよい
  • 見出し帯は横幅に合わせて伸ばす

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

SOURCE

出典と注意

似た LP の design.md