DESIGN.md — 紺×クリーム×金茶のビールブランド LP（Navy and Cream Classic Beer Brand LP）

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

Overview

• 業種: 酒類 ／ 雰囲気: やさしい・柔らかい、信頼・誠実、レトロ、上品・高級
• キーワード: クリーム地・深い紺・金茶アクセント・白い角丸パネル・明朝本文・字間の広い見出し
• 地の質感: 平塗り中心のフラットな面。写真は暖色の電球光で、ノスタルジックなぬくもりがある
• 形: 大きな角丸の白パネル、紺帯の下端だけ波形、細い金茶の枠線ボタン
• 温度感: 暖かい（クリームと金茶）を紺で引き締める

Colors

• ページの地はクリーム。各セクションは白い角丸パネルに入れて浮かせる
• 大見出しと本文は紺。小見出し・サブタイトルは金茶にして二色の階層をつける
• 紺のベタ面は、ファーストビュー直下の帯と商品ボタンだけに使う
• 金茶は細い枠線ボタン・ピル型ボタン・ナビ枠に使う
• 黄色は外部リンクバナー1か所だけに使う
• 原色の赤や緑は使わない。SNSアイコンは例外
• button-outline は文字 #A18B62 × 背景 #FFFFFF のコントラスト比が 3.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#877451、4.52:1）を使う。
• photo-card-vertical は文字 #FCFDF1 × 背景 #A18B62 のコントラスト比が 3.2:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#877451、4.59:1）を使う。
• intro-banner は文字 #A18B62 × 背景 #FFF6D9 のコントラスト比が 3.04:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#877451、4.51:1）を使う。

Typography

• 見出しは丸ゴシックで、字間を0.15em以上あけて柔らかく見せる
• 本文は太めの明朝を紺で組み、中央揃えの短い改行で読ませる
• 人名の敬称は小さく添える
• 写真の上のコピーは、金茶の地に白文字の縦書き帯にする
• 英字見出しは細めのサンセリフを金茶で入れる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カルーセルは左右に次のカードを少し見せる
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 48px、基本単位 8px、カード内 24px（375px 幅換算）
• 白パネルは画面幅いっぱいに置き、上下の角を大きく丸める
• パネルとパネルの間にクリーム地を約40px見せる
• 見出しは中央揃え。見出しの上下に広い余白を取る
• 商品は画像→商品名→容量→説明→ボタンの順に縦に積む
• ナビは金茶枠のボタンを3列×2段で並べる

Elevation & Depth

• 影はほぼ使わず、地色の差で階層を作る
• フッターのピル型ボタンだけ、薄い影で浮かせる

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 28px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物写真は四角。コンテンツカードは大きな角丸で縦長に切り抜く
• セクション境界: 紺帯の下端だけゆるい波形。それ以外は白パネルの角丸で区切る
• 枠線ボタンは角丸なしか小さい角丸で、線幅は細い金茶にする
• プロジェクト導線のボタンは金茶のピル型にする
• カルーセル矢印は金茶の円形ボタンにする

Components

• 商品情報ボタン（button-product）: 紺の横長帯。左端に商品画像をはみ出させ、白文字と▶を置く
• 金茶枠ボタン（button-outline）: 白地に細い金茶の枠線と金茶の文字。右端に矢印を付ける
• ページ内ナビ（nav-grid）: クリーム地に金茶の太枠ボタンを3列×2段で並べる。文字は紺
• 白角丸パネル（panel-section）: クリーム地の上に置く、大角丸のセクション容器
• 代表カードカルーセル（carousel-card）: 紺帯の上に白カードを置き、紺の見出し・金茶の人名・バナー画像・枠ボタンを並べる。ドットのインジケーター付き
• 縦書きコピー写真カード（photo-card-vertical）: 縦長の角丸写真。右上に金茶地の縦書き白文字、下部に金茶ボタンを重ねる
• プロジェクト紹介枠（intro-banner）: ベージュ地に金茶の角丸枠。左に地図イラスト、右に見出し・本文・ピル型ボタンを置く
• 外部リンクバナー（external-banner）: 黄色地のバナー。黒文字と右端の矢印で外部サイトへ誘導する

Do's and Don'ts

Do - クリーム地に白い角丸パネルを交互に見せ、柔らかい区切りにする - 見出しは紺、補助の見出しは金茶の二色で統一する - 本文は明朝で行間を広く取り、クラシックな品を出す - 商品は白地に切り抜き画像で、サイズ違いを並べて見せる - 飲酒に関する注意表記をフッターに入れる

Don't - 鮮やかな原色や蛍光色を広い面に使わない - 金茶をベタ塗りの大面積に使わない - 強い影やグラデーションのボタンにしない - 本文を細いゴシックで組まない - パネルの角を直角にしない

Page Structure

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

1. ファーストビュー（ブランドと全国展開の世界観を一目で伝える）: 中央に商品と紺の縦帯ロゴを置き、左右に乾杯する人物を地域タグ付きで配置。暖色のクリーム地
2. プロジェクト紹介（地域代表の企画への導線）: 紺帯に白い丸ゴシックの見出しと説明を置き、白カードのカルーセルを入れる。下端は波形
3. コンセプト導線とナビ（企画の詳細とページ内移動）: 金茶枠のイラストバナーの下に、3列×2段の枠ボタンナビを置く
4. コンテンツ紹介（記事コンテンツへの誘導）: 縦長の角丸写真カードを横スクロールで並べ、縦書きコピーと金茶ボタンを重ねる
5. ムービー（CM動画の紹介）: 白パネルに紺の見出しと金茶の英字小見出しを置き、動画サムネのカルーセルとキャプションを並べる
6. キャスト（出演者の紹介）: 金茶の人名、正方形に近い写真、明朝のプロフィール文を縦に積む
7. ヒストリー（ブランドの歴史で信頼を伝える）: 中央揃えの明朝文と古い広告画像。最後に枠ボタンで続きを開く
8. キャンペーン（キャンペーン情報の告知）: クリーム地に見出しと一行の告知だけを置く
9. ラインアップ（商品の紹介と詳細への導線）: 商品ごとに切り抜き画像・明朝の商品名・容量・説明・紺の帯ボタンを並べる
10. インフォメーション（飲める店舗への外部誘導）: クリーム地に黄色のバナーを1つ置く
11. フッター（サイト内リンク・SNS・注意表記）: 白地に2列のリンク一覧、青灰の枠にSNSを入れ、最下部は青帯に白文字

Imagery

• 人物はグラスを掲げる笑顔の乾杯ポーズ。暖かい照明で撮る
• 飲食店の店主などのドキュメンタリー風写真。暗めの暖色トーン
• 商品は白背景の切り抜きで、サイズ違いを階段状に並べる
• 日本地図や屋台は、ベージュ単色の線画イラストで描く
• 歴史パートには、当時の新聞広告風のモノクロ寄りの画像を使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はクリーム地の中央に幅約60%の白パネルを置き、周囲の余白を広く取る
• PC のキャストは写真を左、プロフィールを右にした2カラムにする
• PC のコンテンツカードは2枚を横に並べる
• PC のナビは白帯の上に1行のテキストリンクで並べる
• PC のフッターは、リンクとSNS枠を左右に並べる

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 行書くと起動時に読み込まれる。