--- version: alpha name: Washi Paper Premium Japanese Tea LP description: 和紙のような薄灰色の地と墨黒の地を交互に重ね、明朝体の縦書き見出しと深緑の写真で静かな高級感を出したボトル茶の LP。商品ごとに赤・藍のテーマ色を番号バッジと縦帯ラベルに使い分ける。 colors: background: '#E9E9E9' dark-section: '#272625' primary: '#323212' background-alt: '#E6E5E1' surface: '#ECEDE8' cta: '#2A2A2A' on-cta: '#E7E7E7' text: '#272625' accent-1: '#A3121D' accent-2: '#03427B' on-dark: '#EBEBE6' line: '#BDBBB5' text-muted: '#E3E2DD' typography: display: fontFamily: Shippori Mincho fontSize: 30px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0.15em headline-lg: fontFamily: EB Garamond fontSize: 28px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.02em headline-md: fontFamily: Shippori Mincho fontSize: 20px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0.08em headline-sm: fontFamily: Noto Serif JP fontSize: 16px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.05em body-md: fontFamily: Noto Serif JP fontSize: 12px fontWeight: 400 lineHeight: 2.2 letterSpacing: 0.06em accent: fontFamily: Cormorant Garamond fontSize: 36px fontWeight: 400 lineHeight: 1.0 letterSpacing: 0.05em note: fontFamily: Noto Serif JP fontSize: 11px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.03em label-button: fontFamily: Shippori Mincho fontSize: 14px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.1em rounded: sm: 4px md: 12px lg: 16px full: 999px spacing: unit: 8px card: 20px section: 70px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' 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}' rounded: '{rounded.sm}' height: 60px feature-number-badge: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 40px vertical-label: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.note}' height: 110px watermark-heading: textColor: '{colors.text}' typography: '{typography.headline-md}' height: 50px spec-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.lg}' height: 360px product-circle: textColor: '{colors.text}' typography: '{typography.display}' rounded: '{rounded.full}' height: 340px scene-card: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 480px gallery-slider: height: 400px --- # DESIGN.md — 和紙質感と墨黒の高級ボトル茶 LP（Washi Paper Premium Japanese Tea LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 食品・飲料 ／ **雰囲気**: 上品・高級、和風、シンプル・ミニマル、ナチュラル - **キーワード**: 和紙テクスチャ・縦書き明朝・墨黒セクション・深緑の自然光写真・余白多め・商品別テーマ色 - **地の質感**: 薄い繊維感のある和紙調の灰色背景と、細かい織り目の入った墨黒背景 - **形**: 大きな円・半円で写真を切り抜き、山並み状の波線でセクションを区切る。カードは控えめな角丸 - **温度感**: やや涼しく静か。緑と墨で落ち着かせ、赤と藍で品格を添える ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#E9E9E9` | 和紙調の基本背景 | 40% | 画素の実測 | | `dark-section` | `#272625` | 利用シーン・フッターの墨黒背景 | 16% | 画素の主要色に補正 | | `primary` | `#323212` | ブランドの深い茶緑（写真トーン・ロゴ） | 8% | 画素の実測 | | `background-alt` | `#E6E5E1` | 商品情報エリアの生成り灰色 | 10% | 画素の実測 | | `surface` | `#ECEDE8` | 仕様表カードの面 | 4% | 画素の実測 | | `cta` | `#2A2A2A` | 購入ボタンの墨色 | 1% | 画素の実測 | | `on-cta` | `#E7E7E7` | 購入ボタン文字 | 0% | 画素の実測 | | `text` | `#272625` | 見出し・本文の墨文字 | 3% | 画素の主要色に補正 | | `accent-1` | `#A3121D` | 商品1のテーマ赤（番号バッジ・縦帯・注記） | 0% | 画素の実測 | | `accent-2` | `#03427B` | 商品2のテーマ藍 | 0% | 画素の実測 | | `on-dark` | `#EBEBE6` | 墨黒地上の文字 | 2% | 画素の主要色に補正 | | `line` | `#BDBBB5` | 仕様表の点線区切り | 0% | 推定 | | `text-muted` | `#E3E2DD` | 背景に敷く大きな英字透かし | 0% | 画素の主要色に補正 | - 地は和紙調の薄灰色を基本に、情緒を語るシーン部分とフッターだけ墨黒に切り替える - 写真は深緑と暗い茶で統一し、ページ全体の彩度を抑える - 強調色は商品ごとに1色（赤・藍）を決め、番号バッジ・縦帯ラベルだけに使う - 購入ボタンは派手な色を使わず墨色の面に白文字で品格を保つ - 英字の透かし見出しは背景よりわずかに濃い灰色で控えめに置く - 注意書きはテーマ赤の小さな文字で示す ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVと章見出しの縦書きコピー | 明朝 | Shippori Mincho | 600 | 30px | 1.5 | 0.15em | | `headline-lg` | 商品名の英字見出し | 欧文セリフ | EB Garamond | 400 | 28px | 1.2 | 0.02em | | `headline-md` | セクション見出し（日本語） | 明朝 | Shippori Mincho | 600 | 20px | 1.5 | 0.08em | | `headline-sm` | 特長番号の横の2行見出し | 明朝 | Noto Serif JP | 500 | 16px | 1.6 | 0.05em | | `body-md` | 本文 | 明朝 | Noto Serif JP | 400 | 12px | 2.2 | 0.06em | | `accent` | 背景に重ねる大きな英字透かし | 欧文セリフ | Cormorant Garamond | 400 | 36px | 1.0 | 0.05em | | `note` | 仕様表・注記 | 明朝 | Noto Serif JP | 400 | 11px | 1.8 | 0.03em | | `label-button` | 購入ボタン文字（動詞部分を大きく） | 明朝 | Shippori Mincho | 600 | 14px | 1.4 | 0.1em | - 全体を明朝体で統一し、ゴシックは使わない - 章見出しは縦書きで画面右端に配置する - 英字の見出しと透かしを日本語見出しに重ねて二層にする - 本文は行間2倍以上・字間広めでゆったり組む - ルビを使い和語の読みを添える - ボタン内は動詞を一回り大きくしてリズムを付ける - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。写真は左右余白19px程度で全幅に近く置く - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 70px、基本単位 8px、カード内 20px（375px 幅換算） - 本文ブロックは左右に約19pxの余白 - 写真は大小2枚をずらして重ねるオフセット配置 - 特長は番号バッジ＋2行見出しを中央寄せで置き、本文は左揃え - 仕様表は項目ごとに点線で区切った1枚のカードにまとめる - セクション間は大きく空けて静けさを出す ## Elevation & Depth - 影はほぼ使わずフラット - 奥行きは写真の重なりと背景の質感で表現する - カードは背景より少し濃い面色だけで区別する ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 16px。ボタンは角丸の長方形。 - **写真の切り抜き**: 商品写真は円形、シーン写真は片側が大きな半円の切り抜き、その他は角ばった長方形 - **セクション境界**: 墨絵の山並みのような柔らかい波形で区切る。黒セクションとの境は直線 - 円形切り抜きの中にボトルを上にはみ出させて立体感を出す - 購入ボタンは角丸4px程度の長方形 - 番号バッジは正円 - 仕様カードは角丸12〜16px ## Components - **購入ボタン**（`button-primary`）: 墨色の長方形に白い明朝文字とカートアイコン。全幅に近い幅 - **特長番号バッジ**（`feature-number-badge`）: テーマ色の正円に小さな英字ラベルと2桁番号。右に2行の明朝見出し - **縦帯ラベル**（`vertical-label`）: 商品名の縦書き見出しの横に置く、テーマ色の細い縦帯に白抜き文字の訴求 - **英字透かし付き見出し**（`watermark-heading`）: 淡い大きな英字の上に日本語見出しを重ねる - **仕様表カード**（`spec-card`）: 項目名を太字、内容を通常で、点線区切りで縦に並べる - **円形商品ビジュアル**（`product-circle`）: 茶畑ボケ写真の円にボトルを配置し、右に縦書き商品名 - **利用シーンカード**（`scene-card`）: 黒地に写真、ルビ付きの漢字一文字見出し、白文字本文 - **商品写真スライダー**（`gallery-slider`）: メイン写真に左右の白丸矢印、下に6枚のサムネイル列 ## Do's and Don'ts **Do** - 明朝体と縦書きで和の静けさを出す - 写真は深緑・暗所の自然光で統一する - 商品ごとにテーマ色を1色決めて小さく使う - 背景に和紙の質感を敷く - 余白を広く取り情報を詰めない **Don't** - ゴシック体や太い丸文字を使わない - 鮮やかなグラデーションや派手なCTA色を使わない - 影の強いカードやバッジを多用しない - テーマ色を広い面に塗らない - 値引き・煽り表現の装飾を入れない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（世界観を一枚で伝える）: 深緑の森を背景に注がれる茶の全面写真、右上に白い縦書きコピー、右上に丸いメニューボタン 2. **ブランド紹介**（商品の背景と想いを語る）: 半円切り抜き写真と右側の縦書き章見出し、英字見出しと短い詩的な本文 3. **商品情報（商品1）**（1本目の味と特長を伝える）: 波形区切りの後に円形ビジュアル＋縦書き商品名＋赤の縦帯、英字商品名、説明文 4. **特長（商品1）**（原料と製法のこだわりを示す）: 茶葉の写真、赤い番号バッジ見出し、オフセット配置の写真2枚、本文 5. **仕様表（商品1）**（成分・原材料などの情報提供）: 点線区切りの角丸カードと赤い注記 6. **商品情報・特長（商品2）**（2本目の魅力を同じ型で伝える）: 商品1と同じ構成をテーマ色を藍に変えて繰り返す 7. **利用シーン**（飲む場面を想像させる）: 墨黒地に半円写真と縦書きコピー、続いて写真＋漢字一文字見出しのシーンを3つ 8. **購入案内の扉**（購入エリアへの切り替え）: 暗い森の全幅写真に英字透かしと白い見出し 9. **商品購入**（セット内容と価格を示して購入させる）: 写真スライダー、ロゴ・商品名・価格、説明、墨色の購入ボタン 10. **パッケージのこだわり**（ギフトとしての価値を補強）: ボトルと化粧箱の写真に見出しと短文 11. **配送・支払い情報とCTA**（不安を解消して再度購入を促す）: 点線区切りの情報カードの後に購入ボタンを再掲 12. **フッター**（企業情報とリンク）: 墨黒地にロゴ、外部リンク、規約リンク、コピーライト ## Imagery - 深い森の緑をボケにした自然光の写真で統一 - 暗い木の卓上にグラスと注がれる茶を置き、液色を主役にする - 茶葉は黒い箱に盛り、真上やや斜めから暗めに撮る - ギフト箱は畳の上で斜光を当て、陰影を強調 - 全体に低彩度・暗めの露出で落ち着かせる - 装飾は墨絵の山並み状の波形と和紙質感のみ - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは本文と写真を左右2カラムで交互に配置する - 仕様表はPCで4列横並びの縦線区切りにする - 利用シーンはPCで3カラムのカードに並べる - 購入エリアはPCで左にスライダー、右に商品情報とボタン - 縦書き章見出しはPCでも右端に残す - PCのナビは右上にテキストメニューを横並び ## 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-0f1cd9dd`（元 LP の URL から採番） - **元 LP**: https://www.itoen.jp/oiocha/bottle_benifuuki_ujigyokuro/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（8/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。