DESIGN.md — くすみパステル×欧文タイポのインテリア雑貨LP（Pastel Color Block Editorial Product LP）

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

Overview

• 業種: 日用品・生活雑貨 ／ 雰囲気: 上品・高級、シンプル・ミニマル、クール・先進的、やさしい・柔らかい
• キーワード: くすみパステル・エディトリアル・欧文タイポ混植・カラーブロック・インテリアプロダクト
• 地の質感: フラットな単色面とスタジオ写真。陰影は弱く、紙面のような平面構成
• 形: 四角いカラーブロックに、半円・楕円・アーチ型の写真マスクを組み合わせる
• 温度感: やや涼しめのニュートラル。マスタードとピーチで少し温度を足す

Colors

• 地は白とライトグレーを交互にしてセクションを区切る
• 商品カラー4色はくすみトーンで、写真背景とブロックを同色に合わせる
• 赤は主CTAとごく一部の見出しだけに限定する
• 文字は黒〜濃いブラウンで、パステル上も黒または白で読ませる
• 最上位グレード紹介だけダークグレーのグラデ地で格を上げる
• PC の左右余白は商品写真を敷き詰めた背景にする

Typography

• 英字見出しは細いサンセリフと太いセリフを1行ごとに混ぜる
• 細いサンセリフはイタリックも混ぜて雑誌風のリズムを作る
• 英字見出しは行ごとに左右の揃え位置をずらす
• 日本語は英字見出しの下に小さく太めで添える
• 本文は小さめにし、行間を広く取る
• 数字や品番は極細の大きいサンセリフで見せる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。コラボ実績は 2 列グリッド、用途紹介は写真とカラーブロックを左右に分割
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• カラー紹介は写真2〜3枚を段差をつけてずらして重ねる
• 受賞ブロックはロゴを半円カプセルに入れ、左右交互に配置する
• 特長は商品写真＋円形の拡大写真＋引き出し線の注記で組む
• 製品はアーチ型の枠に1点ずつ置き、下に価格と仕様を並べる
• セクション間は地の色を切り替えて区切る

Elevation & Depth

• 影はほぼ使わない。フラットな平面構成にする
• 商品切り抜きの足元だけ、ごく薄い接地影を付ける
• 円形の拡大写真は白い縁取りで浮かせる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 999px。ボタンは角丸の長方形。
• 写真の切り抜き: 長方形のコラージュに、片側だけ半円・楕円・アーチ型・円形のマスクを組み合わせる
• セクション境界: 直線で地色を切り替える
• CTAは角丸を小さく(約6px)した横長の長方形にする
• 受賞ロゴの台座は片側を大きく丸めたカプセル型
• カートボタンは黒い正円
• 仕様ラベルは淡いグレーの小さな四角タグ

Components

• 価格を見るCTA（button-primary）: 赤い横長ボタン。日本語＋矢印の下に英字の小さな補足を2段で入れる
• 欧文混植見出し（mixed-type-heading）: 細いサンセリフ・太いセリフ・斜体を行ごとに混ぜ、揃え位置をずらした大見出し
• 受賞ブロック（award-badge）: 縦書きの黒帯ラベル、斜体の大きな番号、片側が丸い白カプセル内のロゴを組み合わせる
• カラー4分割帯（color-swatch-row）: 4色のブロックを横に並べ、それぞれに商品と白いセリフのカラー名を載せる
• 用途紹介行（usecase-row）: 左に写真、右にパステルブロック。白帯の上に前置詞＋太いセリフの用途名を重ね、英字の補足を添える
• 引き出し線の拡大注記（callout-zoom）: 商品写真から細い線を伸ばして短い注記を付け、白縁の円で細部を拡大する
• 製品アーチカード（product-card）: 淡いグレーのアーチ枠に商品、左右に矢印、色ドット、黒い円形カートボタンを置く。下に極細の品番と価格を並べる
• 仕様ラベル（spec-label）: 淡いグレーの小さなタグに項目名を入れ、下に値を書く
• 完売バッジ（soldout-badge）: コラボ商品の角に置く赤い小さな正円バッジ

Do's and Don'ts

Do - 英字見出しは書体と揃えを混ぜて誌面のように組む - 商品の色ごとに写真背景とブロック色を揃える - 写真は大胆にずらして重ね、余白を広く残す - 赤はCTAと要所の見出しだけに使う - CTAは複数のセクションの後に繰り返し置く

Don't - 彩度の高い原色を面に使わない - 角丸を大きくしたポップなボタンにしない - 日本語の大見出しを主役にしない - 濃い影やグラデーションを多用しない - セクション境界を波線や斜線にしない

Page Structure

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

1. ファーストビュー（世界観と商品を一目で見せる）: 単色背景の部屋に商品を置いたスライド写真。白い太セリフの英字コピーと日本語の短い訳を重ねる
2. 新色告知（カラー展開を見せる）: 欧文混植見出しの下に4色のカラーブロック帯
3. ブランドメッセージ＋CTA（最初の購入導線）: 半円にマスクしたモデル写真、斜体の欧文コピー、ロゴ、赤いCTA
4. デザイン性・受賞歴（権威付け）: グレー地に受賞ブロックを3つ左右交互に並べ、説明文と受賞製品リストを添える
5. コラボ実績（人気と話題性を示す）: 2列グリッドの商品カードに完売バッジ・名称・年月を付ける
6. ブランドの想い（共感を作る）: 欧文混植見出し、動画埋め込み、中央揃えの短い文章
7. 特長・安全性（機能の訴求）: 楕円の写真と赤いセリフ見出し。引き出し線と円の拡大写真で4つの特長を説明
8. カラー別ルック（色ごとの暮らし方を想起させる）: 色ごとのブロック背景に写真をコラージュし、白いセリフのカラー名を載せる
9. 活用事例（使い道を広げる）: 写真＋パステルブロックの行を7つ縦に積み、用途を英字ラベルで見せる
10. 製品ラインナップ（比較と購入）: アーチカードに価格と仕様タグ、注釈を付けて段数ごとに並べる
11. 上位版紹介（高単価商品の訴求）: ダークグレーのグラデ地に白文字。同じ構成のアーチカードを置く
12. クロージングCTA・フッター（最終の購入導線）: 半円の写真＋欧文コピー、赤いCTA、SNSアイコン、メーカーロゴ

Imagery

• 商品の色に合わせた単色ホリゾントのスタジオで、モデルと商品を撮る
• モデルの服も背景色の同系色で揃え、くすみトーンにまとめる
• 白い地には商品の切り抜きを置き、薄い接地影だけ付ける
• 用途写真は木・コンクリート・タイルなど実際の空間で自然光風に撮る
• 装飾は淡いグレーの青海波など和柄をごく薄く散らす程度にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC でも中央に SP 幅(約375px)のカラムを固定して表示する
• PC の左右余白には商品写真を斜めに敷き詰めた背景を置く
• PC に広げる場合、カラーブロックや用途行は 2〜4 列のグリッドにする
• 英字見出しは PC で 1.5〜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 行書くと起動時に読み込まれる。