DESIGN.md — 紺×サーモンの淡色グラデ婦人靴 LP（Soft Pastel Gradient Comfort Pumps LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: やさしい・柔らかい、上品・高級、信頼・誠実、情報量多め・訴求型
• キーワード: 淡色グラデーション・濃紺の帯・サーモンの手書き強調・縦書きコピー・英字スクリプト透かし・雑誌風レイアウト
• 地の質感: 白地にごく薄い方眼グリッドとドット柄。ピーチ・ミント・ラベンダーの水彩風ぼかしを背景に置く
• 形: 基本は角丸を抑えた四角。吹き出しはピル型、ポイント写真は円形に切り抜く。斜めの帯や三角形を背景に使う
• 温度感: やや暖かい。ピーチ寄りのパステルに、濃紺で全体を引き締める

Colors

• 地は白と生成りを交互に使い、ピーチ×ミントの淡いグラデを重ねる
• セクションの区切りや問題提起は濃紺の全幅帯で引き締める
• キーワードや数字はサーモンで色を変え、手書き風の書体にする
• タイプ違いはピンク・ミント・イエロー・ラベンダーで色分けする
• 購入エリアと店舗案内はティールを使う
• 黄色マーカーは購入前の告知など、ごく一部だけに使う
• button-primary は文字 #8A8C90 × 背景 #CDD0C5 のコントラスト比が 2.15:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#56585B、4.56:1）を使う。
• size-chip は文字 #FCFEFF × 背景 #D4696B のコントラスト比が 3.44:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#CB494C、4.52:1）を使う。

Typography

• キャッチは縦書きを基本に、白い短冊の上に一文字ずつ並べる
• 強調語だけ手書き風書体＋サーモン色にして大きくする
• 見出しの近くに字間を広げた英字ラベルを小さく添える
• 英字スクリプトの装飾文字を背景に薄く大きく敷く
• 数字は細めのアウトラインかセリフで大きく見せる
• 本文は 14px 前後、行間は 1.8 でゆったり組む
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特長やサイズボタンは 2 カラムのグリッドにする
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真とテキストを左右交互にずらして配置する
• ポイント説明は円形写真とテキストを斜めの線でつなぐ
• 濃紺の全幅帯でパートを区切る
• 比較画像は 2 列に並べ、下にラベル帯を付ける
• スペック表は濃紺の見出しバー＋罫線表にする

Elevation & Depth

• 影はほぼ使わず、面の色と枠線で階層を作る
• カードは細い枠線か白地だけで、背景から浮かせる
• 製品写真には床に落ちる程度の自然な影を付ける

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 製品は切り抜きにする。ポイント写真は円形、人物は角版か全幅にする
• セクション境界: 直線の帯を基本に、緩い波形や斜めの三角形の面を重ねる
• 吹き出しはピル型＋下向きのしっぽにする
• ラベルは角丸を小さくした矩形タグにする
• グラデーションの円バッジでタイプ名を見せる

Components

• 購入ボタン（button-primary）: 全幅に近いピル型ボタン。未選択の間はグレーで表示する
• 濃紺帯見出し（band-heading-dark）: 全幅の濃紺帯に白文字の見出しを置く。強調語はサーモン、下に手書き風の波線を引く
• 吹き出しラベル（speech-pill）: 濃紺のピル型にしっぽを付け、導入の一言を入れる
• ポイント番号（point-number）: 縦向きの小さな Point の文字に、サーモンのセリフ数字を組み合わせる。見出しは枠付きのボックスに入れる
• 実績バッジ（badge-award）: 白い円に月桂樹を添え、順位や累計数を見せる
• サイズ選択チップ（size-chip）: タイプ別の色で塗ったチップを 2 列に並べ、白抜き文字にする
• タイプカード（type-card）: パステル地に製品写真を置く。英字セリフのタイプ名と、角の円にヒール高を入れる
• お知らせ枠（notice-box）: ティールの見出しタブが付いた枠線ボックス。要点に黄色マーカーを引く
• まとめ買い割引カード（price-card）: 淡いピンク地の角丸カード。赤字の割引率と、黄マーカー付きの価格を入れる

Do's and Don'ts

Do - 淡いグラデの背景に、濃紺を締め色として必ず入れる - 強調語は手書き風のサーモン文字にする - 英字ラベルと英字スクリプトの装飾を見出しの近くに添える - 製品は白背景で切り抜き、複数の角度から見せる - 専門家の監修はイラストの人物と肩書きで示す - 数値の根拠や期間は注釈に小さく書く

Don't - 原色の赤や青を広い面に使わない - ゴシックの太字を全見出しに多用しない - 影の濃いカードや立体的なボタンにしない - グラデーションを濃くしすぎない - 英字装飾を本文より目立たせない - 写真を詰め込みすぎて余白を失わない

Page Structure

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

1. キャンペーン帯（割引を即告知する）: 赤い帯と白地の上に、大きな黄色の割引数字を置く
2. ファーストビュー（商品名・監修・実績を伝える）: 淡色地に人物の全身写真を置く。縦書きの大見出しと円形の実績バッジを添える
3. メディア掲載・実績（信頼を補強する）: 枠線カードに雑誌の写真を載せる。金色のランキング帯と累計数の枠を続ける
4. ラインナップ紹介（選べるタイプ数を示す）: コーラルの帯に続けて大きなサーモン数字を置く。製品の切り抜きに引き出し線でラベルを付ける
5. 悩みの提起と監修者（悩みへの共感と、権威による解決を示す）: 濃紺帯の問いかけに続けて、監修者の線画イラストと吹き出しを置く
6. 機能の解説（インソールの仕組みを説明する）: 製品の図解に記号付きの注釈を 6 つ配置する。比較画像を 2 列で並べる
7. こだわりポイント（細部の品質を伝える）: 生成り地に番号付きの円形写真を左右交互に並べ、斜線でつなぐ
8. 製造背景（職人の品質を示す）: 暗いトーンの写真コラージュに、白い明朝の見出しを重ねる
9. タイプ別詳細（各タイプの違いを示す）: 濃紺のパネルにヒール高を大きな数字で入れ、製品写真とグラデの円バッジを添える
10. コーディネート（着用イメージを見せる）: 人物写真をスライダーで見せ、英字の見出しとスペックを重ねる
11. スペック・サイズ表（購入前の確認をしてもらう）: 濃紺の見出しバー付きの罫線表と足の図を並べ、素材を箇条書きにする
12. スタッフのサイズ参考（サイズ選びの不安を減らす）: タイプ色で分けた帯とサイズチップを 2 列で並べる
13. 価格・購入フォーム（購入へ導く）: 大きな価格表示とお知らせ枠に続けて、タイプカード・サイズ選択・ピル型ボタンを置く
14. 店舗案内・フッター（実店舗での試着に誘導する）: ティールの見出しタブ付きの店舗カードを並べ、送料無料の帯で締める

Imagery

• 30〜40 代の女性が、オフィスカジュアルを自然光の下で着た全身写真
• 黒い製品は白背景で切り抜き、斜め上からなど複数の角度で撮る
• 専門家は青い作業着姿の線画イラストで、親しみを出す
• キラキラ・音符・矢印などの細い線画装飾を散らす
• 背景はピーチ・ミントの水彩風ぼかしと方眼グリッドにする
• 工房の写真は暗めのセピア調に落とす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央 750px 前後の幅で SP の構成をそのまま見せる
• 左右の余白には淡色のグラデーション背景を敷く
• タイプカードやポイントは PC で 2〜4 列に広げてもよい
• 縦書きのキャッチは PC でも縦書きを維持する
• 全幅の帯は PC でも画面幅いっぱいに伸ばす

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