DESIGN.md — シリーズ別パステル地の寝具ルックブック LP（Pastel Series-Colored Bedding Lookbook LP）

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

Overview

• 業種: 日用品・生活雑貨 ／ 雰囲気: かわいい、やさしい・柔らかい、清潔・爽やか、上品・高級
• キーワード: パステル・シリーズ別配色・アーチ見出し・ルックブック・モチーフ散らし・余白多め
• 地の質感: フラットな淡色の面に、柔らかな自然光の写真と水彩風のモチーフ切り抜きを重ねる
• 形: アーチ型パネル・溶けたしずく型の写真マスク・波線の境目・控えめな角丸写真
• 温度感: 涼しげで甘め。青紫・水色・ピンクのパステル系

Colors

• シリーズごとに背景色とテーマ色を 1 組決め、そのブロック内の見出し・本文・アイコン線をすべてテーマ色にそろえる
• 地はすべて明度 90% 以上のパステルにする。濃い色は文字か写真の中の商品だけに使う
• 本文に黒は使わず、テーマ色の文字を淡い地に重ねる
• シリーズの境目では背景色をはっきり切り替え、形（アーチ・波・しずく）で区切る
• 強い CTA 色は置かない。導線は最後の『一覧を見る』だけで控えめにする
• arch-series-header は文字 #7E86B5 × 背景 #E6E8F4 のコントラスト比が 2.89:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#5B659F、4.52:1）を使う。
• reversible-badge は文字 #7E86B5 × 背景 #FFFFFF のコントラスト比が 3.52:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#5B659F、4.58:1）を使う。

Typography

• 見出しはすべて欧文で、日本語の大見出しは使わない
• シリーズ名はシリーズの性格に合わせて書体を変える（丸みのあるセリフ・太いイタリック・スクリプトなど）
• シリーズ名の下に小さな series の文字を添えて 2 段組みにする
• 日本語本文は 1 行 20 字前後で改行し、中央揃えにする
• 縦組みの欧文見出しを写真の横に置いてアクセントにする
• 文字色はテーマ色 1 色で、太字による強調はしない
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は全幅か片側寄せで、左右をずらしたジグザグ配置
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 100px、基本単位 8px、カード内 24px（375px 幅換算）
• シリーズのブロックは『アーチ見出し → 大判写真 → 説明文 → items → functions → 詳細写真』の順で繰り返す
• 詳細写真は左右どちらかの端に寄せ、反対側に縦組み見出しかモチーフを置く
• 機能アイコンは円の線画を横に 1〜3 個並べ、下にラベルを付ける
• 写真同士を少し重ねたり、ずらして並べたりして雑誌風にする
• シリーズ間は 100px 以上あけ、ゆったりさせる

Elevation & Depth

• 影は使わず、フラットな面で構成する
• 奥行きはモチーフの切り抜きを写真の端に重ねて出す
• REVERSIBLE バッジは白い円で、写真の角に重ねる

Shapes

• 角丸: 小 8px ／ 中 14px ／ 大 200px。ボタンは角丸の長方形。
• 写真の切り抜き: 全幅の角なし写真と、角丸 14px の片寄せ写真を混ぜる。溶けたしずく形のマスクも使う
• セクション境界: 半円アーチの上端・波線・しずくが垂れる形で背景色を切り替える
• シリーズ見出しは画面幅いっぱいの半円アーチパネルの中に置く
• 機能アイコンは直径 72px 前後の円の線画にする
• バッジは白い正円に矢印の円弧と文字を組み合わせる

Components

• アーチ型シリーズ見出し（arch-series-header）: 上辺が半円のパネルに、欧文のシリーズ名と小さな series を中央に置く。端にモチーフ切り抜きを添える
• 商品名・価格リスト（item-price-list）: items の小見出しの下に、欧文の商品名と価格を中央揃えで 1〜3 行並べる
• 機能アイコン（function-icon）: 円の線画アイコン（雪の結晶・しずくなど）の下に、機能名の短いラベルを付ける
• リバーシブルバッジ（reversible-badge）: 白い正円に回転矢印と欧文ラベルを入れ、写真の角に重ねる
• 縦組み欧文見出し（vertical-label）: 片寄せ写真の横の余白に、欧文の商品カテゴリ名を 90 度回転させて置く
• 写真キャプション（photo-caption）: 写真の下に 2 行程度の素材説明を、写真と同じ側に揃えて置く
• しずく型パネル（drip-mask）: アイスが溶けたような垂れ形のパネルで、写真や淡色の面を切り抜く
• 一覧導線（view-all-link）: 円弧に沿って並べた欧文リンクの下に、モチーフのイラストを置く

Do's and Don'ts

Do - シリーズごとに背景色とテーマ色を 1 組決め、ブロック内で統一する - 商品柄のモチーフ（果物・動物など）を水彩風に切り抜き、余白に散らす - 説明文は短く中央揃えにし、上下の余白をたっぷり取る - 写真はモデルが寝具でくつろぐ自然光のシーンにする - セクションの境目はアーチ・波・しずくの形で柔らかく切り替える

Don't - 濃い原色や黒い本文を使わない - 大きな CTA ボタンや、赤い強調の価格表示を入れない - 日本語の太い見出しや煽る文言を入れない - 影・グラデーションの強いボタンなど、重い装飾を使わない - 1 つのシリーズ内で複数のテーマ色を混ぜない

Page Structure

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

1. ファーストビュー（季節感と世界観を一目で伝える）: 全幅のベッドシーン写真に、白い欧文セリフの大きなコピーを左下へ重ねる。ロゴは左上に置く
2. 導入文（シリーズ全体の価値を伝える）: 白地に、青紫の中央揃え本文を 8 行前後置く
3. シリーズ1（代表）（主力の柄と機能を紹介する）: ラベンダー地のアーチ見出し → 全幅写真 → 説明文 → items → functions アイコン → バッジ付き詳細写真
4. シリーズ1の小物紹介（枕パッドなどを補足する）: 片寄せの角丸写真と縦組み見出しを、ジグザグに配置する
5. シリーズ2（涼しげな柄違いを紹介する）: クリーム地に、しずく型マスクの写真と水色の太いイタリック見出しを置く
6. シリーズ3（動物柄の商品を紹介する）: グレイッシュ地に湾曲した欧文見出しを置き、動物イラストを散らす
7. カラーバリエーション（色違いの商品を見せる）: 波線で切り替えたピンク地に、サーモン色の湾曲見出しと猫のイラストを置く
8. シリーズ4（上質な素材感を伝える）: アイボリー地にスクリプト体の見出しを置き、白基調の写真をコラージュ風に重ねる
9. シリーズ5（ニットのカバーを紹介する）: 水色グラデの地に、濃紺のセリフ見出しと海のモチーフ（貝・ヒトデ）を置く
10. 一覧導線・クレジット（商品一覧へ誘導し、制作者を記す）: 白地に、円弧状の欧文リンクとイラスト、大文字のスタッフ表記を中央揃えで置く

Imagery

• 白い部屋で、モデルが寝具にくつろぐ自然光のシーンを撮る。笑顔や目を閉じた穏やかな表情にする
• 写真内の小物や壁の色もテーマ色に合わせ、低コントラストに仕上げる
• 柄のモチーフ（果物・アイス・動物）は、写実的な水彩風の切り抜きにする
• 生地の裏表やキルティングの凹凸が見えるアップ写真を添える
• 機能アイコンは細い単線の線画で、円の中に収める
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に SP 幅（約 360〜400px）のカラムをそのまま置き、左右は白地にする
• PC のファーストビュー写真は、カラムの左側にはみ出して配置する
• PC の右側に、シリーズ一覧の固定ナビを置く。角丸の枠の中に、各シリーズの円形サムネイルを並べる
• 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 行書くと起動時に読み込まれる。