--- version: alpha name: Natural Washi Wine Story LP description: 生成りの和紙風テクスチャ地に明朝体を中心に組んだ、物語を読ませる型の輸入ワイン LP。前半は商品写真と味わいの説明文、中盤は製法やワイナリーの紹介を枠線付きの見出しで区切る。後半は葡萄畑の写真に黒の半透明帯を重ねて産地のストーリーを伝え、最後に取扱店の一覧表で締める。 colors: background: '#F6F5F1' background-alt: '#FEFEFF' primary: '#1E2412' secondary: '#6C0C0C' dark-section: '#030402' on-dark: '#FFFFFF' text: '#413826' text-body: '#413826' line: '#797669' accent-1: '#DAD1B6' accent-2: '#A38E63' marker: '#B01E1E' tint-1: '#E3DFD3' typography: display: fontFamily: Shippori Mincho fontSize: 30px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.04em headline-lg: fontFamily: Shippori Mincho fontSize: 32px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.05em headline-md: fontFamily: Shippori Mincho fontSize: 21px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.02em body-md: fontFamily: Noto Serif JP fontSize: 14px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.03em note: fontFamily: Noto Serif JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Great Vibes fontSize: 36px fontWeight: 400 lineHeight: 1.1 headline-sm: fontFamily: Shippori Mincho fontSize: 18px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em rounded: sm: 0px md: 0px lg: 0px full: 999px spacing: unit: 8px card: 16px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' heading-frame: textColor: '{colors.text}' typography: '{typography.headline-md}' height: 64px photo-overlay-band: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 260px badge-label: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.note}' height: 30px notice-bar: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 150px script-watermark: textColor: '{colors.tint-1}' typography: '{typography.accent}' height: 60px store-table: backgroundColor: '{colors.background-alt}' textColor: '{colors.text-body}' typography: '{typography.note}' height: 2000px text-image-float: textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 260px --- # DESIGN.md — 和紙地と葡萄畑写真の自然派ワイン LP（Natural Washi Wine Story LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 酒類 ／ **雰囲気**: ナチュラル、上品・高級、信頼・誠実 - **キーワード**: 和紙テクスチャ・明朝体・葡萄畑の風景写真・スタイリング撮影・細い枠線見出し・読み物型 - **地の質感**: 生成りの和紙風の紙地に薄い繊維模様。写真は自然光で撮った落ち着いたトーン。 - **形**: 角丸はほぼ使わない。細い線の矩形枠と全幅写真で構成する。 - **温度感**: 暖かい。生成り・焦げ茶・深緑を基調にした温かみのあるアースカラー。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#F6F5F1` | 和紙風の生成り地 | 35% | 画素の実測 | | `background-alt` | `#FEFEFF` | 冒頭帯の白地 | 17% | 画素の実測 | | `primary` | `#1E2412` | 葡萄畑を思わせる深緑 | 6% | 画素の主要色に補正 | | `secondary` | `#6C0C0C` | ワインレッドのラベル帯 | 1% | 画素の実測 | | `dark-section` | `#030402` | 写真に重ねる黒の半透明帯 | 8% | 画素の実測 | | `on-dark` | `#FFFFFF` | 暗い帯の上に置く白文字 | 1% | 画素の主要色に補正 | | `text` | `#413826` | 見出しと強調文字の焦げ茶 | 2% | 画素の主要色に補正 | | `text-body` | `#413826` | 本文のグレーがかった焦げ茶 | 3% | 画素の主要色に補正 | | `line` | `#797669` | 見出し枠と表の罫線 | 1% | 画素の実測 | | `accent-1` | `#DAD1B6` | 取扱店一覧の外枠のベージュ | 8% | 画素の実測 | | `accent-2` | `#A38E63` | 表の見出し行の茶色 | 1% | 画素の実測 | | `marker` | `#B01E1E` | 冒頭のお知らせ帯の強調赤文字 | 0% | 推定 | | `tint-1` | `#E3DFD3` | 背景に透かす筆記体の英字 | 0% | 画素の主要色に補正 | - ページの大半は生成りの和紙地にして、純白は冒頭の帯と写真まわりだけに使う。 - 文字は真っ黒にせず、焦げ茶系でまとめる。 - 産地を紹介するパートは全幅写真の上に黒の半透明帯を重ね、白文字を載せる。 - 赤は冒頭のお知らせの強調語とラベル帯だけに使う。 - 表と見出しの枠はくすんだ茶色やベージュで作り、鮮やかな色は入れない。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの商品名 | 明朝 | Shippori Mincho | 500 | 30px | 1.3 | 0.04em | | `headline-lg` | 写真の上に置く産地テーマの大見出し | 明朝 | Shippori Mincho | 500 | 32px | 1.2 | 0.05em | | `headline-md` | 枠線で囲むセクション見出し | 明朝 | Shippori Mincho | 500 | 21px | 1.4 | 0.02em | | `body-md` | 味わいの説明文や製法の本文 | 明朝 | Noto Serif JP | 400 | 14px | 1.9 | 0.03em | | `note` | 注釈と表の本文 | 明朝 | Noto Serif JP | 400 | 11px | 1.6 | 0.0em | | `accent` | 背景に透かす品種名などの欧文 | 欧文スクリプト | Great Vibes | 400 | 36px | 1.1 | 0.0em | | `headline-sm` | 冒頭のお知らせ帯の見出し | 明朝 | Shippori Mincho | 700 | 18px | 1.5 | 0.03em | - 見出しも本文も明朝体で統一し、ゴシック体は使わない。 - 味わいの説明文は中央揃えにし、行間を 1.9 前後まで広く取る。 - 製法や会社の説明は左揃えの段落にする。 - 品種名などの欧文は筆記体で大きく薄く置き、本文の背景に透かす。 - 太字はほぼ使わず、強調は色か文字サイズの差で付ける。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: 1 カラムが基本。説明文と写真を左右に並べ、本文で写真を回り込ませる箇所がある。 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - 商品写真や風景写真は左右に少し余白を残して大きく配置する。 - 産地を紹介するパートは画面幅いっぱいの写真を縦に連続させる。 - セクション見出しの枠は左端から始め、右側に余白を残す。 - 取扱店一覧は 3 列の表（店名・所在地・電話番号）にし、行は点線で区切る。 - 本文の段落の間は 16px 程度空ける。 ## Elevation & Depth - 影は使わず、フラットに仕上げる。 - 奥行きは写真に重ねる黒の半透明帯だけで出す。 ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。 - **写真の切り抜き**: 角丸なしの矩形。風景写真は全幅、商品写真は左右に少し余白を残して置く。 - **セクション境界**: 直線で切り替える。紙地から全幅写真へはそのまま切り替える。 - 見出しは 1px の細い線の矩形枠で囲む。 - ラベル帯は角のない矩形にする。 - 取扱店一覧はベージュの太い外枠で囲む。 ## Components - **枠線見出し**（`heading-frame`）: 細い茶色の線で囲んだ矩形の中に明朝体の見出しを置く。左端に寄せる。 - **写真上の暗幕テキスト帯**（`photo-overlay-band`）: 全幅の風景写真の下半分に黒の半透明帯を敷き、大見出し・下線・本文を白文字で重ねる。 - **ワインレッドのラベル**（`badge-label`）: ロゴの下などに置く小さな矩形のラベル。白文字で短い言葉を入れる。 - **冒頭のお知らせ帯**（`notice-bar`）: 白地に線画のイラストと 2 行の告知文を置き、キーワードだけ赤くする。右下に小さな注釈を添える。 - **筆記体の透かし文字**（`script-watermark`）: 説明文の背後に、薄いベージュの筆記体の欧文を斜めに重ねる。 - **取扱店一覧表**（`store-table`）: 茶色の見出し行の下に、店名・所在地・電話番号の 3 列を点線で区切って並べる。全体をベージュの枠で囲む。 - **写真回り込み段落**（`text-image-float`）: 右に樽やロゴの写真を置き、左の本文がその下まで回り込む。 ## Do's and Don'ts **Do** - 地は和紙風の生成りテクスチャにして、紙の質感を出す。 - 見出しは細い枠線、本文は明朝体で上品にまとめる。 - 産地の写真は夕景や青空が入る広い構図を全幅で使う。 - 暗幕帯の大見出しの下には細い白線を引く。 - 取扱店のような信頼につながる情報は、表で淡々と並べる。 **Don't** - ゴシック体の太字や派手なボタンを多用しない。 - 原色の赤や黄色で値引きを訴求しない。 - 角丸のカードやドロップシャドウを使わない。 - 純白の地を長く続けない。 - 文字をぎっしり詰めず、行間を広く取る。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **お知らせ帯**（採用実績などの権威付け）: 白地に線画の乾杯イラストと 2 行の告知文を置き、キーワードを赤くする。 2. **ファーストビュー**（商品と産地のイメージを伝える）: 葡萄畑の全幅写真の上に、左は半透明の暗い板に明朝体の商品名、右は缶の商品写真を置く。左上にはロゴとラベル帯を置く。 3. **味わいの説明 1**（1 品目の香りと味を伝える）: 紙地の上に中央揃えの説明文を置き、背後に筆記体の品種名を透かす。その下にスタイリングした写真を置く。 4. **味わいの説明 2**（2 品目の香りと味を伝える）: 説明 1 と同じ構成をくり返し、写真は柄布と植物を使ったものに変える。 5. **製法の特長**（保存料を使わない独自製法を説明する）: 枠線見出しの下に左揃えの本文を置き、右に水彩のハーブのイラストを添える。 6. **開発の背景**（原料とワインの組み合わせの由来を伝える）: 枠線見出しを置き、樽の写真に本文を回り込ませる。 7. **ワイナリーの紹介**（生産者の信頼性を伝える）: 枠線見出し、黒地のロゴ画像、本文の順に並べる。 8. **産地のストーリー**（畑・土壌・気候を順に紹介する）: 全幅の風景写真を 3 枚続け、それぞれに暗幕帯・大見出し・白文字の本文を重ねる。 9. **独占販売の実績**（現地との関係と希少性を示す）: 左に人物写真、右に見出しと短い文と葡萄の写真を置く 2 列構成。 10. **取扱店一覧**（飲める店を紹介して信頼を高める）: ベージュの枠の中に見出しと案内文を置き、その下に 3 列の長い表を続ける。 ## Imagery - 葡萄畑や山並みは夕景や青空で、広角の横長構図で撮る。 - 商品は木の器や布、ハーブ、赤い実と組み合わせ、自然光でテーブルにスタイリングして撮る。 - 樽が並ぶセラーは暖色の照明で撮り、重厚感を出す。 - 淡い水彩のハーブのイラストを余白に添える。 - 線画の手描き風イラストを小さく使う。 - 生産者と担当者が並ぶ現地の記念写真で信頼感を出す。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - SP は 1 カラムにし、写真回り込みは写真を上・本文を下に縦積みする。 - SP の本文は 14px・行間 1.9 前後にする。 - 暗幕帯の本文は SP で 13px 程度にし、帯の高さを伸ばして文字を収める。 - 取扱店一覧の表は SP で 3 列を保つか、電話番号を店名の下に回す。 - PC では本文の幅を 720px 程度に収め、中央に置く。 ## 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-71bce99e`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/tea-life/97277/ - **解析に使った画像**: PC（PC版） - **確度**: 色 中（7/13 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。