DESIGN.md — 紫紺×オレンジのグラデ機能ウェアLP（Indigo-to-Orange Gradient Recovery Wear LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: クール・先進的、スポーティ、情報量多め・訴求型、信頼・誠実
• キーワード: 藍→橙グラデーション・六角形バッジ・極細の波線・方眼グリッド・ワイド字間の欧文見出し・黒ウェア写真
• 地の質感: ほぼフラット。写真の上にグラデーション帯を重ね、背景には細いワイヤー状の曲線と方眼を薄く敷く
• 形: 六角形・斜めカット・角が直角の帯とカード。角丸は小さく、ピル型は使わない
• 温度感: クールな藍・グレーが基調。オレンジで温かさ（血行・熱）を差す

Colors

• 地は明るいグレーと白にする。区切りにダークグレーや濃紺の帯をはさむ
• 強調は藍紫→橙の横グラデーションで統一する。英字見出しにもグラデを文字色として使う
• オレンジは機能（熱・血行）と強調語に限る。広い面に使うのはグラデ帯だけにする
• 暗い面では文字を白、強調語を橙にする
• 比較表は一般品をダークグレー、自社品を橙で塗り分ける
• hex-badge は文字 #FEFEFD × 背景 #ED8302 のコントラスト比が 2.65:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#B06101、4.57:1）を使う。
• gradient-band は文字 #FEFEFD × 背景 #7E8BB3 のコントラスト比が 3.34:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#6474A4、4.55:1）を使う。
• point-number は文字 #FEFEFD × 背景 #ED8302 のコントラスト比が 2.65:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#B06101、4.57:1）を使う。
• speech-balloon は文字 #FEFEFD × 背景 #7E8BB3 のコントラスト比が 3.34:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#6474A4、4.55:1）を使う。

Typography

• 和文見出しは字間を0.1em前後まで広げ、静かで端正に見せる
• 英字見出しは幾何学的なサンセリフを大きく置き、藍→橙のグラデ文字にする
• 見出しの中の強調語だけを橙にするか、サイズを上げる
• 縦書きの大見出しを写真の横に白帯付きで組んでもよい
• 英字の補助コピーは小さく、字間を極端に広げる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ディテールは写真と文の2分割、パッケージは横スライダー
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真は画面幅いっぱいに置き、見出し帯を重ねる
• カードと表は左右に約6%の余白を取る
• 番号付きのディテールは写真と文を左右交互に並べる
• セクションの終わりに▼を3つ縦に並べて流れを示す
• 背景に方眼グリッドを敷くゾーンをつくる

Elevation & Depth

• カード・図解パネルには薄いドロップシャドウ（0 4px 12px rgba(0,0,0,.15)）をつける
• 帯・バッジは影なしのフラットにする
• 写真の上の見出し文字に軽いテキストシャドウを付けてもよい

Shapes

• 角丸: 小 2px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 矩形の写真を全幅または横に並べる。商品は切り抜いて置く
• セクション境界: 下向きの山形（V字）カットと直線を併用する
• 効能バッジやPOINT番号は六角形にする
• 見出しの上下にL字のコーナー線を添える
• ジグザグ（XXXX状）の線を装飾に使う
• 口コミカードは角丸8px＋細い色枠にし、上辺にタブ型ラベルを付ける

Components

• 六角形効能バッジ（hex-badge）: 橙グラデの六角形に白文字2行。3つを横に並べる
• グラデ見出し帯（gradient-band）: 藍紫→橙の横長帯に白い大きな文字を置き、端にジグザグを添える
• 悩みチェックリスト（check-list）: 半透明の白い帯にチェックアイコンと悩みを並べ、強調語を太字にする
• POINT番号バッジ（point-number）: 六角形の中に小さい英字POINTと大きな数字を入れる
• 図解パネル（diagram-card）: 白いパネルに丸数字・図・引き出し線のラベルを置き、影を付ける
• ディテール番号（detail-number）: グラデの細い大きな数字と縦線の横に、2行の小見出しを置く
• 口コミカード（voice-card）: 白カードの上辺にグレーのタブ型ラベルを付け、人物イラスト・タイトル・属性・本文を入れる
• FAQアコーディオン（faq-item）: 暗い地に明るいグレーの箱を置き、質問文と橙の＋アイコンを入れる
• 吹き出しラベル（speech-balloon）: グラデ地の四角い吹き出しで短い一言を写真に重ねる

Do's and Don'ts

Do - 藍紫→橙のグラデーションを帯・英字見出し・背景に繰り返し使う - 六角形のモチーフをバッジ・番号・背景の透かしで統一する - 機能説明は図解パネルにまとめ、ビフォー/アフターを矢印でつなぐ - 黒いウェアが映えるよう、背景は明るいグレーか淡いグラデにする - 背景に極細の波線や方眼を薄く敷いて先進的に見せる

Don't - ピル型ボタンや大きな角丸を使わない - 原色の赤・緑を足さない - オレンジの単色で広い面を塗りつぶしすぎない - 太すぎる丸ゴシックや手書き文字を使わない - 装飾線を濃くして本文の読みやすさを損なわない

Page Structure

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

1. ファーストビュー（着用イメージと効能を一目で伝える）: 人物写真を全幅に置き、縦書きのサブコピー、大きな白い見出し、六角形バッジを3つ並べ、商品の切り抜きと実績バッジを続ける
2. 悩みの提起（悩みに共感させる）: 暗い写真の上に大きく薄い英字を置き、半透明のチェック帯を4つ並べ、V字カットで次へつなぐ
3. ブランド・コンセプト（日常着として使えることを示す）: 街を歩く写真に縦書きの白帯見出しを重ね、グラデ帯の大見出しで締める
4. 商品紹介（商品の全体像を見せる）: 商品を平置きした写真に商品名を重ね、ライフスタイル写真をずらして配置する
5. 特長1：機能素材（技術的な根拠を示す）: POINT六角形、繊維のアップ写真、濃紺の帯、図解パネル、方眼地の効能バッジの順に並べる
6. 効果のビジュアル（効果を印象づける）: 橙の全面背景にポリゴン調の人体イラストを置き、縦書きの大見出しを添える
7. 特長2：デザイン・着心地（普段着としての良さを伝える）: 大きな縦の英字グラデ見出しと写真を組み、グラデ帯で着心地を見せる
8. 速乾比較（他製品との差を見せる）: タイマー付きの2分割写真に、グレーと橙のラベルを付けて比べる
9. ディテール（細部のこだわりを列挙する）: 方眼地に番号01〜04を置き、写真と文を左右交互に並べる
10. 洗濯・耐久性（手入れの不安を消す）: 水滴の写真、吹き出し、洗濯表示アイコン、縦書きの帯見出しを組み合わせる
11. コーディネート（着こなしの例を見せる）: 枠線付きの写真スライダーとScroll矢印を置く
12. お客様の声（信頼を補う）: 藍→橙グラデの地に、タブ付きの白い口コミカードを3枚並べる
13. よくある質問（疑問を解消する）: ダークグレーの地にグレーの箱の質問アコーディオンを並べる
14. パッケージ・サイズ・商品情報（購入前の情報をまとめる）: グラデの英字見出し、ギフト用のグラデ帯、サイズ図のスライダー、ダークのサイズ表、商品写真のギャラリーと仕様を並べる

Imagery

• 黒・濃紺のウェアを着た30〜40代の男女を、自然光の街並みや室内で撮る
• 商品は平置きやハンガー掛け、切り抜きで見せる
• 素材はマクロで撮り、暖色の光を当てる
• 装飾には極細のワイヤー状の波線、方眼、ジグザグ線、大きく薄いロゴの透かしを使う
• 図解はフラットで、熱は赤橙のぼかし、作用は矢印で表す
• 人物イラストは藍紫と橙を使ったフラットなものにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に幅 750px 前後のカラムを置き、両側に淡いグレーかグラデの背景を敷く
• 全幅の写真と帯はカラム幅内で全幅に保つ
• ディテールの2分割とスライダーはそのまま維持する
• 英字見出しは最大64px程度まで拡大する

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