DESIGN.md — 方眼紙×ミントとコーラルの健康飲料 LP（Grid Paper Mint and Coral Beverage LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: ポップ・元気、清潔・爽やか、親しみ・手作り感、やさしい・柔らかい
• キーワード: 方眼紙・ミントグリーン・コーラル・袋文字・線画イラスト・ノート風
• 地の質感: 薄いグレーの方眼グリッドを全面に敷き、紙のノートのような質感にする。
• 形: 角のないブロックと太い枠線が基本。ボタンはピル型、カードの角を斜めに切り落とす。
• 温度感: 明るく軽い。ミントで涼しさを、コーラルで温かみを出す。

Colors

• 地は方眼柄のオフホワイトにして、緑とコーラルは差し色に絞る。
• 重要なセクションは、太さ約12pxのミントグリーンの枠で囲む。
• 主ボタンは緑、レシピなど寄り道の導線はコーラルのボタンにする。
• 本文中の強調語はコーラルの文字色、または白抜きのコーラル帯で示す。
• カードの淡色地は、ミント・ピーチ・黄色を内容ごとに使い分ける。
• 黒は袋文字の輪郭と細枠線に使い、ベタ塗りの面には使わない。
• button-primary は文字 #FFFFFF × 背景 #2DB494 のコントラスト比が 2.6:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#21856D、4.53:1）を使う。
• button-accent は文字 #FFFFFF × 背景 #F3663A のコントラスト比が 3.1:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#D83E0D、4.55:1）を使う。
• speech-badge は文字 #FFFFFF × 背景 #F3663A のコントラスト比が 3.1:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#D83E0D、4.55:1）を使う。
• tape-label は文字 #FFFFFF × 背景 #F3663A のコントラスト比が 3.1:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#D83E0D、4.55:1）を使う。
• highlight-chip は文字 #FFFFFF × 背景 #F3663A のコントラスト比が 3.1:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#D83E0D、4.55:1）を使う。

Typography

• セクション見出しは、白抜きの文字に黒い細輪郭をつけた袋文字にし、字間を広く取る。
• 見出しのすぐ上に、ミントの筆記体で英字ラベルを小さく添える。
• 見出し中のキーワード 1 語には、筆で払ったようなミントのマーカーを下に敷く。
• 本文は中央揃えで短く改行し、行間は 1.8 以上にする。
• 数値は斜体の太字で大きくし、単位は小さく添える。
• ページの最上部と最下部に、字間を広げた欧文大文字のラベルを置く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。人物紹介は 3 列、関連リンクは 2 列
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• ページの左右に細い縦線を引き、ノートの罫のような外枠にする。
• 重要なブロックはミントの太枠で画面幅いっぱいに囲む。
• 見出し・リード文・ボタンは中央揃えの縦並び。
• 各セクションの末尾に、中央揃えのピル型ボタンを置く。
• 線画イラストは、余白の左右端からはみ出す位置に散らす。

Elevation & Depth

• 基本は影なしのフラットな作り。立体感は枠線と淡い色の面で出す。
• ディスプレイ文字だけ、淡いピンクを斜めにずらした影をつける。
• 比較表の画像には、ごく淡いドロップシャドウで紙らしさを出す。

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 商品は切り抜き、人物は円形にトリミング、料理写真は角丸なしの矩形にする。
• セクション境界: 直線のみ。太枠の開始と終了でセクションを区切る。
• ポイントカードは左上の角を斜めに切り落とす。
• 番号は黒細線の円に入れ、カード上端にまたがるように置く。
• 数値バッジは吹き出し付きの円にする。
• レシピ枠は、外側に白い二重線が入った淡ピーチの矩形にする。
• ラベルは端を斜めにちぎったテープ風にする。

Components

• 主ボタン（button-primary）: 緑のピル型。黒い細い輪郭をつけ、中央に文字、右端に「>」を置く。
• サブボタン（button-accent）: レシピなど寄り道の導線に使うコーラルのピル型ボタン。
• 袋文字見出し（heading-outline）: 白抜きに黒い輪郭の見出し。上に筆記体の英字ラベル、キーワードの下にミントのマーカーを入れる。
• ポイントカード（point-card）: 淡いミント地で左上の角を斜めにカット。上端に番号の円、中に図解と小見出しを入れる。
• 番号バッジ（number-circle）: 白地に黒細線の円。小さな筆記体のラベルと、太字の 2 桁数字を入れる。
• 数値吹き出し（speech-badge）: 緑またはコーラルの円形吹き出し。白の斜体で数値を大きく入れる。
• テープ風ラベル（tape-label）: コーラルの斜めのテープに、白の筆記体で英字を入れる。
• お客様の声カード（voice-card）: 淡黄の枠に商品名タブ。線画の人物と、太字タイトル付きの本文を入れる。下に四角い矢印ボタンを置く。
• 強調帯（highlight-chip）: 本文中のキーワードを、コーラルの矩形に白文字で入れて目立たせる。
• 人物紹介（person-circle）: 円形の顔写真の下に、小さな役職名と太字の名前を置く。3 列で並べる。

Do's and Don'ts

Do - 地には必ず薄い方眼柄を敷く。 - セクション見出しは袋文字と英字の筆記体ラベルを組み合わせる。 - 強調はコーラルの文字色か帯で、1 文につき数語に絞る。 - 主導線は緑、寄り道の導線はコーラルのピル型ボタンにする。 - 余白には緑の線画イラスト（素材・道具）を散らす。

Don't - 濃い色のベタ塗りセクションを作らない。 - ボタンを四角や影の強い立体にしない。 - 明朝体や細い高級感のある書体を使わない。 - 緑とコーラル以外の鮮やかな色を足さない。 - 写真に濃いグラデーションや文字を重ねない。

Page Structure

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

1. ファーストビュー（商品カテゴリと魅力を一目で伝える）: 欧文ラベル、手書き風のサブコピー、コーラルの袋文字の大見出しを置く。短いリード 3 行のあと、切り抜きの商品を 3＋2 個並べ、周りに線画を散らす。
2. 商品とは（商品の概要と、誰向けかを示す）: ミントの太枠で囲む。袋文字見出しとコーラル強調の問いかけ、区切り線、本文、写真の順に並べる。
3. 実績アピール（先駆者であることを伝えて信頼を得る）: ピーチの縁取りの白カードに、コーラルの吹き出しバッジと強調帯を入れ、ボタンを続ける。
4. 3 つのポイント（商品の利点を数値と図で示す）: 番号の円付きのミントカードを縦に積む。棒グラフ、数値の吹き出し、ベン図で図解する。
5. ラインナップ（商品の種類を見せる）: 利用シーンの文とコーラルの強調コピーのあと、商品を横一列に並べ、ボタンを置く。
6. お客様の声（共感と安心を与える）: 商品名タブ付きの淡黄カードに、線画の人物を添える。四角い矢印でスライドする。
7. レシピ（商品の別の使い方を提案する）: テープラベル付きのピーチ枠に、写真・手書きの吹き出し・料理名・コーラルのボタンを入れる。
8. 開発者の声（作り手の想いで信頼を高める）: ミントの太枠の中に、円形の人物写真 3 名とインタビュー抜粋カードを入れる。
9. 比較（自分に合う商品選びを助ける）: 袋文字見出しとリード文のあと、ミントの円の上に表の画像を重ね、ボタンを置く。
10. 紹介動画（動画で理解を補う）: 黒細線の枠にサムネイルを入れ、再生アイコンを添える。
11. 関連サイト・フッター（他ページへ誘導して締める）: バナーを 2 列に並べ、注釈を入れる。最下部に、字間の広い欧文ラベルを横線で挟んで置く。

Imagery

• 商品は白背景の切り抜きで、少し斜めに並べて動きを出す。
• 素材・道具・植物を、ミントグリーンの単色線画で描いて余白に置く。
• 人物の声は、白黒のラフな線画イラストで表現する。
• 料理写真は明るい自然光で、淡いベージュの背景にする。
• スタッフ写真は明るい背景で笑顔のものを使い、円形に切り抜く。
• 手書きの吹き出しや、キラキラ・集中線の小さな落書きを添える。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約 900px 幅にし、左右の縦罫線と方眼の地はそのまま残す。
• PC はファーストビューの直下に、6 項目の目次ナビを横一列に置く。
• PC はポイントカードを 3 列、お客様の声を 2 枚並びにする。
• PC は概要・比較セクションを、テキストと画像の左右 2 カラムにする。
• 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 行書くと起動時に読み込まれる。