DESIGN.md — 宇宙紺×金黄の巨大ロボ模型分冊 LP（Cosmic Navy Robot Model Partwork LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: 力強い・インパクト、クール・先進的、ラグジュアリー・ダーク、情報量多め・訴求型
• キーワード: 星空・深海グラデ・金メタリック・発光見出し・ギミック紹介・定期購読
• 地の質感: 星の粒子と光のスジが入った宇宙背景。見出しは外側に青白いグロー
• 形: 金枠の角丸カード、斜めカットのパネル、立体的な黄色ボタン
• 温度感: 寒色の濃紺ベースに黄色と金で熱量を足す

Colors

• 地は上から黒→濃紺→青緑→濃紺と縦グラデで移り、セクションの切替を色で示す
• 強調は黄色（CTA）と金メタリック（数値・カード枠）の 2 系統だけ
• 見出しと本文は濃色地で白、明るい箱の中だけ黒文字
• 赤は虫眼鏡アイコンなど小さい点に限る
• CTA 帯は濃い紫紺の無地で他のセクションと分ける

Typography

• 本文も含め全体を太字ゴシックで統一
• 大見出しは中央揃え・白・外側に青白いグロー
• 数値は金メタリックグラデ＋太い下線で記念碑的に
• ギミック解説の見出しは縦書きも使い、写真の横に添える
• 本文は左揃え、注釈は小さく※から始める
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、ギミックカードは 2 カラムのグリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 大見出し→本文→大きな切り抜き写真の順で 1 セクションを作る
• ギミックカードは写真＋下に 2〜3 行の説明
• 写真は画面幅いっぱい近くまで大きく使う
• CTA 帯はファーストビュー直下とページ末尾に置く
• 注釈は右寄せで小さく

Elevation & Depth

• カード・写真に濃いドロップシャドウ
• 黄色ボタンは上部ハイライトと下影で立体的に
• 見出しに青白い外側グロー
• 切り抜き写真は背景に影を落として浮かせる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品は切り抜きで宇宙背景に浮かせ、詳細写真は金枠の角丸長方形（角を斜めに落とす）
• セクション境界: 直線の切替。背景色とグラデの変化で区切る
• カードは 2〜3px の金の枠線
• パネルは角を斜めにカットしたメカ調の形
• ボタンは控えめな角丸の横長長方形
• 特典は歯車形の銀メダルで表す

Components

• 定期購読申込ボタン（button-primary）: 黄色の立体ボタン。左に三角矢印、右に紺の送料無料バッジ
• マイページリンク（link-login）: 白い線アイコン＋白太字のテキストリンク
• 送料無料バッジ（badge-shipping）: 紺紫地に白文字の小さな角丸ラベル
• 金メタリック寸法表記（spec-number）: 小ラベル＋巨大数値＋金の下線。2 つを横並び
• ギミック写真カード（card-gimmick）: 金枠の写真に左上ラベル、右下に赤丸の虫眼鏡
• 機能リストパネル（panel-feature-list）: 紺の斜めカットパネルに見出しと黄丸の箇条書き、右に商品写真
• 歯車型特典メダル（medal-benefit）: 銀の歯車形に黒文字で特典を 3 つ並べる
• 作家紹介ボックス（box-profile）: 半透明ライトグレーに細い金枠、黒文字で略歴
• 動画サムネイル枠（video-thumb）: 紺パネルにサムネイルと白文字の動画ラベル

Do's and Don'ts

Do - 背景はいつも星空・光のスジ入りの寒色グラデにする - 数値は金メタリックの大きな文字で見せる - 商品写真は大きな切り抜きで画面を埋める - CTA は黄色の立体ボタン 1 種に統一する - ギミックは写真カードと短い説明で細かく分ける

Don't - 白や淡色の広い地を使わない - 細い明朝や手書き書体を使わない - 黄色を CTA 以外の大きな面に使わない - 写真の枠を無装飾にしない（金枠が基本） - 長い本文を 1 ブロックに詰め込まない

Page Structure

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

1. ファーストビュー（商品の迫力とシリーズ名を一目で伝える）: 稲妻と星空を背景に、上部ロゴ、中央に大きなロボと機体のキービジュアル
2. 寸法と動画（巨大さを数値で示し動画へ誘導）: 金メタリック数値を 2 つ横並び、下に紺パネルの動画サムネイル
3. CTA 帯（早めに申込を促す）: 濃紫紺の帯に黄色ボタンとマイページリンク
4. 商品概要（どんなモデルかを説明）: 発光する白い大見出し、本文、注釈、全身の切り抜き写真と数値
5. ギミック紹介（細かな可動・発光機能を列挙）: 金枠の写真カードを 2 カラムで並べ、各カードの下に短い説明
6. 再現度の訴求（ポーズと内部構造の精密さを見せる）: 大見出しの後、全身写真の横に縦書き見出しを左右交互に配置
7. 合体機構（機体との合体ギミックを紹介）: 光のスジ入りの青背景に横書き見出しと横長の切り抜き写真
8. 付属リモコン（演出できる機能を一覧で見せる）: 斜めカットの紺パネルに黄丸の箇条書きと手持ち写真
9. マガジン内容（冊子の付加価値を伝える）: 線画の漫画を薄く敷いた背景、大見出し、誌面写真
10. 作家紹介（制作陣の信頼感を出す）: 半透明グレーの金枠ボックスに名前見出しと略歴
11. 最終 CTA（申込への最後のひと押し）: 紫紺の帯に、歯車メダル 3 つを載せた大きな黄色ボタンと FAQ リンク

Imagery

• 商品は光沢を強調した切り抜き写真。ハイライトをはっきり残す
• 背景は星の粒子、星雲、稲妻、光のスジが入った宇宙や深海の CG
• 詳細カットは寄りで撮り、発光部をはっきり見せる
• 漫画の線画を背景に薄く重ねる
• 特典は銀の歯車メダル、操作アイコンは白の線画
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はファーストビューで左にロボ、右にロゴと機体・数値・動画を横に並べる
• PC の CTA はメダル 3 つとボタンを横 1 列の黄色パネルにまとめる
• PC のギミックカードは中央の全身写真を囲んで 4〜5 カラムに配置
• PC の再現度セクションは 2 体の写真と縦書き見出しを左右に並べる
• 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 行書くと起動時に読み込まれる。