宇宙背景×赤い発光の模型商品 LP

Cosmic Glow Dark Hobby Model LP

黒い宇宙の背景に、赤く光る製品写真を大きく重ねた縦長の一枚絵型 LP。白い太ゴシックの見出しに赤い縦バーを添えて特長を短く区切り、最後に赤いピル型ボタンで購入へつなげる。

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

ダウンロード

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

COLORS

配色

TYPOGRAPHY

書体

display商品名の大見出しゴシック / Noto Sans JP 900 / 36px / 行間 1.15
あなたの LP を、もっと伝わる形に。Aa 123
headline-md縦バー付きの特長見出しゴシック / Noto Sans JP 900 / 19px / 行間 1.3
あなたの LP を、もっと伝わる形に。Aa 123
headline-sm写真に添える光彩付きキャプションゴシック / Noto Sans JP 700 / 16px / 行間 1.3
あなたの LP を、もっと伝わる形に。Aa 123
body-md特長の説明文ゴシック / Noto Sans JP 700 / 11px / 行間 1.45
あなたの LP を、もっと伝わる形に。Aa 123
note注釈・仕様ゴシック / Noto Sans JP 400 / 8px / 行間 1.5
あなたの LP を、もっと伝わる形に。Aa 123
accent型番などの英数字欧文サンセリフ / Roboto Condensed 700 / 28px / 行間 1.1
あなたの LP を、もっと伝わる形に。Aa 123
label-button購入ボタンゴシック / Noto Sans JP 900 / 15px / 行間 1.0
あなたの LP を、もっと伝わる形に。Aa 123
PAGE STRUCTURE

セクション構成

  1. ファーストビュー製品の迫力で目を引く宇宙背景に製品写真2体を大きく重ねる。左上にシリーズのロゴ、右端に縦書きの大きな欧文
  2. 商品名何の商品かを伝える型番と極太の白い商品名を3段に重ね、赤いグローをつける。下に2行の導入文
  3. 特長1(質感)成形色や光沢を伝える縦バー見出しと短い説明文。右に全身写真、下にディテール写真2枚
  4. 付属品・可動の紹介遊び方の幅を見せるポーズ違いの写真を左右交互に大きく置き、光彩キャプションを添える
  5. 発光ギミック別売オプションの演出を伝える寄りの四角い写真と全身写真を重ね、説明文を添える
  6. 特長2(デカール)細部の再現度を伝える縦バー見出しの下に、寄りの写真2枚を横に並べる
  7. 商品情報価格と仕様を伝えるロゴバッジ、商品名、価格、説明、付属品を左に置き、右に全身写真
  8. 注釈とCTA注意事項を伝え、購入へ導く小さなグレーの注釈の下に、中央の赤い購入ボタン
COMPONENTS

部品

DO

守ること

  • 製品写真を主役にし、画面からはみ出すくらい大胆に配置する
  • 黒と宇宙の背景を全体に通す
  • 見出しと写真には赤いグローで発光感を出す
  • 説明文は短く、写真の空いた場所に置く
  • CTAはページ末尾に1つだけ、鮮やかな赤で置く
DON'T

避けること

  • 白や明るい色の背景セクションを作らない
  • 角丸カードや枠付きボックスを多用しない
  • 細い明朝や丸ゴシックを使わない
  • 赤以外の強調色を増やさない
  • 長文の説明を並べない
DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — 宇宙背景×赤い発光の模型商品 LP(Cosmic Glow Dark Hobby Model LP)

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

Overview

  • 業種: エンタメ・ゲーム・アプリ / 雰囲気: ラグジュアリー・ダーク、力強い・インパクト、クール・先進的
  • キーワード: 宇宙背景・赤い発光・メタリック・製品写真主体・太ゴシック白文字
  • 地の質感: 星雲・星屑のある宇宙写真に、製品の周りの赤ピンクの光彩(グロー)を重ねる
  • 形: 角のない写真ブロックと縦バー見出し。角丸はCTAだけに使う
  • 温度感: 冷たい黒・紺の地に、熱っぽい赤とローズ色をのせる

Colors

Token HEX 役割 面積の目安 値の出どころ
background #000000 ページ全体の黒地 40% 画素の実測
dark-section #101522 宇宙背景の紺 15% 画素の主要色に補正
primary #BE7A86 製品と光彩のローズ色 12% 画素の主要色に補正
secondary #5D1027 製品の暗い赤 6% 画素の主要色に補正
cta #E40242 購入ボタンの赤 0% 画素の実測
on-cta #FFFFFF ボタン上の白文字 0% 推定
text #FEFEFE 見出し・本文の白 2% 画素の実測
accent-1 #E01A4F 見出しの縦バー・グローの赤 0% 推定
text-muted #9D9D9D 注釈のグレー 0% 画素の実測
accent-2 #C9A13A ロゴの金 0% 推定
  • 地は黒と宇宙の紺だけにし、白い面は使わない
  • 製品の赤とローズ色を主役の色にし、周りに赤い光彩をつける
  • 見出しの縦バーとCTAは鮮やかな赤に揃える
  • 文字は白が基本。注釈だけグレーにする
  • 金色はシリーズのロゴバッジだけに使う

Typography

Token 用途 書体の分類 代替 Web フォント ウェイト サイズ(375px 幅) 行間 字間
display 商品名の大見出し ゴシック Noto Sans JP 900 36px 1.15 0.0em
headline-md 縦バー付きの特長見出し ゴシック Noto Sans JP 900 19px 1.3 0.0em
headline-sm 写真に添える光彩付きキャプション ゴシック Noto Sans JP 700 16px 1.3 0.0em
body-md 特長の説明文 ゴシック Noto Sans JP 700 11px 1.45 0.0em
note 注釈・仕様 ゴシック Noto Sans JP 400 8px 1.5 0.0em
accent 型番などの英数字 欧文サンセリフ Roboto Condensed 700 28px 1.1 0.02em
label-button 購入ボタン ゴシック Noto Sans JP 900 15px 1.0 0.05em
  • 見出しは極太ゴシックの白文字にし、外側に赤いグローをつける
  • 説明文は短く2〜4行で、太字にする
  • 英数字の型番は詰め気味のサンセリフを使う
  • 注釈は小さく、ページ末尾にまとめる
  • 左揃えを基本にする
  • 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

  • カラム: SP は 1 カラム。写真と短文を左右に交互に重ねる
  • 本文ブロックの幅: 画面幅の約 92%
  • 余白: セクション間 32px、基本単位 8px、カード内 12px(375px 幅換算)
  • 製品の写真は画面幅いっぱい、またははみ出すくらいに大きく置く
  • 説明文は写真の空いた側に重ねて置く
  • ディテール写真は2枚を横に並べる
  • 写真の余白を区切り線の代わりにする
  • 最後に商品情報ブロックとCTAを中央に置く

Elevation & Depth

  • 影は使わず、赤ピンクの外側グローで立体感を出す
  • 製品の切り抜き写真のまわりに光彩をにじませる
  • 文字には赤いグローをつける

Shapes

  • 角丸: 小 0px / 中 4px / 大 10px。ボタンは角丸の長方形。
  • 写真の切り抜き: 製品は切り抜きで背景になじませる。ディテール写真は角のない四角
  • セクション境界: 区切り線は入れず、宇宙背景のまま続ける
  • 角丸はCTAボタン(約8px)だけに使う
  • 見出しの装飾は左の赤い縦バーだけにする
  • 枠線やカードの枠は使わない

Components

  • 購入ボタン(button-primary): 赤い面に白い太文字。中央に置き、幅は約半分
  • 縦バー見出し(heading-bar): 左に赤い太縦バー、右に白い極太の2行見出し
  • 商品名の大見出し(hero-title): 型番、商品名、角括弧の副題を3段に重ね、赤いグローをつける
  • 光彩キャプション(glow-caption): 写真の上に置く2行の白文字。赤くにじませる
  • ディテール写真の2枚並び(detail-thumbs): 寄りの写真2枚を横に並べる。間は細い隙間
  • 商品情報ブロック(product-info): 左にロゴバッジ、商品名、価格、説明文、付属品。右に製品の全身写真
  • 注釈リスト(note-list): 米印から始まる小さなグレー文字を3行ほど並べる

Do's and Don'ts

Do - 製品写真を主役にし、画面からはみ出すくらい大胆に配置する - 黒と宇宙の背景を全体に通す - 見出しと写真には赤いグローで発光感を出す - 説明文は短く、写真の空いた場所に置く - CTAはページ末尾に1つだけ、鮮やかな赤で置く

Don't - 白や明るい色の背景セクションを作らない - 角丸カードや枠付きボックスを多用しない - 細い明朝や丸ゴシックを使わない - 赤以外の強調色を増やさない - 長文の説明を並べない

Page Structure

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

  1. ファーストビュー(製品の迫力で目を引く): 宇宙背景に製品写真2体を大きく重ねる。左上にシリーズのロゴ、右端に縦書きの大きな欧文
  2. 商品名(何の商品かを伝える): 型番と極太の白い商品名を3段に重ね、赤いグローをつける。下に2行の導入文
  3. 特長1(質感)(成形色や光沢を伝える): 縦バー見出しと短い説明文。右に全身写真、下にディテール写真2枚
  4. 付属品・可動の紹介(遊び方の幅を見せる): ポーズ違いの写真を左右交互に大きく置き、光彩キャプションを添える
  5. 発光ギミック(別売オプションの演出を伝える): 寄りの四角い写真と全身写真を重ね、説明文を添える
  6. 特長2(デカール)(細部の再現度を伝える): 縦バー見出しの下に、寄りの写真2枚を横に並べる
  7. 商品情報(価格と仕様を伝える): ロゴバッジ、商品名、価格、説明、付属品を左に置き、右に全身写真
  8. 注釈とCTA(注意事項を伝え、購入へ導く): 小さなグレーの注釈の下に、中央の赤い購入ボタン

Imagery

  • 製品は黒背景の切り抜き写真。動きのあるポーズを斜めの構図で撮る
  • 背景は緑と紫の星雲がある宇宙写真で、暗めに抑える
  • 製品の輪郭に赤ピンクの光彩をにじませる
  • 寄りのディテール写真で、光沢や色の分け方を見せる
  • 背景にシンボルマークを大きく薄く透かす
  • 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

  • PC では中央の固定幅(約750px)に SP と同じ縦長の構成を置き、左右は黒で埋める
  • PC では写真と説明文を横に並べやすくする
  • 文字サイズは PC で約1.3倍にする
  • CTA は PC でも中央に置く

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