DESIGN.md — 紺×水色の斜体見出し日焼け止めキャンペーンLP（Clear Blue Sporty Sunscreen Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: 清潔・爽やか、クール・先進的、スポーティ、情報量多め・訴求型
• キーワード: 透明感・斜体・平行四辺形・三角パターン・濃紺×水色・キャンペーン
• 地の質感: 白地に淡い水色の三角形ポリゴン柄をうっすら敷く。光や氷のような透明感を出す
• 形: 斜めに傾けた平行四辺形のラベルとボタン、細い線の枠、角の立った四角
• 温度感: 涼しげで寒色寄り。差し色のピンクと水色のずらし影で軽さを出す

Colors

• 地は白と淡い青の三角パターンを交互に使い、セクションの切り替えを見せる
• 見出し・帯・STEPラベルは濃紺のベタ塗りにして引き締める
• 水色は見出しの下線マーカーとずらし影だけに使う
• ピンク紫は第2弾やNG例など、対になる情報にだけ使う
• 良い例は水色、悪い例は淡いピンクのボックスで色分けする
• 本文は黒ではなく濃紺系にして、全体を寒色でそろえる
• marker-underline は文字 #1E466E × 背景 #5BB6EA のコントラスト比が 4.32:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#64BAEB、4.53:1）を使う。

Typography

• 見出しは極太の斜体で、スピード感を出す
• 英字見出しは欧文の太いサンセリフを斜体で組む
• 見出しの右側に斜線を1本、下に細い横線を引く
• 日付は数字を大きく、曜日と時刻を小さくして強弱をつける
• コンセプト文は中央揃えにして、行間を広めにとる
• 注釈は※付きの小さな灰色文字で左揃えにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。賞品は SP で縦積み、PC で文字と画像の 2 カラム。STEP は SP で縦積み、PC で 3 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 賞品・注意事項は細い紺の枠で大きく囲み、中にブロックを入れる
• 見出しの直後は16〜24pxで本文につなげる
• STEPは同じ幅の濃紺ラベルを横に並べ、下に図と説明を置く
• コンセプト文は淡い青のカードに中央揃えで入れ、下に商品写真を置く
• 末尾にSNSフォローのカードと、パンくずを置く

Elevation & Depth

• 影はぼかさない。水色やピンクの面を斜め下にずらして重ねる
• コンセプト文のカードだけ、ごく薄いドロップシャドウをつける
• それ以外はフラットにして、線と面で階層を見せる

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角い切り抜き。手持ちスマホなどの小物写真だけ円形に抜く
• セクション境界: 直線で区切る。三角ポリゴン柄の帯を地として敷く
• ボタンとラベルは平行四辺形（skew -15°前後）にする
• 角丸は使わず、シャープな形でそろえる
• SNS誘導の六角形バッジは画面右上に固定する
• 下向きのV字シェブロンで、続きや展開を示す

Components

• 濃紺の斜めボタン（button-primary）: 平行四辺形の濃紺ボタン。白文字で右に外部リンクのアイコンを置く
• 枠線の斜めボタン（button-ghost-skew）: 白地に紺の細枠をつけた平行四辺形ボタン。水色とピンクのずらし影と下向き三角を添える
• 斜線つき見出し（heading-slash）: 斜体の太い見出し。下に細い横線を引き、右端に斜線を立てる
• 弾・賞ラベル（label-skew）: 濃紺の平行四辺形に白の斜体文字を入れる。横に枠だけの当選人数ラベルを並べる
• 水色マーカー下線（marker-underline）: 賞品名の下に、水色の太い線を斜体文字と同じ傾きで引く
• アコーディオン帯（accordion-bar）: 濃紺の全幅帯。中央に斜体の見出し、右に開閉のマイナス記号を置く
• STEPラベル（step-header）: 濃紺の長方形に白の斜体でSTEP番号を入れる。下にイラストと説明を置く
• 良い例・NG例ボックス（example-box）: 水色やピンクの淡い面。小見出しにマーカーをつけ、×印のリストと写真を並べる
• 六角形SNSバッジ（badge-hex）: 白地に紺枠の六角形。斜体の誘導文を入れる

Do's and Don'ts

Do - 見出しとラベルは必ず斜体の極太にそろえる - ボタンとラベルは同じ角度の平行四辺形にする - 白地と淡い青のパターン地を交互に置く - 日付・賞・STEPは濃紺の面で目立たせる - 注意事項は良い例とNG例を色分けして並べる

Don't - 角丸やピル型のボタンを使わない - 暖色を広い面に使わない - ぼかしの強いドロップシャドウを多用しない - 本文を斜体にしない - 明朝体や手書き風の書体を混ぜない

Page Structure

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

1. ファーストビュー（タイアップと世界観を伝える）: 白衣の人物と実験器具の明るい集合写真。上に小さなリード文と、グラデーションの英字キャッチを置く
2. キャンペーン告知帯（開催中であることと期間を伝える）: 青い三角パターンの帯に白文字を載せる。第1弾・第2弾の斜めラベルと日付を並べる
3. ページ内ナビ（動画とキャンペーンへ誘導する）: 枠線の斜めボタンを2つ並べる。右に六角形のSNSバッジを置く
4. コンセプト（ブランドの思いを伝える）: 淡い青のカードに中央揃えの文章を入れ、下に商品を並べた写真を置く
5. 動画（CMやメイキング映像を見せる）: パターン地の上に、斜体の小見出しと動画枠を縦に並べる。最後は左右矢印のカルーセル
6. タレント紹介（起用人物を紹介する）: 左に文章、右に写真の2カラム。下にもっと見るリンクとシェブロンを置く
7. キャンペーン概要（応募条件と期間を示す）: 中央揃えの説明文、斜めボタン、細枠で囲んだ期間ボックスの順に置く
8. 賞品紹介（景品で応募意欲を高める）: 大枠の中に、濃紺のアコーディオン帯と、賞ラベル・マーカー付きの賞品名・水色の画像ボックスを置く
9. 対象商品（対象のシリーズを示す）: 説明文の下に、ブランドロゴを横一列に並べる
10. 応募方法（手順を簡潔に示す）: 3つのSTEPラベルを並べ、それぞれの下にイラストと短い説明を置く
11. 注意事項（応募のミスを防ぐ）: 紺枠のボックスに、注釈リスト・良い例（水色）・NG例（ピンク）と写真4枚を入れる
12. 問い合わせ・店舗特典（窓口と、店舗での追加特典を案内する）: 細枠の問い合わせボックスを置き、その下に告知画像を入れる
13. SNS誘導（フォローを促す）: パターン地の上に白いカードを置き、ずらし影をつける。中に斜体の誘導文と濃紺のボタンを入れる

Imagery

• 白衣姿の人物を明るいハイキーで撮る。青白い実験室の背景で
• 商品は白い台座に並べ、淡い青の光で清潔に見せる
• 三角ポリゴンの幾何学パターンを、ごく淡い青で背景に敷く
• 手順の図はシンプルなフラットイラスト（レシート・スマホ・ギフト）で描く
• 景品写真は水色の三角パターンのボックスに切り抜きで載せる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCはコンテンツ幅を約800pxで中央に寄せる。SPは端に約5%の余白をとる
• PCでは賞品を文字と画像の2カラムにする。SPでは画像を下に縦積みにする
• STEPはPCで3列、SPでは縦に並べる
• NG例のリストと写真は、PCで2列と4列、SPで1列と2列にする
• 六角形のSNSバッジは、SPでは小さくして右下に固定する

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