DESIGN.md — 柄ごとに淡色が切り替わる寝具ルックブック LP（Pastel Seasonal Bedding Lookbook LP）

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

Overview

• 業種: 日用品・生活雑貨 ／ 雰囲気: かわいい、やさしい・柔らかい、上品・高級、ナチュラル
• キーワード: ルックブック・柄ごとの章立て・パステル地色・欧文タイポ・手書き注記・マスキングテープ風ラベル
• 地の質感: マットな淡色の面に、ふわふわ素材の写真や手描きの線を重ねる。紙・布のような質感。
• 形: 上が丸いアーチ枠、角丸の写真、細い白線のピル型フレーム、斜めに貼った紙テープ。
• 温度感: 春らしい、やや暖かく甘い温度感。章によって寒色・暖色を行き来する。

Colors

• 章（柄）ごとに地色を 1 色決め、写真に写る寝具の柄の色と揃える。
• 見出しの色は地色を濃くした同系色にする（ブルー地にはブルー、ピンク地にはベリー色）。
• 本文は見出しと同系のくすんだ中間色にする。真っ黒は使わない。
• 章の中では地色を 2 段に分け、写真のアーチ枠の途中で切り替える。
• 彩度の高い色は使わない。くすみパステルと白で全体をまとめる。
• 強調は『New!』の丸バッジだけに絞り、濃いグレー地に白文字にする。
• price-tape は文字 #A98667 × 背景 #ECE3DB のコントラスト比が 2.63:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#7D6047、4.56:1）を使う。
• arch-frame は文字 #A98667 × 背景 #EFDFC8 のコントラスト比が 2.55:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#7D6047、4.5:1）を使う。
• color-variation-box は文字 #9AA0A8 × 背景 #FEFFFE のコントラスト比が 2.63:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#6F7781、4.52:1）を使う。
• view-all-link は文字 #5B86C4 × 背景 #FEFFFE のコントラスト比が 3.71:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#4677BD、4.52:1）を使う。

Typography

• 見出しはすべて欧文にし、和文は説明文にだけ使う。
• 章ごとに見出しの書体を変えてよい（セリフ、太いサンセリフ、極細のディスプレイ）。ただし 1 章につき 1 書体にする。
• 和文の本文は細めのゴシックで 12px、行間はゆったり 2.0。導入は中央揃えにする。
• 価格は『英字の商品名 : 数字 yen』の形で 1 行ずつ並べる。
• 手書き風の欧文は 1〜2 語にとどめ、矢印の線と組み合わせて写真のそばに置く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は全幅か左右 12% の余白つき。
• 本文ブロックの幅: 画面幅の約 80%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• 1 章は「見出し＋短い説明文 → 全幅写真 → 価格ラベル → 切り抜き商品写真」の順で組む。
• 写真は左右にずらして置き、雑誌の誌面のようなリズムをつくる。
• 価格ラベルは写真の端に重ね、左寄せか右寄せにする。
• ジェラート章は白い半透明のパネルを敷き、その上に写真と見出しを載せる。
• 章どうしの間は地色の切り替えで区切る。区切り線は使わない。

Elevation & Depth

• 影はほとんど使わず、フラットな面を重ねる。
• 切り抜き写真にはごく薄い落ち影をつけ、紙の上に置いたような感じを出す。
• ジェラート章のパネルは白 80% 程度の半透明にし、下の素材写真を透けさせる。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 全幅の四角、上だけ大きく丸めたアーチ形、角丸の四角、円形（細部の拡大）、背景を抜いた切り抜き。
• セクション境界: 地色を水平に切り替えるだけの直線。
• 写真を白の細線（1px）のピル型・アーチ形フレームで囲み、フレームは地色の切り替えをまたいで置く。
• 価格ラベルは紙テープ風で、少し傾け、端をラフにする。
• 欧文の章タイトルは円に沿わせたり弧を描かせたりして配置してよい。
• 『New!』バッジは直径 40px の円にする。

Components

• 章の欧文見出し（chapter-heading）: 柄名を表す大きな欧文に、モチーフのイラストや写真を添える。直下に 2 行の和文説明を置く。
• 紙テープ風の価格ラベル（price-tape）: 商品名と価格を 1 行ずつ載せた帯。少し傾けて写真の端に重ねる。
• 手書き注記（handwritten-note）: 手書き風の欧文と曲線の矢印でアイテムを指す。
• アーチ写真枠（arch-frame）: 上が丸いアーチ形の写真を、白い細線のピル型フレームで囲む。
• New 丸バッジ（badge-new）: 写真の右上に重ねる、濃いグレーの円形バッジ。セリフ体の白文字を入れる。
• 円形の回転テキスト（circular-label）: 色名やアイテム名を円に沿わせて繰り返し、写真の角に重ねる。
• カラー展開の枠（color-variation-box）: 細い枠線のボックスに、カップ盛りのような商品写真を 2 列で並べる。色名は斜めの手書き風にする。
• 一覧への導線（view-all-link）: ページ末尾に置く、弧を描く欧文の見出しと商品イラスト。

Do's and Don'ts

Do - 章ごとに、寝具の柄に合わせた淡い地色を 1 色決める。 - 欧文の大見出しで章の始まりを示し、和文の説明は 2〜3 行に抑える。 - 写真は暮らしの中のイメージ写真と切り抜きの商品写真を交互に入れる。 - 価格は紙テープ風のラベルにして、カタログのような軽さを出す。 - 手書き線やモチーフの小さなイラストを、写真のまわりに散らす。

Don't - 原色や黒の太字は使わない。 - 四角い大きな CTA ボタンを何度も並べない。 - 同じ章の中で地色を 3 色以上使わない。 - 和文の太い見出しを主役にしない。 - 写真を等間隔の格子にきっちり並べすぎない。

Page Structure

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

1. ファーストビュー（季節コレクションの世界観を伝える）: 寝具でくつろぐ人物の全幅写真に、白のセリフ体で大きくタイトルと年号を重ねる。
2. コンセプト文（コレクションの狙いを伝える）: 白地に、ブルーの細いゴシックで中央揃えの短い段落を 3 つ並べる。
3. テーマ見出し（新生活というテーマを提示する）: グレーのセリフ体による大きな欧文見出しに、和文 4 行を添える。
4. 柄の章 1（花柄）（1 つ目の柄のアイテムを紹介する）: 淡いブルー地。斜めに組んだ見出し、全幅写真、価格テープ、切り抜き写真、手書き注記で構成する。
5. 柄の章 2（さくらんぼ柄）（2 つ目の柄を紹介する）: 淡いピンク地にベリー色の見出し。少し傾けた白縁の写真と、赤い線で囲んだ商品を置く。
6. 柄の章 3（ハート柄）（大人っぽい柄を紹介する）: グレージュ地に黒い手書き線を添え、ペットの切り抜き写真でアクセントをつける。
7. キャラクター柄シリーズ（人気のキャラクター柄を紹介する）: ベージュ地とローズ地を 2 段で切り替え、アーチ枠と白線フレームの中に写真を並べる。
8. 素材の章（タオル）（素材感と色違いを見せる）: 色違いごとに淡い地色を分け、真上から撮った写真と素材の拡大写真に、円形の回転テキストを重ねる。
9. 定番シリーズ（ふわふわ素材のシリーズとカラー展開を見せる）: 素材写真を背景に白い半透明パネルを敷き、カラー展開の枠と New バッジを置く。
10. 柄の章 4（ロゴ柄）（総柄のパッドを紹介する）: 水色地にアルファベットを散らし、立体的な白文字の見出しと円形の拡大写真を置く。
11. 柄の章 5（ストライプ）（さわやかな素材を紹介する）: クリーム色のストライプ地に、極細のディスプレイ欧文を階段状に崩して組む。
12. クロージング（一覧ページへ誘導し、クレジットを載せる）: 白地に、弧を描く欧文とイラストを置き、その下にスタッフのクレジットを小さく並べる。

Imagery

• 自然光の入る部屋で、寝具にくつろぐ女性モデルを撮る。表情は自然な笑顔か寝顔にする。
• 寝具・小物・ペット・花瓶などは背景を抜いた切り抜き写真にし、余白に散らす。
• 部屋の小物や壁の色は、その章の柄の色に合わせてスタイリングする。
• 素材感はマクロ撮影で見せ、ふわふわの毛足や織り目まで写す。
• 手描きの細い曲線・矢印・小さなモチーフのイラスト（花・さくらんぼ・ハート）を添える。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はファーストビューを左右に分け、左にタイトル、右に写真を置く。
• PC は各章を 2 カラムの雑誌風レイアウトにし、写真を左右に互い違いで重ねて置く。
• PC でも地色の切り替えと章の順番は SP と同じにする。
• PC の本文の幅は約 60% にとどめ、余白を広く取る。
• カラー展開は SP で 2 列、PC で 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 行書くと起動時に読み込まれる。