DESIGN.md — 生成り地×紺朱翠の筆描き和モダンビールLP（Seasonal Brush-Hand Beer Lineup LP）

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

Overview

• 業種: 酒類 ／ 雰囲気: 和風、上品・高級、親しみ・手作り感、ナチュラル
• キーワード: 生成り地・明朝大見出し・縦書きコピー・筆描きの手・商品別3色・四季の写真
• 地の質感: 平らな生成りの面に、かすれた筆と版画風のタッチを重ねる
• 形: 角はほぼ直角。四角い写真と四角いラベル帯が基本
• 温度感: 温かみのある中間色の地に、深い紺で引き締める

Colors

• 地は生成りと白を交互に使い、セクションの切り替えをはっきりさせる
• 見出しと本文は紺で統一し、黒は使わない
• 商品ごとに紺・朱・青緑を割り当て、ラベル・矢印・本文の色をその色にそろえる
• 金は商品とメダルだけに使い、UIには使わない
• 筆描きの装飾は商品色と同じ色で描く
• award-medals は文字 #5AB3BA × 背景 #FAF7F2 のコントラスト比が 2.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#367C82、4.5:1）を使う。

Typography

• 大見出しは明朝で、字間を広めに取る
• リード文は太めの小さなゴシックで、中央揃えにする
• 商品紹介では、商品名とキャッチを縦書きにして缶の左に置く
• 締めのメッセージは明朝の縦書きで、右から左へ読ませる
• ラベル帯は白抜きの太ゴシックにする
• 書体は画像からの推定で、フォント名は近い印象の 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

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

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