DESIGN.md — 黄×水色の手描き線画 贈答ビール LP（Hand-drawn Yellow and Blue Wedding Gift Beer LP）

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

Overview

• 業種: 酒類 ／ 雰囲気: 親しみ・手作り感、シンプル・ミニマル、やさしい・柔らかい、情報量多め・訴求型
• キーワード: 手描き線画・黄と水色の差し色・二重線の額縁・斜めストライプ帯・筆記体の英字・アンケートグラフ
• 地の質感: 白い紙に、ペン線画とマーカー塗りを重ねたようなフラットな質感
• 形: 角のある細い黒枠の箱と、円形のアイコン枠。角丸はほとんど使わない
• 温度感: 明るくニュートラル。黄色で暖かさ、水色で爽やかさを出す

Colors

• 地は白で統一し、色面は帯とグラフにだけ使う
• 章ごとに黄か水色を割り当て、番号・ストライプ帯・イラストの塗りをその色でそろえる
• グラフは最大の項目だけ黄色にし、ほかは水色にする
• 線と文字は黒に近い濃いグレー。枠は黒の細線にする
• 主 CTA だけオレンジのグラデーションにして目立たせる
• 濃紺はフッターと共通のボタンだけに使う
• button-primary は文字 #FFFFFF × 背景 #FEC23B のコントラスト比が 1.62:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#9D6D01、4.54:1）を使う。

Typography

• 英字は筆記体の飾り文字と太い縦長書体の 2 種類を組み合わせる
• 和文はゴシック体の 1 書体だけにし、太さで強弱をつける
• 会話文はかぎ括弧付きで、左揃えの 1.8 行間にする
• 見出しボックスの文字は中央揃えにする
• 筆記体の英字の下に、黄色や水色のかすれたマーカー線を敷く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。グラフはラベルと棒の 2 列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 章は黒の二重線の額縁カードで囲み、中にイラストと商品を収める
• 会話のストライプ帯は額縁からはみ出させ、画面幅いっぱいに敷く
• セクションの区切りに、左右に黒い矢羽根が付いたリボン見出しを置く
• グラフは縦の基準線から右へ棒を伸ばし、数値と%を併記する
• コメントカードは左端に色付きストライプの縦帯を付けた黒枠の箱にする

Elevation & Depth

• 基本はフラットで影を付けない
• CTA ボタンにだけ、下方向に薄い影を付けて立体感を出す
• 商品写真には自然な落ち影を付ける

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物イラストは円形の黒枠で切り抜く。商品は背景を抜いた切り抜き写真
• セクション境界: 直線。区切りは斜めストライプ帯とリボン見出しで出す
• 枠は角丸なしか 4px までの黒の細線
• 主 CTA は角丸 12px の大きな横長ボタン
• 共通ボタン（フッター周り）はピル型

Components

• 二重線の額縁カード（frame-card）: 黒の二重細線で囲み、章番号・英字見出し・イラスト・商品を収める
• 章番号（chapter-number）: 黄か水色の太い番号を置き、その横に小さな筆記体と英字見出しを並べる
• ストライプの会話帯（stripe-dialogue）: 斜めストライプの帯の上に、円形の人物アイコンとかぎ括弧付きの会話文を並べる
• リボン見出し（ribbon-heading）: 左右に黒い矢羽根を付け、中央に太字の一文を置く
• 設問ボックス（question-box）: 黒い細枠の箱に、中央揃えの太字で設問と注記を入れる
• 横棒グラフ（bar-chart）: 左に項目名、右に棒と数値を置く。1 位の棒だけ黄色
• コメントカード（comment-card）: 黒枠の箱で、左端にストライプの縦帯を付け、見出しと本文を中央揃えにする
• 主 CTA（button-primary）: オレンジのグラデーションに白の太字を置き、薄い影を付けた大きなボタン
• 商品キャプション（product-caption）: 左に縦線を引き、商品名を太字、内容を小さな文字で添える

Do's and Don'ts

Do - イラストは黒のペン線画に、黄と水色の部分塗りだけを入れる - 章ごとに黄と水色を交互に割り当てる - 筆記体の英字を大きく置き、余白を広めに取る - データは横棒グラフにして、出典と母数を小さな文字で添える - 会話文で贈るシーンを具体的に見せる

Don't - 写真の背景や色付きの面をページ全体に敷かない - 黄・水色・オレンジ・濃紺以外の色を増やさない - 線画を太いベタ塗りやリアルなイラストに置き換えない - 枠に大きな角丸や強い影を付けない - 明朝体を混ぜない

Page Structure

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

1. ファーストビュー（テーマとギフト提案を伝える）: 大きな筆記体の英字に黄色のマーカーを敷き、太字のタイトル、乾杯する人物の線画、商品の円形アイコンを置く
2. リード文（ギフトを提案する背景を説明する）: 白地に 3 行ほどの本文を左揃えで置く
3. シーン提案 01（1 つ目の贈る相手への提案）: 額縁カードに黄色の番号を置き、黄色のストライプ会話帯、線画、筆記体の見出し、商品写真とキャプションを入れる
4. シーン提案 02（2 つ目の贈る相手への提案）: 同じ型で水色の番号とストライプ帯にし、パーティーの線画と商品を入れる
5. 別用途の商品紹介（記念日向けの商品を提案する）: リボン見出し、大きな筆記体の英字、商品写真、キャプションの順に置く
6. アンケート結果（データで選ぶ根拠を示す）: リボン見出しのあと、設問ボックスと横棒グラフを 2 組並べる
7. フリー回答（実際の声で共感を得る）: 見出しボックスのあと、ストライプの縦帯付きコメントカードを 3 枚縦に並べる
8. CTA（通販サイトへ誘導する）: オレンジのグラデーションの大きなボタンを中央に置く
9. フッター（サイトのナビゲーションと注意表記）: 2 列のリンク一覧、淡い水色の SNS ブロック、濃紺の帯に白文字の注意表記を置く

Imagery

• 人物は細いペン線で描き、髪や服の一部を黄か水色でマーカー塗りする
• 塗りは線からわざと少しずらし、手描きらしさを出す
• 人物アイコンは円形の黒枠に入れる
• 商品は白背景に切り抜いた写真にし、落ち影を付ける
• 筆記体の英字の下に、かすれたマーカーの帯を敷く
• 集中線などの手描き記号を添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像はないため、以下は推奨。
• PC では額縁カードを最大 960px 幅で中央に置き、会話帯は全幅のままにする
• PC の会話帯は、左右の人物アイコンと中央の会話文の 3 列にする
• グラフは項目ラベルの列を広げ、棒の最大幅を 600px ほどにする
• コメントカードは PC で 3 列横並びにしてもよい

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