DESIGN.md — 紺×水色×桜色のペーパークラフト調ヘアケア LP（Papercraft Goddess Navy Haircare LP）

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

Overview

• 業種: ヘアケア・ボディケア ／ 雰囲気: 上品・高級、やさしい・柔らかい、かわいい
• キーワード: ペーパークラフト・女神モチーフ・アーチ額縁・紺と水色・桜色の星・紙の質感
• 地の質感: 白と水色の地に、和紙のような細かい紙の質感を敷く。紺の面はフラットに塗る。
• 形: アーチ（扉形）の額縁、大きく丸めたカード、波線と雲形のセクション境界。
• 温度感: やや寒色寄り。桜色と金で温かさを少し足す。

Colors

• 白い紙→水色→紺の順で地の色を交互に切り替え、セクションにリズムを付ける。
• 見出しと本文は純黒にせず、紺系で統一する。
• 桜色は星形の区切り装飾とステップ見出しだけに使う。
• 金は商品名プレートだけに使い、面積を小さく保つ。
• 紺のセクションでは文字を白にし、強調には桜色を使う。

Typography

• セクション見出しは大文字の英字セリフで中央に置き、その下に桜色の小さな星を添える。
• 和文のリード見出しは明朝体で 3 行程度に改行し、中央揃えにする。
• 本文は短い文で区切って改行し、中央揃えのまま段落の間を広く空ける。
• 注釈は※番号付きで、本文の下に小さく置く。
• 強調したい語は鉤括弧で囲むか、波線の下線を引く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は中央に SP 幅のカラムを置き、左右は固定の装飾領域にする
• 本文ブロックの幅: 画面幅の約 85%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• 各セクションは英字見出し、星、本文の順に縦に積む。
• 動画や写真は画面幅いっぱいに置く。
• ステップは左に縦線と星マーカーを並べたタイムラインにする。
• 商品はアーチ額縁に入れた横スライダーで見せ、左右に隣の商品を少しのぞかせる。

Elevation & Depth

• FAQ カードには、ぼかしの大きい薄い影を付ける。
• それ以外の面は基本的に影を付けず、平面で見せる。
• ペーパークラフトのイラスト自体が持つ陰影で、奥行きを出す。

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 30px。ボタンはピル型。
• 写真の切り抜き: 商品写真は扉形のアーチ枠で切り抜き、枠は二重線と点線で縁取る。動画は四角のまま全幅に置く。
• セクション境界: 紺から水色への境は波線、FV の下端は雲形のシルエットで区切る。
• ボタンとアコーディオンはピル型にする。
• アーチ形のモチーフを、アイコン・額縁・円形の背景に繰り返し使う。
• 製品紹介ブロックは上が丸いアーチ、下が半円の大きな縦長カプセル形にする。

Components

• 英字見出し＋星（section-title）: 中央揃えのセリフ大文字見出しの下に、桜色の 4 芒星を 1 つ置く。
• 紺のピルボタン（button-primary）: 紺の塗りに白い英字ラベル。幅は約 130px。
• 線のピルボタン（button-outline）: 白地に紺の細い線と紺の英字ラベル。
• アーチ額縁の商品カード（arch-frame）: 白い扉形の枠に紺の二重線と点線を付け、下に金のプレートで商品名を入れる。
• ステップのタイムライン（step-timeline）: 紺地の左に桜色の縦線と星を並べ、STEP 番号を桜色のセリフ体で書く。
• FAQ のピル型アコーディオン（faq-accordion）: 白いピル形のカードに紺の質問文を置き、右端にマイナス記号を付ける。
• 円形の補足バッジ（badge-circle）: 紺地の上に白い線の円を描き、その中に小さな数値と短い説明を入れる。
• 追従する店舗ボタン（floating-shop）: 右下に固定する白いピルに紺の英字ラベル。

Do's and Don'ts

Do - 英字のセクション見出しと桜色の星を、全セクションで同じ型で使う。 - 紺・水色・白の 3 つの地を交互に使う。 - アーチ（扉形）のモチーフを、枠・アイコン・背景に繰り返し使う。 - 本文は中央揃えで短く改行し、段落の間を広く取る。 - 白と水色の地には、紙の質感をうっすら敷く。

Don't - 赤やオレンジなど、彩度の高い暖色を入れない。 - 四角いボタンや角張ったカードを使わない。 - ゴシックの極太見出しで強く訴えない。 - 金を大きな面に使わない。 - 純黒の文字や、真っ黒な背景を使わない。

Page Structure

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

1. ファーストビュー（世界観と商品を一目で伝える）: ペーパークラフトの女神と商品を全幅のビジュアルにし、左上にセリフ体のロゴを置く。下端は雲形で区切る。
2. トピックス（お知らせを見せる）: 白い紙の地に、角丸のサムネイルカードを横スライダーで並べる。
3. コンセプト（ブランドの思想を伝える）: 紺地に白い明朝の短い文を中央揃えで並べ、雲と花のシルエットで締める。
4. 特長（成分と仕組みを説明する）: 全幅の動画サムネイルの下に、明朝のリード見出しと中央揃えの本文、注釈を置く。
5. 商品ごとの役割（3 つの工程を図で見せる）: 番号と英字ラベルを付けたアーチアイコンを点線でつなぎ、縦長のカプセル形カードに商品と工程の図を入れる。
6. 使い方（使う手順を示す）: 紺地に、桜色の縦線と星のステップタイムラインを置き、円形バッジで補足する。
7. 商品一覧（ラインナップを紹介する）: 水色の紙の地に、アーチ額縁の商品スライダーと紺のピルボタンを置く。上端は波線にする。
8. よくある質問（疑問を解消する）: 白い紙の地に、ピル型のアコーディオンを縦に並べ、線のボタンで締める。
9. フッター（SNS と規約へ誘導する）: 紺地に SNS アイコン、白い小さなリンク群、大きなセリフ体ロゴを中央に置く。

Imagery

• 紙を切り重ねたペーパークラフト風の 3D イラストにする。女性の横顔、流れる髪、牡丹、雲、扉、鍵を描く。
• 色はピンク・クリーム・青紫・白の淡いパステルにする。
• 商品は白ボトルを正面から撮り、白背景で切り抜く。
• 成分の説明には、暗い背景に金色の粒を寄せたマクロ調の画像を使う。
• 装飾は 4 芒星、アーチ、点線、雲のシルエットに限る。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では SP 幅の縦長カラムをそのまま中央に固定する。
• PC の左カラムには、ロゴ、鍵を持つ手のイラスト、縦のナビゲーションを固定する。
• PC の右カラムには、3 つの商品をアーチ枠で並べた固定パネルを置く。
• PC の背景全体は、水面の揺らぎのような淡い水色にする。
• 追従の店舗ボタンは、SP・PC とも右下に固定する。

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