DESIGN.md — モーヴ×グレージュの上品な婦人靴 LP（Soft Mauve Ballet Comfort Shoes LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: 上品・高級、やさしい・柔らかい、シンプル・ミニマル、ナチュラル
• キーワード: くすみモーヴ・明朝体・縦書きコピー・バレエ・余白・細線
• 地の質感: マットで柔らかい。紗がかかったような淡いグレーの写真と、白地にのせた細い線の組み合わせ。
• 形: 四角い写真と角の大きいピル型の切り抜き、円形の切り抜きを混ぜる。境界線は 1px の細線。
• 温度感: やや暖かめのニュートラル。グレージュとモーヴで甘さを抑えた大人の女性らしさ。

Colors

• 地は白とごく淡いグレーを交互に敷き、セクションを区切る
• モーヴは問題提起の大きな面とラベル帯にだけ使い、面積は 1 割以下に抑える
• 本文中の強調語は明るいモーヴの太字にする。赤や黄色は使わない
• 見出しは黒ではなく、暖かみのある濃いグレーにする
• 金色はランキングなどの実績表示だけに使う
• badge-recommend は文字 #FCF6F9 × 背景 #7E7271 のコントラスト比が 4.34:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#7A6E6D、4.6:1）を使う。

Typography

• 見出しは明朝体と欧文セリフ体を使い、字間は広めの 0.1em 前後にする
• FV と情緒的なコピーは縦書きにし、写真の余白に置く
• 見出しの上には筆記体の小さな英字を添える
• 本文はゴシック体の細めのウェイトで、行間を 1.9 前後と広く取る
• 強調は太字とモーヴの色だけで行い、マーカーは使わない
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真とテキストを左右に分けた 2 分割も使う
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• 写真は画面端まで広げるか、片側に寄せて余白を作る
• 見出しの下には全幅の細線を引く
• 特長番号のラベルは左右交互に画面端から出す
• 見出しの背景に方眼の細線を敷き、仕立ての図面のように見せる
• 見出しの前後には 64〜96px の余白を取る

Elevation & Depth

• 影はほぼ使わず、平らな面と細線で構成する
• カード同士の重なりは、背景色の差だけで表現する

Shapes

• 角丸: 小 2px ／ 中 8px ／ 大 120px。ボタンはピル型。
• 写真の切り抜き: 四角を基本に、ピル型・円形・上だけ丸いアーチ型の切り抜きを混ぜる
• セクション境界: 直線で区切る。二重の細線や地色の切り替えを使う
• 写真は角丸をつけず、端までそのまま見せる
• 部分の拡大写真は円形に切り抜く
• ラベル帯は右端を斜めに切り落とした形にする
• 枠線は 1px のグレーかチャコールにする

Components

• 実績バッジ（badge-ranking）: 白い円の中に順位を大きく表示し、FV の写真に重ねる
• 推薦バッジ（badge-recommend）: くすんだ青緑の円に白い明朝体で推薦の一言を入れる
• 縦書き枠付き見出し（heading-vertical-box）: 1 文字ずつ細い線で囲んだ縦書きの明朝見出しを、写真の横に置く
• 特長番号ラベル（label-feature）: チャコールの帯に白の欧文で番号を入れる。画面端から出し、下に細線を引く
• 方眼背景の見出し（heading-grid）: グレーの方眼の細線の上に、明朝の 2 行見出しを中央揃えで置く
• ポイント帯写真（point-banner）: 淡い全幅写真の中央に、小さな欧文と大きな番号を白抜きで置く
• スタッフレビューカード（card-staff-review）: 白いカードの左上にモーヴの斜め切りのラベルを置く。中に枠線付きのサイズ情報と感想を入れる
• 円形の図解注釈（callout-circle）: 細線の円の中に短い説明を入れ、引き出し線で図とつなぐ
• サイズ表（spec-table）: 細いグレーの罫線で区切ったシンプルな表

Do's and Don'ts

Do - 余白を広く取り、1 画面に入れる情報を少なくする - 情緒的なコピーは縦書きの明朝体にする - 欧文セリフの見出しの下に、和文の小さな補足を添える - 機能説明は線画のイラストと細い引き出し線で図解する - 強調はモーヴ 1 色に統一する

Don't - 原色の赤や黄色の CTA ボタンを置かない - 太いゴシックの大見出しやマーカー強調を使わない - 強いドロップシャドウや光沢の装飾を入れない - 彩度の高い背景色を広い面積に使わない - 装飾アイコンを詰め込み、にぎやかにしない

Page Structure

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

1. ファーストビュー（悩みに寄り添う商品であることと実績を伝える）: 明るい室内の人物写真の右側に縦書きの明朝コピーを置き、左下に円形バッジを重ねる
2. 商品紹介（商品の形と名前を印象づける）: 白地に商品の切り抜き写真を置き、下に欧文セリフの商品名と和文の補足を入れる
3. 設計の訴求（独自の設計をひと言で示す）: 制作工程の写真と、縦書きの枠付き見出しを左右交互に並べる
4. ブランドストーリー（誕生の背景と世界観を伝える）: 淡い写真を下に敷き、中央揃えの明朝本文を行間広めに置く
5. アンバサダー（専門家の推薦で信頼を高める）: 人物写真と名前・肩書きを左右に並べ、縦書きの大きな英字を薄く敷く
6. 悩みの提起（足の悩みの原因を示し、共感を得る）: モーヴの面にピル型の写真と線画を入れ、下に重ねた白カードで問いかける
7. 解決の提示（悩みのための商品だと伝える）: 全幅の人物写真に縦書きコピーを重ねる
8. 機能の全体図（中敷きの構造を一覧で見せる）: 分解図に引き出し線と短い注釈を付け、見出しはモーヴの明朝にする
9. ポイント詳細（機能を 1 つずつ説明する）: 番号入りの帯写真、明朝の 2 行見出し、細線、図解、本文の順に繰り返す
10. 特長（素材や細部へのこだわりを伝える）: 淡いグレーの地に番号ラベル、方眼の見出し、円形写真と本文を左右交互に並べる
11. 品質（環境への配慮・国産・機能性で安心感を与える）: 暗めの写真を縦に積んだ 3 ブロックに、アイコン・白い見出し・本文を入れる
12. ラインナップ（他のタイプを紹介する）: アーチ型に切り抜いた人物写真と商品写真を重ね、欧文の商品名を添える
13. スタッフレビュー（サイズ選びの参考を示す）: ライトグレーの地に白カードを縦に並べ、足の形の線画とサイズ情報を入れる
14. カラーとスペック（色・サイズ・素材の情報を伝える）: 色違いの商品写真を 2 列に並べ、サイズ表と仕様一覧を細い罫線で示す

Imagery

• 自然光の白い室内で、淡い色の服を着た女性を全身で撮る
• 商品は白か淡いグレーの背景で、真上か斜め上から影を柔らかく撮る
• バレエや素足、花びら、ドライフラワーなど、繊細な小物を添える
• 写真は彩度を落とし、明るめでわずかに紗がかかった調子にする
• 機能の説明は、細いグレーの線画とモーヴの点で描く
• 見出しには筆記体の欧文を小さく添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像はない。PC ではコンテンツ幅を 960px 程度に収め、両側を淡いグレーの地にする
• 写真とテキストの左右分割は、PC では 50:50 の 2 カラムに広げる
• 縦書きコピーは PC でも縦書きのまま、写真の余白に置く
• スタッフレビューやカラーのカードは、PC では 3 列に並べる
• 見出しの文字サイズは 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 行書くと起動時に読み込まれる。