DESIGN.md — 氷と水色グラデの夏限定ひんやりスキンケア LP（Icy Blue Summer Cooling Skincare LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 清潔・爽やか、かわいい、ポップ・元気、やさしい・柔らかい
• キーワード: ひんやり・氷・水色グラデーション・ペンギン・夏限定・線画アイコン
• 地の質感: 透明感のある氷の写真と、なめらかな青のグラデーション。紙っぽさはなく、つるっとしたデジタルな質感
• 形: 角丸カード、FV 下端の大きな円弧、氷のギザギザシルエットでセクションを区切る
• 温度感: 寒色一色でとても涼しい。黄色をわずかに差して明るさを出す

Colors

• 地は水色→青→水色のグラデーションで流れを作り、白は情報カードにだけ使う
• 見出しは白地上なら濃い青、青地上なら白
• 黄色は Point 番号と一語の強調だけに限定する
• CTA は濃紺の塗りで、ページ内でいちばん濃い色にする
• 赤は注意書きの一行だけに使う
• 注釈は小さく、地に合わせて白かグレー
• info-box は文字 #FFFFFF × 背景 #2396D5 のコントラスト比が 3.28:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#1D7DB2、4.54:1）を使う。

Typography

• 見出しは丸みのある太字で字間を広めにとる
• 導入の本文は中央揃え、カード内は左揃え
• ※番号は上付きの小さい文字にする
• Point と番号は欧文の丸ゴシックで、2 段に縦に積む
• 数値の訴求は大きく、単位は小さめに
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。シーン紹介は横スクロールのカルーセル、成分は 2 カラム
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 白カードは画面の左右に約 4% の余白を残して浮かせる
• 機能の行はアイコンを左、テキストを右に置く
• 手順は縦に並べ、間を下向きの三角でつなぐ
• セクションの頭に Point 番号を置き、左右にペンギンと氷を配置する

Elevation & Depth

• 白カードには影をほとんど付けず、色の差で浮かせる
• カルーセルのカードにはごく薄い影を付ける
• 氷の写真を前面に重ね、奥行きを出す

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 成分写真は角丸の四角、または 4 枚を横に隙間なく並べる。商品と氷は切り抜き
• セクション境界: FV の下は大きな円弧。ポイントの後は氷のギザギザシルエット
• CTA はピル型
• 情報ボックスは角丸 8px
• 購入枠は濃紺の線で囲み、上部に塗りの見出し帯を付ける

Components

• カートボタン（button-primary）: 濃紺のピル型ボタンに白い文字
• 購入ボックス（purchase-box）: 濃紺の枠と上部見出し帯の中に、内容量・価格・ボタンを入れる
• 白ピル見出し（pill-label）: 青地の上に白いピル型のラベルを置き、青文字で導入見出しを入れる
• Point 番号（point-number）: 黄色の英字 Point と 2 桁の番号を左右の氷・ペンギンで挟む
• 線画アイコンの機能行（icon-feature-row）: 青い線画アイコンと見出し・本文を横に並べる
• シーンカード（scene-card）: 写真・見出し・短文が入るカルーセルのカード。下にドットのインジケーター
• 使い分け案内ボックス（info-box）: 青い塗りの箱に白文字と白ピルのラベル。下に白い注意エリアと赤い警告
• 成分カード（ingredient-card）: 白カードに見出し・説明・注釈を入れ、下端いっぱいに写真を敷く
• アコーディオン（accordion）: 上下の濃紺線で区切った行に、青文字と右端の＋

Do's and Don'ts

Do - 地は寒色のグラデーションで統一し、氷の写真で涼しさを強める - ペンギンなどのゆるいイラストを見出しの脇に添える - アイコンは青の単色の線画にする - 数値の訴求は大きく見せ、※注釈を必ず添える - Point 番号は黄色で目立たせる

Don't - 暖色を主役にしない（例外は温度を示す図だけ） - 黒の太い見出しや角ばった極太書体は使わない - 影の強いカードや立体ボタンは使わない - 黄色を本文や広い面に使わない - 写真を詰め込みすぎて余白をなくさない

Page Structure

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

1. ファーストビュー（季節限定と冷感を一瞬で伝える）: 氷の写真を敷いた水色の地に、斜めに置いた商品と白抜きの大キャッチ・数値。下端は円弧で区切る
2. 導入・共感（夏の肌悩みと、その解決を語る）: 青のグラデーション地に白ピルの見出しを置き、中央揃えの白文字本文と注釈
3. 実証データ（冷却効果を裏付ける）: 白カードの中に大きな数値見出しとサーモグラフィー画像
4. 特長（3 つのメリットを示す）: 青い線画アイコンとテキストを横に並べた行を 3 つ
5. 利用シーン（使う場面をイメージさせる）: 写真カードの横スクロールカルーセル
6. 使い方（手順を説明する）: 淡い水色の地に英字見出し。線画イラストの 4 ステップを三角でつなぐ
7. 使い分け・注意（保管方法と禁止事項を伝える）: 青い箱に白ピルのラベル、下に白い注意エリア
8. ポイント1（素材の技術を説明する）: 青地に Point 番号、シート写真、仕組みの図
9. ポイント2（冷感成分を紹介する）: 白い成分カードを 2 枚、写真付きで
10. ポイント3（ケア成分を紹介する）: 写真を 2 カラムに並べ、白文字の説明
11. 購入（購入へ導く）: 氷のシルエットで区切った白地に、キャッチ・商品画像・購入ボックス
12. 詳細情報（全成分と注意事項を載せる）: アコーディオン 2 行。最後に氷の写真で締める

Imagery

• 透明な氷の塊を明るい水色の光で撮り、切り抜いて端に配置する
• ペンギンは写実寄りのかわいいイラスト。傘など夏の小物を持たせる
• アイコンや手順の人物は青の単色線画で描く
• 成分写真は素材をアップで画面いっぱいに撮る
• 水面や泡の写真で清涼感を足す
• 雪の結晶やキラッとした光を小さく散らす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は全体を水色のグラデーション地にし、中央にカードを置く
• PC では特長・シーン・使い方を横並び（3〜4 列）にする
• PC のポイント1 は写真と説明を左右 2 カラムにする
• PC の購入エリアは商品画像を左、購入ボックスを右に置く
• PC の FV は横長で、キャッチを商品の左右に振り分ける

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