DESIGN.md — 桜色×淡青の雑誌風ベビー服 LP（Soft Pastel Editorial Baby Apparel LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: やさしい・柔らかい、上品・高級、かわいい、ナチュラル
• キーワード: パステル・エディトリアル・縦書き・細身セリフ・季節特集・写真主体
• 地の質感: マットで霞がかった写真。半透明の白を重ね、紙のような淡い地色にする
• 形: 写真は角丸なしの矩形。ボタンだけ完全なピル型
• 温度感: 春の陽だまりのような、やや暖かく柔らかい温度

Colors

• 地色はセクションごとに桜色・グレーブルー・白・生成り・グレージュを切り替える。彩度は低く保つ
• スタイリング連載ではカードごとに地色を変え、写真の色と地色をなじませる
• 文字は純黒にしない。和文コピーはくすみローズかセージ、商品情報は濃いグレーにする
• 強い色はボタン内の小さな赤い矢印だけに使う
• 英字の大見出しは地色より少し濃い同系色か白にし、写真に溶け込ませる
• 商品写真の背景色はピンク系と水色系を左右に並べて、色違いだとわかるようにする
• vertical-copy は文字 #8FAFAA × 背景 #E6EBEE のコントラスト比が 1.97:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#4F6F6A、4.58:1）を使う。

Typography

• 英字は細いハイコントラストのセリフ体を大きく使い、和文は細めのゴシックで控えめにする
• セクション名の英字は写真に一部重ねたり、縦に組んだりする
• 説明文は縦書きにして余白を広く取る
• スタイリング番号は小さな英字セリフを縦向きに置く
• 価格は数字を太字にし、税込表記は小さく添える
• 英字のサブコピーはイタリックで和文の下に添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品一覧だけ 2 列グリッド
• 本文ブロックの幅: 画面幅の約 85%
• 余白: セクション間 96px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真は左右どちらかを画面端まで出し、反対側に余白を残す非対称の配置にする
• 商品グリッドは隙間なしの 2 列。写真は正方形に近く、下に商品名と価格を置く
• スタイリングカードは写真を幅 85% で中央に置き、上下に約 60px の地色を残す
• 縦書きコピーは画面の右半分に寄せ、行間を広く取る
• 写真の上に大きな番号（01. 02.）を重ねて章を区切る

Elevation & Depth

• 影は使わずフラットにする
• 写真に半透明の白を重ねて霞ませ、奥行きを出す
• ボタンは影なしで、白い面と細い枠線だけにする

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 999px。ボタンはピル型。
• 写真の切り抜き: 角丸なしの矩形。正方形〜縦長で切り抜き、一部は画面端まで裁ち落とす
• セクション境界: 直線で地色を切り替える。写真を境界にまたがらせることもある
• 写真・カードの角は丸めない
• 角丸はボタンのピル型だけ
• 装飾は細い単線の花の線画のみ

Components

• ピル型 CTA（button-pill）: 白地に細いグレー枠。太字の黒文字の右に細い赤矢印を添える
• 写真上の小ボタン（button-pill-small）: 写真の上に白いピル型を重ね、アイテムへ誘導する
• 写真に重ねる英字大見出し（display-overlay）: 写真の下端に淡い色のセリフ英字を大きく重ねる
• 縦書きコピー（vertical-copy）: 縦書きの英字見出しと和文 2 行を組み、線画の花を添える
• 章番号（chapter-number）: 淡い色のセリフ数字（01. など）を写真の端に重ねる
• 商品カード（product-card）: 淡い色の背景で撮った商品写真の下に、商品名 2〜3 行と価格を並べる
• スタイリングカード（styling-card）: 地色の上に写真を置き、縦向きの番号と『LOOK →』リンクを添える
• 写真モザイク帯（photo-mosaic）: 縦長の写真を隙間なく 3〜4 枚並べた帯

Do's and Don'ts

Do - 地色はくすんだパステルにし、セクションごとに切り替える - 英字は細いセリフ体を大きく使い、写真に重ねる - 縦書きと広い余白で、雑誌のような間を作る - 商品は 2 列グリッドで同じ形にそろえる - ボタンは白いピル型にし、小さな赤矢印を添える

Don't - 原色や濃い色の面を使わない - 太いゴシックの大見出しや装飾の多いバッジを置かない - 写真やカードに角丸や影をつけない - 文字を詰め込まない - セール感のある赤い価格表示や吹き出しを使わない

Page Structure

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

1. ファーストビュー（季節感とブランドの世界観を伝える）: 全面の人物写真の下部に、淡いピンクの英字大見出しを重ねる。ロゴは上部中央に置く
2. 導入コピー（特集のテーマを短く示す）: 桜色の地に和文 3 行を中央揃えで置き、英字イタリックを添え、縦長写真を続ける
3. 特集アイテム紹介（季節アイテムの雰囲気を見せる）: グレーブルーの地に縦組みの英字と縦書きコピー、線画の花を置き、写真を非対称にずらして並べる
4. ブランド挿入画像（章の区切り）: 花の写真に白いロゴを中央に載せた帯
5. 新作①（セット商品を訴求する）: 英字見出し、商品の平置き写真と小ボタン、番号 01. を置き、縦書きの説明文を続ける
6. 商品一覧①（色違いの商品と価格を並べる）: 白地に 2 列グリッド。ピンクと水色の背景の写真を並べる
7. 新作②（別の柄のシリーズを訴求する）: 水色背景の人物写真に小ボタンと番号 02. を重ね、2 列の商品グリッドを続ける
8. ルックブック（着こなしの例を提案する）: 写真に縦組みの英字見出しを重ね、短い和文を添える
9. スタイリング連載（着用例を 7 つほど見せる）: カードごとに地色を変え、写真・縦向きの番号・LOOK リンクを左右交互に置く
10. 一覧への CTA（他の商品へ誘導する）: 白地の中央に大きなピル型ボタンを置く
11. 写真モザイク（世界観を余韻として残す）: 縦長写真を隙間なく並べた帯
12. ブランド紹介（ブランドの想いを伝える）: 線画のロゴマーク、中央揃えの本文、トップページへのボタン
13. フッター（公式サイトと SNS への導線）: 木漏れ日のようにぼかした水色の背景に、ロゴ・リンク・SNS アイコンを左揃えで置く

Imagery

• 自然光で撮った子どもの人物写真。浅い被写界深度で、表情は自然に
• 背景は単色のパステル（ピンク・水色）か、明るい室内
• 商品は淡い色の背景に真上から平置きで撮り、影は柔らかく
• 写真全体を少し明るく霞ませ、白っぽいトーンにそろえる
• 生花（ラナンキュラス・ユリなど）を小物やボケ素材に使う
• 装飾は細い単線で描いた花の線画だけ
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では写真と縦書きコピーを左右 2 カラムに並べ、非対称の配置を保つ
• 商品グリッドは PC で 3〜4 列に増やす
• 英字の大見出しは画面幅に比例させ、最大 160px 程度にする
• スタイリングカードは PC で 2 列か、左右交互の配置にする
• 本文の最大幅は 1000px 程度にし、余白をさらに広げる

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