DESIGN.md — オリーブ金×黒×えんじのゴルフシューズLP（Olive Gold and Black Sporty Golf Shoes LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: 力強い・インパクト、スポーティ、情報量多め・訴求型、クール・先進的
• キーワード: オリーブゴールド・黒帯見出し・えんじ強調・斜めカット・英字透かし・雑誌風レイアウト
• 地の質感: マットなグレー地。ところどころに六角形の網目や細いグラデーションを敷き、金の紙吹雪で装飾する
• 形: 角丸のない四角形と黒い帯が基本。セクション境界は斜めカットやV字の切り込みにする
• 温度感: やや寒色寄りのニュートラル。金とえんじで温かみを足す

Colors

• 地はライトグレーと白を交互に使い、要所でオリーブゴールドやスレートグレーの全幅セクションを挟む
• 強調語はえんじ色かオリーブゴールドにし、1文につき1〜2語までに抑える
• 悩み・POINTの見出しは黒帯に白文字で統一する
• オリーブゴールドの帯には白文字を乗せる
• 金の紙吹雪や月桂冠は実績セクションだけで使う
• section-badge は文字 #FFFFFF × 背景 #A09752 のコントラスト比が 2.98:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#7E7741、4.56:1）を使う。
• gold-bar は文字 #FFFFFF × 背景 #A09752 のコントラスト比が 2.98:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#7E7741、4.56:1）を使う。

Typography

• 見出しは極太ゴシックにし、キーワードだけ1.5〜2倍に拡大する
• 鉤括弧「」で囲む語は大きく、えんじ色にする
• 縦書きの黒帯見出しを写真の横に置く
• 英字は細めのサンセリフにし、大きな透かしとして背面に敷く
• 手書き風の英字スクリプトを小さく添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真と文字はところどころ左右に重ねて配置
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• セクション冒頭に小さな英字ラベル帯か丸バッジを置く
• 写真は画面幅いっぱいに置き、帯見出しを重ねる
• 機能説明は写真と短文を左右交互に並べる
• セクション間は ▼▼▼ や細い縦線でつなぐ

Elevation & Depth

• 影はほぼ使わず、黒枠線と面の色の差で階層を作る
• 商品写真の下にだけ薄い影を付ける

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角形を基本に、斜めカットや平行四辺形でも切り抜く。人物は切り抜きで配置する
• セクション境界: 斜めカット・下向きV字・直線
• 角丸は使わない
• 丸は番号バッジと数値バッジだけに使う
• 枠付きカードは細い黒線で囲む
• ラベル帯は四角形にする

Components

• 英字ラベル帯（label-tag）: セクションの上に置く黒い小帯。白い英字大文字を入れる
• 丸型番号バッジ（section-badge）: オリーブゴールドかえんじの円に番号と英字を入れる
• 悩みリスト黒帯（worry-bar）: チェックアイコンと白文字の悩みを黒帯で縦に3つ並べる
• 金帯の強調文（gold-bar）: オリーブゴールドの帯に白文字でメリットを並べる
• POINT番号見出し（point-header）: 黒い面の左上に金の大きな番号、中央に白い2行見出しを置く
• アルファベット機能ラベル（feature-label）: えんじの四角にA〜Fの文字を入れ、横に太字の機能名を置く
• 星評価付きレビューカード（review-card）: 黒枠の白いカード。右上に英字のvoice番号、金の星5つ、本文、属性を入れ、右下にイラスト人物を置く
• 月桂冠の実績表示（award-laurel）: 金の月桂冠で大きな数字を挟み、周りに紙吹雪を散らす
• サイズ表（size-table）: 黒い見出し行と細い罫線で組む数値表

Do's and Don'ts

Do - 強調語はえんじ色かオリーブゴールドで太く大きくする - 黒帯・金帯の見出しを繰り返し使い、リズムを作る - 英字の透かし文字や英字スクリプトを添える - 数値の実績は月桂冠と大きな数字で見せる - 注釈は小さなグレー文字で必ず入れる

Don't - 角丸やピル型のボタンを使わない - ビビッドな原色を足さない - 強調色を3色以上同時に使わない - 細い明朝体を見出しに使わない - 余白を詰めすぎて写真と文字の重なりを潰さない

Page Structure

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

1. ファーストビュー（商品のコンセプトを一目で伝える）: ゴルフ場の写真に極太の白抜き見出しを重ね、円形バッジ2つと縦書きの補足を置く。下部は斜めカットで商品写真へつなぐ
2. 商品紹介（商品名と特長を提示する）: グレーのグラデーション地に黒い靴の写真、縦書きの黒帯見出し、英字の透かし文字を置く
3. 特長サマリー（2つの効果を掛け合わせで見せる）: オリーブゴールドの円2つを×でつなぎ、下にえんじ強調の見出しを置く
4. メディア掲載（権威付け）: オリーブゴールドの地に白帯の見出しと雑誌の写真を並べる
5. 実績（売上やランキングで信頼を得る）: 月桂冠・大きな数字・金の紙吹雪で構成する
6. 在庫の案内（購入を急がせる）: 金の地に白い枠付きカードを置き、えんじ文字とスタッフのイラストを添える
7. 社員の声（使った感想を伝える）: 写真とグレーの吹き出し面を左右交互に置き、英字のvoice番号を付ける
8. 悩みの提起（共感を得る）: グレーの網目地に黒帯の悩み3つを並べ、筋肉写真と縦書きの極太見出しを重ねる
9. 理由の解説（なぜ効くのかを説明する）: 番号バッジ、鉤括弧で囲んだ大見出し、金帯のメリット、イラストの並びで構成する
10. 技術の解説（独自のパーツを図解する）: スレートグレーの地にインソール写真を置き、引き出し線と注記で説明する
11. 3つのポイント（機能を詳しく伝える）: 黒いPOINT見出しの後に、A〜Fのラベル付きで写真と短文を交互に並べる
12. 製作秘話・比較（開発のこだわりを伝える）: えんじの丸バッジ、縦書きの英字、黒地の比較動画枠で構成する
13. お客様の声（第三者の評価で信頼を得る）: 星評価付きの黒枠カードを3枚、縦に積む
14. 商品仕様・サイズ表（購入前の情報を提供する）: 商品名、商品写真、仕様リスト、黒い見出し行のサイズ表を並べる

Imagery

• 屋外のゴルフ場で、自然光の下に男女のモデルを置いた引きの写真
• グレー背景のスタジオで、黒と白の商品をローアングルから撮った写真
• 骨格や筋肉を赤く光らせたモノトーンの解説写真
• シンプルなフラットイラストのゴルファー
• 金の紙吹雪・月桂冠・王冠の装飾
• スタジオで撮った全身の男女ペア写真
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央の幅375〜750px程度にSPのデザインをそのまま置き、左右は背景色で埋める
• PCでは写真をセクション幅いっぱいに置き、見出しはSPの1.3倍程度にする
• 機能説明はPCで2カラムにしてもよい

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