DESIGN.md — 氷と水色グラデの冷感飲料 LP（Icy Blue Cool-Down Drink LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: 清潔・爽やか、スポーティ、ポップ・元気、力強い・インパクト
• キーワード: 氷・冷感・水色グラデーション・斜めカット・マーカー強調・熱中症対策
• 地の質感: 氷の立方体写真を背景や余白に散らしたひんやりした質感。面はフラットな単色。
• 形: 斜めに切ったセクション境界と、平行四辺形の白カード。小さな角丸のラベル。
• 温度感: 寒色中心の冷たい印象。黄色とマゼンタで少しだけ温度を足す。

Colors

• 地は淡い氷色→鮮やかな水色→濃い青→水色→白→グレーと寒色で切り替える。
• 青地の上は白文字、白カードの上は黒文字。
• 強調語は黄色の蛍光マーカーを下半分に引く。
• マゼンタはCTAボタンとフッター線だけに限定する。
• 暖色は黄色とマゼンタ以外使わない。
• compare-panel は文字 #01AEEB × 背景 #FEFEFE のコントラスト比が 2.52:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#017DA9、4.62:1）を使う。

Typography

• 見出しはすべて太いゴシックで、2行で中央揃え。
• FVのキャッチは極太で斜めの勢いをつけ、白に薄い影をつける。
• 見出しの左右に斜線（＼ ／）を置いて目立たせる。
• 強調語は太字に黄色マーカーを重ねる。
• 本文は左揃え、注意書きは※で始まるぶら下げインデント。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。図解や利用シーン写真は 2 カラムグリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• セクション境界は斜めにカットし、次の地色と重ねる。
• 特長カードは左右にはみ出す平行四辺形で縦に3枚並べる。
• 利用シーンは写真の下に青帯ラベルを付けた2×2グリッド。
• ラインナップは左に商品画像、右に情報とボタン。
• 氷の写真をセクション端からはみ出すように置く。

Elevation & Depth

• 基本はフラットで影なし。
• 氷や商品写真は切り抜いて立体感を出す。
• TOPボタンだけに軽い影と白縁をつける。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: シーン写真は角丸なしの矩形。商品と氷は背景を切り抜く。
• セクション境界: 斜めの直線カット。逆三角の切り欠きも使う
• 特長カードは平行四辺形（skew）。
• CTAはピル型。
• Point番号は黄色の正円。
• 図解ラベルはピル型の色帯。

Components

• 商品詳細ボタン（button-primary）: マゼンタのピル型ボタンに白い太字
• 特長ポイントカード（point-card）: 白い平行四辺形のカード。左上に黄色の円でPoint番号を重ね、強調語にマーカーを引く
• Point番号バッジ（point-badge）: 黄色の正円の中に小さなPointと大きな2桁数字を青で入れる
• 白帯見出し（heading-box）: 水色地の上に置く白い横長の帯に青い太字の見出し
• 比較図解パネル（compare-panel）: 白パネル2枚を並べ、ピル型ラベル、六角形の粒子イラスト、短い説明で比べる
• 利用シーンタイル（scene-tile）: 人物写真の下に青帯と白文字のラベルを付けたもの
• 保存方法の案内ボックス（info-box）: 濃い青のボックス。左に白い小ラベル、右に白太字、下に注釈を置く
• 下線付き見出し（heading-underline）: 白地で使う青い太字見出し。下に青い細線を引く

Do's and Don'ts

Do - 地色は寒色の単色面で区切り、境界は斜めにする。 - 氷の写真を各セクションの端に散らして冷たさを出す。 - 強調語は黄色マーカーで1〜2語だけ目立たせる。 - 見出しは極太ゴシックを白か青で書く。 - CTAはマゼンタのピル型だけにする。

Don't - 暖色の地や茶系の配色を使わない。 - カードに大きな角丸や強い影をつけない。 - 明朝体や細い書体を見出しに使わない。 - マゼンタをCTAとフッター線以外に広げない。 - 黄色マーカーを長い文全体に引かない。

Page Structure

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

1. ファーストビュー（商品と冷たさを一目で伝える）: 氷の写真の背景に極太の斜めキャッチと商品パウチ2種を置き、下に白い3行のリードを入れる
2. 商品の説明（商品の仕組みを図で伝える）: 水色地に白帯見出しと定義文。白い比較パネル2枚とマーカー付きのまとめ文
3. 動画（CMで興味を高める）: 白地に斜線付きの見出しを置き、動画埋め込みとキャプション
4. 特長（メリットを3つ示す）: 斜めカットの濃い青地に白見出し。Point番号付きの平行四辺形カードを3枚
5. 利用シーン（使う場面を思い描かせる）: 逆三角でつないだ水色地に斜線付き見出し。2×2の写真タイルと締めの一文
6. ラインナップ（商品を選んで詳細へ進ませる）: 白地に下線付き見出し。商品画像、名前、マゼンタボタンを横並びで
7. 使い方の案内（おいしく飲むための手順を伝える）: 濃い青のボックスに白ラベルと白文字の注釈
8. 注意事項・フッター（注意書きと会社情報を載せる）: グレー地に※付きの小さな文字。マゼンタ線の下にリンク、SNSアイコン、コピーライト

Imagery

• 透明な氷の立方体を青い光で撮った写真を、切り抜いて端からはみ出させる。
• 商品パウチは正面から撮って切り抜き、少し傾けて2つ重ねる。
• シーン写真は屋外で汗をかく場面（運動・作業・レジャー）を明るい自然光で撮る。
• 図解は水色と紺の六角形を並べたフラットなアイコン。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでも中央に幅約360pxのSPレイアウトを置くだけ。
• PCの左右余白は氷の写真から水色へのグラデーション背景で埋める。
• PCのフッターは横幅いっぱいにして、ロゴ・リンク・SNSを横一列に並べる。
• 広いカラムを作るときも1カラムのまま、写真グリッドを3〜4列に広げる程度にする。

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