DESIGN.md — 紺×金×和柄のコラボヘアミルク LP（Japanese Classic Collaboration Hair Care LP）

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

Overview

• 業種: ヘアケア・ボディケア ／ 雰囲気: 上品・高級、和風、ラグジュアリー・ダーク、レトロ
• キーワード: 和洋折衷・金の細線フレーム・市松・紗綾形の地紋・斜めの色帯・明朝体・キャラクターごとの色分け
• 地の質感: 紺地にうっすら和柄の地紋。白い面には和紙のようなかすかなざらつき。帯には市松模様を薄く重ねる
• 形: 八角形の星型や菱形の写真枠、縦長の短冊フレーム、角の切れた金線の枠、斜めにカットした帯
• 温度感: 落ち着いた低めの彩度で、華やかだが冷たすぎない

Colors

• 地は紺を基調にし、説明パートだけ生成り白へ切り替える
• 金は線・飾り・見出しに限り、面には使わない
• キャラ帯は1キャラ1色。深紅・青緑・藤紫・灰青・えんじを使い、どれも彩度は低めに抑える
• 帯の上には同系色の市松模様を明度差わずかで重ねる
• 白地の本文は焦げ茶にして、真っ黒は避ける
• 香りバッジは白地に金の枠で、どの帯の上でも統一する
• logo-plate は文字 #C9AE7E × 背景 #5A4A3E のコントラスト比が 3.96:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。

Typography

• 書体は全体を明朝で統一し、ゴシックは使わない
• 字間は0.1em以上空けて、ゆったり格調高く組む
• 紺地の本文は中央揃え、白地と帯は左揃え
• 注釈の番号は小さい上付きにする
• キャッチの下に金の点線を引いてもよい
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は写真とテキストを左右交互に並べる
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• FVは5枚の縦長短冊フレームを横に並べる。SPでは横スクロールか3+2段にする
• 使い方パートは写真とテキストの左右を交互に入れ替える
• キャラ帯は斜めのカットで次の帯と重ねる
• 帯ごとに、商品ボトル・キャラ短冊・テキスト・香りバッジを1セットで置く
• 装飾の線画は余白の四隅に散らす

Elevation & Depth

• 影はほぼ使わず、平面の上に金線で奥行きを出す
• ボトルの写真だけ、ごく薄い接地影を付ける
• 帯の重なりは色の差だけで表す

Shapes

• 角丸: 小 0px ／ 中 2px ／ 大 4px。ボタンは角丸の長方形。
• 写真の切り抜き: 八芒星や菱形の金枠で写真を切り抜く。キャラは縦長の短冊枠に入れる
• セクション境界: FV下は金線と菱形の飾り。キャラ帯同士は斜めの直線で切る
• 角丸は使わず直線基調にする
• 枠は二重の金細線にして、角に切り欠きを入れる
• 香りバッジは菱形の中に白い花のモチーフを入れる
• 見出しの横には、渦を巻く雲形の金線を流す

Components

• 短冊フレーム（frame-portrait）: 縦長の枠。金の二重線で囲み、上下に飾りを付ける
• 黒地ロゴ札（logo-plate）: 八角形の黒い札に金枠を付け、欧文ロゴを入れる
• 細線付き小見出し（heading-line）: 見出しの横から雲形の金線が伸びる
• 八芒星写真枠（photo-star）: 使用シーンの写真を、金枠付きの星形に切り抜く
• 使用量の表（usage-table）: 白い枠の中で、茶色のラベルセルと数値を3行並べる
• 香りバッジ（badge-scent）: 白い菱形の中に花の線画と香り名を入れる
• キャラ別の色帯（band-character）: 斜めにカットした、市松地紋入りのテーマ色の帯
• 成分注釈（note-ingredient）: 帯の中で、成分名を小さい白文字で並べる

Do's and Don'ts

Do - 金線・明朝・紺の3つで格調を統一する - バリエーションの帯は、どれも同じレイアウトの型を繰り返す - 和柄の地紋は薄く敷き、文字の読みやすさを優先する - 洋花と和の小物の線画を余白に添える

Don't - ポップな高彩度色や丸ゴシックは使わない - 角丸のボタンや影の強いカードは置かない - 地紋を濃くして文字に干渉させない - 金を広い面に塗らない

Page Structure

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

1. ファーストビュー（コラボの世界観と商品の概要を伝える）: 紺の地紋の上に、ロゴ札と縦長フレーム5枚を置く。その下に金の明朝リードを入れる
2. 商品の説明（質感・香り・効果を伝える）: 白文字を中央揃えにした本文。周りに花の線画を散らし、最後に注釈を入れる
3. 使い方1（トリートメントとしての使い方を伝える）: 生成り地。左に星形の写真、右に細線付きの見出しと本文を置く
4. 使い方2（スタイリング剤としての使い方を伝える）: 使い方1と左右を反転した配置にする
5. 使用量の目安（髪の長さ別の使用量を示す）: 白枠の表を3行並べ、横に手のひらの写真を添える
6. 香りのバリエーション（キャラごとの香りを紹介する）: テーマ色の斜め帯を5本重ねる。各帯に、ボトル・短冊・キャラ名・香りキャッチ・成分・香りバッジを置く
7. フッター注記（画像に関する注意と権利表記）: えんじ地に、小さい白文字を中央揃えで置く

Imagery

• 人物や商品は、厚塗り調のイラストを縦長フレームに収める
• 使用シーンは、手と髪をクローズアップした明るい写真
• 白いボトルを正面から切り抜き、背景は透過にする
• バラ・藤・柚子・チューリップなどの花は、金色や白の細い線画で描く
• 地紋には紗綾形・青海波・市松を、同系色で薄く敷く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは幅480〜960の中央固定。SPでは全幅の1カラムにする
• FVの5枚のフレームは、SPでは3+2段か横スクロールにする
• 使い方の左右交互配置は、SPでは写真を上にして縦積みにする
• キャラ帯は、SPではボトルとキャラを上に横並びにし、テキストを下に置く
• 斜めカットの角度は、SPではゆるめる

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