DESIGN.md — 透明感ある水色×紺の薬用UVスキンケアLP（Clear Sky Blue Medicated Skincare LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 清潔・爽やか、上品・高級、信頼・誠実、やさしい・柔らかい
• キーワード: 透明感・朝の光・水色グラデーション・紺の明朝・細線アイコン・薬用の信頼感
• 地の質感: 光の筋・水滴・ガラス玉が入った淡い水色の写真背景。半透明の白いカードを重ねる
• 形: 円形のアイコン枠、角丸の小さいカード、ピル型のボタン、細い横線と小さな点の区切り
• 温度感: 涼しげで清らか。青みのある白が中心

Colors

• 地は青みのある白〜淡い水色の写真・グラデーションにする
• 文字は紺系で統一し、真っ黒は使わない
• 濃紺の面はCTAボタンと比較表の自社側ヘッダーだけに使う
• 機能分類の色分けは紫・青・ピンクの淡い枠だけに抑える
• LINE誘導の部分だけ緑を少し使う
• キーワードは紺の太字か淡青のマーカーで強調する

Typography

• 見出しは明朝で字間を広くとり、句点で締める
• 大見出しの一部の語を大きくして緩急をつける
• 本文はゴシックで行間を2倍ほど広くとる
• CTAカードだけはゴシック太字で操作の部品だとわかるようにする
• 番号は斜体のセリフ数字で添える
• 注釈は※付きの小さい文字で各ブロックの最後に並べる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。機能アイコンは 3〜5 列、比較表は 2 列
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 見出しは左寄せ、商品写真は右に寄せて重ねる
• 小見出しは両側に細い線を引いた中央揃え
• リストカードは左に円形アイコン、右にテキストを置く
• 商品の仕様ブロックとCTAカードをセクションごとに繰り返す
• 余白を広くとって、ゆったり縦に流す

Elevation & Depth

• CTAカードは白地に薄くて広い影（0 4px 20px rgba(30,58,96,.08)）
• リストカードは半透明の白に細い枠をつけ、影はほぼつけない
• CTAボタンに軽い影をつける
• 円形アイコンは白地に淡い影か細い枠

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 角版の全幅写真で、端は背景に溶け込ませる。商品は切り抜き
• セクション境界: 直線の切り替え。写真から淡色地へのフェードでつなぐ
• アイコン枠は正円
• CTAカードは大きめの角丸
• 情報カードは小さめの角丸と細い線
• 仕様ラベルは角ばった細い枠

Components

• 購入ボタン（button-primary）: 濃紺のピル型で、矢印付きの短いラベル。下に小さい補足文
• 購入誘導カード（cta-card）: 白い角丸カードに、英字の小ラベル・2行の見出し・説明・チップ3つ・ボタンを並べる
• 特典チップ（chip-benefit）: 淡青のピル型に小さい太字
• 円形の細線アイコン（icon-circle）: 白い円の中に紺の細線アイコン、下にラベル。横に5個並べる
• 線に挟まれた小見出し（heading-lined）: 中央の明朝テキストの両側に細い横線。斜めの線で挟む形もある
• 悩み・特長のリストカード（list-card）: 半透明の白カードに、左に円形アイコン、右に1行テキスト。点線で区切る
• 比較表（compare-table）: 2列の表。自社側だけ濃紺のヘッダーと枠で目立たせる
• Q&Aカード（faq-card）: 左に円形アイコン、縦線をはさんで明朝のQ.とA.
• 仕様ラベル（spec-label）: 細いグレーの枠で区分名を囲む。紺塗りの版もある

Do's and Don'ts

Do - 背景には光の筋や水滴がある淡い水色の写真を使う - 見出しは紺の明朝で、ゆったりした字間にする - 機能はすべて細線アイコンと円形の枠で表す - セクションごとに商品の仕様とCTAカードを繰り返す - 薬用の表現には必ず※の注釈を添える

Don't - 赤や黄色の派手な強調、セール風の装飾は使わない - 黒くて太いゴシックの見出しは使わない - 濃い色の面を広く敷かない - 塗りつぶしのアイコンやイラストを混ぜない - 効能を言い切る誇大なコピーにしない

Page Structure

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

1. ファーストビュー（問いかけで関心を引き、商品を見せる）: 光の写真に大きな明朝の問いと商品の切り抜きを置き、円形バッジ3つと5機能のアイコン、仕様を並べる
2. CTA（早めに購入へ誘導する）: 白い角丸カードにチップと濃紺のピル型ボタン
3. 悩みの提起（日中の肌の不満に共感する）: 人物写真と見出しのあと、斜線で挟んだ小見出しとアイコン付きの5行リスト
4. 新しい考え方の提案（ケアの発想を転換させる）: マーカーで強調した中央揃えの明朝コピーと商品写真
5. 3つの視点（光環境という切り口を説明する）: 色違いの淡い枠のカードを縦に3つ。円形アイコン付き
6. 多機能の紹介（1本でいくつもの役割があることを示す）: 斜体の番号と円形アイコンを3+2のグリッドで並べ、仕様の枠を置く
7. 比較（一般品との違いを示す）: 2列の比較表で、自社側を濃紺のヘッダーにする
8. 使用感（心地よさを伝える）: 手に塗る写真のあと、5列の小カードにアイコン・見出し・説明
9. 利用シーン（使う場面をイメージさせる）: 4枚の人物写真と、円形アイコン7個のシーン一覧、使用量の説明
10. 成分（有効成分で信頼を補う）: 大きな明朝見出しと、横長アイコンカード3枚、成分名のラベル
11. よくある質問（購入前の不安を解く）: アイコン付きのQ&Aカードを5枚縦に並べ、横に商品写真
12. まとめ（価値を再確認させる）: ガラス小物と商品の写真に、仕様の枠3つと5機能アイコン
13. LINE誘導・最終CTA（相談と購入へ導く）: 緑を使ったスマホの線画とLINE訴求のあと、CTAカード

Imagery

• 朝の窓辺のような逆光で、白と水色の明るい写真にする
• 水滴・ガラス玉・シャボン玉のような透明な球体を散らす
• 商品は切り抜いて、クリームのテクスチャを添える
• 人物は白い服の女性で、横顔や肌に触れる動作の自然なカット
• アイコンは紺の細線で、点や小さな星を添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に 480〜600px 幅の SP 版を置き、左右を淡い水色で埋める想定
• PC に広げる場合、見出しと商品写真は左右 2 カラムにする
• アイコングリッドは PC で横一列に並べる
• CTAカードは最大幅 560px で中央に置く

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