DESIGN.md — 深緑×生成りの上品ファッション靴 LP（Deep Green Editorial Fashion Shoe LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: 上品・高級、ナチュラル、情報量多め・訴求型、やさしい・柔らかい
• キーワード: 雑誌風エディトリアル・深緑・生成り・縦書き明朝・欧文セリフ・機能訴求
• 地の質感: 白〜生成りのマットな面が中心。お客様の声には紙のような細かい粒の地を敷き、新聞紙風の重ね紙も使う
• 形: 四角い写真枠と細い罫線が基本。楕円バッジ、丸いラベル、角丸カード、山形の区切りを要所に入れる
• 温度感: やや暖かい中間色。深緑で締め、キャメルで温かみを足す

Colors

• 地は白と生成りを交互に使う。セクションの切り替えで深緑の全幅帯を挟む
• 深緑はPOINTの見出し帯・まとめセクション・楕円バッジに限って使う
• キャメルオレンジは強調語・数値・丸ラベルだけに使い、面積は小さく抑える
• 強調語にはオレンジの文字色と下線を組み合わせる
• くすんだ金は月桂冠や見出し帯など、実績・称号の演出に使う
• 彩度の高い色は使わない。全体をくすんだ中間色でまとめる

Typography

• 見出しは明朝体で字間を広め（0.1em 以上）に取る
• FVと写真の上のコピーは縦書きを基本にする
• 欧文セリフの飾り文字を和文見出しの上か横に添える
• 強調語はゴシックの太字にし、オレンジ色＋下線を付ける
• 見出しの強調語の上に傍点の丸を打つ
• 数値は大きな明朝で組み、単位は小さくする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。比較パネルと丸ラベルだけ 2〜3 列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 56px、基本単位 8px、カード内 24px（375px 幅換算）
• 生成りの外枠の中に白いカードを置く入れ子構造にする
• POINTは「欧文番号の見出し＋深緑の帯見出し＋写真＋説明」で1ブロックにする
• カードどうしは短い縦線でつなぐ
• 写真は横幅いっぱいか、白い余白で囲んだ額縁のように置く
• 本文は中央揃え、声のカードは左揃えにする

Elevation & Depth

• 影はほとんど使わない平面的なデザイン
• お客様の声のカードだけ、ごく薄い影を付ける
• 新聞紙風の重ね紙は端をずらして奥行きを出す

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンは角丸の長方形。
• 写真の切り抜き: 基本は四角。写真の一部に花形（波形）の切り抜きを使う
• セクション境界: 直線の切り替えが基本。一部に山形・逆山形やアーチ形の区切りを使う
• 数値バッジは深緑の楕円に白抜きの明朝で入れる
• 足の悩みは3つのオレンジ丸を少し重ねて並べる
• 比較パネルは上の角を大きく丸めたタブ型にする
• 見出しの左右に斜線を添えて囲む

Components

• 深緑の帯見出し（heading-band-green）: カード幅いっぱいの深緑の帯。白い明朝で書き、下に白い点線を引く
• POINT番号の見出し（point-number-header）: 左に小さな欧文ラベル、中央に大きな欧文セリフ「Point」、右に番号を並べる
• 楕円の数値バッジ（oval-badge）: 深緑の楕円に小さな英字と大きな数値を白抜きで入れる
• オレンジの丸ラベル（circle-label）: 直径約100pxの円を3つ並べ、白文字で短い言葉を入れる
• お客様の声カード（voice-card）: 白い角丸カードを左右に交互にずらして置く。強調語はオレンジの下線付きにし、末尾に年代を添える
• 線画の吹き出し（voice-line-bubble）: オレンジの曲線で声を囲み、線画の人物イラストを添える
• チェックリスト（check-list）: チェック記号を付けた悩みの項目。項目ごとに点線の下線を引き、キーワードをオレンジにする
• 月桂冠の評価（laurel-rating）: 金の月桂冠と王冠で星評価の大きな数値を囲む
• 比較パネル（compare-panel）: 2列のタブ型パネル。他社はグレー、自社は生成り＋深緑のラベルで区別する
• 価格表示（price-display）: 深緑の大きな明朝数字で価格を示し、下に税込価格を小さく添える

Do's and Don'ts

Do - 見出しは明朝体で字間を広く取り、欧文セリフを添える - 強調はオレンジの文字と下線に限る - POINTは同じ形のカードで繰り返す - 写真は白〜グレーの明るいスタジオ光で揃える - 注釈を小さく必ず添える

Don't - 原色の赤や黄色、蛍光色は使わない - 丸ゴシックやポップな書体は使わない - 濃い影やグラデーションのボタンは使わない - 深緑を広く使いすぎて重い印象にしない - 文字を詰め込みすぎて余白をなくさない

Page Structure

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

1. ファーストビュー（スタイルと快適さを一目で伝える）: 全身写真の右に深緑帯の縦書きキャッチを置く。左には小さなアイコン付きの特長を3つ縦に並べる
2. コンセプト（商品の二面性を示す）: 白黒の帯に2つの言葉を「×」でつなぎ、大きな欧文ロゴを重ねる
3. ビフォーアフター（身長差を視覚化する）: 金の帯見出しの下に、目盛線入りの比較写真を置く
4. 実績・お客様の声（満足度で信頼を得る）: クリーム地に紙吹雪を散らし、月桂冠の評価と左右にずらした声カードを置く
5. 悩みの提起（ターゲットの悩みに共感する）: 新聞紙風の紙の上に、写真とチェックリストを載せる
6. 解決提示（従来品の不満から商品へ橋渡しする）: 花形に切り抜いた写真から深緑地に切り替え、縦書きコピーの写真で解決を示す
7. 特長（高さ）（数値で効果を示す）: 楕円バッジとソール構造の図、身長比較写真で見せる
8. 快適さの理由（機能を3点で説明する）: Point-01〜03 のカードを縦線でつないで並べる
9. サブ特長（撥水・滑りにくさを補足する）: 淡いブルーグレーの地に、モデル写真と小さな写真2枚を並べる
10. お客様の声2（使用者の実感を伝える）: 粒子のある紙の地に、線画人物と曲線の吹き出しを置く
11. ルックブック（コーディネートを見せる）: セージ地に枠線付きのスライダー写真を置く
12. まとめ（要点をおさらいする）: 深緑地の白カードに、チェックリストと写真を置く
13. 商品詳細・価格（仕様と価格を示す）: 商品ギャラリー、仕様リスト、サイズ表、明朝の価格の順に並べる

Imagery

• 白〜淡グレーのスタジオで撮った自然光風のファッション写真
• ショートヘアのモデルがベージュやグレーの服で全身を見せるカット
• 商品は白背景の物撮り、または木箱などの台に置いたカット
• 金のキラキラや渦巻き線など、手描き風の小さな装飾を添える
• お客様の声には黒い線画の人物イラストを使う
• 構造説明には引き出し線付きの図解と、目盛のある寸法図を使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に幅 750px 前後のカラムを置き、左右は生成りの地にする
• 縦書きのコピーは PC でも縦書きのまま残す
• 比較パネルと丸ラベルの横並びは PC でも維持する
• セクション間の余白は PC で 1.3 倍程度に広げる

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