DESIGN.md — ラベンダー×生成りの手紙風スキンケア LP（Lavender Letter Elegant Skincare LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、やさしい・柔らかい、ナチュラル、シンプル・ミニマル
• キーワード: 手紙・ラベンダー・生成り・細線・筆記体・余白
• 地の質感: 紙のようなマットな生成りの地。植物や果実の切り抜き写真が軽い影を落とす。
• 形: 角丸のない直線の枠と細い罫線が基本。円形のアイコン枠と不定形の白い面を部分的に使う。
• 温度感: やや暖かいニュートラル。紫が入るぶん少しひんやりする。

Colors

• 地は生成りのベージュを基本にし、動画など区切りたいセクションだけ明るいオフホワイトに切り替える。
• 紫の濃色はボタン・見出し文字・細い罫線だけに使い、面積を小さく抑える。
• ラベンダーの面はファーストビューの写真と商品パッケージで見せる。
• 筆記体の英字は白か淡いラベンダーで、背景に溶かすように置く。
• 本文はグレーにして黒は使わない。
• フッター下端だけ白から紫へのグラデーションを入れる。
• page は文字 #6E6A6A × 背景 #EEEAE1 のコントラスト比が 4.45:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-body-accessible（#6D6969、4.51:1）を使う。

Typography

• 見出しは明朝で、字間を 0.15〜0.25em と広く取る。
• 本文は細いゴシックをグレーで組み、行間は 2 前後にする。
• 筆記体英字の上に、短い横線と日本語見出しを重ねる。
• ファーストビューのキャッチは縦書きにし、細い白枠で囲む。
• 商品名の下には、短い横線を中央にそろえて入れる。
• 太字はほぼ使わない。商品キャッチだけ中くらいの太さにする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は商品を 2 カラムに並べ、見出しは左に縦書き
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 100px、基本単位 8px、カード内 24px（375px 幅換算）
• 左右の余白は約 28px にする。
• 見出しは中央ぞろえ。英字の飾りがある見出しだけ左寄せにする。
• 商品は画像、名前、キャッチ、説明の順で縦に積む。
• 植物や果実の切り抜きは画面の端からはみ出させる。
• セクション間は 100px 以上空けて、ゆったり見せる。

Elevation & Depth

• 影はほぼ使わない。
• 切り抜き写真にだけ、ごく淡い落ち影を付ける。
• ボタンや枠は影のないフラットにする。

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 999px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角丸なしの長方形か全幅の帯にする。素材は背景を抜いた切り抜きで使う。
• セクション境界: 直線で色を切り替える。紫の細い横罫線で区切る。
• ボタンは角丸なしの長方形にする。
• 人物アイコンは細線の正円枠に入れる。
• コンセプト文は不定形の白い円い面に載せる。
• 商品画像の背後には、細い横長の長方形の線枠を置く。

Components

• 紫の長方形ボタン（button-primary）: 幅は約 70% で中央に置く。字間の広い白い明朝で、ショップ導線や問い合わせに使う。
• 筆記体英字つき見出し（script-heading）: 大きな筆記体の英字に、短い横線と字間の広い日本語見出しを重ねる。
• 細線の人物アイコン（line-icon-circle）: 正円の細線枠に線画の人物を入れ、下に 2 行の悩みを添える。
• 線枠付きの商品ビジュアル（product-frame）: 横長の細い紫の線枠の手前に、切り抜いた商品ボトルを重ねる。
• 縦書きコピー（vertical-copy-box）: 縦書きの明朝の横に白い縦線を添える。ファーストビューや来店の案内に使う。
• 不定形の白い面（organic-blob）: コンセプト文を載せる楕円の面。外周を筆記体の英字が曲線で囲む。
• 見出し下の短い線（heading-underline）: 見出しの下中央に置く、長さ約 24px の細い横線。
• 追従 SNS ボタン（floating-sns）: 右下に固定する白い角丸の正方形。中に紫のアイコンを入れる。

Do's and Don'ts

Do - 余白を大きく取り、1 画面に入れる情報を少なくする。 - 見出しは明朝にし、字間を広げる。 - 植物・果実・テクスチャの切り抜きを画面端に散らして、季節感を出す。 - 紫は線とボタンに絞って使う。 - セクションの頭には筆記体英字を大きく透かして置く。

Don't - ビビッドな赤や黄色のバッジ、価格の強調は入れない。 - 太いゴシックや黒い文字を使わない。 - ボタンを角丸やピル型にしない。 - 強い影や立体的なボタンを使わない。 - 背景を白一色にせず、生成りを保つ。

Page Structure

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

1. ファーストビュー（世界観とコンセプトを伝える）: ラベンダーの地に、商品を持つ手と植物を俯瞰で置く。縦書きコピーを白い細枠で囲み、短い詩的な文を添える。
2. おすすめの対象（読み手に自分ごと化させる）: 円形の線画アイコンを 3 つ置き、それぞれに 2 行の悩みを添える。
3. コンセプト（ブランドの考え方を伝える）: 不定形の白い面に明朝の見出しと本文を載せる。周りを筆記体英字と果実の写真で飾る。
4. 商品ラインナップ（各商品を紹介する）: 筆記体英字の見出しの後、商品ごとに線枠付きの画像、名前、3 行のキャッチ、成分の説明を並べる。
5. 注釈と CTA（購入へ誘導する）: ※注釈をまとめて載せ、その下に紫の長方形ボタンを置く。
6. 開発ストーリー（開発者の想いで信頼を作る）: 筆記体の見出しの後に全幅の商品写真を置き、明朝の大見出しと長い本文を続ける。
7. ネーミングの由来（商品の背景を伝える）: パッケージの写真の後に本文を置く。手書きしている写真と植物の切り抜きで飾る。
8. 購入場所の案内（サロンでの購入へ誘導する）: 縦書き 2 行の明朝に白い縦線を添え、淡いグラデーションを背景にする。
9. イメージ動画（質感を映像で伝える）: 明るい地に切り替え、筆記体の見出しと再生ボタン付きの動画サムネイルを置く。
10. 問い合わせとフッター（問い合わせへ誘導し、ページを締める）: 罫線で区切り、紫ボタン、SNS アイコン、コピーライト、紫のグラデーションの順に並べる。

Imagery

• 商品と手元をラベンダーの紙の上で真上から撮る。
• 柑橘・葉・木の実・ジェルの滴を切り抜き、淡い影を付けて散らす。
• 手紙・封筒・ペンなど、文房具のモチーフを組み合わせる。
• 白いボトルとラベンダーのキャップを、明るい自然光で撮る。
• 虹色の光の映り込みや、淡い水彩のテクスチャを差し色にする。
• 人物は細い線画のアイコンで描き、写真は使わない。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は商品を 2 カラムのグリッドに並べる。
• PC ではセクション見出しを左に縦書きで置き、内容を右に配置する。
• PC のファーストビューは横長にし、上部にナビゲーションを横並びで置く。
• PC ではストーリー部分の写真と本文を左右交互に並べる。
• SP は 1 カラムで、ハンバーガーメニューにする。

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