DESIGN.md — グレージュ×くすみ青の生活雑貨バッグ LP（Muted Neutral Lifestyle Bag LP）

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

Overview

• 業種: 日用品・生活雑貨 ／ 雰囲気: ナチュラル、シンプル・ミニマル、やさしい・柔らかい、上品・高級
• キーワード: くすみカラー・グレージュ・チャコール帯見出し・番号付きポイント・筆記体英字・水彩イラスト
• 地の質感: マットで無地の面。水彩イラストや葉の装飾がやわらかい手触りを足す
• 形: 角の立った四角い帯見出しと、点線枠のカード、丸い吹き出しの組み合わせ
• 温度感: やや暖かいニュートラル。グレージュとくすみ青で涼しさも少し出す

Colors

• 白地と淡いグレー地を交互に置き、セクションを区切る
• 強調は彩度を上げず、チャコールの帯で行う
• 機能バッジはくすみブルーとくすみピンクだけにし、ビビッドな色は使わない
• オレンジは保温タグなど 1 点だけに限る
• 写真内の商品色（黒・ベージュ・青）とトーンを合わせる
• 重要な一文はグレー文字のまま淡い青のアンダーラインで目立たせる
• feature-badge は文字 #FFFFFF × 背景 #7FAFB8 のコントラスト比が 2.41:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#4B7D86、4.59:1）を使う。
• spec-label は文字 #FFFFFF × 背景 #7FAFB8 のコントラスト比が 2.41:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#4B7D86、4.59:1）を使う。

Typography

• 和文は字間を 0.1em 前後とってゆったり組む
• 見出しの一部の語だけをチャコール帯の白抜きにする
• 番号は太いイタリア風のサンセリフで大きくし、小さな英字 2 行を左に添える
• 日本語見出しの上に細い筆記体の英字を重ねる
• 本文は中央揃えか左揃えで、1 行は 15 字前後にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特長カードだけ 2 列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• ポイント紹介は写真の左右寄せを交互に入れ替える
• 写真は片側の画面端まで裁ち落とし、テキストは反対側に置く
• 番号ブロックと見出しを写真の手前に少し重ねる
• 写真の下に小さな COLOR ラベルを右か左に寄せて置く
• 仕様表はラベルと値の 2 列にする

Elevation & Depth

• 影はほぼ使わずフラットにする
• 商品の切り抜き写真だけに薄い落ち影を付ける
• 機能バッジに白い内枠と薄い影を付け、ステッカー風にする

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 999px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角く裁ち落とす。悩みの吹き出しや補足写真は正円で切り抜く
• セクション境界: 直線で背景色を切り替える。解決への誘導だけ下向きの三角
• 帯見出しは角丸なしの長方形
• 特長カードはベージュの点線枠と小さな角丸
• 機能バッジは角丸の正方形
• 吹き出しは正円か楕円で、細い線か白い面

Components

• チャコール帯見出し（heading-band）: 見出しのキーワードだけを濃いグレーの長方形に白抜きで入れる
• ポイント番号（point-number）: 小さな英字 2 行、太い 2 桁番号、その下に短い横線を置く
• 点線特長カード（feature-card）: 白い面にベージュの点線枠。見出しの下に淡い青のマーカーを引き、短い説明を中央揃えで入れる
• 悩みの円形吹き出し（worry-bubble）: 中央の人物イラストを囲むように細線の円を 4 つ置き、悩みの言葉を入れる
• 機能バッジ（feature-badge）: くすみブルーかくすみピンクの角丸の正方形に、白い内枠と白文字を入れる
• 筆記体セクションタイトル（script-title）: 細い筆記体の英字の下に、日本語のセクション名を小さく添える
• 持ち手色の吹き出し（color-chip）: カラーバリエーションの写真の横に、持ち手の色を示す小さな円形吹き出しを置く
• 仕様ラベル（spec-label）: くすみブルーの角丸ラベルに項目名を入れ、右側に値を並べる
• 解決誘導の三角（solution-arrow）: 悩みセクションの下に淡い青の下向き三角を置き、解決の一文を重ねる

Do's and Don'ts

Do - 色数を絞り、くすみトーンで統一する - ポイントごとに大きな番号と帯見出しを繰り返し、リズムを作る - 写真は自然光で明るく、商品の質感がわかるように撮る - 注釈は小さいグレー文字で写真の下に添える - 英字の筆記体は細く薄く、装飾として使う

Don't - 原色や蛍光色を使わない - 帯見出しに角丸や影を付けない - 全体をカード枠で囲みすぎない - 太い黒の文字を多用しない - グラデーションや光沢の装飾を加えない

Page Structure

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

1. ファーストビュー（商品の容量と機能を一目で伝える）: グレージュの地にモデル写真を置く。容量を示す吹き出し、機能タグ、商品名、色違いのサムネイル、機能バッジを重ねる
2. 悩みの提起（利用シーンの不満に共感する）: 淡いグレーの地に、葉の装飾付きの見出しを置く。水彩の人物を中心に、円形の吹き出しを 4 つ並べる
3. 解決提示（悩みから商品へつなぐ）: 淡い青の下向き三角に、解決の一文を大きく重ねる
4. 特長サマリー（主な機能を 4 つにまとめる）: 点線カードを 2×2 で並べ、間に Point の筆記体と商品のスタイリング写真を挟む
5. カラーバリエーション（色の選択肢を示す）: 白地に切り抜き写真を 3 点、ジグザグに配置する。各写真に筆記体の色名、日本語の色名、持ち手色の吹き出しを添える
6. おすすめポイント（番号付き）（機能を 1 つずつ詳しく説明する）: 01〜07 の番号と帯見出しを置き、裁ち落とし写真を左右交互に配置する。補足説明は淡いグレーの帯に入れる
7. 着用イメージ（色ごとの使用シーンを見せる）: 全幅のモデル写真を 3 枚縦に並べる。各写真に筆記体の色名と白い帯の日本語ラベルを重ねる
8. 商品詳細（サイズと仕様を伝える）: 寸法線入りの商品写真の後に、くすみブルーのラベルの仕様表と注釈を置く

Imagery

• 商品写真は明るいグレーかオフホワイトの背景で、柔らかな自然光で撮る
• モデルは白やベージュのリラックスした服装にし、顔は一部だけ見せる
• 機能のアップ写真は水滴・手元・ポケットなどを寄りで撮る
• 悩みの表現には淡い水彩タッチの女性イラストを使う
• 葉の枝や水色の渦巻きの手描き装飾を少量添える
• サイズ写真には点線の寸法線とグレーのラベルを重ねる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像はないため、PC では中央 375〜750px 幅のカラムにし、左右を淡いグレーで埋めることを推奨
• PC では特長カードを 4 列にしてもよい
• PC ではポイント紹介の写真とテキストを 2 カラムで左右交互に配置する
• PC でも見出しサイズの拡大は 1.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 行書くと起動時に読み込まれる。