DESIGN.md — くすみ色とリネン質感の生活雑貨LP（Muted Linen Lifestyle Goods LP）

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

Overview

• 業種: 日用品・生活雑貨 ／ 雰囲気: ナチュラル、やさしい・柔らかい、親しみ・手作り感、情報量多め・訴求型
• キーワード: くすみカラー・リネン地・白帯見出し・手書き風アクセント・レビュー反復・生活感
• 地の質感: 織り目のあるリネンや方眼紙のテクスチャを背景に薄く敷き、紙のようなアナログ感を出す
• 形: 四角い白帯の見出し、角丸の吹き出し、円形に切り抜いた写真やラベル。曲線はおだやかに使う
• 温度感: 暖かめの中間色。グレーにベージュを混ぜた落ち着いたトーン

Colors

• 地色は生成り、くすみミント、くすみブルー、ベージュをセクションごとに交互に切り替える
• 見出しの文字はいつも白帯の上に濃い色で置く
• 強調色のコーラルレッドは強調語、番号バッジ、決め台詞の帯に絞って使う
• 星評価とVoice番号はゴールドに統一する
• 強調語の下に黄色マーカーを引き、読ませたい語を示す
• 会話シーンだけを濃いチャコールの地にして、場面が切り替わったことを示す
• 彩度の高い色は面積を5%以下に抑える
• kodawari-badge は文字 #FEFEFD × 背景 #D9534F のコントラスト比が 3.93:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#D43F3A、4.55:1）を使う。
• review-arch-label は文字 #D9534F × 背景 #FEFEFD のコントラスト比が 3.93:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#D43F3A、4.55:1）を使う。
• cta-pill は文字 #FEFEFD × 背景 #D9534F のコントラスト比が 3.93:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#D43F3A、4.55:1）を使う。

Typography

• 見出しはゴシック体と明朝体を一つの見出しの中で混ぜ、語ごとに大きさを変えてリズムを付ける
• 強調語には二重引用符の装飾、傍点、マーカーを付ける
• POINTやVoiceの番号は欧文セリフ体で大きく組み、和文の見出しと並べる
• カラー名は小さな欧文で写真の隅に置く
• 手書き風の書体は1セクションに1〜2か所まで
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。レビューは写真と文を左右交互に配置する
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• POINTブロックの後にレビュー3件を置く流れをくり返す
• レビューは写真と見出し帯を左右交互に組み、本文はその下に全幅で置く
• セクションの区切りは地色を変えて示す
• 写真は画面の端まで広げて没入感を出す
• 特長アイコンは円形にして3＋2の千鳥配置にする

Elevation & Depth

• カードや紙面にはごく薄い影（0 2px 6px rgba(0,0,0,.08)）を付ける
• 白帯の見出しは影なしで平面のまま置く
• 円形のレビュー見出しには細い線の円を重ね、立体感を抑える

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 四角が基本。特長アイコンや人物イラストは円で切り抜く
• セクション境界: 直線で地色を切り替える。レビュー見出しは上半分が円弧になったラベル
• 見出しの白帯は角丸なしの長方形にする
• 吹き出しは角丸10px程度にし、小さなしっぽを付ける
• 強調バッジはピル型か円形にする
• 方眼紙風のパネルの上部はちぎった紙のような端にしてよい

Components

• 白帯見出し（heading-white-band）: 地色の上に白い長方形の帯を敷き、濃い文字で見出しを置く
• POINT番号見出し（point-number）: 小さな英字ラベルと大きな欧文セリフの番号に、和文見出しを組み合わせる
• こだわり番号の円バッジ（kodawari-badge）: 色の付いた円の中に白い文字で番号を入れる
• レビュー見出しのアーチ（review-arch-label）: 上が円弧になった白いラベルに、手書き風の見出しと小さな英字を入れる
• レビュー行（review-card）: Voice番号と星5つ、白帯の要約、写真、灰色の本文に日付を添える
• スタッフ会話の吹き出し（chat-bubble）: 円形の人物イラストに白い角丸の吹き出しを添える
• 特長の円形アイコン（feature-circle）: 円で切り抜いた写真の左上に番号を付け、下にラベルを置く
• 実績の数字ブロック（stats-ribbon）: 金色の月桂樹で大きな明朝の数字を挟み、ランキング画像を重ねる
• 決め台詞のピル（cta-pill）: コーラルの面に白い太字を置き、場面転換に使う

Do's and Don'ts

Do - 地色はくすんだ中間色だけで組み、白帯の見出しで読みやすさを保つ - 強調語にはマーカー、傍点、引用符を付ける - POINTの後にレビュー3件という流れをくり返し、説得の型を固定する - 写真の隅に小さな欧文でカラー名を添える - 手書きの一言を写真の上に重ね、温かみを出す

Don't - 原色や蛍光色を広い面に使わない - 黒い太枠や強い影は付けない - 見出しを地色に直接置き、帯なしで並べない - 書体を5種類より多く混ぜない - レビューの写真と文を同じ側にそろえて単調にしない

Page Structure

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

1. ファーストビュー（商品の使い方を一目で伝える）: 使用中の全幅写真に縦書きの白帯キャッチを重ね、下に商品カテゴリーを白帯で置く
2. 特長の要約（安心ポイントを一覧で見せる）: 方眼紙のパネルに番号付きの円形写真を5つ、3＋2の配置で並べる
3. 販売実績（社会的な証明を示す）: 濃色の帯の下に、月桂樹で挟んだ大きな数字とランキング画像を重ねて置く
4. 開発ストーリー（開発の動機を会話で伝える）: 濃い地にスタッフのイラストと吹き出しを交互に並べ、コーラルのピルで締める
5. こだわり紹介（デザイン上の工夫を説明する）: リネン地に番号バッジ、明朝の見出し、会話、写真付きの白帯結論を置く
6. スタッフの一言（作り手の想いを伝える）: 方眼メモ風のカードに手書き書体で一言を書く
7. 詳細の導入（特長の詳しい説明へ誘導する）: 白い地に線囲みとマーカーを付けた大見出しを置く
8. POINT＋レビュー（くり返し）（特長ごとに機能を示し、声で裏付ける）: POINTの写真ブロックの後に、地色を変えたレビュー3件を置くことを6回くり返す
9. カラーバリエーション（色の選択肢を見せる）: 手書き風の囲みと赤い大見出しの下に、色名ラベル付きの集合写真と色別のモデル写真を置く

Imagery

• 自然光の室内やスーパーで、生活の中で使っている場面を撮る
• 手元や肩から下をクロップし、顔は写さず生活感を出す
• 白や木目、くすみ色の背景で、全体を低彩度・明るめに調整する
• 人物は線画に淡い色を塗ったやさしいイラストにする
• 写真の上に白い手書き文字や小さな吹き出しを添える
• 背景にはリネンや方眼紙のテクスチャを薄く敷く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元のPC版も幅952pxの縦1カラムで、SP版とほぼ同じ構成
• SPでは幅375pxに縮め、見出しは22〜30pxで組む
• PCでは中央に最大幅750px程度で置き、左右に地のテクスチャを延ばす
• レビューの左右交互の配置はSPでも保ち、写真の幅を45%程度にする
• 円形の特長アイコンはSPでも3＋2の配置にする

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