DESIGN.md — くすみ緑×サーモンの手描きイラスト酒類 LP（Muted Botanical Illustrated Liquor LP）

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

Overview

• 業種: 酒類 ／ 雰囲気: ナチュラル、親しみ・手作り感、やさしい・柔らかい、かわいい
• キーワード: くすみカラー・手描きイラスト・不定形シェイプ・2味の色分け・ボタニカル・ゆるい
• 地の質感: マットで紙っぽい。グラデーションや光沢はほぼ使わず、ベタ塗りの面を重ねる
• 形: 雲形・星形・ぎざぎざの手描き不定形ブロブ。角丸カードはやや控えめ
• 温度感: 中間〜やや暖かい。くすんだ緑と赤みのある桃色が穏やかに対比する

Colors

• 地は全編グレージュ一色。白背景は使わない
• 味Aは緑、味Bはサーモンで、関連要素をすべて同じ色で揃える
• 声セクションは味ごとに緑面・サーモン面へ切り替える
• 黄色は小さな雲形の装飾と強調下線だけに使う
• データ図は濃いめの緑・サーモンにクリームの帯を組み合わせる
• 文字は黒か白抜きの2色。色付き文字は味の英字ラベルだけ
• score-blob は文字 #FBFEFB × 背景 #CE766A のコントラスト比が 3.22:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#C15344、4.51:1）を使う。

Typography

• セクション見出しは太い英字と小さな和文の2段で中央揃えにする
• 本文は中央揃えの短い改行にし、字間は広めにとる
• シーンのコピーは手書き書体で、縦書きか斜めに置く
• データの数字は太字で大きく、単位は小さくする
• 味のラベルは手書き風の英字で、味の色を付ける
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品紹介だけ 2 カラム
• 本文ブロックの幅: 画面幅の約 77%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• コンテンツは左右に約 11% の余白をとる中央の帯に収める
• イラストのシーンは左右交互にずらして縦に積む
• 色面のセクションも同じ帯幅に揃え、上端を波形にする
• データブロックは左右に分割した色面で比率を表す

Elevation & Depth

• 基本はフラットで影は付けない
• 関連記事カードとTOPボタンにだけ、ごく弱い落ち影を付ける
• 奥行きは、不定形の色面を写真やイラストの背後に重ねて出す

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は雲形・星形・ぎざぎざの不定形マスクで切り抜く
• セクション境界: 手描き風のゆるい波線で境界を作る
• 吹き出しは雲形（緑面）か星形ぎざぎざ（サーモン面）にする
• 装飾には小さな黄色の雲・星形を散らす
• TOPボタンは円形にする
• データ表は角丸なしの四角いブロックにする

Components

• 英字＋和文の見出し（section-heading）: 太い欧文の上段と、小さな和文サブの下段を中央に置く
• 味の紹介カード（flavor-card）: ボトル写真の背後に色ブロブを敷き、手書き英字ラベル、短い説明文、下線付きの『詳しく』リンクを縦に並べる
• シーンイラスト（scene-illust）: 人物イラストを不定形の色面に乗せ、手書きコピーを添える
• 声の吹き出し（voice-bubble）: 不定形に切り抜いた写真に、地色の雲形の吹き出しを重ねる
• 比率ブロック（data-split）: クリームの質問帯の下に、緑とサーモンの面を比率で分割し、アイコンと%を白抜きで載せる
• 平均点バッジ（score-blob）: 雲形と星形のバッジに、平均点を白抜きの大きな数字で入れる
• 円グラフ（pie-chart）: クリームの扇形の円に、大きな%と回答文を入れ、黄色の短い線を添える
• 関連記事カード（related-card）: 角丸の画像の下に明朝のタイトルと説明文を置き、黄緑の地に並べる
• TOPボタン（button-top）: 黄緑の円に黒い線と矢印を描き、弱い影を付ける

Do's and Don'ts

Do - 2種類の商品を色で一貫して区別する - 写真は必ず不定形マスクで切り抜く - 手描きのゆるい線とベタ塗りの面を使う - 本文は短く改行し、中央揃えにする - 余白を広くとり、のんびりしたリズムにする

Don't - 純白の背景や原色の彩度が高い色を使わない - 四角い写真を並べ続けない（SNS枠以外） - グラデーションや光沢、強い影を使わない - 派手な購入ボタンを乱発しない - 硬い明朝を見出しの主役にしない

Page Structure

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

1. ファーストビュー（2択の問いかけで興味を引く）: 左右を緑・サーモンの帯で挟み、中央に巨大な手書き風コピーと人物イラストを置く
2. 商品紹介（2つの味の違いを示す）: 2カラムでボトルと色ブロブを並べ、英字ラベルと説明文を添える
3. 利用シーン（飲む場面を想像させる）: 色面に乗せたイラストを交互に6つ程度並べ、手書きコピーを添える
4. お客様の声（実際の感想で共感を得る）: 集合写真と導入文のあと、味ごとの色面に切り抜き写真と吹き出しを交互に置く
5. データ（評価を数字で示す）: 比率ブロック、平均点バッジ、円グラフ、注釈の順に並べる
6. SNS投稿（投稿で広がりを示す）: 細い線の枠の中に2列のスクロール画像グリッドを置く
7. 関連コンテンツ（回遊を促す）: 黄緑の地に、波形の上端と角丸カードを縦に並べる
8. フッター（ナビゲーションとブランドを示す）: 円形のTOPボタン、植物アイコン、線、2列リンク、大きなロゴ、コピーライトの順に置く

Imagery

• 人物イラストはフラットなベタ塗りに、少しかすれた質感を加える
• 人物は丸顔で表情はゆるく、くすんだ多色の服を着せる
• ボトルは簡略化したイラストか、斜めに置いた実物写真にする
• 写真は屋台や飲み会で、自然に笑う人物を暖色の光で撮る
• 装飾は植物のシルエットのアイコンや、黄色の雲・星を使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC でも中央の細い帯（約 375〜480px）を維持し、左右は地色かイラストで埋める
• 商品紹介は2カラムのまま、余白を広げる
• シーンイラストは 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 行書くと起動時に読み込まれる。