黒×深紅グリッチのホビー模型 LP

Dark Crimson Glitch Hobby Model LP

黒地に暗い赤のかすれテクスチャとシアン系グリッチ帯を重ね、赤いプラモデル写真を大きく見せるホビー商品LP。左に赤い縦線を付けた明朝太字の見出しで特長を順に並べ、最後に商品情報と赤い角丸ボタンで購入へ誘導する。

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

ダウンロード

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

COLORS

配色

TYPOGRAPHY

書体

displayFVの縦書きキャッチゴシック / Dela Gothic One 900 / 44px / 行間 1.1
あなたの LP を、もっと伝わる形に。Aa 123
headline-lgFVの商品名(斜体風太字)ゴシック / Noto Sans JP 900 / 30px / 行間 1.2
あなたの LP を、もっと伝わる形に。Aa 123
headline-md特長見出し明朝 / Shippori Mincho 800 / 21px / 行間 1.4
あなたの LP を、もっと伝わる形に。Aa 123
accent英字シリーズラベル・FRONT等欧文サンセリフ / Oswald 700 / 13px / 行間 1.2
あなたの LP を、もっと伝わる形に。Aa 123
body-md説明文・商品情報ゴシック / Noto Sans JP 500 / 11px / 行間 1.6
あなたの LP を、もっと伝わる形に。Aa 123
note注釈・別売り表記ゴシック / Noto Sans JP 400 / 8px / 行間 1.5
あなたの LP を、もっと伝わる形に。Aa 123
label-button購入ボタンゴシック / Noto Sans JP 700 / 13px / 行間 1.0
あなたの LP を、もっと伝わる形に。Aa 123
PAGE STRUCTURE

セクション構成

  1. ファーストビュー作品世界と商品を一目で伝える宇宙風の暗背景に商品写真、右に縦書き極太コピー、ロゴを上部に
  2. 商品名と概要商品名と位置づけを示す英字ラベル→朱赤の大きな商品名→短い説明と注釈
  3. 付属品一覧セット内容を可視化縦線見出し+赤枠パネルに全パーツと名称ラベル
  4. 特長1新規パーツの魅力見出し+一言、正面・背面の大写真とFRONT/REAR英字、差し込み写真
  5. 特長2展示方法の提案縦線見出し+スタンド使用の写真、注釈
  6. 特長3武装のバリエーション2体のポーズ写真を重ね、山括弧の武装名ラベル
  7. 特長4劇中シーンの再現差し込み写真と大写真、エフェクト付きポーズ
  8. 商品情報価格・内容の確認左にロゴ・価格・箇条書き、右に一覧写真、黄緑の注意書き
  9. CTA購入へ誘導中央に赤い角丸ボタンを1つ
COMPONENTS

部品

DO

守ること

  • 黒と暗赤の地で商品の赤を際立たせる
  • 写真を大きく、重ねて迫力を出す
  • 見出しは縦線付き明朝で統一
  • グリッチ帯を数か所に散らして世界観を出す
  • 別売り等の注釈を必ず添える
DON'T

避けること

  • 白や明るい背景色のセクションを入れない
  • ボタン以外を丸くしない
  • ピル型・パステル配色にしない
  • 本文を長く大きくしない
  • ティールを文字色に使わない
DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — 黒×深紅グリッチのホビー模型 LP(Dark Crimson Glitch Hobby Model LP)

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

Overview

  • 業種: エンタメ・ゲーム・アプリ / 雰囲気: ラグジュアリー・ダーク、力強い・インパクト、クール・先進的
  • キーワード: 黒背景・深紅・グリッチ・かすれテクスチャ・製品写真主役・明朝見出し
  • 地の質感: 黒地に暗赤のかすれ・ノイズ、ティール色の横長グリッチ帯
  • 形: 四角い写真枠と細い赤枠、角丸は購入ボタンのみ
  • 温度感: 暗く熱い(赤)に冷たいティールを差す

Colors

Token HEX 役割 面積の目安 値の出どころ
background #030101 ページ地の黒 40% 画素の実測
background-alt #2C0A13 暗赤のかすれ背景 25% 画素の実測
primary #E8452C 見出しの朱赤・縦線 2% 推定
cta #E0101E 購入ボタン赤 0% 推定
on-cta #FFFFFF ボタン文字 0% 推定
text #ECEAEB 見出し白文字 2% 画素の実測
text-muted #BBBBBB 注釈の薄灰 0% 推定
accent-1 #146E69 グリッチ帯のティール 3% 画素の実測
marker #E2E161 注意書き黄緑 0% 画素の実測
line #863537 写真の赤枠線 0% 画素の主要色に補正
surface #2B2D3A パーツ一覧の暗灰面 5% 画素の主要色に補正
accent-2 #D8325A シリーズラベルの赤ピンク 0% 推定
  • 地は常に黒か暗赤テクスチャで、白地は使わない
  • 見出しは白文字、FVの商品名だけ朱赤のグラデ風
  • 見出し左に朱赤の太い縦線を付ける
  • ティールのグリッチ帯は写真の端に重ねる装飾のみ
  • 購入ボタンだけ純赤の面で最も目立たせる
  • 注意書きは黄緑、補足注釈は小さい灰色

Typography

Token 用途 書体の分類 代替 Web フォント ウェイト サイズ(375px 幅) 行間 字間
display FVの縦書きキャッチ ゴシック Dela Gothic One 900 44px 1.1 0.0em
headline-lg FVの商品名(斜体風太字) ゴシック Noto Sans JP 900 30px 1.2 0.02em
headline-md 特長見出し 明朝 Shippori Mincho 800 21px 1.4 0.0em
accent 英字シリーズラベル・FRONT等 欧文サンセリフ Oswald 700 13px 1.2 0.02em
body-md 説明文・商品情報 ゴシック Noto Sans JP 500 11px 1.6 0.0em
note 注釈・別売り表記 ゴシック Noto Sans JP 400 8px 1.5 0.0em
label-button 購入ボタン ゴシック Noto Sans JP 700 13px 1.0 0.05em
  • 特長見出しは明朝太字で2行、重厚に見せる
  • 商品名や英字ラベルはやや斜体で疾走感を出す
  • 本文は小さく短く、写真の邪魔をしない
  • パーツ名の吹き出しラベルは白の小さなゴシック
  • 注釈は最小サイズで見出し下か写真下に置く
  • 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

  • カラム: SP は 1 カラム
  • 本文ブロックの幅: 画面幅の約 94%
  • 余白: セクション間 40px、基本単位 8px、カード内 12px(375px 幅換算)
  • 写真は画面幅いっぱいに大きく配置
  • 見出しは左寄せ、左余白は約10px
  • 写真同士を少し重ね、奥に暗い拡大写真を透かす
  • 詳細ショットは左上に枠付きで小さく差し込む
  • 最後に商品情報テキストと一覧写真を左右に並べる

Elevation & Depth

  • 影は使わず、写真背後の赤オレンジのグロウで奥行きを出す
  • 背景に同じ商品の暗い拡大写真を低い不透明度で重ねる

Shapes

  • 角丸: 小 0px / 中 4px / 大 8px。ボタンは角丸の長方形。
  • 写真の切り抜き: 切り抜き商品写真を背景に直接置く。一覧写真は四角+細い赤枠
  • セクション境界: 直線なし。グリッチ帯とテクスチャで連続的につなぐ
  • 角丸は購入ボタンのみ
  • 枠は細い暗赤の1px線
  • 見出し縦線は幅4px程度の四角

Components

  • 購入ボタン(button-primary): 中央配置の赤い角丸ボタン、白太字
  • 縦線付き見出し(heading-bar): 左に朱赤の縦線、白の明朝太字2行
  • 英字シリーズラベル(series-label): 赤い小四角アイコン+赤ピンクの英字
  • 付属パーツ一覧パネル(parts-panel): 暗灰の面に全パーツ写真と白の名称ラベル、赤枠
  • グリッチ帯(glitch-band): ティールの横長ノイズ帯を写真端に重ねる
  • 差し込み詳細写真(inset-photo): 赤枠の小さな四角写真を左上に重ねる
  • 商品情報ブロック(product-info): ロゴ・商品名・価格・セット内容の箇条書き

Do's and Don'ts

Do - 黒と暗赤の地で商品の赤を際立たせる - 写真を大きく、重ねて迫力を出す - 見出しは縦線付き明朝で統一 - グリッチ帯を数か所に散らして世界観を出す - 別売り等の注釈を必ず添える

Don't - 白や明るい背景色のセクションを入れない - ボタン以外を丸くしない - ピル型・パステル配色にしない - 本文を長く大きくしない - ティールを文字色に使わない

Page Structure

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

  1. ファーストビュー(作品世界と商品を一目で伝える): 宇宙風の暗背景に商品写真、右に縦書き極太コピー、ロゴを上部に
  2. 商品名と概要(商品名と位置づけを示す): 英字ラベル→朱赤の大きな商品名→短い説明と注釈
  3. 付属品一覧(セット内容を可視化): 縦線見出し+赤枠パネルに全パーツと名称ラベル
  4. 特長1(新規パーツの魅力): 見出し+一言、正面・背面の大写真とFRONT/REAR英字、差し込み写真
  5. 特長2(展示方法の提案): 縦線見出し+スタンド使用の写真、注釈
  6. 特長3(武装のバリエーション): 2体のポーズ写真を重ね、山括弧の武装名ラベル
  7. 特長4(劇中シーンの再現): 差し込み写真と大写真、エフェクト付きポーズ
  8. 商品情報(価格・内容の確認): 左にロゴ・価格・箇条書き、右に一覧写真、黄緑の注意書き
  9. CTA(購入へ誘導): 中央に赤い角丸ボタンを1つ

Imagery

  • 商品は切り抜き写真で背景に直接置き、強い光沢を見せる
  • 写真の背後に赤オレンジの光のにじみを入れる
  • 背景に暗赤のかすれ・汚しテクスチャ
  • 同じ商品の拡大写真を暗く透かして奥に配置
  • ティールのデジタルノイズ帯で劇中のグリッチ感
  • 縦の英字シリーズ名を背景の端に薄く置く
  • 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

  • PC は中央に SP 幅相当のカラムを置き左右は黒で埋める想定
  • PC では写真を2カラム配置も可
  • 見出しサイズは PC で1.3倍程度に拡大
  • グリッチ帯は画面端まで伸ばす

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