DESIGN.md — ボルドー×グレーの機能性シューズ LP（Burgundy Gray Functional Footwear LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: クール・先進的、力強い・インパクト、情報量多め・訴求型、上品・高級
• キーワード: ボルドー・モノトーン・縦書き見出し・斜め帯・解剖図 CG・ストリートスナップ
• 地の質感: 石壁・コンクリート・黒い石目の質感と、マットなグレーのグラデーション
• 形: 角丸なしの長方形、斜めの帯、下向き三角の吹き出し、ひし形のバッジ
• 温度感: クールで硬派。ボルドーとゴールドで少し温かみを足す

Colors

• 地の色は白・淡いグレー・ブルーグレー・黒を交互に切り替え、セクションの違いを出す
• ボルドーは帯見出し・ラベル・下線・吹き出しに絞って使う
• 数値や大きなキーワードはボルドーかオリーブゴールドで強調する
• 強調したい文はゴールドのマーカー帯に白文字で載せる
• 黒地のセクションには白文字とボルドーの縦線を組み合わせる
• 原色や彩度の高いポップな色は使わない
• marker-highlight は文字 #FFFFFF × 背景 #968C4E のコントラスト比が 3.41:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#7F7642、4.59:1）を使う。

Typography

• 見出しの下に、ボルドーの小さな英字サブタイトルを添える
• 写真の上の大見出しは縦書きの白い箱に入れ、写真の上に重ねる
• 大きな数値は欧文の幅広書体にし、単位は小さくする
• キーワードは「」で囲み、ほかの字より大きくする
• 本文は 14px 前後、行間は 1.8 でゆったり組む
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真の組み合わせだけ非対称のグリッドにする
• 本文ブロックの幅: 画面幅の約 82%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションの間はボルドーか黒の細い縦線でつなぐ
• ビジュアル帯は全幅、本文は左右に余白をとる
• 写真は左右にずらして配置し、雑誌のようなリズムを出す
• 理屈は「悩み → 原因 → 解決 → 商品」の順に積み上げる

Elevation & Depth

• レビューカードだけ薄い影と細い枠をつける
• そのほかはフラットにし、影は使わない

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの長方形。商品は切り抜き写真にする
• セクション境界: 斜めのカット、下向き三角の吹き出し、細い縦線
• 角丸は使わない（例外は円形の Before/After バッジ）
• ラベルはボルドーの平行四辺形か長方形にする
• 特長はボルドーのひし形 3 つで示す
• 斜めの帯に白文字を載せて動きを出す

Components

• ボルドー帯の見出し（band-heading）: 全幅のボルドー帯に白文字を置き、下に三角の吹き出しをつける
• 下線つきの見出し（underline-heading）: 黒の太字の見出しにボルドーの下線を引き、下に英字サブタイトルを置く
• 斜めのラベル（slant-label）: 平行四辺形のボルドーのラベルに白文字。つなぎの言葉に使う
• ひし形の特長バッジ（diamond-badge）: ボルドーのひし形 3 つに、特長を短く書く
• 数値の訴求（number-stat）: 縦書きのボルドーラベルの横に、ゴールドの大きな % の数値を並べる
• ポイント番号（point-number）: 小さな縦書きの英字と、ボルドーの大きな 2 桁の番号を組み合わせる
• 悩みのリスト（problem-list）: 黒い石目の地に、ボルドーの縦線と白文字で悩みを並べ、細い枠で囲む
• レビューカード（review-card）: 白いカードに、ボルドーの属性見出し・ゴールドの星・本文を入れる
• ゴールドのマーカー（marker-highlight）: オリーブゴールドの帯に白文字を載せて、強調したい文に使う

Do's and Don'ts

Do - ボルドー・グレー・黒・白・ゴールドの 5 色に絞る - 見出しには必ず英字のサブタイトルを添える - 写真の上の見出しは縦書きにし、大胆に置く - セクションの間を縦線や三角でつなぎ、流れを見せる - 数値には ※ 注釈を小さく添える

Don't - 角丸やピル型のボタンを多用しない - パステルや原色を使わない - 影やグラデーションを付けすぎない - ポップな手書き風の書体を使わない

Page Structure

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

1. ファーストビュー（効果を一言で伝える）: 石壁の前のモデル写真に、縦書きの白い箱の見出しと、ゴールドの円形の数値バッジを重ねる
2. 商品名と特長（商品と 3 つの効果を示す）: 白地に商品名と英字名、ボルドーのひし形 3 つを置く
3. 実績（信頼を示す）: ベージュの地に紙吹雪とゴールドの月桂樹を配し、大きな数字で見せる
4. 悩みの提起（ターゲットに共感させる）: 黒い石目の地に悩みを 3 行並べ、ボルドーの帯で年代とターゲットを示す
5. 解決の提示（解決策を伝える）: グレーの地に筋肉の CG と縦書きの巨大な文字を置き、続けてボルドーの帯で説明する
6. 理由の説明（効果の根拠を示す）: 写真と縦書きの見出し、その下に本文、を 3 回繰り返す
7. 仕組み（足元からの理屈を説明する）: 骨格の CG に、線だけの大きな % 数字を重ね、ボルドーの帯で結論を示す
8. 技術の詳細（パーツの機能を説明する）: 切り抜いたパーツ写真の周りに、ボルドーの注釈ボックスを引き出し線でつなぐ
9. 効果の数値（数値で効果を証明する）: 歩くモデルの写真の横に、ゴールドの % の数値を縦に 3 つ並べる
10. 3 つのポイント（そのほかのメリットを伝える）: 番号と見出しのあと、斜め帯と切り抜き写真でポイントを紹介する
11. スタイリング（コーディネートの幅を見せる）: 非対称のグリッドに写真を並べ、縦書きの大きな英字を添える
12. お客様の声（実感を共有する）: 白いカード 3 枚に星評価を入れる
13. 締めのビジュアル（メッセージを再確認させる）: ローアングルの靴の写真に、縦書きのボルドーの箱を重ねる
14. 商品の仕様（購入前に情報を確認させる）: 多角度の切り抜き写真、素材の一覧、サイズ表を置く

Imagery

• 石壁や都市の街角で撮る、自然光のストリートスナップ
• モデルは 30〜40 代の男性。秋冬のアースカラーの服で、落ち着いたポーズをとる
• 商品は白かグレーの背景に切り抜き、真横・斜め・後ろの多角度で見せる
• 筋肉や骨格はリアルな 3D CG にし、対象の部位を赤く光らせる
• 装飾は月桂樹・紙吹雪・ジグザグの線にとどめる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 版の画像はないため、以下は推奨。PC では本文を中央 600〜750px 幅に収め、背景帯だけ全幅にする
• PC では理由の説明を、写真と本文の 2 カラムにする
• スタイリング写真は 3〜4 列のグリッドに広げる
• 縦書きの大見出しは縦書きのまま、サイズを 1.5 倍にする

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