--- version: alpha name: Earthy Craft Sake Storytelling LP description: 墨色の石肌と森の緑、生成りの大理石調の地を交互に使う。茶色と金茶の文字でつなぐ、上質な酒類ブランドのストーリー型 LP。縦書きの大見出し、濃紺の枠付き見出しボックス、製法を比べるフロー図が特徴。 colors: primary: '#695743' secondary: '#C9A46A' background: '#F8F9F4' background-alt: '#EDEDEB' surface: '#FFFFFF' dark-section: '#1E2023' on-dark: '#FFFFFF' accent-1: '#344D34' tint-1: '#FCFCF2' text-body: '#342A23' line: '#6D6352' text-muted: '#8C7D6A' typography: display: fontFamily: Shippori Mincho fontSize: 56px fontWeight: 500 lineHeight: 1.1 letterSpacing: 0.05em accent: fontFamily: Playfair Display fontSize: 28px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.04em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 20px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.08em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 16px fontWeight: 700 lineHeight: 1.7 letterSpacing: 0.06em body-lg: fontFamily: Zen Kaku Gothic New fontSize: 14px fontWeight: 500 lineHeight: 2.2 letterSpacing: 0.1em body-md: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.03em note: fontFamily: Montserrat fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.2em label-button: fontFamily: Zen Kaku Gothic New fontSize: 12px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.08em rounded: sm: 0px md: 4px lg: 999px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' heading-box-dark: backgroundColor: '{colors.dark-section}' textColor: '{colors.secondary}' typography: '{typography.headline-md}' height: 100px heading-underline: textColor: '{colors.text-body}' typography: '{typography.headline-lg}' height: 48px vertical-display: textColor: '{colors.primary}' typography: '{typography.display}' height: 180px pill-label: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 28px ingredient-circle: backgroundColor: '{colors.dark-section}' textColor: '{colors.secondary}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 70px flow-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 160px note-box: backgroundColor: '{colors.tint-1}' textColor: '{colors.primary}' typography: '{typography.body-md}' height: 90px voice-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 190px badge-circle: textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' rounded: '{rounded.full}' height: 130px --- # DESIGN.md — 墨黒×生成りと茶金の和洋酒 LP（Earthy Craft Sake Storytelling LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 酒類 ／ **雰囲気**: 上品・高級、ナチュラル、和風、ラグジュアリー・ダーク - **キーワード**: 墨色の石肌・森と水・生成りの大理石・茶金の文字・縦書き・職人の物語 - **地の質感**: 石・大理石・和紙のような淡い質感を地に敷き、水面や泡の写真を境界に重ねる - **形**: 基本は角の立った矩形。ラベルだけピル型、原料は正円で示す - **温度感**: 温かみのある中間〜やや暖色。暗部は青緑寄りの黒 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#695743` | 見出し・強調文字の茶色 | 3% | 画素の実測 | | `secondary` | `#C9A46A` | 暗色ボックス内の金茶文字 | 1% | 推定 | | `background` | `#F8F9F4` | 生成りの基本地 | 25% | 画素の実測 | | `background-alt` | `#EDEDEB` | グレーの石肌調の地 | 15% | 画素の実測 | | `surface` | `#FFFFFF` | 白いカード・リード文の地 | 12% | 画素の実測 | | `dark-section` | `#1E2023` | 濃紺黒の見出しボックス・ラベル | 7% | 画素の主要色に補正 | | `on-dark` | `#FFFFFF` | 暗い面の上の白文字 | 2% | 画素の主要色に補正 | | `accent-1` | `#344D34` | 森の深緑 | 6% | 画素の主要色に補正 | | `tint-1` | `#FCFCF2` | 注釈ボックスの淡いベージュ | 4% | 画素の実測 | | `text-body` | `#342A23` | 本文の濃いグレー | 3% | 画素の主要色に補正 | | `line` | `#6D6352` | 見出し下の区切り線 | 0% | 画素の主要色に補正 | | `text-muted` | `#8C7D6A` | 注釈の薄い茶 | 1% | 画素の実測 | - 地は生成りと石肌グレーを交互にし、白一色の面は使わない - 物語・歴史の区切りには森や墨色の暗い写真の帯を全幅で入れる - 見出しは茶色、暗いボックスの中は金茶。黒文字の見出しは使わない - 濃紺黒はボックス・ラベル・原料の円にだけ使う - 派手な原色や赤い購入色は使わない ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 縦書きの大見出し（明朝の太字） | 明朝 | Shippori Mincho | 500 | 56px | 1.1 | 0.05em | | `accent` | 英字のロゴ風コピー | 欧文セリフ | Playfair Display | 700 | 28px | 1.3 | 0.04em | | `headline-lg` | セクションの見出し | ゴシック | Zen Kaku Gothic New | 700 | 20px | 1.6 | 0.08em | | `headline-md` | 小見出し・ボックス内の見出し | ゴシック | Zen Kaku Gothic New | 700 | 16px | 1.7 | 0.06em | | `body-lg` | 中央揃えの詩のようなリード文 | ゴシック | Zen Kaku Gothic New | 500 | 14px | 2.2 | 0.1em | | `body-md` | 説明の本文 | ゴシック | Noto Sans JP | 400 | 11px | 1.9 | 0.03em | | `note` | 注釈・英字の小ラベル | 欧文サンセリフ | Montserrat | 400 | 10px | 1.6 | 0.2em | | `label-button` | ピル型ラベル | ゴシック | Zen Kaku Gothic New | 500 | 12px | 1.4 | 0.08em | - 大きな情緒コピーは明朝の縦書きにし、写真の端に重ねる - リード文は中央揃えにし、行間を 2 倍以上にする - 英字ラベルは字間を大きく取り、左右に細い線を添える - 本文は小さめにして左揃え。読ませるより雰囲気を優先する - 太字の強調は茶色の見出しだけにとどめる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。製法比較だけ 2 列 - **本文ブロックの幅**: 画面幅の約 84% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - 写真は左右に約 8% の余白を残した幅で置く - 見出し→下線→写真→本文の順で縦に積む - FV と物語の帯は全幅にし、写真の上に文字を重ねる - 見出しボックスは写真の上端に半分かかるように重ねる ## Elevation & Depth - 白いカードにはごく薄い影（0 2px 8px rgba(0,0,0,.08)）を付ける - 暗いボックスは影なしで、内側に細い金茶の枠を付ける - それ以外は平面にし、奥行きは写真の重なりで出す ## Shapes - **角丸**: 小 0px ／ 中 4px ／ 大 999px。ボタンはピル型。 - **写真の切り抜き**: 角丸なしの矩形。商品の切り抜き写真は斜めに配置する - **セクション境界**: 水面や泡の写真を横帯にして地の色を切り替える。それ以外は直線で切り替える - カード・写真は直角を基本にする - ラベルだけピル型にする - 原料は濃い正円に金茶の一文字を入れる - アイコンは白い正円の中に置く ## Components - **枠付きの暗い見出しボックス**（`heading-box-dark`）: 濃紺黒の面に、内側の細い枠線を付ける。上段に線ではさんだ英字の小ラベル、下段に金茶の見出しを置く - **下線付きの中央見出し**（`heading-underline`）: 中央揃えの見出しの下に、コンテンツ幅いっぱいの細線を引く - **縦書きの大見出し**（`vertical-display`）: 明朝の縦書き 1〜3 文字を、写真の端に重ねて置く - **ピル型ラベル**（`pill-label`）: 比較の列名や工程名を表す、濃色のピル - **原料の円**（`ingredient-circle`）: 濃色の正円に金茶の一文字を入れ、4 つ横に並べる - **工程カード**（`flow-card`）: 白いカードにアイコンと短い説明を入れる。カード同士は矢印付きの縦線でつなぐ - **注釈ボックス**（`note-box`）: 淡いベージュの面に、茶色の小見出しと本文 2 行を入れる - **作り手の声カード**（`voice-card`）: 細い黒枠の中で、左に人物写真と肩書、右に本文を並べる - **円形の実績バッジ**（`badge-circle`）: 細い白線の円の中に、大きな文字と短い説明を入れて写真に重ねる ## Do's and Don'ts **Do** - 暗い写真の帯と生成りの地を交互に並べ、物語に緩急をつける - 情緒コピーは縦書きの明朝で大きく見せる - 製法は 2 列の比較フローで図にする - 見出しは茶色か金茶で統一する - 余白を広く取り、静かな高級感を保つ **Don't** - 赤や黄色の目立つ購入ボタンを置かない - 大きな角丸のポップなカードを使わない - 純白一色の背景を長く続けない - 太いゴシックの黒い大見出しを使わない - 割引訴求のバッジを乱用しない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（世界観と商品を一目で見せる）: 墨色の石肌に斜めのボトル写真を置き、白文字のコピーを重ねる。下半分は森の写真にセリフ体のロゴと円形バッジを載せる 2. **コンセプト**（ブランドの思想を情緒的に伝える）: 生成りの地に縦書きの明朝の大見出しを置く。グラス写真の下に中央揃えのリード文と手描きのイラストを入れる 3. **作り手の紹介**（歴史と信頼を示す）: 暗い森の全幅写真の帯に縦書きの見出しを置く。2 社の写真と本文を×印でつなぐ 4. **商品の定義**（新しいジャンルを説明する）: 茶色の中央見出しの下に水面写真の帯を入れ、太字のリード文と暗い見出しボックスを続ける 5. **製法**（造り方を具体的に示す）: 樽の写真と、ベージュの注釈ボックスを置く 6. **製法の比較**（従来品との違いを図で示す）: ピル型の列名を 2 つ並べ、白い工程カードを矢印付きの縦線でつなぐ。泡の写真を背景に敷く 7. **味わいの特長**（香りと味を感覚的に伝える）: 暗い見出しボックスを写真に重ねる。香り・味わいを縦書きで大きく置き、写真と短い本文を交互に並べる 8. **楽しみ方**（料理との相性と飲み方を提案する）: 下線付きの見出し、料理写真、本文を並べ、最後に保管の注意を注釈ボックスで入れる 9. **開発者の声**（作り手の実感で信頼を補強する）: 白地に細い黒枠のカードを置き、左に人物、右に本文を並べる ## Imagery - ボトルは石や大理石の上に斜めに置き、低い彩度・暗めの露出で撮る - 森・渓流・木漏れ日の写真は下から見上げるか深い緑のトーンにし、物語の帯に使う - 注ぐ瞬間やグラスの泡は、白大理石の上で柔らかな自然光で撮る - 水面・泡の写真を横帯にしてセクションの境界にする - 線の細い手描きの茶色イラストを 1 点だけ添えて親しみを出す - 香りの説明には果実の写真を薄く透かして重ねる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はコンテンツ幅を 960px 前後に収め、左右に石肌の地を広げる - FV はボトル写真とコピーを左右 2 カラムにする - 作り手の紹介は写真と本文を横並びにする - 製法の比較は 2 列のまま幅を広げ、カードの余白を増やす - 縦書きの大見出しは 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-8b01c3bd`（元 LP の URL から採番） - **元 LP**: https://www.kikumasamune.shop/c/gentei/limited/nk853 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 中（6/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。