--- version: alpha name: Soft Sage Minimal Luxury Towel LP description: 生成りの地にくすんだセージグリーンを差し色にした、余白の多い明朝体中心の上質な日用品 LP。白いタオルの柔らかな写真と、字間の広い細い明朝で静かな高級感を出す。 colors: background: '#FAF9F4' primary: '#85AFAB' cta: '#85AFAB' on-cta: '#FAF9F6' background-alt: '#E6EFEE' tint-1: '#E5EEED' secondary: '#A6B8B1' text: '#51423E' text-body: '#6F6B68' text-muted: '#B1BFBE' line: '#C4C5C4' accent-1: '#B2917C' cta-accessible: '#507975' text-muted-accessible: '#5B6F6E' typography: display: fontFamily: Cormorant Garamond fontSize: 38px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.06em headline-lg: fontFamily: Shippori Mincho fontSize: 22px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.15em accent: fontFamily: Cormorant Garamond fontSize: 18px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.1em headline-sm: fontFamily: Cinzel fontSize: 22px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.08em body-md: fontFamily: Noto Serif JP fontSize: 13px fontWeight: 400 lineHeight: 2.2 letterSpacing: 0.12em note: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.04em label-button: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 300 lineHeight: 1.4 letterSpacing: 0.08em rounded: sm: 0px md: 0px lg: 0px full: 999px spacing: unit: 8px card: 24px section: 90px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 62px point-label: backgroundColor: '{colors.tint-1}' textColor: '{colors.text-muted}' typography: '{typography.accent}' height: 24px section-eyebrow: textColor: '{colors.secondary}' typography: '{typography.accent}' height: 24px offset-frame-photo: height: 370px tint-band: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 400px spec-list: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.note}' height: 500px scroll-indicator: textColor: '{colors.text-muted}' typography: '{typography.note}' height: 100px --- # DESIGN.md — 生成り×セージグリーンの上質タオル LP（Soft Sage Minimal Luxury Towel LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 日用品・生活雑貨 ／ **雰囲気**: 上品・高級、シンプル・ミニマル、やさしい・柔らかい、清潔・爽やか - **キーワード**: 生成り・セージグリーン・細い明朝・広い字間・大きな余白・柔らかな自然光 - **地の質感**: マットで平らな面。影やグラデーションは使わず、写真の柔らかさで質感を出す - **形**: 角丸なしの直角。写真に細い線のずらし枠をつける - **温度感**: やや暖かい生成りの地に、クールなミント・セージを重ねた中間の温度 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#FAF9F4` | ページ全体の生成り地 | 60% | 画素の実測 | | `primary` | `#85AFAB` | ブランドのセージグリーン（CTA 面） | 2% | 画素の実測 | | `cta` | `#85AFAB` | 購入ボタンの面 | 1% | 画素の実測 | | `on-cta` | `#FAF9F6` | 購入ボタン上の文字・矢印 | 0% | 画素の主要色に補正 | | `background-alt` | `#E6EFEE` | 淡いミントグレーの帯セクション | 8% | 画素の実測 | | `tint-1` | `#E5EEED` | Point 番号ラベルの面 | 0% | 画素の実測 | | `secondary` | `#A6B8B1` | 英字セクションラベルの文字色 | 0% | 画素の実測 | | `text` | `#51423E` | 見出しの濃いチャコール | 2% | 画素の主要色に補正 | | `text-body` | `#6F6B68` | 本文のグレー | 3% | 推定 | | `text-muted` | `#B1BFBE` | Point ラベル内やスクロール表示の薄い文字 | 0% | 画素の実測 | | `line` | `#C4C5C4` | 写真のずらし枠線・スクロール線 | 0% | 画素の主要色に補正 | | `accent-1` | `#B2917C` | パッケージのグレージュ（写真内の基調） | 3% | 画素の実測 | | `cta-accessible` | `#507975` | AA を満たす補正値（計算） | | 計算 | | `text-muted-accessible` | `#5B6F6E` | AA を満たす補正値（計算） | | 計算 | - 地は生成り一色で、セクション切替えは淡いミントグレー帯で行う - セージグリーンは購入ボタンと英字ラベルに限定して使う - 見出しはチャコール、本文はやや明るいグレーで階層をつける - 純白・純黒は使わず、どの色も彩度を落とす - 写真の背景も淡いミントや白で統一し、配色と馴染ませる - 強い差し色や赤系の強調は入れない - `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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの英字商品名 | 欧文セリフ | Cormorant Garamond | 500 | 38px | 1.2 | 0.06em | | `headline-lg` | 各セクションの大見出し（中央揃え・複数行） | 明朝 | Shippori Mincho | 400 | 22px | 1.9 | 0.15em | | `accent` | 英字セクションラベル（大文字） | 欧文セリフ | Cormorant Garamond | 500 | 18px | 1.4 | 0.1em | | `headline-sm` | スペック欄の英字商品名 | 欧文セリフ | Cinzel | 400 | 22px | 1.4 | 0.08em | | `body-md` | 本文（左揃え） | 明朝 | Noto Serif JP | 400 | 13px | 2.2 | 0.12em | | `note` | スペック・注釈 | ゴシック | Noto Sans JP | 400 | 12px | 1.9 | 0.04em | | `label-button` | 購入ボタンの文字 | ゴシック | Noto Sans JP | 300 | 16px | 1.4 | 0.08em | - 見出し・本文とも細い明朝を基本にする - 字間を 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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-9ff093f1`（元 LP の URL から採番） - **元 LP**: https://kinujo.jp/products_towel/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（8/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。