DESIGN.md — 蛍光イエロー×黒の機能性ウェア LP（Vivid Yellow Black Impact Apparel LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: 力強い・インパクト、ポップ・元気、クール・先進的
• キーワード: 蛍光イエロー・黒・極太ロゴ・コンデンス欧文・マーキー帯・角丸カード
• 地の質感: フラットなベタ塗り。写真は白背景の切り抜き風かモノクロ。グラデーションや陰影はほぼ使わない。
• 形: 大きめ角丸のカード、黒の太枠で囲った写真枠、円形の番号/ボタン、ギザギザの星形購入バッジ。
• 温度感: 高彩度でハイテンション。工業的で男性的な硬さとポップさが同居する。

Colors

• 地はイエローと黒の 2 色だけで交互に切り替える。
• 黄地には黒文字・黒カード、黒地には黄文字・黄カードを置き反転関係を守る。
• 強調語は黒地に黄文字の帯（マーカー風ラベル）で囲う。
• 白は写真枠と図解パネルの中だけに限定する。
• 赤や水色は図解の矢印・数値のみに使い、UI には使わない。
• CTA も黒×黄で、色ではなく星形などの形で目立たせる。

Typography

• 欧文はすべて大文字のコンデンス体で、番号と英語ラベルを並べる。
• 日本語見出しは欧文番号の下に大きめで置く。
• 極太変形ロゴは商品名ごとに大きく中央配置する。
• リード文は黒帯の中に黄色文字で、行ごとに帯を分ける。
• セクション見出しは欧文大＋日本語小のペアにする。
• 小見出しの前に ▼ 記号を付ける。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、データカードは横スクロール
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは左右 20px 前後の余白で全幅近くに置く。
• カード間は 24px 程度で縦に積む。
• セクション境界にマーキー帯を挟む。
• 手順は左にカード、右に縦の点線と円形 STEP 番号。
• 購入バッジは右下に固定追従させる。

Elevation & Depth

• 影は使わずフラットにする。
• 立体感は黒の太枠（3px 前後）とコントラストで出す。
• 固定ヘッダーのハンバーガーは黒の正方形ボタン。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 黒の太枠で囲った角丸小の矩形。白背景の人物・商品写真。
• セクション境界: 直線で色を切り替え、境界に横に流れる欧文マーキー帯を置く。
• カードは角丸 24px 前後。
• 番号・＋ボタン・カートは正円。
• 購入 CTA は星形（ギザギザ）。
• ラベル見出しはピル型の黒枠。

Components

• 星形購入バッジ（badge-buy-star）: 黄枠の黒い星形に黄色のカートと短い購入文言。右下に固定。
• マーキー帯（marquee-band）: 黒地に黄の大文字欧文を横に繰り返し流す。
• 黄色機能カード（card-feature-yellow）: 黒地の上に黄色の大角丸カード。番号＋欧文ラベル、見出し、比較写真、説明、右下の黒丸＋ボタン。
• 黒ポイントカード（card-point-black）: 黄地の上の黒カード。左に黄の POINT 番号タグ、黄文字の見出しと本文。
• 黒帯リード（label-marker）: 行ごとに黒の帯を敷き黄色太字で強調。
• 太枠写真枠（frame-photo）: 黒い太枠の写真。左下に黒ラベル、右下に黒丸カートボタン。下にサムネ列。
• STEP 円番号（step-circle）: 黄地に黒線の正円、中に STEP と大きな番号。縦の点線で連結。
• 欧文セクション見出し（heading-section）: 大きなコンデンス欧文と小さな日本語、左右に音波状の弧線装飾。
• データカード（card-data）: 黒の角丸カードに黄色の円形イラストと黄文字の結果。横スクロール。

Do's and Don'ts

Do - イエローと黒の反転配色をセクションごとに切り替える。 - 数字と欧文ラベルはコンデンス体の大文字で揃える。 - 写真は黒の太枠で囲み、背景は白や薄グレーで抜く。 - 購入導線は星形バッジで常時表示する。 - 効果は BEFORE/AFTER 図解で見せる。

Don't - 淡いパステルや第 3 のブランド色を足さない。 - ドロップシャドウやグラデーションで装飾しない。 - 細い明朝体で見出しを組まない。 - 黄地に黄系の文字を重ねない。 - 写真を枠なしで背景に溶かさない。

Page Structure

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

1. ファーストビュー（一目で効果とブランドを伝える）: 黄地に人物の腰元写真、短いキャッチと極太ロゴ。左に縦書き SCROLL DOWN。
2. ブランド概要（シリーズの位置付けを示す）: マーキー帯の下に黒地黄文字の 2 行リード。
3. 技術紹介（独自技術の印象付け）: モノクロ写真に白の大型欧文ロゴ、骨格 X 線風ビジュアル、黄枠の動画風画像。
4. 機能 4 つ（効果を具体化する）: 黒地に黄色カードを 4 枚縦積み。番号・比較図・説明・＋ボタン。
5. ラインナップ（商品 1）（商品を見せる）: 欧文見出し、極太商品ロゴ、太枠写真スライダーとサムネ、黒帯リード。
6. 商品のポイント（利点を 3 つ伝える）: 黒カードに POINT 番号タグを付けて縦積み。
7. スタイリング（着こなしのイメージ）: 写真をずらして配置し縦書き欧文キャプション、背景に巨大な薄い欧文。
8. 商品 2 とデータ（試験結果で信頼を出す）: 極太ロゴ、黒帯リード、黒データカード横スクロールと注釈。
9. 構造解説（こだわりを図解）: 白パネル太枠に商品写真と点線の引き出し線で 4 つの特徴。
10. 使い方（装着手順を示す）: 黒カード 4 枚に写真と黄文字、右に STEP 円番号と縦点線。
11. フッター（回遊と終了）: 黒地に黄の PAGE TOP、ロゴ、リンク、暗い黄の補助リンク。

Imagery

• 白〜薄グレー背景のスタジオ撮影で、腰から下や手元をクローズアップ。
• 技術パートはモノクロ写真や X 線風の骨格 CG で硬質に。
• 比較図はグレーと黄の BEFORE/AFTER の 2 分割。
• 注釈は黄色円＋点線の引き出し線で示す。
• セクション見出しの左右に音波のような弧線装飾。
• 動きを示す矢印は水色や赤を図解内だけに使う。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC ではファーストビューを写真左・ロゴとリード右の 2 分割にする。
• PC では機能カード 4 枚を横並びのカルーセルにする。
• 商品は写真左＋ポイントカード右の 2 カラムにする。
• データカードと STEP カードは PC で 3〜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 行書くと起動時に読み込まれる。