DESIGN.md — ピンク×セージ×ラベンダーの犬猫雑貨特集 LP（Pastel Dots Pet-Lover Goods Feature LP）

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

Overview

• 業種: 日用品・生活雑貨 ／ 雰囲気: かわいい、やさしい・柔らかい、親しみ・手作り感、ポップ・元気
• キーワード: くすみパステル・ドット柄・方眼柄・スカラップ・肉球・手書き風見出し
• 地の質感: 細かい白ドットや薄い方眼を敷いた紙のような地。フラットで影はほぼない。
• 形: 写真は有機的な不定形ブロブで切り抜き。セクション境界は波形スカラップ。ボタンは右端が矢印型のタグ形。
• 温度感: やや暖かめ。ピンクと生成りに、セージ緑とラベンダーで落ち着きを足す。

Colors

• 地の色はラベンダーと白(方眼)を交互に並べ、セクションのリズムを作る
• FV はピンクとセージを斜めに切り分けた 2 色構成
• 強調色はピンク・水色・セージの 3 色だけ。どれも彩度を抑えたくすみ色にする
• 文字はほぼ黒の 1 色。白抜き文字はボタンと巨大英字だけに使う
• ボタン地はセクションの地と補色関係にする(ラベンダー地→セージ、白地→ピンク)
• ドット・肉球は地より少し白っぽい色で控えめに散らす
• button-more は文字 #FFFFFF × 背景 #BDC6B9 のコントラスト比が 1.76:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#6B7B64、4.52:1）を使う。
• kanji-circle は文字 #E3A3BE × 背景 #FFFFFF のコントラスト比が 2.05:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#C7477D、4.54:1）を使う。
• ribbon-label は文字 #FFFFFF × 背景 #9DB49A のコントラスト比が 2.23:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#617E5D、4.52:1）を使う。

Typography

• カテゴリ見出しは傾いた手書き風にし、下に色付きの波線を引く
• 番号は斜体の筆記体で、見出しの左上に小さく置く
• FV では漢字 1 字だけを白丸に入れて色付きで強調する
• 本文は字間を広めに取り、短い改行で詩のように並べる
• リード文は中央揃え、カテゴリのコピーは左揃え
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は左右に互い違いでコラージュ配置
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 70px、基本単位 8px、カード内 20px（375px 幅換算）
• カテゴリ 1 つを 1 セクションにし、見出し→写真コラージュ→コピー→more の順に並べる
• 写真は大小 2〜4 枚を重ねて、画面端からはみ出させる
• more ボタンは常に右寄せ
• セクションの上端に動物の切り抜き写真をスカラップから覗かせる

Elevation & Depth

• 影は基本的に使わずフラットにする
• ボタンだけ右下に濃色の細いズレ影を付け、紙を貼ったように見せる

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 40px。ボタンは角丸の長方形。
• 写真の切り抜き: 白フチ付きの不定形ブロブ、または切り抜き(背景透過)
• セクション境界: 半円が連なるスカラップ波形。FV 内は斜めの直線で区切る
• 写真は四角のまま置かず、ブロブ形か切り抜きにする
• ボタンは右端が矢印になったタグ形で、濃色の枠線を付ける
• コメント枠は角丸の二重線の箱。上にリボン形のラベルを載せる

Components

• more タグボタン（button-more）: 右端が矢印のタグ形。セージ地に白抜きの英字、濃色の枠線とズレ影を付ける
• ピンク版 more ボタン（button-more-pink）: 白地のセクションで使う、ピンク地の同じ形のボタン
• 番号付きカテゴリ見出し（heading-category）: #番号と傾いた手書き風の見出しの組み合わせ。下に水色かピンクの波線を引く
• 白丸の漢字強調（kanji-circle）: 白い円の中に 1 文字だけ入れ、セージまたはピンクで色を付ける
• スカラップ区切り（scallop-divider）: セクションの上下に入れる半円が連なる波形
• バイヤーコメント枠（comment-box）: ピンクの方眼地に二重線の角丸枠。左上に丸い線画アイコンと緑の名札を置き、本文を回り込ませる
• リボンラベル（ribbon-label）: アーチ状に曲げた英字を載せた緑のリボン帯
• 肉球の散らし（paw-scatter）: 白い肉球を、セクションの余白に足跡のように斜めに並べる

Do's and Don'ts

Do - 地にはドットか方眼の柄を必ず敷く - 写真はブロブ形か切り抜きにして、斜めに重ねる - 見出しは手書き風にして、色付きの波線を添える - コピーは 2〜4 行の短い文で、語りかける口調の型にする - セクションの地はラベンダーと白を交互に切り替える

Don't - 原色や高彩度の色を使わない - ドロップシャドウやグラデーションの立体表現を入れない - 写真を四角いグリッドで整列させない - 長い説明文や細かいスペック表を入れない - ボタンを角丸ピル型にしない

Page Structure

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

1. ファーストビュー（2 択の問いかけでテーマを示す）: ピンクとセージを斜めに 2 分割。巨大な英字を上下に置き、切り抜いた雑貨写真 2 点と、漢字を白丸で強調したコピーを重ねる
2. リード（特集の思いを伝える）: 白地に中央揃えの短い文を 7 行ほど。行間を広く取る
3. 動物の覗き込み（次のセクションへのつなぎ）: 切り抜いた犬猫の写真をスカラップの上に並べる
4. カテゴリ1（外出用アイテムの紹介）: ラベンダーのドット地。#番号見出し、短いコピー、ブロブ写真のコラージュ、more ボタン
5. カテゴリ2（インテリア雑貨の紹介）: 白の方眼地。写真のブロブを左右に配置し、ピンクの more ボタンを置く
6. カテゴリ3（食器の紹介）: ラベンダーのドット地。大きなブロブ写真と切り抜き商品を重ねる
7. バイヤーコメント（選んだ人の言葉で共感を得る）: 白地にピンク方眼の二重線枠。リボンラベル、線画の似顔絵、名札を置く

Imagery

• 白背景や自然光の明るい室内で撮った雑貨写真を使う
• 動物モチーフの商品は背景透過で切り抜き、浮かせて配置する
• 使用シーンは人物の顔を出さず、手元や肩口だけ写す
• 本物の犬猫写真は切り抜いて、縁から覗かせる
• 人物は細い線画のイラストを丸枠に入れる
• 装飾は肉球・ドット・方眼・波線に限る
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約 600px 幅の SP レイアウトを広げ、柄のある地は全幅に敷く
• PC では FV の巨大英字と写真を中央にまとめ、余白を大きく取る
• コラージュの重なり方は SP と同じにして、縮尺だけ変える
• コメント枠は PC で約 60% 幅に収める

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