--- version: alpha name: Crimson and Gold Art Collaboration Beer LP description: 山吹色と深紅の大きな面を、ピンク・深緑・黒の斜めの帯で切り替える特設LP。巨大な欧文セリフの英字見出しと縦書きの和文ラベルを組み合わせ、明朝体で格調を出している。金の二重額縁で商品を飾る、アート展示のような構成。 colors: primary: '#C62449' background: '#FCD475' secondary: '#C8901C' accent-1: '#E57693' accent-2: '#30664E' accent-3: '#318D9E' dark-section: '#0C0200' surface: '#FEFEFD' text: '#0F0401' on-dark: '#FFFFFF' marker: '#C62449' line: '#D79C06' tint-1: '#F5DEA0' typography: display: fontFamily: Playfair Display fontSize: 72px fontWeight: 400 lineHeight: 1.0 letterSpacing: 0.02em headline-lg: fontFamily: Shippori Mincho fontSize: 26px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.08em headline-md: fontFamily: Shippori Mincho fontSize: 19px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0.05em headline-sm: fontFamily: Noto Serif JP fontSize: 13px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.2em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 2.1 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.5 label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 0px md: 0px lg: 0px full: 999px spacing: unit: 8px card: 20px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' section-title-en: textColor: '{colors.secondary}' typography: '{typography.display}' height: 140px date-label-stack: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 100px gold-frame-card: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.note}' height: 400px diagonal-band: backgroundColor: '{colors.accent-2}' height: 120px profile-block: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 520px button-primary: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 44px step-box: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-md}' height: 160px prize-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 260px --- # DESIGN.md — 深紅×山吹の斜め帯アートコラボ酒類LP（Crimson and Gold Art Collaboration Beer LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 酒類 ／ **雰囲気**: 上品・高級、力強い・インパクト、レトロ、和風 - **キーワード**: 深紅と山吹・斜めの帯で区切る・巨大な欧文セリフ・金の額縁・美人画・展示会風 - **地の質感**: ベタ塗りの平面。グラデーションは額縁の内側だけに控えめに使う - **形**: 角丸なしの四角形と斜めの帯。額縁は二重線 - **温度感**: 暖色中心で華やか。差し色に深緑と青緑を使う ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#C62449` | 商品セクションの深紅の地 | 27% | 画素の実測 | | `background` | `#FCD475` | 紹介・キャンペーンの山吹色の地 | 33% | 画素の実測 | | `secondary` | `#C8901C` | 英字見出しの金茶 | 2% | 推定 | | `accent-1` | `#E57693` | 斜め帯のピンク | 1% | 画素の実測 | | `accent-2` | `#30664E` | 斜め帯の深緑 | 1% | 画素の実測 | | `accent-3` | `#318D9E` | イベント・グッズの青緑の地（PC） | 5% | 画素の実測 | | `dark-section` | `#0C0200` | 発売日ラベルの黒帯 | 1% | 画素の実測 | | `surface` | `#FEFEFD` | 白い見出しの帯・カード | 2% | 画素の実測 | | `text` | `#0F0401` | 山吹の地の見出し・本文 | 2% | 画素の実測 | | `on-dark` | `#FFFFFF` | 深紅の地の白文字 | 2% | 推定 | | `marker` | `#C62449` | キャンペーン本文の赤い強調文字 | 0% | 画素の主要色に補正 | | `line` | `#D79C06` | 金の額縁の線 | 1% | 画素の実測 | | `tint-1` | `#F5DEA0` | 額縁の内側の淡い山吹色 | 2% | 画素の主要色に補正 | - セクションごとに地の色を替える。山吹→深紅→山吹→青緑の順にし、境目にはピンク・深緑・黒の斜め帯を重ねる - 深紅の地では文字を白にし、山吹の地では焦げ茶にする - 英字の大見出しは、山吹の地では金茶、深紅や青緑の地では白にする - 日付や商品名のラベルは、黒の帯と白の帯を2段に重ねて作る - 強調語だけを深紅の文字にする。マーカーは引かない - 額縁は金の二重線で、内側は淡い山吹色にする ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 英字のセクション大見出し | 欧文セリフ | Playfair Display | 400 | 72px | 1.0 | 0.02em | | `headline-lg` | キャッチ・キャンペーン名 | 明朝 | Shippori Mincho | 700 | 26px | 1.5 | 0.08em | | `headline-md` | ラベル帯の文字・人物名 | 明朝 | Shippori Mincho | 600 | 19px | 1.5 | 0.05em | | `headline-sm` | 英字見出しに添える和文の小見出し（縦書き・下線付き） | 明朝 | Noto Serif JP | 500 | 13px | 1.4 | 0.2em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 2.1 | 0.04em | | `note` | 容量表記・注釈 | ゴシック | Noto Sans JP | 700 | 14px | 1.5 | 0.0em | | `label-button` | 黒いボタンの文字 | ゴシック | Noto Sans JP | 700 | 13px | 1.4 | 0.05em | - 英字の見出しは画面幅いっぱいに大きく置き、はみ出して切れてもよい - 英字見出しのそばに、縦書きの和文ラベルを細い枠や線と組み合わせて添える - 見出しは明朝体、本文はゴシック体で、行間を2倍以上にする - 本文は短い行で改行し、詩を読むようなリズムを作る - 本文は左揃えにする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC は本文と画像の 2 カラム、グッズは 4 カラム - **本文ブロックの幅**: 画面幅の約 86% - **余白**: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算） - セクションの境目には、高さ約120pxの斜め帯の切り替えを入れる - 英字見出しの直下に黒と白の2段ラベル帯を置く - 商品は1点ずつ額縁に入れ、縦に並べる - 画像は少しずらして重ね、コラージュのように見せる - 左右の余白は約25pxにする ## Elevation & Depth - 影は使わず、すべて平面で作る - 立体感は額縁の二重線と画像の重なりで出す ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。 - **写真の切り抜き**: 角丸なしの長方形。一部は重ねてずらす - **セクション境界**: ピンク・深緑・黒の帯を斜めに重ねて切り替える - 角丸は使わない - 額縁は金の太線と細線の二重にする - ボタンは黒い長方形に右向き矢印を付ける ## Components - **英字の大見出し＋縦書き和文ラベル**（`section-title-en`）: 巨大な欧文セリフの英字の横に、縦書きの和文ラベルを細い枠で添える - **2段のラベル帯**（`date-label-stack`）: 上段は黒地に日付、下段は白地に商品名を明朝体で入れる - **金の額縁の商品カード**（`gold-frame-card`）: 金の二重線の枠の中に商品画像と容量表記を入れる - **斜め帯の区切り**（`diagonal-band`）: ピンク・深緑・黒の帯を斜めに重ね、地の色を切り替える - **作家プロフィール**（`profile-block`）: 横長の写真の下に、明朝体の名前と経歴の本文を置く - **黒いボタン**（`button-primary`）: 黒い長方形のボタン。白文字で、右に丸付きの矢印を付ける - **応募ステップの枠**（`step-box`）: 白い枠の上に深紅の見出し帯を付け、明朝体のステップ番号を矢印でつなぐ - **賞品カード**（`prize-card`）: 色違いの四角を重ねた枠に、丸いバッジで賞の記号を入れる ## Do's and Don'ts **Do** - 地の色はセクション単位で大胆に切り替える - 英字見出しは極端に大きく使う - 商品は額縁に入れて、作品のように見せる - 本文はゆったりした行間で短く改行する **Don't** - 角丸やピル型のボタンを使わない - 影やグラデーションを多用しない - 丸ゴシックや手書き風の書体を使わない - 寒色を地の色の主役にしない（青緑はイベントの1区画だけにする） ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（コラボの告知とビジュアルで目を引く）: 山吹の帯にロゴと明朝体のタイトルを置き、その下にイラストを縦に2枚並べる 2. **コラボ紹介**（企画の背景を伝える）: 山吹の地に英字の大見出しを置き、明朝体のキャッチと詩的な本文を続ける。右下に商品を置く 3. **商品情報**（限定商品を見せる）: 斜め帯で深紅に切り替え、2段のラベル帯の下に額縁カードを縦に並べる 4. **歴史の紹介**（ブランドの伝統を伝える）: 深紅の地に白文字の本文を置き、レトロなポスター画像を重ねて配置する 5. **作家プロフィール**（作家の権威を示す）: 制作中の写真と明朝体の名前、経歴の本文で構成する 6. **キャンペーン**（購入を促す）: 斜め帯で山吹に戻す。縦書きの英字見出しを右端に置き、期間ラベルと赤字の強調、賞品カードを並べる 7. **応募方法・規約**（参加の手順を示す）: 白い枠に深紅の見出し帯を付け、ステップと規約の表を入れる 8. **イベント・グッズ**（関連施設とグッズを案内する）: 青緑の地にポスター、グッズのグリッド、黒いボタンを置く ## Imagery - 劇画調で原色の美人画イラストを、全面にベタ塗りの背景で見せる - 商品の缶は切り抜いて額縁の中央に置く - 昭和初期風のレトロな広告ポスターを、少し傾けずにずらして重ねる - 人物の写真は自然光で撮った制作風景を横長で使う - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC のファーストビューは、左にタイトル、右にイラスト2枚を横に並べる - PC の紹介セクションは、英字見出しを縦書きにして左に置き、本文を右に置く - PC の商品カードは2列に並べる - PC のグッズは4列のグリッドにする - 斜め帯は 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-998e77de`（元 LP の URL から採番） - **元 LP**: https://www.sapporobeer.jp/yebisu/product/hirohiko_araki_202502 - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。