DESIGN.md — 生成り×紺の静かな寝具ブランド LP（Soft Linen Sleep Brand LP）

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

Overview

• 業種: 日用品・生活雑貨 ／ 雰囲気: やさしい・柔らかい、シンプル・ミニマル、上品・高級、ナチュラル
• キーワード: 生成り・余白・紺の欧文セリフ・自然光写真・角丸カード・静けさ
• 地の質感: フラットな生成りの地。パステルのグラデ面がアクセント
• 形: 角丸 10px 前後の写真カード、ピル型ボタン、小さな丸ドット
• 温度感: 温かみのある中間色に、夜を思わせる紺を合わせた落ち着いた温度感

Colors

• 地は全編生成り 1 色にし、セクションを色で分けない
• 紺は欧文見出し・ロゴ・主ボタンだけに使う
• 本文は濃い墨色、補足は薄いグレーの 2 段階
• 見出し末尾に淡いグレーの丸ドットを添える
• 色の差し色は写真とピンク〜青灰のパステルグラデで出す
• ビビッドな赤・オレンジは使わない

Typography

• セクション見出しは欧文小文字のセリフ体、紺、少し傾ける
• 和文は細めのゴシックで字間を広くとる
• リード文は短い行で改行し、中央揃えか左揃えにする
• 太字の和文は大見出しには使わない
• 日付は小さな欧文数字で添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。コラムは 2 列グリッド、特長と商品は横スクロール
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 100px、基本単位 8px、カード内 0px（375px 幅換算）
• 左右の余白は 12px 前後とし、写真は端近くまで広げる
• セクション間は 80〜120px と大きくあける
• 横スクロールのカードは次のカードを端に少し見せる
• view more は右寄せの小さなテキストに矢印丸を付ける
• 写真を左右交互にずらして配置し、間を空ける

Elevation & Depth

• 影は基本使わずフラットにする
• 白い丸アイコンだけ、ごく淡い影か影なし
• 奥行きは写真と余白でつくる

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 14px。ボタンはピル型。
• 写真の切り抜き: 角丸 10px の長方形。SNS の正方形写真だけ角丸なし
• セクション境界: 直線の区切りは使わず余白で分ける（PC はゆるい曲線あり）
• 写真カードはすべて同じ角丸にそろえる
• ボタンは完全なピル型
• 矢印は白い小さな丸の中に入れる
• 円形に回る欧文テキストを装飾に使う

Components

• ピル型の主ボタン（button-primary）: 紺地に白文字、中央に置いた幅 190px ほどのピル
• 欧文セリフ見出し＋丸ドット（section-title-serif）: 紺の小文字欧文を少し傾け、末尾にグレーの丸を付ける
• view more リンク（link-view-more）: 右寄せの小さな欧文に、白い丸付きの山括弧矢印
• 番号付き特長カード（feature-card-numbered）: 紺の欧文番号＋見出し、その下に角丸写真と説明文。横スクロール
• ニュース行（news-item）: 日付・太めのタイトル・グレー要約 2〜3 行を細い線で区切る
• コラムカード（column-card）: 角丸写真の下に、字間広めの 3〜4 行タイトルを置く 2 列カード
• 円形に回る欧文装飾（circular-text）: 紺のセリフ体で輪の形に文字を並べ、写真の角に重ねる
• ヘッダーの丸アイコン（header-icon）: 白い円の中にアカウント・カートの線画アイコン

Do's and Don'ts

Do - 生成りの地と大きな余白で静けさを保つ - 欧文見出しは紺のセリフ体にそろえる - 写真は自然光の白い寝具と木・ラタン系にする - リード文は短い文を詩のように改行する - 写真の配置は左右にずらしてリズムをつくる

Don't - 原色のバナーや太い赤文字で煽らない - 影の強いカードや枠線の箱を多用しない - セクションごとに地色を変えない - 和文見出しを極太にしない - 情報を詰め込んで余白をつぶさない

Page Structure

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

1. ヘッダー（ナビとロゴ）: 左にメニュー線、中央に紺の小さなロゴ、右に白丸アイコン 2 つ
2. ファーストビュー（世界観の提示）: 角丸の寝姿写真に白の大きな欧文ロゴと短いコピーを重ねる
3. ブランドストーリー（眠りへの共感）: 中央揃えの短い詩的な文を 5 段落、行間を広く
4. 写真ギャラリー（情緒づけ）: 角丸写真を横に並べ、端を切って横スクロール感を出す
5. お知らせ（新着と信頼）: 日付＋タイトル＋グレー要約を線で区切って 3 件
6. 主力商品の特長（商品価値の説明）: 欧文見出し、和文リード、番号付きカードを横スクロール
7. 認定・実績（信頼の補強）: 大きな写真の角に認定マーク、下に短い説明
8. アイテム紹介（関連商品への誘導）: インテリア写真の横スクロールカードと短い詩的リード
9. コラム（読み物で回遊）: 2 列の角丸写真カードと長めのタイトル
10. 登録 CTA（メッセージ登録の獲得）: 欧文見出し、中央の 3 行文、紺のピルボタン
11. SNS（フォロー誘導）: 正方形写真を 3 枚すき間なく並べる
12. 情緒ビジュアル（余韻）: 左右にずらした写真、円形欧文、パステルのグラデ面
13. フッター（サイトマップ）: 白抜きの大きな欧文ロゴの下に 2 列リンク、規約類を小さく

Imagery

• 白いリネン寝具で眠る人物を自然光で、彩度低めに撮る
• 木のベッドやラタン家具、ジュートラグなど素材感のある室内
• 肌・寝具・壁はベージュ〜白、差し色は紺の衣服
• 夜空と月のやわらかいイラストを補助的に使う
• ピンクから青灰へ流れるぼかしのグラデ面を抽象ビジュアルにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は欧文見出しを縦書きにし、左右の端に寄せる
• PC の特長・商品・コラムは 3 列グリッドで横スクロールしない
• PC のお知らせは見出しの右に本文を広く並べる
• PC の登録 CTA は淡いグラデ帯に曲線の区切りを入れる
• PC のフッターリンクは 4〜5 列の横並び

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