DESIGN.md — レモン黄×焼き橙の昭和レトロ酒類 LP（Retro Showa Illustration Highball LP）

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

Overview

• 業種: 酒類 ／ 雰囲気: レトロ、ポップ・元気、親しみ・手作り感
• キーワード: 昭和レトロ・黒線イラスト・黄色地・焼き橙・手描きの星・太縁カード
• 地の質感: 黄色は平らな単色。橙のセクションには紙のようなざらつきを薄く入れる。カードには細い横罫の地紋を敷く。
• 形: 黒い太線で囲み、右下にずらした影を落とす。アーチ窓のフレーム、リボン形の見出し帯、ピル型ボタンを使う。
• 温度感: 暖色寄り。明るく陽気で、懐かしさのある温度感。

Colors

• 地は黄色の単色にする。ニュース・動画・フッターだけを焼き橙の帯セクションにして、リズムをつくる。
• 線・影・見出しは黒に統一する。ピュアブラックは使わず、少し柔らかい黒にする。
• カード内の見出しは橙文字、本文は黒系にする。
• 主 CTA だけを黄緑から緑へのグラデーションにして目立たせる。サブボタンは焼き橙の単色にする。
• 赤はリボン見出しなど、一点の装飾だけに使う。
• 橙地の上の見出しは白にし、左右にスラッシュの飾りを添える。
• button-primary は文字 #FFFFFF × 背景 #3FA535 のコントラスト比が 3.16:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#33862B、4.58:1）を使う。
• button-secondary は文字 #FFFFFF × 背景 #D26C33 のコントラスト比が 3.54:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#B95C29、4.54:1）を使う。

Typography

• 大見出しは極太のディスプレイ書体にし、カタカナを大きく見せる。
• 小さな前置きの見出しは、左右を「＼ ／」で挟む。
• カード見出しは橙色で、下に細い区切り線を引く。
• 本文は 14px 前後で、行間を広くとって読みやすくする。
• 見出しは中央揃え、本文は左揃えにする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は 2×2 のグリッドにする。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• カードは少し傾けて並べ、手貼り感を出す。
• カードの角や縁にイラスト・写真をはみ出させて重ねる。
• 背景に星や丸を散らす。
• ニュースは白い大きな枠にまとめ、写真・日付・タイトル・本文の順で縦に並べる。
• 帯セクションは全幅にし、上下の余白を広くとる。

Elevation & Depth

• カード・ボタンには、ぼかさない影を右下へ 4〜6px ずらして落とす（黒か茶色）。
• ドロップシャドウのぼかしは使わない。
• 商品写真の背後に放射状の集中線を描く。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 32px。ボタンはピル型。
• 写真の切り抜き: 写真は四角、または黒縁つきの円に切り抜く。FV のイラストは上が半円のアーチ窓に収める。
• セクション境界: 境界は直線で、黄色と橙の帯を直に切り替える。
• 枠線は黒の 2〜3px にする。
• カードの四隅に小さな星の飾りを置く。
• 見出しにはリボン形の帯を使う。
• 日付は四角い橙のラベルにする。

Components

• 主 CTA ボタン（button-primary）: 緑グラデーションのピル型ボタン。黒い太縁と影をつけ、右端に丸い再生矢印アイコンを置く。
• 外部リンクボタン（button-secondary）: 焼き橙のピル型ボタン。黒縁と影をつけ、白文字＋矢印アイコンにする。
• 動画切替ボタン（button-chip）: 黄色のピル型ボタンを 2 つ横に並べる。黒縁・黒文字で 2 行。
• リボン見出し（ribbon-heading）: 赤いリボン帯に白のレトロ文字を載せ、カードの上端に重ねる。
• 罫線カード（lined-card）: 横罫入りのクリーム地カード。黒縁と影をつけ、四隅に星を置く。少し傾け、写真をはみ出させる。
• ニュース枠（news-frame）: 角丸の大きな白枠に黒線を二重に引く。日付ラベルとテキストリンクを入れる。
• スラッシュ見出し（slash-heading）: 短い見出しの左右に斜線を添える。
• 日付ラベル（date-label）: 橙の四角い背景に白い数字を載せる。

Do's and Don'ts

Do - 黒い太線と、ぼかさない影で輪郭をつくる。 - 黄色地に手描きの星や丸を散らす。 - 昭和レトロ調の人物イラストを主役にする。 - カードは少し傾けて、手作り感を出す。 - 黄色と橙の帯を交互に置いて、リズムをつくる。 - 飲酒の注意書きはフッターに必ず入れる。

Don't - 寒色のグラデーションやガラス風の表現は使わない。 - ぼかしの大きいソフトシャドウは使わない。 - 細身の明朝で全体を上品に寄せない。 - 主 CTA 以外に緑を使わない。 - 余白を詰めすぎて、カードを密集させない。

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ファーストビュー（世界観とブランドの印象を伝える）: 黄色地にアーチ窓のフレームを置き、人物イラストと極太コピーを入れる。周りに星を散らす。
2. 新商品紹介（商品を告知して購入へ誘導する）: スラッシュ見出し＋極太の商品名。集中線の中央に商品写真を置き、緑の CTA を続ける。
3. SNS 誘導（公式アカウントへの回遊を促す）: スラッシュ見出しの下に、投稿写真を 2×2 のグリッドで並べる。
4. ニュース（最新の話題を伝える）: 橙の帯に白いニュース枠を置き、リボン見出し・写真・日付・本文・リンクを入れる。
5. ブランドの歴史（こだわりと由来を伝える）: 人物イラスト付きの大見出しの下に、罫線カードを 4 枚傾けて並べる。
6. ペアリング提案（合う料理を見せる）: 橙の強調文字のあと、料理写真を 2×2 で並べる。
7. シーン提案（イベントでの楽しみ方を示す）: 白カードに円形の写真をはみ出させ、大見出しと短い本文を添える。
8. 動画（広告動画を見せる）: 橙の帯に埋め込み動画を 2 本置く。間に切替用のピル型ボタンを入れる。
9. イラストレーター紹介（作り手を紹介する）: イラストと吹き出しを並べ、本文と橙のボタンを続ける。
10. フッター（SNS と注意事項を載せる）: 濃い橙の地に、白の英字見出し・アイコン・注意文・コピーライトを置く。

Imagery

• 人物は黒の太線で描き、昭和の漫画風にする。塗りは橙・青・肌色のフラットな色。
• 背景は夜景のボケ写真を合成し、イラストと実写を混ぜる。
• 料理・商品の写真は暖色で明るく撮り、四角か円に切り抜く。
• 装飾は白の手描きの星、黄色い輪、集中線。
• 吹き出しは黒縁の手描き風にする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC でも本文は約 380px 幅の 1 カラムのまま、中央に置く。
• PC の左右の余白は黄色地にし、星を散らす。
• PC では左側にナビボタン（橙のピル）と SNS アイコンを固定する。
• 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 行書くと起動時に読み込まれる。