DESIGN.md — 深海ブルー×水色グラデの環境キャンペーン化粧品LP（Ocean Blue Eco Campaign Cosmetics LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: 清潔・爽やか、上品・高級、信頼・誠実、やさしい・柔らかい
• キーワード: 海・透明感・ロイヤルブルー・サンゴ・社会貢献・グラデーション
• 地の質感: 水中光や空の柔らかいグラデーション写真に、半透明の白パネルを重ねたガラス調
• 形: 波形のセクション境界、角丸カード、ピル型ボタン、しっぽ付き吹き出し
• 温度感: 涼しげな寒色。ところどころにサンゴのピンクとオレンジ

Colors

• 地は「水色グラデ写真」と「ロイヤルブルーの帯」を交互に置き、白地は商品一覧だけに使う
• 見出し・枠線・リンクは同じロイヤルブルーでそろえる
• 青帯の上では白文字にし、最も大事な語だけオレンジにする
• ピンク・オレンジはサンゴやギフトのアイコンに限って少しだけ使う
• 黒の塗りは外部キャンペーンのボタン1か所だけにする
• 白パネルは不透明度80〜90%にして、背景の海がうっすら透けるようにする

Typography

• 感情に訴える大コピーは細めの明朝、情報はゴシックと役割で書体を分ける
• 本文は字間0.1em・行間2.0とゆったり組む
• 大きな数字は太めのゴシック、単位は小さく添える
• 英字のキャンペーン名はジオメトリックな細めのサンセリフで、ロゴのように使う
• 見出しはすべて中央揃え。本文は左揃えにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品とSNS投稿は 2 カラムのグリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• 左右の余白は約22px
• 見出し→期間→斜線コピーの順に、中央に縦に積む
• 情報ブロックは青線の角丸枠か半透明の白パネルで囲む
• 枠内の見出しの下に青い点線を引いて区切る
• 商品カードは画像・名前・グレーのピル型ボタンを縦に積む

Elevation & Depth

• 影はほとんど使わず、平らに見せる
• 半透明の白パネルで背景から浮かせる
• SNS投稿カードは角丸と写真だけで区別する

Shapes

• 角丸: 小 8px ／ 中 14px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 商品は白地に切り抜き。SNS投稿は角丸の矩形。サンゴは切り抜きの装飾
• セクション境界: FVと青帯の境目はゆるい波形。その他は直線で切り替え、写真のグラデーションでつなぐ
• 吹き出しは細い青線の角丸枠に、下向きの三角しっぽを付ける
• 青帯の角丸ボックスにも、下向きの三角しっぽを付ける
• 強調コピーは左右の斜めの細線で「＼ ／」のように挟む
• 国名タブは細い線のピル型。選択中だけ塗りつぶす

Components

• 主CTAボタン（button-primary）: ロイヤルブルーのピル型。白の太字に▶を添える
• 白抜きハッシュタグボタン（button-outline-white）: 青帯の上に置く白いピル型ボタン。青文字を大きめに
• 外部キャンペーン用の黒ボタン（button-dark）: 黒いピル型で2行の文字を入れる
• 商品リンクボタン（button-product）: 薄いグレーの小さなピル型。商品カードの下に置く
• 線の吹き出し（speech-bubble-line）: 青線の角丸枠に、下向きのしっぽ。左右にサンゴやギフトのアイコンを重ねる
• 斜線で挟む強調コピー（slash-headline）: 明朝の大きなコピーを、左右の斜めの細線で挟む
• 数値カウンターの枠（counter-box）: 青線の角丸枠の中に、点線の区切りと、大きな数字を入れた白いパネル
• 円形のつなぎバッジ（circle-badge）: 白い円にしっぽと青文字。左右に白い点を3つずつ並べる
• 国名タブ（tag-pill）: 青線の小さなピル型。選択中は青で塗り、文字を白にする
• 見出しラベル（label-pill-badge）: 枠の上辺にまたがる白いピル型ラベル。両側にアイコンを置く

Do's and Don'ts

Do - 色はロイヤルブルー・水色・白の3つを軸にする - 感情を動かすコピーは明朝で、大きく中央に置く - 情報の塊は青線の枠か半透明パネルで囲む - サンゴや泡など海のモチーフを、セクションのつなぎに置く - 数値は大きく見せ、実績として目立たせる

Don't - 暖色を地の色に使わない - 濃い影や立体的なボタンにしない - 太いゴシックの大見出しを多用しない - 線の太さを変えない（1〜1.5pxに統一する） - 背景写真を不透明な白で完全に隠さない

Page Structure

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

1. ファーストビュー（キャンペーン名と期間を伝える）: 水中の幻想的な写真の上に、青い明朝とサンセリフのタイトルを置く。期間はピル型ラベルと大きなセリフ数字で示す
2. コンセプトと動画（理念を短く伝え、動画を見せる）: 波形で切り替わる青帯に、白い一文コピーと16:9の動画を置く
3. 参加の仕組み1（購入するとどう貢献できるかを示す）: 線の吹き出し→ロゴ→期間→斜線で挟む明朝コピーの順に並べる
4. 追加企画（SNSシェア企画を告知する）: 円形バッジでつなぎ、青太字の企画名、ギフトアイコン付きの吹き出し、黒ボタンを置く
5. シェアカウンター（参加状況をリアルタイムで見せる）: 青線の枠に点線見出しを付け、白パネルに大きな数字を入れる
6. 対象商品（対象になる商品を一覧で見せる）: しっぽ付きの青い角丸ボックスで説明し、白地に2カラムの商品カードと注釈を並べる
7. SNS投稿ギャラリー（世界中の参加者の投稿を見せる）: 青帯にSNSアイコンを置き、白ボタンの下に大1枚・小2列の角丸投稿カードを並べる
8. 活動紹介（活動の背景と実績を伝える）: 南国の海の写真に明朝見出しを置き、本文と半透明パネル、ラベル付きの実績カウンターを続ける
9. メッセージとCTA（応援を呼びかけ、詳細ページへ誘導する）: 点線見出しと本文の下に、青のピル型CTAを置く
10. 世界展開マップ（活動が世界に広がっていることを示す）: 半透明パネルに斜線見出し、国名タブ、ピン付き世界地図、左右の矢印カルーセルを入れる
11. フッター画像（余韻を残して締める）: サンゴ礁と熱帯魚の写真を全幅で置く

Imagery

• 水中の光や揺らぐ布のような青いCGに、サンゴと泡を散らしたキービジュアル
• 空と雲、エメラルドの海の明るい写真を、セクション背景として薄く使う
• サンゴは切り抜きで、ピンク・黄・白のパステル系にする
• 商品は白背景で正面から撮った切り抜き
• アイコンはギフトや小さなサンゴなど、シンプルなフラットイラスト
• 地図はグレーの大陸に、対象国を水色で塗り、紺のピンを立てる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは中央に最大幅900〜1000pxのコンテンツを置き、背景写真は全幅に伸ばす
• 商品グリッドは3〜4列、SNS投稿は3列に増やす
• 大見出しは1.3倍程度にし、明朝のゆとりは保つ
• 波形の境界と青帯は全幅のまま維持する

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