DESIGN.md — 銀灰×紫グラデのゲーミング食品 LP（Holographic Gaming HUD Product LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: クール・先進的、力強い・インパクト、スポーティ
• キーワード: ゲーミング・HUDフレーム・ホログラムグラデ・銀灰メタリック・斜めカット・サイバー
• 地の質感: 銀灰色の地に、縦方向の白い光沢グラデーションを重ねてメタリックな質感を出す。強調面は青紫からオレンジへのグラデーション。
• 形: 四隅を斜めに切った多角形のパネルを使う。黒の太い線とL字のコーナー線、平行四辺形のストライプ、＋記号で組む。
• 温度感: 寒色が主体。オレンジの差し色で熱量を加える。

Colors

• ページの地は銀灰色にする。縦方向の白い光沢グラデーションを重ねる。
• 強調面には、青→紫→マゼンタ→オレンジの斜めグラデーションを使う。
• 黒は、HUD風の枠線、購入ボタン、ニュースセクションの地に限って使う。
• 紫グラデーションと黒の地では、文字を白にする。
• グラデーションの文字には、黒または白の縁取りか影を付けて読みやすくする。
• 注釈と線画アイコンはグレーにする。
• gradient-tag は文字 #FDFDFE × 背景 #AC68AA のコントラスト比が 3.89:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#A35AA1、4.56:1）を使う。

Typography

• 本文は太め（700）にし、字間を広めにとる。
• キャッチはイタリック風に傾けて、グラデーションで塗る。
• 英字の商品名は、縦長の極太コンデンス書体にする。
• 小見出しの両脇に＋記号を2つずつ置く。
• 背景には、大きな斜体の流れ文字をアウトラインで敷く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ニュースは 2 カラムのグリッド。
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• 左右の余白は 16px 前後にする。
• FVは黒のHUDフレームで囲み、その中に商品とキャッチを置く。
• セクションの余白は広めにとり、線画アイコンを散らす。
• ニュースのカードは、画像の下に日付とタイトルを置く。タイトルは2行で省略する。

Elevation & Depth

• 影はほとんど使わない。
• 商品写真にだけ、柔らかいドロップシャドウを付ける。
• 奥行きは、黒い線のずらし重ねで表現する。

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角丸なしの矩形。チーム写真は横長で切り抜く。
• セクション境界: 直線で切り替える。帯の端は斜めにカットする。
• 角丸は使わない。角は斜めにカットする。
• パネルの角にはL字のコーナー線を添える。
• 平行四辺形の黒ストライプを区切りの装飾にする。

Components

• HUDフレーム（hud-frame）: FVを囲む黒い太線の枠。角を斜めに切り、内側に細い線を重ねる。
• EC購入ボタン（button-buy）: 左が黒地にカートアイコン、右が白パネル。下部を斜めに切った黒いタブを付ける。
• グラデーション帯見出し（gradient-tag）: 文字の背後に、紫からオレンジへのグラデーションを短い帯で敷く。
• 成分パネル（ingredient-chip）: 四隅を斜めに切った、グラデーション塗りのパネル。黒い縁とコーナー線を付ける。
• ＋装飾の小見出し（plus-heading）: 小見出しの両脇に、＋記号を2つずつ並べる。
• 紹介カードのスライダー（team-card）: 写真の下に、グラデーション地の説明パネルを置く。左右に矢印とサムネイルを付ける。
• ブラケットボタン（button-bracket）: 白地の左右に、角括弧型の黒線を付けた「すべて見る」ボタン。
• 幅広リンクボタン（button-wide）: 黒地または紫グラデーション地の全幅ボタン。右端に＞を置く。

Do's and Don'ts

Do - 地は銀灰色のメタリック調に保つ。 - 強調は、青・紫・オレンジのグラデーションか黒に限る。 - パネルの角は斜めにカットして、HUD感を出す。 - ＋記号や線画のゲーム機器アイコンを、余白に散らす。 - 本文は太字にして、字間を広くとる。

Don't - 角丸やピル型のボタンを使わない。 - 暖色の単色地や、ナチュラル系の質感を使わない。 - グラデーション以外の派手な原色を足さない。 - 細い明朝体は使わない。

Page Structure

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

1. ファーストビュー（商品とキャッチを一目で伝える）: HUDフレームの中に、商品写真、グラデーションの斜体キャッチ、極太の英字商品名を置く。右下にSCROLLのタブを付ける。
2. 利用シーン（誰に向けた商品かを示す）: グラデーション帯の見出しを2つ置き、その下に＋装飾の小見出しと本文を続ける。周囲に線画アイコンを置く。
3. 商品詳細（味やパッケージなどの特長を説明する）: 商品写真、太字の商品名、箇条書きの特長を順に置く。
4. 購入CTA（ECでの購入へ誘導する）: 黒と白を組み合わせたHUD型の購入ボタンを置く。
5. 成分（主な成分を示す）: 斜めカットのグラデーションパネルを縦に3つ並べ、その下に注釈を置く。
6. ブランド紹介（コミュニティの趣旨を伝える）: 紫グラデーションの全幅帯に白文字を置き、下端に大きな流れ文字を敷く。
7. サポートチーム紹介（eスポーツとの結びつきを示す）: 写真とグラデーションの説明パネルを組み合わせたスライダーにする。
8. ニュース（最新情報を伝える）: 黒地に2カラムのカードを並べ、最後にブラケットボタンを置く。
9. 関連リンク（ブランドサイトと商品概要へ戻す）: 黒地とグラデーション地の幅広ボタンを、上下に並べる。
10. フッター（会社情報と規約へのリンク）: グラデーション地に、ロゴ、縦並びのリンク、コピーライトを中央揃えで置く。

Imagery

• 商品は光沢のあるパウチの切り抜き写真にし、柔らかい影を付ける。
• パッケージや装飾は、青・紫・オレンジのホログラム調グラデーションでそろえる。
• コントローラー、キーボード、ヘッドセットなどを、グレーの線画アイコンで描く。
• 選手の写真は、カラフルなペンキ飛沫風の背景で集合撮影する。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは、FVの商品を左、キャッチを右に分ける。
• PCでは、上部にナビゲーションを横並びで置く。
• 成分パネルは、PCでは3つを横並びにする。
• チーム紹介は、PCでは左にサムネイルの縦列、右に大きなカードを置く。
• ニュースは、PCでは3カラムにする。
• フッターは、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 行書くと起動時に読み込まれる。