DESIGN.md — グレージュ×オリーブ金の上質ソファ LP（Calm Greige Feather Furniture LP）

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

Overview

• 業種: 日用品・生活雑貨 ／ 雰囲気: 上品・高級、ナチュラル、やさしい・柔らかい、シンプル・ミニマル
• キーワード: くすみトーン・細身の明朝・大きなセリフ数字・写真主体・余白多め・オリーブ金のピル
• 地の質感: ファブリックの起毛感が伝わる柔らかな写真が中心。背景は無地の淡いグレーでフラット。
• 形: ピル型ラベル、角丸控えめのパネル、大きな円弧で切り抜いた背景。
• 温度感: やや暖かいニュートラル（グレージュ寄り）

Colors

• 地は白と淡いグレーを交互に使い、派手な色は入れない。
• 特長セクションは写真を全面に敷き、くすみブラウン系の写真トーンに白文字を重ねる。
• ラベル・タブはオリーブゴールド塗りに白文字で統一する。
• ゴールド文字はロゴや POINT 見出しなどの象徴的な箇所だけに使う。
• 赤は注意書きの枠と文字に限定する。
• カラーバリエーションは写真と生地サンプルの正方形で見せる。

Typography

• 見出しは細めの明朝で字間を広く取る。
• 番号や英字は大きなセリフ体にして、写真の端で裁ち落とすくらい大きく置く。
• 本文は小さめのゴシックで、行間 1.9 前後でゆったり組む。
• 英字の見出しは透かし風の淡いグレーで背景に敷く。
• 太字は使いすぎない。ラベルと仕様の項目名にだけ使う。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は全幅、ギャラリーは 2 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真は端まで広げ、余白は白またはグレーの地で取る。
• 仕様と選択肢は左右 6% 余白の淡いグレーのパネルにまとめる。
• 特長は番号＋見出し＋短い本文＋写真の順で繰り返す。
• カラー紹介は生地サンプル＋英字名、メイン写真 1 枚、サブ写真 2 枚の構成。
• 寸法図はグレー背景の写真に細い白線と数値を重ねる。

Elevation & Depth

• 影はほぼ使わず、フラットな面で構成する。
• 写真の上のパネルは半透明の白かグレーで浮かせる。
• ギャラリー写真の間は白い細いガターで区切る。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 基本は角なしの矩形。ポイント紹介とセット紹介は上辺を大きな円弧で切り抜く。
• セクション境界: 直線の切り替えが基本。一部で大きな円弧を使う。
• ラベルはすべてピル型にする。
• パネルの角丸は 4〜8px に抑える。
• 注意書きは角丸なしの細い赤枠で囲む。
• フェザーなど素材の写真は円形に切り抜く。

Components

• オリーブのピルラベル（label-pill）: サイズ・タイプ名を示す塗りのピル
• 番号付きポイントバー（point-list-pill）: 白丸の番号＋特長名の横長ピル。4 本を縦に並べる
• 巨大セリフ番号（feature-number）: 01〜04 の白い数字を写真の端に大きく配置
• 枠線ピル見出し（outline-pill）: 細い黒枠のピルに小見出しを入れる（素材名や間取りなど）
• 仕様パネル（spec-panel）: 淡いグレーの地に見出し、ラベル、製品写真、寸法線をまとめる
• 比較ボックス（compare-box）: 従来品と自社品を左右に並べ、吹き出し風のラベルで比べる
• カラー名見出し（color-heading）: 生地サンプルの正方形＋英字セリフ名＋／＋和名
• 注意書きボックス（caution-box）: 赤い細枠に赤文字の中央揃えで注意を書く

Do's and Don'ts

Do - 写真はくすみトーンにそろえ、生地の質感がわかる距離で撮る。 - 見出しは明朝で字間を広く取り、静かに見せる。 - 仕様情報はピルラベルで区切って、図と数値で示す。 - セクションごとに番号と英字を大きく置いてリズムを作る。 - 白とグレーの地を交互に使い、間延びしないようにする。

Don't - 彩度の高い色をボタンや背景に使わない。 - 太いゴシックの見出しで煽らない。 - 影や光沢、立体的なボタンを使わない。 - テキストを詰め込みすぎない。本文は 3〜4 行までにする。 - カラー紹介で生地サンプルを省かない。

Page Structure

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

1. ファーストビュー（世界観と商品を一目で伝える）: 淡い羽根柄の背景にゴールドの筆記体ロゴと欧文サブ、全幅の商品写真を置く
2. イメージ写真とリード（使う場面を想像させる）: くつろぐ人物の全幅写真、明朝のコピー、中央揃えの短い本文
3. カラー一覧（選べる色の幅を見せる）: 白地に切り抜きの商品を 2 段で横に並べる
4. ポイント目次（特長を要約する）: 円弧で切り抜いたグレーの地にゴールドの英字見出しと番号付きピル 4 本
5. 特長 01〜04（機能を一つずつ訴求する）: 全幅写真に巨大セリフ番号と白い明朝見出しを重ね、構造図や比較ボックスを添える
6. 付属品・お手入れ（細かな利点を補う）: 写真 2 枚の横並びカードと枠線ピルのラベル
7. タイプ選択（サイズ展開を示す）: グレーのパネルにピルラベル、商品写真、寸法線を縦に並べる
8. セット提案・レイアウト（組み合わせと配置を提案する）: 大きな英字を重ねた写真、上から見た図、間取り図
9. カラー詳細（色ごとの印象を伝える）: 生地サンプル＋英字名、メイン写真、サブ写真 2 枚を色ごとに繰り返す
10. 商品仕様（寸法・素材を明示する）: 大きな明朝見出しと寸法入りの写真、グレーの素材ボックス
11. 注意事項・配送（不安を解消する）: 赤枠の注意ボックスと、写真＋テキストの梱包案内

Imagery

• 自然光の入る明るいリビングで、グレージュの壁と木の小物、観葉植物を添える。
• 人物は寝そべる・読書するなど脱力したポーズで、生成りの服を着せる。
• 生地の起毛がわかる手元のアップ写真を入れる。
• 構造は断面図風のレイヤー図にパステル色のラベルを付ける。
• 間取り図は白地に黒の線画で簡潔に描く。
• 写真全体を低彩度・暖かいグレーのトーンに補正する。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央 750px 前後のカラムに SP と同じ縦長の構成を置く案を推奨する。
• PC の左右の余白は淡いグレーで埋める。
• PC では特長を写真と文字の左右 2 カラムにしてもよい。
• カラー詳細のサブ写真は PC で 3 枚並べにできる。
• 巨大番号は PC では 160px 程度まで拡大する。

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