DESIGN.md — くすみ水色×ローズレッドのペット服ホリデー LP（Holiday Pastel Pet Apparel Lookbook LP）

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

Overview

• 業種: ペット ／ 雰囲気: かわいい、上品・高級、やさしい・柔らかい
• キーワード: ホリデー・ルックブック・欧文イタリックセリフ・アーチ切り抜き・斜めストライプ・ふわふわ素材
• 地の質感: ボアやニットのふわふわ感と雪の白。ストライプ地は刷毛で塗ったような筆致になっている
• 形: 角丸の長方形、アーチ型、楕円形の写真枠。曲線に沿わせた欧文を添える
• 温度感: 冬らしい冷たい水色の地に、ローズレッドの温かみを効かせる

Colors

• 地色は全幅ベタ塗りにし、シリーズごとに水色→ストライプ→ローズへ切り替える
• 見出しは水色地や白地ではローズワイン色、ローズ地ではクリーム色にする
• 強調色はローズワイン系の 1 色に絞る
• ストライプは 45 度前後の斜めで、刷毛で塗ったような質感にする
• 最後は白地で締め、余白を多めに取る
• series-heading は文字 #8F2B45 × 背景 #ADC5D1 のコントラスト比が 4.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら background-accessible（#AFC6D2、4.55:1）を使う。

Typography

• 見出しはすべてイタリックのセリフ体にし、日本語の見出しは置かない
• シリーズ見出しは大きな 2 行と、その下の小さな 1 語で組み、中央揃えにする
• アイテム名は写真の隅に斜めや弧に沿わせて置く
• 太字は使わず、細めのウェイトで上品さを保つ
• 本文はほとんど置かず、写真で語らせる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 120px、基本単位 8px、カード内 0px（375px 幅換算）
• 写真は左右に約 18px の余白を取るか、全幅で裁ち落とす
• シリーズ見出しの上下に 100px 前後のたっぷりした余白を取る
• 写真同士は 16px ほどの間隔で縦に並べる
• 切り抜いた犬の写真は枠なしで地色の上に浮かせる
• 写真を次のセクションの地色にまたがらせ、重なりを作る

Elevation & Depth

• 影は使わず、フラットに仕上げる
• 奥行きは写真の重なりと切り抜きで出す

Shapes

• 角丸: 小 8px ／ 中 12px ／ 大 999px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸の長方形、上が半円のアーチ型、縦長の楕円を混ぜる
• セクション境界: 直線で地色を切り替える
• アーチ型の上に欧文を弧状に沿わせる
• 角丸は 12px 前後の控えめな大きさにする
• 楕円やアーチは 1 セクションにつき 1 つまでにする

Components

• シリーズ見出し（series-heading）: イタリックの欧文 2 行と小さな 1 語を中央揃えにし、オーナメントの切り抜き写真を添える
• 角丸の写真カード（photo-card）: 雪の上の犬の写真を角丸で切り、隅にアイテム名の欧文を重ねる
• アーチ型の写真枠（arch-frame）: 上が半円の写真枠。上部に欧文を弧状に沿わせる
• 楕円の写真枠（oval-frame）: 縦長の楕円に切り抜いた写真をストライプ地に置く
• 流れるテキスト帯（marquee-text）: アイテム名を繰り返し、画面からはみ出す 1 行の欧文帯にする
• ストライプ地のセクション（stripe-section）: 水色とクリームの刷毛風の斜めストライプを敷いた地
• 一覧へのリンク（view-all-link）: 淡いキャンディケーンのイラストに欧文 2 行を重ねたテキスト型のボタン
• クレジット欄（credit-block）: 白地に中央揃えで、制作スタッフの欧文を並べる

Do's and Don'ts

Do - シリーズごとに地色を変え、章立てを見せる - 見出しはイタリックのセリフ体の欧文で統一する - 写真の切り抜き方（角丸・アーチ・楕円）を変えてリズムを作る - オーナメントやキャンディケーンの切り抜きを散らす - 余白を広く取り、雑誌の誌面のように見せる

Don't - 太いゴシック体や派手な CTA ボタンを置かない - 原色の赤や緑を広い面に使わない - 写真に影やフチを付けない - テキストを詰め込まない - 地色を 4 色以上にしない

Page Structure

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

1. ファーストビュー（季節コレクションの世界観を伝える）: 雪景色の全幅写真に大きなイタリック欧文の見出しを重ね、下に小さくロゴを置く
2. シリーズ紹介 1（1 つ目のシリーズを見せる）: くすみ水色の地にシリーズ見出しを置き、角丸の写真カードを 2 枚縦に並べる
3. 単品紹介（小物を 1 点だけ見せる）: アーチ型の写真の上に、アイテム名を弧状に沿わせる
4. シリーズ紹介 2（2 つ目のシリーズを見せる）: ストライプ地に見出しとアーチ型の写真を置き、切り抜いた犬の写真や楕円の写真へ続ける
5. 流れるテキスト帯と写真（おもちゃとの組み合わせを見せる）: 流れるテキスト帯で角丸の写真をはさむ
6. シリーズ紹介 3（3 つ目のシリーズを見せる）: ローズ地にクリーム色の見出しを置き、全幅の写真を入れる
7. 切り抜き写真の展開（小物を見せる）: ローズ地に切り抜いた犬の写真を浮かせ、オーナメントを散らし、写真を重ねて置く
8. 一覧への誘導（商品一覧へ送客する）: 白地に、淡いイラストと欧文 2 行を重ねたリンクを置く
9. クレジット（制作情報を載せる）: 中央揃えの欧文を 3〜4 行並べる

Imagery

• ふわふわの白い敷物の上に小型犬を座らせ、明るいハイキーで撮る
• 背景は淡い水色の空か雪景色にする
• 小道具は銀のオーナメント、赤いギフトボックス、スノーツリー、キャンディケーン
• 犬の写真を背景ごと切り抜き、地色の上に浮かせる
• ストライプ地は刷毛で塗ったような手描き風にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では SP の構成をそのまま中央に約 30% の幅で置き、左右をアイボリーの余白にする
• PC の左の余白にロゴ入りの見出し、右の余白に一覧へのリンクを固定する
• 要素の並び順は SP と同じにする

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