--- version: alpha name: Festive Japanese Folk Illustration Sake LP description: クリーム地に朱赤と山吹色の波形の丘、瑞雲、七福神風イラストを重ねた、お祭り感のある和の日本酒ブランドLP。筆文字風の赤い縦書き見出しと、角丸の白カード・楕円形の写真で、親しみやすさと縁起の良さを同時に出している。 colors: primary: '#C4231C' background: '#FFFAD2' background-alt: '#FFECAA' surface: '#FEFEFE' secondary: '#F0C977' cta: '#B8902E' on-cta: '#F8F9F5' text: '#2A2420' text-muted: '#7C775E' accent-1: '#D66148' line: '#CAC094' dark-section: '#C41C1B' on-dark: '#F8F9F5' cta-accessible: '#8D6E23' text-muted-accessible: '#7B765D' typography: display: fontFamily: Yuji Syuku fontSize: 40px fontWeight: 700 lineHeight: 1.1 headline-md: fontFamily: Zen Kaku Gothic New fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em body-lg: fontFamily: Zen Kaku Gothic New fontSize: 16px fontWeight: 700 lineHeight: 2.0 letterSpacing: 0.15em body-md: fontFamily: Zen Kaku Gothic New fontSize: 14px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.05em note: fontFamily: Zen Kaku Gothic New fontSize: 11px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.03em accent: fontFamily: Klee One fontSize: 12px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.05em label-button: fontFamily: Zen Kaku Gothic New fontSize: 13px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.05em rounded: sm: 8px md: 16px lg: 24px full: 999px spacing: unit: 8px card: 24px section: 96px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' heading-vertical-brush: textColor: '{colors.primary}' typography: '{typography.display}' height: 160px button-more: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 36px button-recipe: backgroundColor: '{colors.surface}' textColor: '{colors.text-muted}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 32px cloud-balloon: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 100px card-white: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 400px badge-number: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 44px photo-blob: textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 200px spec-table: textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.full}' height: 90px --- # DESIGN.md — 朱赤×山吹の縁起物イラスト日本酒LP（Festive Japanese Folk Illustration Sake LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 酒類 ／ **雰囲気**: 和風、ポップ・元気、親しみ・手作り感、レトロ - **キーワード**: 縁起物・お祭り・瑞雲・波形の丘・筆文字・縦書き - **地の質感**: 版画やシルクスクリーン風のかすれ質感がある赤い面と、細い線を重ねた波模様。全体はマットで平面的。 - **形**: なだらかな丘の曲線でセクションを区切る。カードは大きめの角丸、写真は楕円やいびつな丸で切り抜く。 - **温度感**: 暖色だけで組んだ、明るく温かいハレの日の雰囲気 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#C4231C` | 朱赤（丘・見出し・帯） | 7% | 画素の実測 | | `background` | `#FFFAD2` | 淡いクリームの地 | 31% | 画素の実測 | | `background-alt` | `#FFECAA` | 濃いめの山吹クリーム地 | 31% | 画素の実測 | | `surface` | `#FEFEFE` | 白カード | 6% | 画素の実測 | | `secondary` | `#F0C977` | 金茶の丘・瑞雲 | 5% | 画素の主要色に補正 | | `cta` | `#B8902E` | 詳しくボタンの金茶 | 0% | 推定 | | `on-cta` | `#F8F9F5` | ボタン文字 | 0% | 画素の主要色に補正 | | `text` | `#2A2420` | 見出し・本文の濃い文字 | 1% | 推定 | | `text-muted` | `#7C775E` | 注釈・日付 | 0% | 画素の実測 | | `accent-1` | `#D66148` | 朱の明るい赤（ハイライト・手書き文字） | 3% | 画素の主要色に補正 | | `line` | `#CAC094` | 区切り線・表の罫 | 0% | 画素の主要色に補正 | | `dark-section` | `#C41C1B` | フッター赤 | 2% | 画素の実測 | | `on-dark` | `#F8F9F5` | フッター上の白文字 | 0% | 画素の主要色に補正 | | `cta-accessible` | `#8D6E23` | AA を満たす補正値（計算） | | 計算 | | `text-muted-accessible` | `#7B765D` | AA を満たす補正値（計算） | | 計算 | - 地はクリーム2色（淡・濃）をセクションごとに交互に使う - 境界は朱赤と金茶の波形の丘で塗り分ける - 見出しは朱赤の筆文字だけにして強調色を絞る - 本文は濃い茶黒、注釈は茶グレー - 情報の塊は白カードに乗せて地と分ける - 寒色は味わいマップなどの機能図以外では使わない - `button-more` は文字 `#F8F9F5` × 背景 `#B8902E` のコントラスト比が 2.81:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#8D6E23`、4.53:1）を使う。 - `button-recipe` は文字 `#7C775E` × 背景 `#FEFEFE` のコントラスト比が 4.47:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-muted-accessible`（`#7B765D`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクション見出し（縦書き筆文字） | 手書き・筆 | Yuji Syuku | 700 | 40px | 1.1 | 0.0em | | `headline-md` | カード内の小見出し | ゴシック | Zen Kaku Gothic New | 700 | 17px | 1.5 | 0.05em | | `body-lg` | 縦書きリード文 | ゴシック | Zen Kaku Gothic New | 700 | 16px | 2.0 | 0.15em | | `body-md` | 本文 | ゴシック | Zen Kaku Gothic New | 500 | 14px | 1.9 | 0.05em | | `note` | 注釈・日付 | ゴシック | Zen Kaku Gothic New | 400 | 11px | 1.6 | 0.03em | | `accent` | 見出し上の小さな手書き添え書き・欧文装飾 | 手書き・筆 | Klee One | 600 | 12px | 1.4 | 0.05em | | `label-button` | ボタン文字 | ゴシック | Zen Kaku Gothic New | 700 | 13px | 1.0 | 0.05em | - セクション見出しは朱赤の筆文字で縦書き、かすれ質感を出す - 見出しの上に吹き出し風の小さな添え書きを付ける - リード文は縦書きで行間を広めにとる - 本文は横書きゴシックで短めの段落にする - 擬音語は手書き文字で斜めに散らす - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。カード一覧は SP で 1〜2 列 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 96px、基本単位 8px、カード内 24px（375px 幅換算） - セクションの間に波形の丘の帯を入れる - PC では縦書き見出しを右端、内容を左に置く - 瑞雲やキャラクターを余白に散らして空間を埋める - 情報の塊は白い角丸カードにまとめる - 商品は横一列に並べ、下に仕様表を置く ## Elevation & Depth - 影はほぼ使わず平面的に作る - 白カードは影なしで、地色との差だけで浮かせる - 立体感はイラストを重ねて出す ## Shapes - **角丸**: 小 8px ／ 中 16px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 楕円やいびつな丸（ブロブ形）で写真を切り抜く - **セクション境界**: 朱赤と金茶の重なる丘の曲線。細い線を重ねた波模様付き - 直線の区切りは使わない - ボタンとタグはピル型 - カードは大きめの角丸 - 吹き出しは瑞雲の形にする ## Components - **縦書き筆文字見出し**（`heading-vertical-brush`）: 朱赤の縦書き筆文字。上に黒い小さな添え書きと吹き出しの線を付ける - **詳しくボタン**（`button-more`）: 金茶のピル型。右に三角矢印 - **白ピルのサブボタン**（`button-recipe`）: 白地に茶文字と三角矢印の小さなピル - **瑞雲の吹き出し**（`cloud-balloon`）: 金茶の雲形の中にお客様の声を短文で入れる - **白い角丸カード**（`card-white`）: 受賞歴・沿革・味わいマップなどを載せる大きな白い面 - **番号の丸バッジ**（`badge-number`）: 朱赤の丸に白文字で小ラベルと数字。写真の角に重ねる - **ブロブ形の写真**（`photo-blob`）: 楕円形の写真の下に日付と見出しを置くニュースやレシピのカード - **商品仕様表**（`spec-table`）: 左端の見出しセルはピル型の金茶ラベル。行は細い罫で区切る ## Do's and Don'ts **Do** - 地は暖かいクリーム、強調は朱赤だけに絞る - セクションは波形の丘と瑞雲でつなぐ - 縁起物や福の神風のキャラを余白に散らす - 写真は楕円やブロブ形で柔らかく切り抜く - 紙吹雪の小さな色片でお祝い感を出す **Don't** - 青や黒の大きな面を使わない - 直線の区切りやシャープな角を多用しない - 見出しを細い明朝やゴシックにしない - 強い影やグラデーションのボタンを使わない - 写真を四角いまま並べない - 飲酒の注意書きを省かない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（縁起の良い世界観を一目で伝える）: 宝船と福の神のイラスト、赤い筆文字のコピー、手前に朱赤の丘。キャンペーンへのバナーを右に置く 2. **ブランドの想い**（笑顔の食卓という価値を伝える）: 商品パッケージを並べて擬音を手書きで散らし、下に縦書きのリード文 3. **おいしさの秘密**（製法の特長を示す）: 番号バッジ付きのブロブ写真と縦書き見出し、短い説明 4. **受賞歴**（信頼を補強する）: 欧文の手書き見出しと紙吹雪、白カードに受賞ロゴと説明を並べる 5. **お客様の声**（共感を得る）: 瑞雲の吹き出しに短い声を4つ散らす 6. **ブランドの歴史**（長く愛されてきたことを示す）: 縦書きリード、新パッケージの紹介、白カード内に年代順のパッケージを並べる 7. **キャンペーン**（参加を促す）: 横長の告知バナー。下に赤帯で期間を示す 8. **お知らせ**（最新情報を伝える）: ブロブ写真と日付、タイトルを2列に並べる 9. **味わいマップ**（味の位置づけを示す）: 白カードに図と飲み方アイコン、詳しくボタン 10. **おつまみレシピ**（飲むシーンを広げる）: 丸く切り抜いた料理写真、料理名、説明、白ピルのボタンを2列に並べる 11. **ラインナップ**（商品と仕様を比べやすくする）: パッケージを大きさ順に横に並べ、下に仕様表とタグを置く 12. **フッター**（注意書きと企業サイトへの導線）: かすれ質感の朱赤の丘の上に白文字で注意書き、枠線のピル型リンク ## Imagery - 版画風のかすれがある、和の縁起物イラスト（福の神、宝船、瑞雲） - 細い平行線を重ねた半円の波模様 - 商品パッケージは切り抜いて白背景なしで並べる - 料理写真は明るく寄りで撮り、丸く切り抜く - 金・赤・白の小さな紙吹雪を散らす - キャラの顔イラストを余白に添えて話しかける演出にする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は縦書き見出しを右、内容を左に置く2分割。SP では見出しを上、内容を下に積む - SP では2列のカードを1列、または小さな2列にする - 波形の丘は SP でも画面幅いっぱいに広げ、高さを抑える - ラインナップは SP で横スクロールにする - 縦書きリードは SP でも縦書きのまま行数を減らす ## 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-7a2cd2e3`（元 LP の URL から採番） - **元 LP**: https://www.ozeki.co.jp/nomonomo/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（6/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。