DESIGN.md — 生成りと米色の和モダンスキンケアLP（Japanese Rice Gift Beige Skincare LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 和風、上品・高級、ナチュラル、やさしい・柔らかい
• キーワード: 生成り・米・稲穂・水引・和柄・縦書き明朝・贈り物
• 地の質感: マットな和紙風の単色面に、麻の葉・市松の線柄を淡く重ねる
• 形: 角丸なしの四角いブロックと写真タイル。そこに米粒形の楕円や有機的な不定形を加える
• 温度感: 暖かめ。黄みのベージュと金色が中心

Colors

• 地は生成り（background）とベージュ（primary）の2色を、セクションごとに交互に使う
• 黒（dark-section）は成分効果の説明ボックスだけに使い、上辺に細い金のラインを引く
• 金・黄（accent-1）は霞雲・水引・稲穂など装飾にだけ使い、文字には使わない
• 購入ボタンは販売チャネル別に色を分ける（公式はティール、モールは赤）
• 和柄は地色に近いトーンの線で、低いコントラストで敷く
• button-buy-official は文字 #FFFFFF × 背景 #64CDC9 のコントラスト比が 1.89:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#2A827F、4.57:1）を使う。

Typography

• キャッチと効果の見出しは縦書きの明朝で、和の品格を出す
• セクション見出しは中央揃えのゴシックで、数字やキーワードだけを一回り大きくする
• 英字ラベルは0.3em以上の広い字間にして、装飾として扱う
• 本文は小さめの中央揃えにし、短い行で改行する
• 注釈は※番号付きの極小文字でまとめて置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。成分写真は 3 列または 2 列のタイル
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• 写真タイルは画面幅いっぱいに隙間なく並べる
• 商品カードは白い面を左右にはみ出させ、側面に縦の英字ラベルを置く
• セクションの区切りに、横一線の水引ラインを中央に置く
• 効果の黒ボックスと成分写真3枚を1組にして、交互に繰り返す
• 購入ボタンは2つを横並びにし、その下にモールのロゴを置く

Elevation & Depth

• 影はほぼ使わず、フラットな面の重なりで奥行きを出す
• 商品パッケージ画像にだけ、ごく弱い落ち影を付ける

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 999px。ボタンは角丸の長方形。
• 写真の切り抜き: 成分写真は正方形〜横長の角丸なしタイル。キービジュアルは全幅
• セクション境界: 直線で色を切り替える。境界に水引ラインや和柄を添える
• ボタンとボックスはほぼ直角にする
• 低刺激の訴求は、米粒形の白い楕円を3列で並べる
• 素材の訴求は不定形のベージュの面に、弧状の英字を沿わせる
• 商品ラインナップはアーチ型の上部をもつ白カードにする

Components

• 公式購入ボタン（button-buy-official）: ティール地の矩形に、日本語と英字のBUY NOWを2段で入れる
• モール購入ボタン（button-buy-mall）: 赤地の矩形。公式ボタンと横並びで同じ幅にする
• 水引ライン区切り（mizuhiki-divider）: 金とベージュの細い二重線を横一線に引き、中央に結び目を置く
• 縦書き商品カード（product-card-vertical）: 白い面に商品画像と縦書きの明朝キャッチ・価格を置き、霞雲の装飾を重ねる
• 効果の黒ボックス（benefit-dark-box）: 上辺に金線を引いた黒地に、縦書きの見出しと縦書きの説明を右から並べる
• 成分写真タイル（ingredient-tile）: 素材のクローズアップ写真。下に成分名と※番号を中央揃えで入れる
• 米粒形の無添加バッジ（free-badge-grain）: 白い楕円の上部を少しへこませた米粒形。中に太字ゴシックの短い語を入れる
• 字間を広げた英字見出し（section-label-en）: 大文字の英字を広い字間で中央に置き、下に水引ラインを付ける

Do's and Don'ts

Do - 地色は生成りとベージュを交互に切り替え、和柄をごく薄く添える - キャッチは縦書きの明朝にする - 成分は写真タイル＋名前＋※注釈のセットで見せる - 金色は霞雲・水引・稲穂など装飾に限定する - 購入ボタンはチャネル別の色で横並びにする

Don't - 彩度の高い原色を背景に使わない - 大きな角丸や影の強いカードを使わない - 和柄を濃いコントラストで敷かない - 本文を大きな文字で長く書かない - 黒ボックスを成分説明以外に乱用しない

Page Structure

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

1. ファーストビュー（商品と受賞実績を一目で伝える）: 稲穂とパッケージ・シートを置いた全幅写真に、金の受賞エンブレムを重ね、下に商品名を入れる
2. 商品コンセプト（贈り物という世界観を示す）: 英字見出し＋水引ライン＋引用符付きのリード＋中央揃えの短い本文
3. 商品カードと購入（商品・価格・ベネフィットを示して購入へ誘導する）: 白カードに商品画像と縦書きの明朝キャッチを置き、霞雲を添える。下に購入ボタン2つとモールのロゴ
4. 米由来成分（主成分の効果を説明する）: ベージュ地に、黒の効果ボックスと3列の成分写真を交互に2組並べ、注釈を添える
5. ゆらぎ肌ケア成分（植物成分の訴求）: 水引で区切り、見出しと本文の下に2×2の植物写真タイルを並べる
6. イメージ写真（素材の自然な恵みを情緒的に伝える）: 米をすくう両手の全幅写真
7. 低刺激処方（安心感を伝える）: 生成り地に、米粒形の白バッジを3列×3段で並べる
8. シート素材（シートの特長を伝える）: ベージュの不定形の面にシート写真を重ね、弧状の英字と中央揃えの説明を置く
9. 商品ラインナップ（関連商品の回遊を促す）: アーチ型の白カードをスライダーで見せ、ドットのページャーを付ける
10. 最終CTAとフッター（購入とSNSへの導線）: 購入ボタン2つとモールのロゴ。淡い青白のフッターに、販売先・SNSのアイコンと筆記体ロゴを置く

Imagery

• 米・稲穂・米ぬかなど素材のマクロ写真。暖色寄りの自然光で撮る
• 植物成分は緑の鮮やかな接写を正方形に切り抜く
• 人物は顔を出さず、手元だけを柔らかいボケの中に写す
• 装飾は水引・麻の葉・市松・霞雲などの和柄を細い線で描く
• 金の稲穂のイラストをカードの角に添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約60%幅のコンテンツにし、左右の余白に和柄の円形モチーフを散らす
• PC の商品カードは横長にし、画像・キャッチ・購入ボタンを横並びにする
• PC の成分は黒ボックスと写真3枚を1行に並べる
• PC の植物写真は4列を1行で並べる
• PC の無添加バッジは5列に増やす
• PC のラインナップは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 行書くと起動時に読み込まれる。