--- version: alpha name: Seasonal Brush-Hand Beer Lineup LP description: 生成りと白の地に、紺・朱・青緑の3色を商品ごとに割り当てた酒類のシリーズ紹介LP。明朝の大見出しと縦書きを使い、商品写真には墨の筆で描いた手のイラストを重ねる。全体は和モダンで上品にまとめつつ、手描きの親しみも出している。 colors: primary: '#172353' background: '#FAF7F2' background-alt: '#FFFFFF' cta: '#1B2A64' on-cta: '#EDF7FF' accent-1: '#D8392B' accent-2: '#5AB3BA' secondary: '#1E2F6E' text-muted: '#5F5D5A' accent-3: '#E9BE7C' dark-section: '#2A3A7A' accent-2-accessible: '#367C82' typography: display: fontFamily: Shippori Mincho fontSize: 44px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.1em headline-lg: fontFamily: Shippori Mincho fontSize: 32px fontWeight: 700 lineHeight: 1.7 letterSpacing: 0.12em headline-md: fontFamily: Noto Serif JP fontSize: 56px fontWeight: 700 lineHeight: 1.1 headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 18px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.1em body-md: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 700 lineHeight: 2.2 letterSpacing: 0.05em accent: fontFamily: Shippori Mincho fontSize: 22px fontWeight: 700 lineHeight: 1.8 letterSpacing: 0.15em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 500 lineHeight: 1.7 label-button: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 0px md: 2px lg: 4px full: 999px spacing: unit: 8px card: 12px section: 72px components: page: backgroundColor: '{colors.background}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' label-tag: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 18px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 28px vertical-product-title: textColor: '{colors.primary}' typography: '{typography.headline-md}' height: 300px slider-arrows: textColor: '{colors.primary}' typography: '{typography.note}' height: 250px season-photo: height: 280px lineup-trio: backgroundColor: '{colors.background-alt}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' height: 300px award-medals: backgroundColor: '{colors.background}' textColor: '{colors.accent-2}' typography: '{typography.note}' height: 260px --- # DESIGN.md — 生成り地×紺朱翠の筆描き和モダンビールLP（Seasonal Brush-Hand Beer Lineup LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 酒類 ／ **雰囲気**: 和風、上品・高級、親しみ・手作り感、ナチュラル - **キーワード**: 生成り地・明朝大見出し・縦書きコピー・筆描きの手・商品別3色・四季の写真 - **地の質感**: 平らな生成りの面に、かすれた筆と版画風のタッチを重ねる - **形**: 角はほぼ直角。四角い写真と四角いラベル帯が基本 - **温度感**: 温かみのある中間色の地に、深い紺で引き締める ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#172353` | ブランド紺・見出し文字 | 4% | 画素の実測 | | `background` | `#FAF7F2` | 生成りのセクション地 | 32% | 画素の実測 | | `background-alt` | `#FFFFFF` | 白のセクション地 | 24% | 画素の実測 | | `cta` | `#1B2A64` | サイト誘導ボタン | 0% | 画素の実測 | | `on-cta` | `#EDF7FF` | ボタン文字 | 0% | 画素の実測 | | `accent-1` | `#D8392B` | 朱（ラガー系の商品色） | 3% | 推定 | | `accent-2` | `#5AB3BA` | 青緑（糖質オフ系の商品色） | 4% | 画素の主要色に補正 | | `secondary` | `#1E2F6E` | 紺ラベル帯 | 1% | 推定 | | `text-muted` | `#5F5D5A` | 縦書きサブコピーのグレー | 1% | 画素の実測 | | `accent-3` | `#E9BE7C` | 金（缶・受賞メダル） | 4% | 画素の主要色に補正 | | `dark-section` | `#2A3A7A` | 紺色の筆描き装飾 | 2% | 推定 | | `accent-2-accessible` | `#367C82` | AA を満たす補正値（計算） | | 計算 | - 地は生成りと白を交互に使い、セクションの切り替えをはっきりさせる - 見出しと本文は紺で統一し、黒は使わない - 商品ごとに紺・朱・青緑を割り当て、ラベル・矢印・本文の色をその色にそろえる - 金は商品とメダルだけに使い、UIには使わない - 筆描きの装飾は商品色と同じ色で描く - `award-medals` は文字 `#5AB3BA` × 背景 `#FAF7F2` のコントラスト比が 2.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#367C82`、4.5:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ページ冒頭の大見出し | 明朝 | Shippori Mincho | 700 | 44px | 1.3 | 0.1em | | `headline-lg` | セクション見出し（2〜3行） | 明朝 | Shippori Mincho | 700 | 32px | 1.7 | 0.12em | | `headline-md` | 商品名の縦書き大文字 | 明朝 | Noto Serif JP | 700 | 56px | 1.1 | 0.0em | | `headline-sm` | 縦書きのサブコピー | ゴシック | Zen Kaku Gothic New | 700 | 18px | 1.5 | 0.1em | | `body-md` | 中央揃えのリード文 | ゴシック | Noto Sans JP | 700 | 11px | 2.2 | 0.05em | | `accent` | 締めの縦書き詩文 | 明朝 | Shippori Mincho | 700 | 22px | 1.8 | 0.15em | | `note` | 注釈とスライド番号 | ゴシック | Noto Sans JP | 500 | 9px | 1.7 | 0.0em | | `label-button` | ラベル帯とボタンの文字 | ゴシック | Noto Sans JP | 700 | 12px | 1.4 | 0.05em | - 大見出しは明朝で、字間を広めに取る - リード文は太めの小さなゴシックで、中央揃えにする - 商品紹介では、商品名とキャッチを縦書きにして缶の左に置く - 締めのメッセージは明朝の縦書きで、右から左へ読ませる - ラベル帯は白抜きの太ゴシックにする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。商品紹介だけ、左に縦書き、右に商品の2列構成 - **本文ブロックの幅**: 画面幅の約 94% - **余白**: セクション間 72px、基本単位 8px、カード内 12px（375px 幅換算） - 四季の写真は横幅いっぱい近くに並べ、写真同士の間を約30px空ける - 商品の切り抜き写真は白と生成りの境目に重ねて配置する - こだわりの紹介は左右矢印付きのスライダーにし、右下にページ番号を置く - リード文の上下には広めの余白を取る ## Elevation & Depth - 影は使わない - 奥行きは、商品写真を背景色の境目に重ねることだけで出す ## Shapes - **角丸**: 小 0px ／ 中 2px ／ 大 4px。ボタンは角丸の長方形。 - **写真の切り抜き**: シーン写真は四角く切る。商品は背景を抜いた切り抜きにする - **セクション境界**: 背景色を直線で切り替える。商品画像だけは境目をまたがせる - ラベル帯は角丸なしの四角にする - スライダーの矢印は細い線の山形（〈〉）にする - ボタンは角丸ごく小さめの長方形にし、右端に〉を付ける ## Components - **四角ラベル帯**（`label-tag`）: 小見出し用の帯。2段に重ね、商品色で塗る - **サイト誘導ボタン**（`button-primary`）: 紺地に白文字の長方形ボタン。右端に〉を付ける - **縦書き商品名ブロック**（`vertical-product-title`）: 明朝の大きな2文字と、グレーの縦書きキャッチを並べる - **細線矢印スライダー**（`slider-arrows`）: 左右に商品色の細い〈〉矢印を置き、右下に「n|m」の番号を付ける - **四季の写真と筆描きの手**（`season-photo`）: 季節の風景写真に、商品を持つ墨の筆描きの手を重ねる - **3商品の並び**（`lineup-trio`）: 缶を3つ横に並べ、下に商品色の名称とサブ名を置く - **受賞メダル**（`award-medals`）: 金のメダル画像を2つ並べ、下に説明文を添える ## Do's and Don'ts **Do** - 商品ごとに色を決め、ラベル・矢印・本文をその色でそろえる - 見出しには明朝を使い、字間を広めに取る - 写真には筆描きの手や版画風の線を重ねて、手づくり感を出す - 生成りと白の背景を交互に使う **Don't** - 角丸の大きいピル型ボタンを使わない - ドロップシャドウやグラデーションの背景を使わない - 見出しをゴシックの極太体にしない - 商品色以外の派手な色を足さない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（シリーズの3商品を一度に見せる）: 白地に明朝の大見出しを置き、缶3本と商品色の名称を並べる 2. **四季の提案**（季節ごとの楽しみ方を伝える）: 生成り地に見出しと中央揃えのリードを置き、四季の写真4枚を縦に並べる 3. **共通のこだわり**（原料と製法の価値を伝える）: 白地に3行の明朝見出しと、中央揃えのリードを置く 4. **商品紹介1**（定番品の特長を伝える）: 縦書きの商品名と大きな缶を置き、紺のラベルとスライダーで製法を説明する 5. **商品紹介2・受賞歴**（糖質オフ品の特長と受賞歴を示す）: 青緑で統一し、メダルのスライダー・注釈・誘導ボタンを置く 6. **商品紹介3**（濃い味の商品を食事向けとして訴える）: 朱で統一し、版画風のイラストのスライダーを置く 7. **ブランドメッセージ**（シリーズの思いで締めくくる）: 明朝の縦書き詩文を置き、3色の筆の面の上に缶を並べる 8. **注釈**（掲載に関する注意書き）: 小さなグレー文字で左揃えにする ## Imagery - 季節感がはっきり出る風景写真（桜・花火・紅葉・雪）を、明るくぼかした背景で使う - 商品を握る手を、墨の筆で太くかすれた線でラフに描いて写真に重ねる - 原料（麦）は、温かい色の接写写真か、朱の版画風の線画で描く - 締めでは紺・朱・青緑の筆の面を地面のように敷き、商品を乗せる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では、四季の写真を2×2のグリッドにする - PC の見出しは1〜2行にまとめる - PC の商品紹介は、左に缶、右に縦書きタイトルとスライダーの2カラムにする - PC では本文の幅を約70%に絞り、中央に置く ## 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-72e8efab`（元 LP の URL から採番） - **元 LP**: https://www.suntory.co.jp/beer/kinmugi/new3/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（6/11 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。