DESIGN.md — 生成り×グレージュの収納雑貨 LP（Warm Greige Lifestyle Storage LP）

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

Overview

• 業種: 日用品・生活雑貨 ／ 雰囲気: ナチュラル、シンプル・ミニマル、やさしい・柔らかい、上品・高級
• キーワード: 生成り・グレージュ・インテリア写真・縦書きコピー・番号付きポイント・余白多め
• 地の質感: フラットな面。ベタ塗りのグレージュ帯と、自然光で撮った住まいの写真を交互に重ねる。
• 形: 角丸なしの四角い写真と帯。細い罫線と小さな角タブを添える。
• 温度感: 暖かめのニュートラル。くすんだベージュとブラウンを基調にする。

Colors

• 地は白と淡いグレーを交互に使い、セクションを区切る
• 悩みを示すパートだけ濃いグレージュ帯にして、白文字で暗い調子を出す
• 番号タブとポイント番号はブラウン系だけで作る
• 強調は薄黄のマーカーだけにし、赤などの原色は使わない
• 金色は実績・ランキングのパートだけに限る
• 素材紹介は青グレー帯にして、色味の比較をはっきり見せる
• step-tab は文字 #FEFDFA × 背景 #AA947D のコントラスト比が 2.85:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#877058、4.6:1）を使う。
• check-list は文字 #FEFDFA × 背景 #9B9693 のコントラスト比が 2.88:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら dark-section-accessible（#797370、4.59:1）を使う。

Typography

• 見出しは字間を広めにとり、ゆったり組む
• ファーストビューと用途紹介では縦書きコピーを写真の横に置く
• ポイント番号は小さな欧文の point と大きな数字の 2 段で組む
• 本文は行間 1.9 程度で、14px 前後にする
• 写真の隅に、色名を白の小さな欧文で添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真と縦書きコピーは左右 2 分割にする
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 写真は幅いっぱいか、左右の余白を 5% だけ残して置く
• 用途紹介は写真と縦書きを左右交互に配置する
• ステップは左に写真、右に縦線と番号タブの 2 列で組む
• ポイント一覧は左に写真、右に番号と見出しを置き、細罫で区切る
• 本文ボックスは写真の下端に重ね、少しはみ出させる

Elevation & Depth

• 影は基本的に使わない
• UGC 写真だけポラロイド風の白枠に薄い影をつけ、傾けて置く
• 写真に重ねる本文ボックスは白地にし、影はごく弱くする

Shapes

• 角丸: 小 0px ／ 中 2px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角く切り抜き、角丸はつけない。素材の拡大写真のみ円形にする
• セクション境界: 直線で区切り、地色を切り替える。濃い帯の下端だけ斜めにすることもある
• 本文ボックスの左上に、小さな濃色の三角タブをつける
• 番号タブは角丸なしの小さな矩形にする
• 装飾は細線と手描き風の小さな線にとどめる

Components

• ステップ番号タブ（step-tab）: ブラウン地に白文字で step+数字を入れる。縦線の上に並べる
• ポイント番号見出し（point-number）: 小さな point と大きな数字を中央に縦に積み、その下に見出しを置く
• 写真に重ねる本文ボックス（caption-box）: 白地に本文を入れ、左上に黒い三角をつける。写真の下端に重ねる
• ポイント一覧の行（point-list-row）: 左に写真、右に point 番号と見出しを置き、上下を細罫で区切る
• 悩みのチェックリスト（check-list）: 濃色の帯の写真の上に、白いチェックボックス付きの行を 2 つ置く
• SNS 投稿のポラロイド（ugc-polaroid）: 白枠の写真を傾け、マステ風の装飾と投稿者名を添える
• 月桂樹の 1 位バッジ（ranking-badge）: 金色の月桂冠に部門名と 1 位を入れ、3 つ横に並べる
• ビフォーアフターのラベル（before-after-label）: 写真の左上に、白地に大きな欧文のラベルを置く

Do's and Don'ts

Do - 住まいの写真を大きく、明るく見せる - 縦書きコピーで、雑誌のような余白をつくる - 番号付きのポイント見出しで、順に説明する - 地色の切り替えでリズムをつける - 色名や素材名を写真の隅に小さく添える

Don't - 原色の赤や黄色のボタンを多用しない - 角丸の強いポップなカードにしない - 見出しの字間を詰めない - 写真に過度な装飾やフレームをつけない - 金色を実績以外のパートで使わない

Page Structure

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

1. ファーストビュー（暮らしの場面で商品を見せる）: 全面の写真の右上に縦書きの太字コピーを置き、下部に欧文のカテゴリ名を入れる
2. リード文（コンセプトを 2 行で伝える）: 白地の中央に本文 2 行を置き、下に細罫を引く
3. 用途の提案（入れる物の例を示す）: 写真と縦書きの小見出しを左右交互に 3 つ並べる
4. ビフォーアフター（設置した後の変化を見せる）: グレー地に写真を 2 枚縦に並べ、欧文ラベルを付け、本文を枠囲みにする
5. 成長に合わせた使い方（長く使えることを示す）: 4 ステップを縦線のタイムラインで並べ、左に写真を置く
6. SNS 紹介（第三者の投稿で信頼を得る）: 生成り地にポラロイド風の写真 4 枚を傾けて散らす
7. ランキング実績（人気を証明する）: 金の紙吹雪を背景に、大きな数字と月桂冠のバッジを 3 つ置く
8. 悩みの提起（散らかる状況に共感させる）: 濃いグレージュ帯に白い見出しを置き、写真の上にチェックリストを重ねる
9. 解決の提示（商品で解決できることを示す）: 淡い地に斜線の装飾付きの見出しを置き、写真の上に白文字のコピーを乗せる
10. 選ばれるポイント一覧（特長を 4 つに要約する）: 大きな数字を入れた見出しの下に、写真と番号のリストを罫線で区切って並べる
11. ポイント詳細（各特長を写真で説明する）: point 番号の見出し、写真、本文ボックスの順に繰り返す
12. 素材・カラー紹介（バリエーションの違いを見せる）: 青グレーの帯に商品写真を置き、素材の拡大を円形にして並べる

Imagery

• 自然光の明るいリビングや玄関で撮った生活シーン
• 白壁、薄い木の床、ラタン家具など、北欧ナチュラル系のスタイリング
• 人物は手元や足元だけ写し、顔は出さない
• 金具などのディテールは寄りで撮り、円形の拡大図を添える
• 素材感は円形のクローズアップで見せる
• 全体を低彩度・暖色寄りに統一する
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 版も中央に約 950px 幅の 1 カラムで組み、両側は無地の背景にする
• SP では同じ構成を全幅で組み、縦書きのコピーは維持する
• ステップやポイントの 2 列は、SP でも写真 4：文字 6 の横並びを保つ
• ランキングのバッジは SP でも 3 つ横並びのまま縮小する
• SP の見出しは 20〜24px、本文は 14px にする

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