--- version: alpha name: Nostalgic Showa Black Gold Collectible Diorama LP description: 黒地と金の額縁装飾に赤い CTA を重ねた、昭和ノスタルジーを感じさせる模型の定期購読 LP。夜景を思わせる写真と立体的な極太明朝の見出しで高級感を出す。中盤は生成り色の地に切り替え、資料写真を見せる記事パートにしている。 colors: background: '#000000' primary: '#C8AF5D' cta: '#C8000A' on-cta: '#FFFFFF' marker: '#F5D637' background-alt: '#EFE3C9' surface: '#FEFEFE' secondary: '#B4242B' dark-section: '#797246' accent-1: '#6C5917' accent-2: '#D86924' text-body: '#33302F' on-dark: '#FCFBFC' line: '#D6CEBC' background-accessible: '#989898' dark-section-accessible: '#A2995F' primary-accessible: '#89742E' typography: display: fontFamily: Shippori Mincho B1 fontSize: 34px fontWeight: 800 lineHeight: 1.2 headline-lg: fontFamily: Noto Serif JP fontSize: 36px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em body-lg: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 400 lineHeight: 1.75 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.5 label-button: fontFamily: Noto Sans JP fontSize: 21px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.04em rounded: sm: 4px md: 8px lg: 14px full: 999px spacing: unit: 8px card: 24px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 56px cta-box: backgroundColor: '{colors.dark-section}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 180px benefit-badge: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.note}' rounded: '{rounded.full}' height: 64px gift-frame: backgroundColor: '{colors.surface}' textColor: '{colors.secondary}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 600px gift-tag: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 30px premium-frame: backgroundColor: '{colors.background}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 900px content-ribbon: backgroundColor: '{colors.accent-2}' textColor: '{colors.primary}' typography: '{typography.headline-md}' height: 64px toggle-button: backgroundColor: '{colors.primary}' textColor: '{colors.surface}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 44px spec-table: backgroundColor: '{colors.background}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 260px zoom-icon: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' rounded: '{rounded.full}' height: 32px --- # DESIGN.md — 黒×金×赤の昭和レトロ模型分冊 LP（Nostalgic Showa Black Gold Collectible Diorama LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: レトロ、ラグジュアリー・ダーク、情報量多め・訴求型、力強い・インパクト - **キーワード**: 昭和レトロ・黒と金・額縁装飾・夜景の灯り・立体見出し・定期購読 - **地の質感**: 黒地の上に金のグラデーション枠と光沢のある帯を重ねる。オリーブ金のダマスク調の地紋も使う。生成り色のパートはぼかした白カードで柔らかく見せる。 - **形**: 角を内側にえぐった額縁フレーム、角丸の小さい矩形、円形バッジ、斜めにカットしたラベル帯 - **温度感**: 暖色寄り。夜の灯りを思わせる琥珀色と金色 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#000000` | ページの基本地色（黒） | 40% | 画素の実測 | | `primary` | `#C8AF5D` | 金（枠・見出し・帯） | 6% | 画素の実測 | | `cta` | `#C8000A` | 申込ボタンの赤 | 2% | 推定 | | `on-cta` | `#FFFFFF` | CTA 上の白文字 | 0% | 画素の主要色に補正 | | `marker` | `#F5D637` | 送料無料ラベルの黄色・強調文字 | 0% | 推定 | | `background-alt` | `#EFE3C9` | 記事パートの生成り地 | 16% | 画素の実測 | | `surface` | `#FEFEFE` | 白カード・特典枠の地 | 14% | 画素の実測 | | `secondary` | `#B4242B` | 特典見出しのえんじ赤 | 3% | 画素の実測 | | `dark-section` | `#797246` | オリーブ金の CTA ボックス・地紋 | 8% | 画素の実測 | | `accent-1` | `#6C5917` | 記事見出しの茶金文字 | 0% | 画素の実測 | | `accent-2` | `#D86924` | サブ見出しのオレンジ | 0% | 画素の実測 | | `text-body` | `#33302F` | 明るい地の本文 | 2% | 画素の実測 | | `on-dark` | `#FCFBFC` | 黒地の本文白 | 2% | 画素の主要色に補正 | | `line` | `#D6CEBC` | 仕様表・区切りの罫線 | 0% | 画素の主要色に補正 | | `background-accessible` | `#989898` | AA を満たす補正値（計算） | | 計算 | | `dark-section-accessible` | `#A2995F` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#89742E` | AA を満たす補正値（計算） | | 計算 | - 地は黒を基本にする。記事・資料パートだけ生成り地に切り替えて読みやすくする - 金は枠線・ラベル帯・見出しのグラデーションに使い、広い面には使わない - 赤は主 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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV と章見出し（白文字に黒の縁取りと影をつけた立体表現） | 明朝 | Shippori Mincho B1 | 800 | 34px | 1.2 | 0.0em | | `headline-lg` | FV コピーの強調部分（金グラデーション） | 明朝 | Noto Serif JP | 900 | 36px | 1.3 | 0.02em | | `headline-md` | 特典名・記事タイトル | ゴシック | Noto Sans JP | 700 | 22px | 1.4 | 0.02em | | `headline-sm` | ラベル帯や小見出し | ゴシック | Noto Sans JP | 700 | 17px | 1.4 | 0.03em | | `body-lg` | セクションの説明文 | ゴシック | Noto Sans JP | 400 | 16px | 1.75 | 0.03em | | `body-md` | 特典説明・仕様表 | ゴシック | Noto Sans JP | 400 | 14px | 1.6 | 0.02em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 11px | 1.5 | 0.0em | | `label-button` | CTA ボタンの文字 | ゴシック | Noto Sans JP | 900 | 21px | 1.2 | 0.04em | - 章見出しは極太明朝の画像風にする。白〜クリームの文字に黒の縁取りとドロップシャドウをつける - 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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-227873b3`（元 LP の URL から採番） - **元 LP**: https://hcj.jp/tdi/home.html - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。