DESIGN.md — 水色の泡としずくのエコ技術コーヒー LP（Aqua Bubble Eco Coffee Tech LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: 清潔・爽やか、やさしい・柔らかい、信頼・誠実、クール・先進的
• キーワード: 水色・しずく・泡の円・波形境界・図解・環境配慮
• 地の質感: フラットな淡色面に半透明の白い円を散らし、水面の写真で上下を挟む
• 形: しずく型アイコン、円形写真、ピル型見出し帯、大きめ角丸カード、波打つセクション境界
• 温度感: 涼しく軽やか。青系で統一し、写真の焦げ茶だけが温度を足す

Colors

• 地は淡い水色の3〜4段階を章ごとに切り替え、波形境界で区切る
• 見出しと強調語は青文字、本文はグレー文字にする
• 比較の『従来』はグレー、『新技術』は青で対比させる
• ピル型の見出し帯とボタンは青地に白文字
• 黄色は小さな吹き出しだけに使う
• 背景に白い半透明の円を散らして泡を表現する
• pill-heading は文字 #FEFFFE × 背景 #018CCB のコントラスト比が 3.73:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#017CB4、4.61:1）を使う。
• button-read は文字 #FEFFFE × 背景 #018CCB のコントラスト比が 3.73:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#017CB4、4.61:1）を使う。
• drop-icon は文字 #FEFFFE × 背景 #018CCB のコントラスト比が 3.73:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#017CB4、4.61:1）を使う。

Typography

• 見出しは中央揃え、字間を広めに取る
• 英字ラベルは細めで大きく、日本語見出しは太字
• 数値は特大の太字で主役にする
• 本文は左揃え、注釈は小さく下にまとめる
• 強調語だけ青文字にして文中で目立たせる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、図解の比較は縦積み
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• 各章は英字ラベル→青見出し→本文の順
• 比較は従来→下向き矢印→新技術で縦に並べる
• 白カードの上にピル帯見出しを吹き出し状に重ねる
• 人物紹介は円形写真→所属→名前→一言→READボタン

Elevation & Depth

• 影はほぼ使わずフラットにする
• 白カードは地色との差だけで浮かせる
• 英字ラベルの背後に白い不定形の水しぶき形を敷く

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 32px。ボタンはピル型。
• 写真の切り抜き: 人物は正円、素材写真は全幅で上下を緩い曲線で切る
• セクション境界: 大きく波打つ曲線、または緩いアーチ
• アイコンはしずく型に収める
• ピル帯の下中央に小さな三角しっぽを付ける
• 背景の泡は大小の正円をランダムに配置

Components

• ピル型見出し帯（pill-heading）: 青地白文字のピル帯。下に三角のしっぽを付け、白カードを指す
• READボタン（button-read）: 青地に白い英字の横長ピルボタン
• ストア誘導ボタン（button-store）: 白地に黒い英字と色付き矢印のピルボタン。濃い青地の上に縦2つ並べる
• 水しぶき英字ラベル（splash-label）: 白い不定形のしぶきの上に細い英字を重ねた章タイトル
• しずくアイコン（drop-icon）: 青いしずく形の中に白い線画アイコンと英字ラベル
• 図解カード（diagram-card）: 大きな角丸の白カード。グラフ・数値・図を中央に配置
• 番号付きポイント（point-list）: しずく型の青いPOINT番号と点線区切りで3項目並べる
• 点線付き一言（dotted-quote）: 青文字の一言の下に、中央が下向きに折れた点線を敷く
• 黄色の吹き出し（callout-bubble）: 図中で違いを指す小さな黄色の丸吹き出し

Do's and Don'ts

Do - 青系の濃淡だけで章ごとの地色を切り替える - 境界は波形の曲線にする - 比較図は従来をグレー、新方式を青にする - 大きな数値で効果を見せる - 泡の円を背景に散らして軽さを出す

Don't - 暖色や原色を面に使わない - 角張った四角い区切りや直線の境界にしない - 濃い影や立体的なボタンにしない - 本文を黒で太く詰めない - 写真を四角いまま並べない

Page Structure

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

1. ファーストビュー（商品の新しさを一目で伝える）: 水面写真の上に白い不定形シルエットと泡を重ね、カップ写真と3行キャッチを中央に置く
2. 概要（技術の価値を2点で要約）: 英字ラベル、青い2行見出し、本文、補足、しずくアイコン2つと台座状の円柱
3. 技術の比較（従来との違いを示す）: 灰色アイコン→白矢印→青い大アイコンを縦に並べ、二重下線で結論
4. 味の特長（おいしさの理由を語る）: 波形の境界の後、見出しと本文。続けて全幅の豆写真に青いしずくカードと点線の吹き出し
5. 根拠の図解（仕組みをデータで示す）: 引用符付き見出し、ピル帯、白カードにグラフと黄色吹き出し
6. 開発者の声（専門家の言葉で信頼を出す）: 円形人物写真、所属と名前、青い一言と点線、READボタンを人数分縦に並べる
7. 環境貢献（続けやすい環境行動として訴求）: 濃い水色地に泡。見出し、本文、ピル帯付き白カードで数値比較と1日→1年の円環イラスト
8. 設備・技術詳細（量産体制の信頼性を示す）: 薄グレー地。注釈付き見出し、ピル帯、番号ポイント3つと機械の線画図
9. 購入導線（購入先へ誘導）: 水面写真に濃い青のしずく形を敷き、商品パッケージと白いピルボタン2つ

Imagery

• 水面を上から写した淡い青の写真に、白い円をボケのように重ねる
• 商品は真上から撮り、白い背景に置いてやわらかい影をつける
• 素材写真は画面いっぱいに敷き詰めた接写で質感を見せる
• 人物は無地の背景で作業中の様子を撮り、正円で切り抜く
• アイコンは青一色の線画とベタで、しずく・葉・木など自然のモチーフ
• 図解は青と灰色の2色にし、炎や矢印を単純な形で描く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約900px幅で、FVは横長にしてキャッチをカップの右に置く
• 比較図は PC で左右に並べ、中央に横矢印を置く
• 人物紹介は PC で2人横並びにする
• 数値比較・1日→1年図も PC では横並びのカードにする
• ポイントリストと機械図は 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 行書くと起動時に読み込まれる。