DESIGN.md — 深紅×黒×銅色の男性向け機能インナー LP（Crimson Black Performance Apparel LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: 力強い・インパクト、クール・先進的、スポーティ、ラグジュアリー・ダーク
• キーワード: 深紅のグラデーション・黒帯の見出し・銅色アクセント・斜めカット・極太斜体・ドット網点
• 地の質感: 赤い煙・カーボン調・網点ドットの暗い質感と、白地＋細い格子の清潔な面を組み合わせる
• 形: 角丸なしの四角・斜めカット・六角形バッジ・円形ラベル
• 温度感: 熱い赤と冷たい黒の対比。暖かさを訴求する熱量の高いトーン

Colors

• 深紅・黒・白を交互に切り替え、セクションの緊張感を保つ
• 銅色は番号・強調語・ラベル帯・下線など小面積に限定する
• 黒帯に白文字、白帯に黒文字の見出しで写真上の可読性を確保する
• 説明文は白カード内に置き、重要語だけ深紅にする
• グラデーションは深紅から黒へ、赤い煙の写真で熱を表現する
• パステル色や青系は使わない（図解の冷気表現を除く）
• circle-section-label は文字 #ECECEC × 背景 #BC6C3C のコントラスト比が 3.32:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#9D5A32、4.51:1）を使う。

Typography

• 見出しは斜体またはイタリック調にして疾走感を出す
• 写真上のコピーは黒帯・白帯に乗せて切り貼り風に組む
• 縦書き見出しを写真横に置き、銅色帯の縦ラベルと対にする
• 日本語見出しの下に小さな英字サブラベルを添える
• 番号は太いセリフ体の銅色で大きく見せる
• 強調語は銅色または深紅＋下線で示す
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ギャラリーのみ 2 カラムのモザイク
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 24px（375px 幅換算）
• 写真は全幅、説明カードは左右 5% 余白
• セクション間は細い縦線や▽の連続で視線をつなぐ
• POINT 見出しはダークな全幅帯、その下に深紅地＋白カード
• お客様の声はラベル付き枠カードを縦に積む
• 写真とテキストを左右交互に配置する詳細パート

Elevation & Depth

• 影はほぼ使わず、カードは黒い太めのオフセット影（右下ずらし）で立体感を出す
• 写真枠も黒の平行ずらし矩形で重ねる
• 網点ドット柄を写真の背後にずらして敷く

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの長方形。FV・写真パートは斜めカットで次セクションへ
• セクション境界: 斜めカットと下向きV字（シェブロン）切り欠き
• 角丸は使わずシャープな直角で統一
• 数値バッジは六角形
• セクションラベルは円形で英字＋短い横線
• 見出しは [ ] 角括弧で挟む装飾もあり
• 細い折れ線（心電図風）を装飾線に使う

Components

• 六角形数値バッジ（hex-badge）: 深紅グラデの六角形に白い大きな斜体数字と単位
• 機能アイコンタイル（icon-feature-tiles）: 黒地に線アイコン＋短いラベルの正方形を5つ横並び
• 円形セクションラベル（circle-section-label）: 銅色または黒の円に英字ラベルと短い横線
• 悩みチェック帯（problem-check-bar）: 黒帯に銅色チェックアイコン＋白太字の悩みを3本積む
• POINT見出し帯（point-header）: カーボン調の黒帯に銅色セリフ番号、白い斜体見出しと銅色下線
• 説明白カード（explain-card）: 深紅地の上に白カード、図解や写真の下に本文、重要語は赤
• 黒帯/白帯コピー（tag-strip）: 写真上に語句ごと黒帯や白帯を敷き、銅色の下線を添える
• お客様の声カード（voice-card）: 黒ラベル＋銅色星5つ、黒枠白カードにオフセット影、右下にイラスト
• おさらい番号行（summary-number-row）: 銅色の大きなセリフ番号＋黒帯に白い斜体要約文
• サイズ表・仕様（spec-table）: 細罫線の表と■見出しの仕様リスト

Do's and Don'ts

Do - 深紅・黒・白の3色を主役に、銅色は小さく効かせる - 見出しは極太の斜体や毛筆調で力強く組む - モデル写真は暗めの背景と赤い煙で熱気を出す - 白カードには黒のオフセット影を付ける - 英字の縦書き装飾を写真脇に薄く添える - 数値訴求は六角形バッジで目立たせる

Don't - 角丸やピル型ボタンを使わない - パステル・明るい青緑を主要色にしない - 細く繊細な書体だけで見出しを組まない - 銅色を広い面積で塗らない - 写真を明るく平板な光で撮らない - やわらかいイラスト中心の構成にしない

Page Structure

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

1. ファーストビュー（暖かさとパフォーマンスを一目で訴求）: 深紅背景にスポーツ中のモデル、縦書きの毛筆調大コピーと六角形数値バッジ
2. 商品紹介（商品名と機能の概要提示）: 焼き色オレンジ地に極太商品名と商品写真、黒地にアイコンタイル5つ
3. 実績・メディア掲載（信頼性の証明）: 月桂樹付きの金色数字、オリーブゴールド地に白帯見出しと雑誌写真
4. 悩みの提起（共感を得る）: グレーのテクスチャ地に円ラベル、括弧見出し、黒帯チェックリスト3本、V字カット
5. 解決策の提示（商品を解決策として登場させる）: 黒地に白と銅色の見出し、ずらし枠の商品写真、深紅の煙背景のモデル写真
6. 特長（3つのポイント）（機能を順に説明）: POINT見出し帯→深紅地の白カード図解→写真上の帯コピー、を3回反復
7. ディテール（細部の快適性訴求）: 黒地に写真と縦書きコピー＋銅色縦ラベルを左右交互に配置
8. 品質・製造背景（国内製造の安心感）: モノクロの職人写真、フラットレイの小物写真に帯コピーと国旗バッジ
9. お客様の声（第三者の評価）: 白地に枠カード3枚、星評価とイラスト
10. ギャラリー（着用シーンの想起）: 深紅の枠線で区切ったモザイク写真に帯コピー
11. お届けイメージ（包装・ギフト訴求）: 黒地に白見出しと箱入り商品写真
12. おさらい（要点の再確認）: 深紅枠の格子白地に円ラベル、銅色番号付き黒帯3本
13. 締めのメッセージ（感情的な後押し）: 屋外モデル写真に縦書き大コピーと深紅帯、斜めカット
14. 商品詳細・サイズ（購入判断の情報提供）: 枠内に商品写真とサイズ表、■見出しの仕様リストと洗濯表示

Imagery

• 男性モデルがスポーツ動作中のダイナミックな写真、暗めで硬い陰影
• 背景に赤い煙や霧を合成して熱を表現
• 商品は布の質感が分かる俯瞰フラットレイ、斜光で強い影
• 図解は層構造の断面イラストやサーモグラフィ比較
• 顧客の声には単純化したフラットなスポーツ人物イラスト
• 網点ドット・カーボン調・格子線を背景テクスチャに使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像はないため、PC では中央 375〜480px 幅の SP デザインを固定表示し左右を黒または深紅で埋める
• 広げる場合はコンテンツ幅を最大 960px にし、写真とテキストを 2 カラムに
• ディテールの左右交互配置は PC でもそのまま横並びに
• お客様の声は PC で 3 カラムカードに
• 大見出しは PC で 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 行書くと起動時に読み込まれる。