黒×紫×金の特撮玩具商品紹介 LP
Dark Purple Hero Toy Showcase LP
黒地にひび割れ質感、紫の稲妻帯と金縁フレームで変身玩具の機能を番号つきで紹介する、迫力重視の縦長画像型 LP。斜体の極太ゴシックにふりがなを添え、子どもにも読める作りにしている。
エンタメ・ゲーム・アプリ力強い・インパクトラグジュアリー・ダーク情報量多め・訴求型ポップ・元気PC
Claude Code なら、プロジェクト直下に置いて CLAUDE.md に @DESIGN.md と書くだけで読み込まれます(ツール別の使い方)。
COLORS
配色
- 地は黒で統一し、セクション内は金縁の濃紫フレームで区切る
- 紫は見出しの稲妻帯と区切りライン専用にする
- ピンク・マゼンタは数量や叫びなどの強調だけに使う
- 商品一覧だけは淡いラベンダー+網点で明るく切り替える
- シアンはPUSHなど操作を示すラベルに限定する
TYPOGRAPHY
書体
あなたの LP を、もっと伝わる形に。Aa 123
あなたの LP を、もっと伝わる形に。Aa 123
あなたの LP を、もっと伝わる形に。Aa 123
あなたの LP を、もっと伝わる形に。Aa 123
あなたの LP を、もっと伝わる形に。Aa 123
あなたの LP を、もっと伝わる形に。Aa 123
あなたの LP を、もっと伝わる形に。Aa 123
- 見出しは右上がりの斜体にし、黒の太フチと紫の影をつける
- 漢字にはふりがなを小さく振る
- 大コピーは白文字+紫の外側発光
- 番号は金のグラデーションで見出しの左に大きく置く
- 本文は短い台詞調にとどめる
PAGE STRUCTURE
セクション構成
- ファーストビューキャラと商品の世界観を一撃で伝える紫の稲妻背景にキャラと商品を大きく重ね、台詞を白フチ文字で配置
- キャスト訴求出演者ボイス収録をアピール縦組みの大コピーを左右に、人物写真を手前に重ねる
- 商品名ロゴ商品を確定させる商品2点を並べ、紫の斜体ロゴを下に置く
- 機能1 音声主機能を説明金縁フレーム内に人物・吹き出し・モード切替図と強調数字
- 機能2 自動モード遊び方の楽しさ網点と吹き出し装飾のコミック調フレーム
- 機能3 追加収録後日情報の予告キャラ写真に発光する欧文の予告文字
- 機能4 連動別売り品との連動を示す装着手順を矢印とPUSHラベルで図解、注釈を下に
- シリーズ一覧コレクション欲を刺激淡いラベンダー網点地に全セットをジグザグ配置し番号バッジ
- 権利表記法的表記黒地に小さな白文字で中央揃え
COMPONENTS
部品
- 番号つき見出し numbered-heading金の大番号+白の斜体見出し、右へ紫の稲妻尾が伸びる
- 金縁フレーム gold-frame濃紫地を細い金線で囲む機能紹介の枠
- 台詞吹き出し speech-hex紫フチの角切り形吹き出しに白抜きで台詞
- 斜めラベル slant-labelマゼンタや金の平行四辺形に音声名や商品名
- PUSH矢印 push-tagシアン矢印で押す場所を示す操作ラベル
- 感情タグ帯 emotion-tags生成り帯の見出し下に黒地の小タグを横並び
- シリーズ番号バッジ series-badge色違いの角丸ラベルで各セット番号を表示
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 独自の章。上から順に、カッコ内が各セクションの役割。
- ファーストビュー(キャラと商品の世界観を一撃で伝える): 紫の稲妻背景にキャラと商品を大きく重ね、台詞を白フチ文字で配置
- キャスト訴求(出演者ボイス収録をアピール): 縦組みの大コピーを左右に、人物写真を手前に重ねる
- 商品名ロゴ(商品を確定させる): 商品2点を並べ、紫の斜体ロゴを下に置く
- 機能1 音声(主機能を説明): 金縁フレーム内に人物・吹き出し・モード切替図と強調数字
- 機能2 自動モード(遊び方の楽しさ): 網点と吹き出し装飾のコミック調フレーム
- 機能3 追加収録(後日情報の予告): キャラ写真に発光する欧文の予告文字
- 機能4 連動(別売り品との連動を示す): 装着手順を矢印とPUSHラベルで図解、注釈を下に
- シリーズ一覧(コレクション欲を刺激): 淡いラベンダー網点地に全セットをジグザグ配置し番号バッジ
- 権利表記(法的表記): 黒地に小さな白文字で中央揃え
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: https://p-bandai.jp/item/item-1000232723/(公開状況により表示できない場合があります)
- この 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