DESIGN.md — 深紅×山吹の斜め帯アートコラボ酒類LP（Crimson and Gold Art Collaboration Beer LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

• 業種: 酒類 ／ 雰囲気: 上品・高級、力強い・インパクト、レトロ、和風
• キーワード: 深紅と山吹・斜めの帯で区切る・巨大な欧文セリフ・金の額縁・美人画・展示会風
• 地の質感: ベタ塗りの平面。グラデーションは額縁の内側だけに控えめに使う
• 形: 角丸なしの四角形と斜めの帯。額縁は二重線
• 温度感: 暖色中心で華やか。差し色に深緑と青緑を使う

Colors

• セクションごとに地の色を替える。山吹→深紅→山吹→青緑の順にし、境目にはピンク・深緑・黒の斜め帯を重ねる
• 深紅の地では文字を白にし、山吹の地では焦げ茶にする
• 英字の大見出しは、山吹の地では金茶、深紅や青緑の地では白にする
• 日付や商品名のラベルは、黒の帯と白の帯を2段に重ねて作る
• 強調語だけを深紅の文字にする。マーカーは引かない
• 額縁は金の二重線で、内側は淡い山吹色にする

Typography

• 英字の見出しは画面幅いっぱいに大きく置き、はみ出して切れてもよい
• 英字見出しのそばに、縦書きの和文ラベルを細い枠や線と組み合わせて添える
• 見出しは明朝体、本文はゴシック体で、行間を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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。