黒×紫×金の特撮玩具商品紹介 LP

Dark Purple Hero Toy Showcase LP

黒地にひび割れ質感、紫の稲妻帯と金縁フレームで変身玩具の機能を番号つきで紹介する、迫力重視の縦長画像型 LP。斜体の極太ゴシックにふりがなを添え、子どもにも読める作りにしている。

エンタメ・ゲーム・アプリ力強い・インパクトラグジュアリー・ダーク情報量多め・訴求型ポップ・元気PC

ダウンロード

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

COLORS

配色

TYPOGRAPHY

書体

displayキャラ台詞風の大コピー(縦組みも可)装飾・ディスプレイ / Dela Gothic One 400 / 36px / 行間 1.2
あなたの LP を、もっと伝わる形に。Aa 123
headline-lg番号つき機能見出しゴシック / Dela Gothic One 400 / 24px / 行間 1.3
あなたの LP を、もっと伝わる形に。Aa 123
headline-mdフレーム内の小見出しゴシック / Noto Sans JP 900 / 18px / 行間 1.4
あなたの LP を、もっと伝わる形に。Aa 123
accent大きな金の番号欧文サンセリフ / Montserrat 900 / 56px / 行間 1.0
あなたの LP を、もっと伝わる形に。Aa 123
body-md吹き出し内の台詞・説明ゴシック / Noto Sans JP 700 / 14px / 行間 1.5
あなたの LP を、もっと伝わる形に。Aa 123
note注釈・権利表記ゴシック / Noto Sans JP 400 / 10px / 行間 1.5
あなたの LP を、もっと伝わる形に。Aa 123
headline-smComing soon等の欧文装飾欧文セリフ / Playfair Display 900 / 30px / 行間 1.1
あなたの LP を、もっと伝わる形に。Aa 123
PAGE STRUCTURE

セクション構成

  1. ファーストビューキャラと商品の世界観を一撃で伝える紫の稲妻背景にキャラと商品を大きく重ね、台詞を白フチ文字で配置
  2. キャスト訴求出演者ボイス収録をアピール縦組みの大コピーを左右に、人物写真を手前に重ねる
  3. 商品名ロゴ商品を確定させる商品2点を並べ、紫の斜体ロゴを下に置く
  4. 機能1 音声主機能を説明金縁フレーム内に人物・吹き出し・モード切替図と強調数字
  5. 機能2 自動モード遊び方の楽しさ網点と吹き出し装飾のコミック調フレーム
  6. 機能3 追加収録後日情報の予告キャラ写真に発光する欧文の予告文字
  7. 機能4 連動別売り品との連動を示す装着手順を矢印とPUSHラベルで図解、注釈を下に
  8. シリーズ一覧コレクション欲を刺激淡いラベンダー網点地に全セットをジグザグ配置し番号バッジ
  9. 権利表記法的表記黒地に小さな白文字で中央揃え
COMPONENTS

部品

DO

守ること

  • 黒地と紫発光で暗い世界観を守る
  • 見出しは必ず斜体・太フチにする
  • 機能は番号順に1フレームずつ見せる
  • 漢字にふりがなを振る
  • 商品写真は大きく切り抜いて重ねる
DON'T

避けること

  • 白い余白の多いミニマル構成にしない
  • 細い明朝や丸文字を使わない
  • パステル色を一覧以外で使わない
  • 長い説明文を詰め込まない
  • 角丸の柔らかいカードにしない
DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — 黒×紫×金の特撮玩具商品紹介 LP(Dark Purple Hero Toy Showcase LP)

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

Overview

  • 業種: エンタメ・ゲーム・アプリ / 雰囲気: 力強い・インパクト、ラグジュアリー・ダーク、情報量多め・訴求型、ポップ・元気
  • キーワード: 特撮・玩具・ダーク・稲妻・金縁フレーム・ふりがな
  • 地の質感: 黒地に岩のひび割れ風テクスチャ、紫のネオン発光、網点ハーフトーン
  • 形: 斜めに切った帯、稲妻形の見出し尾、六角形風の吹き出し、細い金縁の四角フレーム
  • 温度感: 暗く妖しい寒色寄りに、金とマゼンタの熱を差す

Colors

Token HEX 役割 面積の目安 値の出どころ
background #030201 ページ地の黒 35% 画素の実測
primary #5A1A8C 紫の見出し帯・稲妻 8% 推定
secondary #7F1455 マゼンタの差し色・吹き出し 5% 画素の主要色に補正
accent-1 #C9A85C 金の番号・枠線 2% 推定
dark-section #281B27 フレーム内の濃紫地 10% 画素の主要色に補正
on-dark #FFFFFF 黒地上の白見出し 3% 画素の実測
accent-2 #E0379A ピンクの強調数字 1% 推定
accent-3 #3FB6E8 シアンのPUSH・発光 1% 推定
background-alt #E6DCF0 シリーズ一覧の淡いラベンダー地 10% 推定
surface #E5C9B7 感情タグの生成り帯 1% 画素の主要色に補正
line #A010A0 ヘッダー下の紫ライン 1% 推定
text-muted #BBBBBB 注釈文字 1% 推定
accent-3-accessible #157FAC AA を満たす補正値(計算) 計算
  • 地は黒で統一し、セクション内は金縁の濃紫フレームで区切る
  • 紫は見出しの稲妻帯と区切りライン専用にする
  • ピンク・マゼンタは数量や叫びなどの強調だけに使う
  • 商品一覧だけは淡いラベンダー+網点で明るく切り替える
  • シアンはPUSHなど操作を示すラベルに限定する
  • push-tag は文字 #FFFFFF × 背景 #3FB6E8 のコントラスト比が 2.32:1 で、WCAG AA(4.5:1)に届かない(元 LP の配色)。通常サイズの文字で AA を満たすなら accent-3-accessible(#157FAC、4.5:1)を使う。

Typography

Token 用途 書体の分類 代替 Web フォント ウェイト サイズ(375px 幅) 行間 字間
display キャラ台詞風の大コピー(縦組みも可) 装飾・ディスプレイ Dela Gothic One 400 36px 1.2 0.0em
headline-lg 番号つき機能見出し ゴシック Dela Gothic One 400 24px 1.3 0.0em
headline-md フレーム内の小見出し ゴシック Noto Sans JP 900 18px 1.4 0.0em
accent 大きな金の番号 欧文サンセリフ Montserrat 900 56px 1.0 0.0em
body-md 吹き出し内の台詞・説明 ゴシック Noto Sans JP 700 14px 1.5 0.0em
note 注釈・権利表記 ゴシック Noto Sans JP 400 10px 1.5 0.0em
headline-sm Coming soon等の欧文装飾 欧文セリフ Playfair Display 900 30px 1.1 0.0em
  • 見出しは右上がりの斜体にし、黒の太フチと紫の影をつける
  • 漢字にはふりがなを小さく振る
  • 大コピーは白文字+紫の外側発光
  • 番号は金のグラデーションで見出しの左に大きく置く
  • 本文は短い台詞調にとどめる
  • 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

  • カラム: SP は 1 カラム。画像中心で縦に積む
  • 本文ブロックの幅: 画面幅の約 92%
  • 余白: セクション間 48px、基本単位 8px、カード内 16px(375px 幅換算)
  • 各機能は番号見出し+金縁フレームの1セット
  • フレーム内は写真と吹き出しを重ねて配置
  • 人物と商品は斜めに重ねて奥行きを出す
  • 見出し右端に商品の小画像を添える
  • 一覧はジグザグに左右へ振る

Elevation & Depth

  • キャラや商品にネオン色の外側発光
  • 見出し文字は黒の太フチ+ドロップシャドウ
  • フレームは影なしで金の細線のみ

Shapes

  • 角丸: 小 4px / 中 8px / 大 12px。ボタンは角丸の長方形。
  • 写真の切り抜き: 背景を抜いた切り抜き写真をフレームからはみ出させる
  • セクション境界: 斜めに切った紫の稲妻帯とストライプ帯
  • フレームは角丸なしの直角
  • 吹き出しは六角形や角を切った形
  • ラベルは斜めの平行四辺形
  • 丸い柔らかな形は使わない

Components

  • 番号つき見出し(numbered-heading): 金の大番号+白の斜体見出し、右へ紫の稲妻尾が伸びる
  • 金縁フレーム(gold-frame): 濃紫地を細い金線で囲む機能紹介の枠
  • 台詞吹き出し(speech-hex): 紫フチの角切り形吹き出しに白抜きで台詞
  • 斜めラベル(slant-label): マゼンタや金の平行四辺形に音声名や商品名
  • PUSH矢印(push-tag): シアン矢印で押す場所を示す操作ラベル
  • 感情タグ帯(emotion-tags): 生成り帯の見出し下に黒地の小タグを横並び
  • シリーズ番号バッジ(series-badge): 色違いの角丸ラベルで各セット番号を表示

Do's and Don'ts

Do - 黒地と紫発光で暗い世界観を守る - 見出しは必ず斜体・太フチにする - 機能は番号順に1フレームずつ見せる - 漢字にふりがなを振る - 商品写真は大きく切り抜いて重ねる

Don't - 白い余白の多いミニマル構成にしない - 細い明朝や丸文字を使わない - パステル色を一覧以外で使わない - 長い説明文を詰め込まない - 角丸の柔らかいカードにしない

Page Structure

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

  1. ファーストビュー(キャラと商品の世界観を一撃で伝える): 紫の稲妻背景にキャラと商品を大きく重ね、台詞を白フチ文字で配置
  2. キャスト訴求(出演者ボイス収録をアピール): 縦組みの大コピーを左右に、人物写真を手前に重ねる
  3. 商品名ロゴ(商品を確定させる): 商品2点を並べ、紫の斜体ロゴを下に置く
  4. 機能1 音声(主機能を説明): 金縁フレーム内に人物・吹き出し・モード切替図と強調数字
  5. 機能2 自動モード(遊び方の楽しさ): 網点と吹き出し装飾のコミック調フレーム
  6. 機能3 追加収録(後日情報の予告): キャラ写真に発光する欧文の予告文字
  7. 機能4 連動(別売り品との連動を示す): 装着手順を矢印とPUSHラベルで図解、注釈を下に
  8. シリーズ一覧(コレクション欲を刺激): 淡いラベンダー網点地に全セットをジグザグ配置し番号バッジ
  9. 権利表記(法的表記): 黒地に小さな白文字で中央揃え

Imagery

  • 商品は白背景で撮り切り抜いて使う
  • キャラは斜め下からのあおりで迫力を出す
  • 背景は岩のひび割れや菓子の粒を暗く沈める
  • 紫やマゼンタの稲妻・発光エフェクトを重ねる
  • 網点ハーフトーンとコミック風爆発吹き出しを装飾に
  • 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

  • PCは中央固定幅約480〜950pxの画像列で左右は黒地
  • SPでは同じ画像列を全幅表示
  • 縦組み大コピーはSPでも維持し文字を22px以上に
  • 注釈はSPで10px以上を確保

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