DESIGN.md — 生成り×セージグリーンの上質タオル LP（Soft Sage Minimal Luxury Towel LP）

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

Overview

• 業種: 日用品・生活雑貨 ／ 雰囲気: 上品・高級、シンプル・ミニマル、やさしい・柔らかい、清潔・爽やか
• キーワード: 生成り・セージグリーン・細い明朝・広い字間・大きな余白・柔らかな自然光
• 地の質感: マットで平らな面。影やグラデーションは使わず、写真の柔らかさで質感を出す
• 形: 角丸なしの直角。写真に細い線のずらし枠をつける
• 温度感: やや暖かい生成りの地に、クールなミント・セージを重ねた中間の温度

Colors

• 地は生成り一色で、セクション切替えは淡いミントグレー帯で行う
• セージグリーンは購入ボタンと英字ラベルに限定して使う
• 見出しはチャコール、本文はやや明るいグレーで階層をつける
• 純白・純黒は使わず、どの色も彩度を落とす
• 写真の背景も淡いミントや白で統一し、配色と馴染ませる
• 強い差し色や赤系の強調は入れない
• button-primary は文字 #FAF9F6 × 背景 #85AFAB のコントラスト比が 2.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#507975、4.6:1）を使う。
• point-label は文字 #B1BFBE × 背景 #E5EEED のコントラスト比が 1.61:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#5B6F6E、4.51:1）を使う。

Typography

• 見出し・本文とも細い明朝を基本にする
• 字間を 0.1em 以上取り、ゆったり見せる
• 見出しは中央揃えで 3〜5 行に短く改行する
• 本文は左揃え、行間 2 倍以上
• 英字ラベルはセリフ体の大文字で見出しの上に置く
• スペック表と注釈だけはゴシックで実用的に見せる
• 太字は使わない
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は特長を本文と写真の左右交互 2 カラムにする
• 本文ブロックの幅: 画面幅の約 87%
• 余白: セクション間 90px、基本単位 8px、カード内 24px（375px 幅換算）
• 左右の余白は 25px 前後
• 写真は左右余白付きの全幅、または画面端まで広げる
• 見出しと本文の間は 50px 程度空ける
• Point ごとに『写真→ラベル→見出し→本文』の順番で繰り返す
• ファーストビュー直下とページ末尾に CTA を置く

Elevation & Depth

• 影は一切使わずフラットにする
• 奥行きは写真の背面に細い線枠を少しずらして重ねて表現する
• 淡い帯の上に写真を半分かかるように重ねて層を出す

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの長方形。縦長・横長を混ぜ、一部に 1px のずらし枠を添える
• セクション境界: 直線で切り替える。色帯の境界に写真をまたがせる
• ボタン・ラベル・写真はすべて直角
• 線は 1px の細線のみ
• 装飾アイコンはボタンの細い矢印だけにする

Components

• 購入ボタン（button-primary）: セージグリーンの直角帯。白い細字の文言と右側の長い細矢印を置く。幅は約 85%
• Point 番号ラベル（point-label）: 淡いミントの小さな長方形に、薄色のセリフ体で『Point 0X』と入れる
• 英字セクションラベル（section-eyebrow）: 見出しの上に置く、セージ色の大文字セリフ英字
• ずらし枠付き写真（offset-frame-photo）: 写真の背面に 1px の線枠を約 10px ずらして置く。2 枚を左右ずらしで縦に並べる
• 淡色帯セクション（tint-band）: ミントグレー地に英字ラベルと明朝の中央見出しを置く帯。上の写真が帯へはみ出す
• スペック一覧（spec-list）: 項目名を均等割り付けし、コロンの後に説明を続ける定義リスト。罫線なし
• スクロール誘導（scroll-indicator）: 小さな英字の下に細い縦線を伸ばし、ヒーローの下端をまたがせる

Do's and Don'ts

Do - 余白は削らず、セクション間は 80px 以上取る - 見出しは短い句で改行し中央に置く - 写真は白い布と自然光の柔らかなトーンでそろえる - CTA はセージグリーンの直角ボタン 1 種類に統一する - 英字ラベルと Point ラベルでリズムを作る

Don't - 太字ゴシックや大きな数字で強く訴求しない - 赤・黄など鮮やかな色や、セール風のバッジを使わない - 角丸やピル型ボタン、ドロップシャドウを使わない - 本文を詰めた行間で組まない - 写真に文字を多く重ねない

Page Structure

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

1. ファーストビュー（商品の世界観と名前を伝える）: モデルが白いタオルに触れる全幅写真に英字の商品名とカナ表記を重ね、右側にドットのページ送りを置く
2. CTA（すぐ購入したい人を誘導する）: 淡いミント帯に購入ボタンを 1 つ置き、スクロール線を上からつなげる
3. ブランドの導入（開発の背景を語る）: 中央の明朝見出しの下に、左揃えの長い本文を段落ごとに置く
4. イメージ写真（使用感の雰囲気で区切る）: 画面幅いっぱいの横長写真を置く
5. 商品ストーリー（名前の由来と体験価値を伝える）: 英字ラベル、5 行ほどの中央見出し、本文の順に並べる
6. 産地・品質の訴求（産地との協業による品質を伝える）: ずらし枠付きの写真 2 枚を淡色帯にかけて置き、帯の中に英字ラベルと見出しを置く
7. 特長（Point 1〜4）（素材・製法・デザイン・安全性を順に説明する）: 写真、Point ラベル、中央見出し、左揃え本文を 4 回繰り返す
8. ギフト訴求（贈り物として使える場面を示す）: 中央の明朝で 5 行のまとめ文を置き、続けて箱入り写真に商品名を重ねる
9. 商品仕様（サイズ・素材などの詳細を示す）: 白背景の商品写真、英字の商品名、ゴシックの定義リストと注釈を並べる
10. 最終 CTA（購入へ誘導する）: 仕様の下に購入ボタンをもう一度置く

Imagery

• 白いパイルタオルを主役にし、淡いミント・白の背景と柔らかな逆光で撮る
• モデルは自然なメイクで横顔か伏し目。タオルで髪や顔を包む仕草にする
• 糸巻きなど素材のアップは彩度を落としたグレーで撮る
• ギフト箱はグレージュの紙箱を斜め上から撮り、生成り背景に馴染ませる
• 露出はやや明るめでコントラストを低くし、ふんわりした空気感にする
• イラストやアイコン装飾は使わない
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はヒーローを横長にし、商品名を右寄せにする
• PC の特長は本文と写真を左右交互の 2 カラムにする
• PC の見出しは 1〜2 行にまとめ、本文は中央揃えにしてもよい
• PC の CTA は幅を約 30% に縮めて中央に置く
• PC の仕様は写真を左、リストを右の 2 カラムにする
• PC のコンテンツ幅は約 1000px に抑え、左右に余白を残す

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