DESIGN.md — 全面オレンジ×手書き風文字のビールブランド LP（Vivid Orange Brand Story Beer LP）

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

Overview

• 業種: 酒類 ／ 雰囲気: ポップ・元気、力強い・インパクト、親しみ・手作り感
• キーワード: 全面オレンジ・手書き風の白文字・アーチ状の金色英字見出し・大きな人物写真・ブランドストーリー・動画サムネイル
• 地の質感: 平塗りのオレンジ地に、水滴付きの缶や泡の立つグラスなど艶のある写真を重ねる。セクション境目には薄い斜線を入れる程度。
• 形: 写真は角丸の小さい長方形か全幅。ボタンはピル型の白。カードは白で角丸中くらい。
• 温度感: 暖色一色の高彩度で明るく陽気。

Colors

• 地色はほぼ全面同じオレンジ一色で通し、セクション毎の色替えはしない。
• オレンジ地の文字は白、英字の大見出しだけクリーム金。
• 白はカード・ピル型ボタン・動画再生ボタンに限定して使う。
• 白カード内の見出しはオレンジ、本文はこげ茶グレー。
• スペック表は地色より少し明るいオレンジの板で差をつける。
• 黄色・ピンク・水色はイラストや写真内のみで、UIには使わない。
• page は文字 #5A4A40 × 背景 #FF5100 のコントラスト比が 2.58:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら background-accessible（#FFAA82、4.55:1）を使う。
• button-pill は文字 #CB6B3F × 背景 #FDFDFD のコントラスト比が 3.61:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら on-cta-accessible（#B55B31、4.58:1）を使う。
• white-card は文字 #CA5F2F × 背景 #FEFEFE のコントラスト比が 4.01:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-accessible（#BC582C、4.56:1）を使う。
• step-card は文字 #FEFFFA × 背景 #FF5100 のコントラスト比が 3.25:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D44300、4.54:1）を使う。
• spec-panel は文字 #FEFFFA × 背景 #FF6118 のコントラスト比が 3.0:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら background-alt-accessible（#D54300、4.51:1）を使う。
• badge-circle は文字 #FEFFFA × 背景 #FF5100 のコントラスト比が 3.25:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D44300、4.54:1）を使う。

Typography

• 情緒的なコピーと本文は手書き風書体で、字間を広くとる。
• 機能的な情報（寄付・手順・スペック）はゴシックに切り替える。
• 英字の章見出しはアーチ状に曲げて、写真の上端にかぶせる。
• 本文は中央揃えで、短く改行して詩のように並べる。
• 注釈は※付きで小さく、白で入れる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、中央揃え
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• 写真は左右6%の余白で幅いっぱい近くに置く。
• 人物の顔写真やホップ写真は全幅で大きく見せる。
• 章は「アーチ英字→写真→和文見出し→本文」の順で繰り返す。
• 動画サムネイルは縦に並べ、下にタイトルを中央で置く。
• 寄付手順は横スクロールのカード列にする。

Elevation & Depth

• 基本はフラットで影を使わない。
• 商品缶やグラスの写真にだけ、オレンジ地に落ちる濃い影をつける。
• 白カードは影なしで、面の色差だけで浮かせる。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 長方形で角は小さく丸める。人物は切り抜きや下端フェードで地色になじませる。
• セクション境界: 直線のまま地色を続け、薄い白の斜線で区切りを暗示する。
• ボタンは白のピル型で、右端に丸いオレンジのアイコンを置く。
• 動画再生ボタンは白丸にオレンジの三角。
• 囲み枠は細い白線の角丸長方形。
• 吹き出しは白線の角丸枠に小さな三角をつける。

Components

• 白ピル型ボタン（button-pill）: 白地にオレンジ太字。右端にオレンジ丸の外部リンクアイコン。幅は画面の約4割。
• アーチ英字見出し（arch-heading）: クリーム金の大文字英字を円弧状に並べ、下の写真上端に少し重ねる。
• 白い説明カード（white-card）: オレンジ見出し、中央に商品画像、下に太字の説明と小さな補足文。
• 動画サムネイル（video-thumb）: 16:9の写真に右下の白丸再生ボタン、下に白の手書き風タイトル。
• 手順カード（step-card）: 白丸番号＋見出し、細い白線枠の中に画面キャプチャ、下に説明。カード間に「>」。
• 白線囲み枠（outline-frame）: 細い白線の角丸枠で、キービジュアルやQR導線をまとめる。
• 商品情報パネル（spec-panel）: 明るめオレンジの板に太字見出しと白線の区切り、ラベルと値の2列表。
• 円形エンブレム（badge-circle）: オレンジ丸に白線の円と円周上の英字。写真の角にかぶせる。

Do's and Don'ts

Do - 地色はオレンジ一色で最後まで通す。 - 情緒的なコピーは白の手書き風書体で中央揃え・広めの行間で入れる。 - 章の頭はアーチ状の金色英字見出しで始める。 - 商品写真は大きく傾け、濃い落ち影をつける。 - UIの白はボタン・カード・再生ボタンにだけ使う。

Don't - セクション毎に別の背景色に変えない。 - 寒色やダークの面をUIに使わない。 - 本文を左揃えでぎっしり詰めない。 - ボタンをオレンジ塗りの四角にしない。 - 影やグラデーションをカードにつけすぎない。

Page Structure

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

1. ファーストビュー（ブランドと出演者で一目で惹きつける）: アーチ状のロゴ英字、中央に缶、前に笑顔の人物を並べ、下に金帯の一言コピー。
2. 動画カルーセル（CMや配信動画へ誘導）: 角丸サムネイルの横スライダー。左右に白丸矢印、下にドット。
3. ブランドメッセージ（新商品の誕生と想いを伝える）: 大きな手書き風コピーとイラスト、その後に中央揃えの詩的な本文、傾けた缶の写真。
4. 出演者メッセージ（人物の言葉で共感をつくる）: 顔のアップを下端フェードで地色になじませ、下に中央揃えの語り、手書きサイン、動画ボタン。
5. 製法ストーリー（原料と製法のこだわりを示す）: グラス写真にアーチ英字を重ね、全幅の原料写真、円形エンブレム、写真のずらし配置。
6. 特長ポイント（4つの特長を順に説明）: 番号付きアーチ英字→写真→手書き見出し→短い本文を4回繰り返す。
7. 社会貢献活動（参加型の取り組みを紹介）: 白線枠のキービジュアル、白カード2枚で方法を説明、白ピルボタン。
8. 参加手順（参加の流れを示す）: 番号付き手順カードを横スクロールで並べ、下にCTAボタン。
9. ドキュメンタリー・インタビュー（関連コンテンツへの誘導）: 角丸写真に縦書きコピー、作品タイトルを大きな手書き風で、詳細ボタン。
10. テーマソング（音楽タイアップを紹介）: アーチ英字見出し、全幅の写真、白太字の曲名と短い説明。
11. TVCM一覧（CM動画をまとめて見せる）: 16:9サムネイルを縦に並べ、それぞれ再生ボタンと手書き風タイトル。
12. 商品情報（仕様と栄養成分を示す）: 明るめオレンジのパネル3枚に表形式で記載、容量パネルに缶画像。
13. クロージングビジュアル（余韻を残して締める）: グラスを掲げる人物の笑顔と手書きの一言、イラストを添える。

Imagery

• 人物は白シャツで、オレンジ背景の前で自然な笑顔。明るい日中光。
• 商品缶は水滴付きで斜めに置き、上から光を当てて濃い影を落とす。
• グラスは泡が盛り上がり、背面から光が透ける黄金色。
• 原料畑や工場は青空・夕日の暖かい色調の実写。
• 和柄調の伝統的な霊獣を黄・黒・水色・ピンクの線画イラストで描き、筆記体の英字を添える。
• 人物写真は下端を地色にフェードさせて背景に溶け込ませる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅を約1000pxにし、地色オレンジは全幅のまま。
• メッセージと写真は左右2カラムで交互に配置する。
• 特長ポイントは写真とテキストを左右に並べ、左右を交互に入れ替える。
• 白カードや動画サムネイルは2カラム、手順カードは4つを横一列に並べる。
• 商品情報パネルはPCで2列のグリッドにする。

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