DESIGN.md — 氷と紺×黄の機能性ノンアル飲料 LP（Icy Navy Functional Beverage LP）

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

Overview

• 業種: 酒類 ／ 雰囲気: 清潔・爽やか、信頼・誠実、情報量多め・訴求型
• キーワード: 氷の質感・紺と黄・機能ごとの色分け・図解カード・商品の縦並び
• 地の質感: 氷と水滴の写真を背景に敷き、その上に白い面と細い線で清潔に区切る
• 形: 円形の機能バッジ、ピル型ボタン、角丸が小さいカード、上下を線で挟んだ帯見出し
• 温度感: 冷たく爽やか。紺で信頼感を出し、黄とピンクで明るさを足す

Colors

• 地は白か氷の写真にし、紺を見出しと帯に使う
• 機能ごとに紺・グレー・ピンクのテーマ色を決め、見出し、線、バッジ、図解に一貫して使う
• 黄はバッジとマーカーだけに使い、面を広く塗らない
• FAQ と法的な表記は生成りの地にまとめて切り替える
• CTA はサーモンのピル型にし、ブランドの紺とぶつけない
• フッターは紺のベタ面に白文字
• button-primary は文字 #FEF2E5 × 背景 #F3AA8C のコントラスト比が 1.74:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#C24714、4.53:1）を使う。

Typography

• 見出しは中央揃えの太いゴシック
• 機能見出しは主語を大きく、続く語を小さくして強弱をつける
• 本文のキーワードはテーマ色の太字か黄色マーカーで強調する
• 注釈の※は小さく添える
• 商品説明は中央揃えで短く改行する
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。機能紹介だけ 3 つの円を横に並べる
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• セクション見出しの下に全幅の細線を引く
• 図解は白いカードに薄い影をつけ、内側を枠線のボックスにする
• 商品は左に缶とグラス、右に名前・説明・ボタンを置く
• 商品は機能ごとに枠付きの見出しでまとめる
• 法的な表記は細い枠線のボックスに入れる

Elevation & Depth

• 図解カードは白地に薄くぼかした影をつける
• ピル型ボタンにはごく弱い影をつける
• それ以外はフラットにし、線で区切る

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 商品は切り抜きで白地に置く。動画とバナーは角丸なしの長方形
• セクション境界: 直線。帯見出しは上下を細線で挟む
• 機能バッジは円形の線で描き、上半分に色付きの小円を重ねる
• ボタンはすべてピル型
• FAQ カードは角丸 8px でピンクの枠線

Components

• ファーストビュー下の訴求帯（fv-claim-bar）: 紺の帯にキャッチを置き、黄色のピル型バッジを横に並べて数値を訴求する
• 機能の円形バッジ（function-circle）: テーマ色の線で描いた円の中に効能を書き、下に詳細へのピル型ボタンを置く
• 上下に線を引いた帯見出し（band-heading）: テーマ色の線で挟み、機能名と短い説明を中央に置く
• 図解カード（diagram-card）: 白いカードの中に、色帯の小見出しとイラストの図解を入れる
• 商品の行（product-row）: 商品写真と、線で区切った商品名・説明・詳細ボタン・購入アイコン
• 詳細を見るボタン（button-outline）: グレーの細枠のピル型ボタン。右端に矢印を置く
• 店舗検索 CTA（button-primary）: サーモンのピル型ボタン。左に虫眼鏡の円アイコンを置く
• FAQ カード（faq-card）: ピンクの Q の円と A の小円、ピンクの枠線
• 法的表記のボックス（legal-box）: えんじ色の細枠に、●付きの見出しと小さな注意書きを並べる

Do's and Don'ts

Do - 機能ごとのテーマ色を見出し、図解、商品の区分すべてで揃える - 氷や炭酸の写真で冷たさを出す - 効能の根拠や注釈を小さな文字で必ず添える - 商品写真は缶とグラスを並べて味のイメージを伝える

Don't - 暗い色や暖色のグラデーションで地を塗らない - 黄色を大きな面に使わない - 角丸の大きいカードを多用しない - 注意書きを省いたり、大きく目立たせたりしない

Page Structure

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

1. ファーストビュー（新商品とブランドの印象づけ）: 氷の写真を背景に、出演者 2 人と商品を置き、太いロゴとキャッチを重ねる。下に紺の訴求帯
2. 動画（CM で認知を広げる）: 欧文の見出しと、紺の枠付きの動画サムネイル
3. コンセプト（ブランドの約束と全商品を見せる）: 大きなキャッチとロゴの下に、機能別に色分けしたラインアップ写真。黄色マーカー付きの本文
4. 3 つの機能（機能の全体像を伝える）: 円形バッジを 3 つ横に並べる
5. 機能の詳細×3（作用の仕組みを図で説明する）: 帯見出し、図解カード、動画バナーの組み合わせを 3 回繰り返す
6. 商品ラインアップ（購入候補を見せる）: 機能別の枠見出しの下に商品の行を並べる
7. 店舗検索 CTA（購入行動につなげる）: サーモンのピル型ボタン
8. キャンペーン・特別コンテンツ（関連情報の案内）: 紺の見出しと全幅の線、動画サムネイル
9. よくある質問（不安を解消する）: 生成りの地に、ピンクの FAQ カードとピル型ボタン
10. 法的表記（機能性表示の義務的な表記）: 枠付きボックスに注意書きと届出リンクの一覧
11. フッター（サイト内の導線と SNS）: リンクを 2 列に並べ、薄い青のボックスに SNS を置き、最下部は紺の帯

Imagery

• 氷のかけらや炭酸の泡のクローズアップを、明るく青白いトーンで撮る
• 出演者は驚いた顔や笑顔で、グラスを手に持つ
• 商品は缶とグラスを並べた切り抜き。氷入りで冷たさを出す
• 図解はやわらかい線のフラットなイラスト。キャラクターや★で親しみを出す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は氷の写真を全面の背景にし、中央に約 70% 幅のコンテンツを置く
• PC では機能見出しを左に見出し、右に説明の 2 列にする
• PC では図解を 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 行書くと起動時に読み込まれる。