DESIGN.md — 白地×淡パステルの日焼け止めブランド LP（Airy White Gallery Sunscreen Brand LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: シンプル・ミニマル、上品・高級、清潔・爽やか
• キーワード: 余白多め・パステル写真・欧文セリフ見出し・ギャラリーグリッド・控えめボタン
• 地の質感: フラットな白地。色は写真の背景（淡い黄・水色・藤色・ピンク）に任せる。
• 形: 角丸なしの長方形が基本。NEWバッジだけ円形。
• 温度感: 明るくやや涼しい。光が差す柔らかい空気感。

Colors

• 地は白一色。色は商品写真の背景のパステルで出す
• テキストは黒とダークグレーに限り、色文字はキャンペーンバナー内だけにする
• ボタンは中間グレーの面に白文字。ブランド色は使わない
• 黄は日付や締切の強調帯だけに使う
• ピンクの円バッジは新着表示だけに使う
• フッターは薄いグレーで本文と分ける
• button-view-more は文字 #FEFEFE × 背景 #ACACAC のコントラスト比が 2.25:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#767676、4.5:1）を使う。
• badge-new は文字 #FEFEFE × 背景 #EA5471 のコントラスト比が 3.47:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#E42248、4.51:1）を使う。

Typography

• セクション見出しは欧文セリフの細字で中央揃えにし、装飾はつけない
• 商品名は明朝の小さい文字で写真の下中央に置く
• ボタン文字は欧文サンセリフの細字
• 太字はキャンペーンバナー内の数字・日付だけ
• 注釈は8px程度まで小さくし、黒で左揃え
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPはラインナップのみ2カラムグリッド、他は1カラム
• 本文ブロックの幅: 画面幅の約 94%
• 余白: セクション間 70px、基本単位 8px、カード内 0px（375px 幅換算）
• 左右余白は約12px
• 商品グリッドは隙間12px前後の正方形写真2列
• 写真→商品名→ボタンの順に縦に積む
• 奇数個なら最後の1枚を左に寄せる
• ニュースは中央カード＋左右を少し見せるカルーセル

Elevation & Depth

• 影はほぼ使わない
• 見出しの背後にぼかした白い光彩をうっすら置くことがある
• 区切りは余白と面の色の切り替えで行う

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 正方形・矩形でトリミング、角丸なし
• セクション境界: 直線（フル幅写真帯や面色の切替）
• ボタンは角丸なしの長方形
• バッジだけ正円
• 外部リンクは細い枠線の長方形＋小アイコン

Components

• View Moreボタン（button-view-more）: グレー面に白の欧文。写真の幅より少し狭く中央に置く
• 商品タイル（product-tile）: パステル背景の正方形商品写真に明朝の商品名を添える
• キャンペーンバナー（campaign-banner）: 淡黄の横長バナー。商品写真、青の数字、黄の期間帯、下線付きリンクを組む
• NEWバッジ（badge-new）: ピンクの正円に白い欧文で、写真の左上に重ねる
• 欧文セクション見出し（section-title）: 大文字の欧文セリフを中央に置き、上下を広くあける
• 枠線リンクボタン（button-outline）: 白地に細いグレー枠、欧文セリフ、右上に別窓アイコン
• スライダー操作（carousel-dots）: グレーの丸ドットと一時停止アイコン、左右に細い矢印

Do's and Don'ts

Do - 白地と余白を広くとる - 色は商品写真の背景に任せる - 見出しは欧文セリフの細字で中央に置く - ボタンは角丸なしのグレー一色でそろえる - 商品は2列グリッドで同じサイズに並べる

Don't - 鮮やかな原色のボタンやグラデーションのボタンは使わない - 見出しに太いゴシックやリボンなどの装飾をつけない - カードに影や角丸をつけない - テキストブロックを長くしない - パステル以外の濃い背景面を多用しない

Page Structure

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

1. ヘッダー（ブランドの識別とメニュー）: 白地に左寄せの欧文ロゴ、右にハンバーガーアイコン
2. ファーストビュー（新商品とイメージモデルの訴求）: モデル写真のフル幅スライダー。縦書きコピー、円形の発売日・スペックバッジ、大きな欧文ロゴを重ねる
3. キャンペーン告知（モニター募集への誘導）: 淡黄のバナー1枚と小さな注釈
4. ラインナップ（商品一覧）: 欧文見出し、2列の商品写真、明朝の商品名、グレーボタン
5. ブランド動画（世界観の伝達）: 欧文見出しとフル幅の動画埋め込み、下にキャプション
6. ブランド紹介（ブランド理念の提示）: 空と海のぼかし写真の上に欧文セリフ大見出し、英文と和文のコピー、ボタンを中央に置く
7. ニュース（新着情報）: 写真カードのカルーセルにNEWバッジと2行のテキスト
8. 外部リンク・SNS（グローバルサイトとSNSへの導線）: 枠線ボタンと大きなSNSアイコン2つ
9. 注釈・フッター（使用上の注意と企業情報）: 小さな注釈の後、薄グレーの地にリンクを中央揃えで並べ、コピーライトを置く

Imagery

• モデルは自然光の逆光で撮り、レンズフレアを入れて明るく爽やかにする
• 商品は淡い単色の背景（黄・水色・藤・ピンク）に置き、斜めの光と影を落とす
• アクセサリーや水滴などの小物を添えてスタイリングする
• 理念の背景は海と空のパステルぼかし写真
• イラストは使わず、写真主体にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは商品グリッドを3〜4列にする
• コンテンツ幅を最大1000px前後にして中央に寄せる
• ファーストビューは横長写真にし、コピーを左右に配置する
• キャンペーンバナーは横長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 行書くと起動時に読み込まれる。