DESIGN.md — 黒緑ハニカム×岩肌の玩具ロボ LP（Dark Hex Grid Toy Robot Showcase LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: 力強い・インパクト、ポップ・元気、情報量多め・訴求型
• キーワード: ハニカム柄・岩肌フレーム・縁取り立体文字・変形・合体図解・CG 商品写真・ルビ付き
• 地の質感: 暗い六角形グリッドの地と、灰色の岩肌テクスチャ帯。中央から緑のスポットライトが放射状に広がる。
• 形: 上辺がギザギザの岩肌カード、斜めの帯、太い赤矢印。角丸はほとんど使わない。
• 温度感: 暗い寒色の地に、黄・赤・緑の高彩度色を差したホットなコントラスト

Colors

• 地は黒緑のハニカム柄で統一し、中央を緑で明るくする
• 見出しは緑のグラデーション文字に白と黒の二重の縁取りを付ける
• 赤は斜めの帯と矢印だけに使う
• 黄は数字やキーワードなどの強調にだけ使う
• キャラ説明は灰色の岩肌カードにのせ、暗い地から浮かせる
• キャラ名ラベルはキャラの体色（緑・黒・青・灰）に合わせる
• rock-heading-band は文字 #2C8A5F × 背景 #BCC0B2 のコントラスト比が 2.31:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。
• slanted-red-banner は文字 #F2C230 × 背景 #C8202A のコントラスト比が 3.39:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#A51A23、4.52:1）を使う。

Typography

• 見出しはすべて極太にし、白と黒の二重の縁取りを付ける
• 子ども向けに漢字へ小さなルビを付ける
• 見出しは少し斜めにし、勢いを出す
• 本文はほとんど使わず、短いフレーズで伝える
• 英字の商品表記は太いコンデンス体にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。キャラ紹介だけ 2×2 のグリッド
• 本文ブロックの幅: 画面幅の約 96%
• 余白: セクション間 16px、基本単位 8px、カード内 8px（375px 幅換算）
• 画像はほぼ画面幅いっぱいに配置する
• セクションの頭に横長の見出し帯を置く
• キャラカードは 2 列にし、間を 8px 前後にする
• 合体の図解は左に小さいパーツ、右に完成形を置き、矢印でつなぐ
• ファーストビューは 4 分割の写真の上に斜めの帯を重ねる

Elevation & Depth

• 文字には太い縁取りとドロップシャドウを付けて立体感を出す
• カードに影は付けず、岩肌の質感でコントラストを出す
• 商品 CG の背後に緑のグロウを敷いて浮かせる

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 6px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品は CG を切り抜いて置く。ファーストビューだけ四角い 4 分割にする
• セクション境界: 上辺がギザギザの岩肌の帯で区切る
• カードの上辺は岩が欠けたような不規則な形にする
• ラベルは平行四辺形か、角を斜めに落とした形にする
• 矢印は太い赤のブロック矢印にする

Components

• 岩肌の見出し帯（rock-heading-band）: ギザギザの岩肌の帯に、緑と黄の縁取り文字で見出しを置く
• 赤い斜めの帯（slanted-red-banner）: 写真の継ぎ目に斜めに重ね、黄と白の文字を入れる
• キャラ紹介カード（character-card）: 岩肌カードに商品 CG、番号、名前ラベル、ギミックの吹き出しをまとめる
• 番号付きの名前ラベル（name-label）: キャラの体色の帯に、番号と白文字の名前を入れる
• ギミックの吹き出し（gimmick-bubble）: 白地の小さなラベルに、変形のポイントを短く書く
• 合体を示す矢印（combine-arrow）: 太い赤矢印で、パーツから完成形への流れを示す
• サイズ表記（size-note）: 白い小さな箱に全長を書き、両矢印を添える
• 立体のメイン見出し（display-title）: 緑のグラデーション文字に白と黒の縁取りを付け、2 行で大きく見せる

Do's and Don'ts

Do - 暗いハニカム柄の地と、中央の緑の光を必ず使う - 見出しは縁取りを付けた極太文字にする - 商品 CG は大きく切り抜き、動きのある角度で見せる - 変形や合体は矢印と完成図で図解する - 漢字にはルビを付ける

Don't - 白い地や余白の多いミニマルな構成にしない - 細い書体や明朝体を使わない - 長い説明文を入れない - 淡いパステル色を使わない - 角丸のピル型ボタンを主役にしない

Page Structure

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

1. ファーストビュー（セットのキャラ 4 体を一目で見せる）: 4 分割の写真に赤い斜めの帯を重ね、黒い帯にロゴと商品名を置く
2. セット内容の訴求（何が手に入るかを伝える）: 岩肌の帯に 1 行の見出しを入れる
3. 復刻の訴求（仕様の魅力を強く打ち出す）: 緑の光を背に、立体文字の見出しを 2 行で置く
4. キャラ紹介（1 体ずつギミックを説明する）: 2×2 の岩肌カードに CG、番号、名前、吹き出しを入れる
5. 連動ギミック 1（既存商品との合体を見せる）: パーツを上に並べ、赤矢印で下の合体形 2 種へつなぐ
6. 連動ギミック 2（別の商品との合体を見せる）: 左にパーツを縦に並べ、赤い線でまとめて右の完成形へつなぐ
7. 注記（権利表記と画像の注意書き）: 右下に小さな白文字で置く

Imagery

• 玩具は CG かスタジオ撮影で、少し煽った斜めの構図にする
• 背景は暗い六角形グリッドで、中央に緑の光を広げる
• 岩やコンクリートのような灰色テクスチャで枠や帯を作る
• キャラごとの体色を、ラベルや背景の色にも反映する
• 赤いブロック矢印や両矢印で、動きやサイズを図示する
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像はないため、中央 750px 前後の 1 カラムに固定して表示する
• 左右の余白はハニカム柄の地をそのまま延長する
• キャラカードは PC で 4 列に広げてもよい
• 見出しの画像は縦横比を固定して拡大する

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