DESIGN.md — 黒×金×赤の昭和レトロ模型分冊 LP（Nostalgic Showa Black Gold Collectible Diorama LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: レトロ、ラグジュアリー・ダーク、情報量多め・訴求型、力強い・インパクト
• キーワード: 昭和レトロ・黒と金・額縁装飾・夜景の灯り・立体見出し・定期購読
• 地の質感: 黒地の上に金のグラデーション枠と光沢のある帯を重ねる。オリーブ金のダマスク調の地紋も使う。生成り色のパートはぼかした白カードで柔らかく見せる。
• 形: 角を内側にえぐった額縁フレーム、角丸の小さい矩形、円形バッジ、斜めにカットしたラベル帯
• 温度感: 暖色寄り。夜の灯りを思わせる琥珀色と金色

Colors

• 地は黒を基本にする。記事・資料パートだけ生成り地に切り替えて読みやすくする
• 金は枠線・ラベル帯・見出しのグラデーションに使い、広い面には使わない
• 赤は主 CTA と特典見出しに限定する。CTA には上から下への赤のグラデーションをかける
• 黄色は送料無料などのお得情報ラベルと価格の強調だけに使う
• CTA は必ずオリーブ金のボックスに入れ、白丸のメリットバッジ 4 つと組み合わせる
• コンテンツ紹介のラベル帯は、オレンジ・えんじ・紺・緑・紫・金と色を変えて区別する
• page は文字 #33302F × 背景 #000000 のコントラスト比が 1.6:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら background-accessible（#989898、4.54:1）を使う。
• cta-box は文字 #33302F × 背景 #797246 のコントラスト比が 2.69:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら dark-section-accessible（#A2995F、4.52:1）を使う。
• content-ribbon は文字 #C8AF5D × 背景 #D86924 のコントラスト比が 1.63:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。
• toggle-button は文字 #FEFEFE × 背景 #C8AF5D のコントラスト比が 2.14:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#89742E、4.53:1）を使う。

Typography

• 章見出しは極太明朝の画像風にする。白〜クリームの文字に黒の縁取りとドロップシャドウをつける
• FV コピーは白の明朝と金グラデーションの明朝を組み合わせ、要所の語だけ金で大きくする
• 価格と日付は明朝の大きな数字にし、単位は小さく添える
• 黒地の見出しは赤いグロー（外側への光彩）で浮かせる
• 本文はゴシックで、行間 1.6〜1.75 にする
• 注釈は右揃えか左揃えの小さい文字で、セクションの末尾にまとめる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特典やメリットバッジは横並びの小要素で見せる
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• 主要ブロックは左右 16px 前後の余白で、ほぼ全幅に置く
• 特典ブロックは額縁型の白枠カードに縦積みし、項目の間は罫線で区切る
• 各写真の右下に赤丸の拡大アイコンを重ねる
• CTA ブロックは特典の直後に毎回同じ構成で繰り返す
• 記事パートは白カードの中に、見出し→出典→本文→写真の順で並べる

Elevation & Depth

• 白カードには周囲をぼかした柔らかい白〜生成りのグローを使う
• CTA ボタンには下方向の影をつけ、少し立体的にする
• 写真の重ね置きには右下にドロップシャドウをつける
• 見出し文字には光彩と影を使い、面の影は控えめにする

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 14px。ボタンは角丸の長方形。
• 写真の切り抜き: 矩形のまま。資料写真は 2 枚を重ねてずらし、片方に色帯付きのキャプションをつける
• セクション境界: 直線で地色を切り替える。黒→生成りの境目はグラデーションでぼかす
• 額縁フレームは角を内側にえぐった金の二重線で描く
• メリットは白丸に金の細枠のバッジにする
• ラベル帯は角を斜めに落とした多角形に、金の縁取りをつける
• 特典番号はピル型の赤いタグに、丸数字を合わせる

Components

• 申込 CTA（button-primary）: 赤グラデーションの横長ボタン。左に三角矢印、上に黄色の送料無料ラベルを置く
• CTA ボックス（cta-box）: オリーブ金の角丸の箱に、白丸のメリットバッジ 4 つと CTA を縦に並べる
• メリット丸バッジ（benefit-badge）: 白丸の中に明朝で 2〜3 行の短い利点を書く
• 特典額縁カード（gift-frame）: 装飾角の白枠カード。上部にえんじ赤の見出し帯を置き、特典を罫線で区切って並べる
• 特典番号タグ（gift-tag）: 赤いピル型のタグに白文字の明朝と灰色の丸数字を入れる
• 上位プラン枠（premium-frame）: 黒グラデーションの地に金の細枠を回し、金の光沢プレート見出しと、白枠で囲んだ条件文を入れる
• コンテンツ紹介ラベル（content-ribbon）: 斜めカットの色帯に金の縁取りをつけ、小見出しと金文字の大見出しを 2 段で入れる
• 切替ボタン（toggle-button）: 選択中は茶金の塗り、非選択は白地に金枠にした 2 択ボタン
• 仕様表（spec-table）: 黒地に白文字の 2 列表。行の区切りは細い罫線にする
• 拡大アイコン（zoom-icon）: 写真の右下に置く赤丸の白い虫眼鏡アイコン

Do's and Don'ts

Do - 黒地に金の細枠と装飾角を使って、ショーケースのような高級感を出す - CTA ブロックは特典の後に同じ構成で 3 回ほど繰り返す - 製品写真は夜景や点灯した状態の暖かい光で見せる - 価格・日付・サイズは明朝の大きな数字で強調する - 記事パートは生成り地と白カードに切り替え、資料写真と再現写真を重ねて並べる

Don't - パステルや寒色を主役にしない - CTA を赤以外の色にしない - 見出しを細いゴシックの平板な表現にしない - 金を広い面のベタ塗りに使わない - 角丸の大きなポップなカードを使わない

Page Structure

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

1. ファーストビュー（世界観を伝え、発売日と価格を提示する）: 黒地に夕景の製品写真を置く。明朝の白と金でコピーを組み、サイズのバッジと大きな価格・商品パッケージを並べる
2. 写真スライダーと動画（完成形と CM を見せる）: 横にスクロールする写真列の下に、金地の動画カード 2 枚とサムネイルを置く
3. 申込 CTA（早めに申込へ誘導する）: 赤ボタンの下に、ログイン用の白文字リンクを置く
4. 期間限定特典（申込特典を訴求する）: 斜めカットのタイトル帯をつけた額縁白カードに、特典を番号タグ付きで縦に並べる
5. 上位プラン特典（上位コースへ誘導する）: 黒の金枠ボックスに光沢プレート見出しを置き、赤くグローさせた特典名と製品写真を並べる
6. CTA ボックス（申込を後押しする）: オリーブ金の箱に丸バッジ 4 つと赤 CTA を入れ、最後に FAQ リンクを添える
7. 製品の魅力（ジオラマの完成度を伝える）: 立体明朝の見出しの下に本文と点灯切替ボタン、全景写真を置く
8. 付属パーツ紹介（初回付属品を見せる）: 赤丸バッジ付きの見出しの下に、金枠の写真とオレンジの小見出し、本文を並べる
9. ランドマーク解説と仕様（見どころとスペックを示す）: 全景写真から引き出し線を伸ばして名称ラベルをつける。その下にサイズバッジと仕様表を置く
10. 歴史・資料パート（郷愁と価値を高める）: 生成り地の白カードに古い写真と再現写真を重ね、色帯付きのキャプションをつける
11. 付録コンテンツ紹介（マガジンの中身を伝える）: 金の額縁の白い面に、色違いのリボン見出しと誌面画像を縦に並べる
12. 制作者紹介と関連商品（信頼性を補強する）: 地紋の地に金の縦線と明朝の名前、白い経歴ボックスを置く。オリーブの箱で収納グッズを見せる
13. クロージング CTA（最終的な申込を促す）: 特典カード、上位プラン枠、CTA ボックスを再び並べる

Imagery

• 製品はジオラマを低い位置から見上げるアングルで撮る。夕景や夜景の空と、点灯した窓の暖かい光を入れる
• 付属品は白い背景の切り抜き写真にする
• 古いモノクロや退色カラーの報道写真風の資料に、現在の再現写真を重ねて比較させる
• 誌面のサンプルは、少し影をつけたページ画像で見せる
• 装飾は金の額縁、きらめく光点、ダマスク柄の地紋にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では FV を左に大きな写真、右にコピー・価格・動画・CTA、端に縦の写真列を置く横長構成にする
• PC の特典は 3 列横並びのカード、上位プランは 2 列にする
• PC の CTA ボックスは、左に丸バッジ 4 つ、右に赤ボタンの横並びにする
• PC のランドマーク記事やマガジン紹介は 2〜3 列のグリッドにする
• PC のコンテンツ幅は約 960px に固定し、黒地を全幅に敷く

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