--- version: alpha name: Iridescent Pastel Personalized Haircare LP description: 白地に水色〜ラベンダー〜ピンクの淡い虹色グラデーションを敷き、黒の細線枠と黒帯ラベルで締めたパーソナライズヘアケアLP。紺の丸バッジで成分・掛け合わせを示し、価格ボックスでは赤の価格と緑のピル型CTAを使う。明朝とゴシックを混ぜ、手書き風の欧文スクリプトを重ねて上品さと先進感を出している。 colors: primary: '#1E3A8A' background: '#FFFFFF' cta: '#13985F' on-cta: '#FFFFFF' text: '#1B252F' accent-1: '#C63030' tint-1: '#E5A9AA' dark-section: '#A39B90' surface: '#111111' background-alt: '#FFFFFF' secondary: '#2A8BD0' accent-2: '#55C6EE' accent-3: '#D9A84A' tint-2: '#F6F4E9' cta-accessible: '#118654' typography: display: fontFamily: Shippori Mincho fontSize: 34px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.08em headline-lg: fontFamily: Noto Serif JP fontSize: 30px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.06em headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.08em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.85 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Great Vibes fontSize: 30px fontWeight: 400 lineHeight: 1.0 label-button: fontFamily: Montserrat fontSize: 20px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.06em rounded: sm: 4px md: 8px lg: 16px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 72px price-box: backgroundColor: '{colors.background}' textColor: '{colors.accent-1}' typography: '{typography.display}' height: 420px frame-section: textColor: '{colors.text}' typography: '{typography.headline-md}' height: 600px badge-circle-navy: backgroundColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 110px label-black-bar: backgroundColor: '{colors.surface}' typography: '{typography.headline-sm}' height: 36px point-number: backgroundColor: '{colors.surface}' typography: '{typography.label-button}' height: 64px type-table: backgroundColor: '{colors.tint-2}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 36px scent-band: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.label-button}' height: 170px --- # DESIGN.md — 虹色パステル×黒線枠のパーソナライズヘアケアLP（Iridescent Pastel Personalized Haircare LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ヘアケア・ボディケア ／ **雰囲気**: 清潔・爽やか、上品・高級、クール・先進的、情報量多め・訴求型 - **キーワード**: 虹色パステルグラデ・黒の細線フレーム・紺の丸バッジ・明朝×ゴシック・筆記体の欧文装飾・価格ボックス - **地の質感**: 水滴・光のプリズム・幾何学ラインが入った、透明感のあるグラデーション背景 - **形**: 黒1〜2pxの角張った枠、黒帯ラベル、正円バッジ、五角形の番号バッジ、ピル型CTA - **温度感**: やや寒色寄りで清涼。成分パートだけ金色・ベージュで温かい ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#1E3A8A` | 成分・掛け合わせの丸バッジ（紺） | 3% | 推定 | | `background` | `#FFFFFF` | ページの地色 | 30% | 画素の主要色に補正 | | `cta` | `#13985F` | 主CTAボタン（緑） | 1% | 推定 | | `on-cta` | `#FFFFFF` | CTA上の文字 | 0% | 画素の主要色に補正 | | `text` | `#1B252F` | 見出し・本文の文字 | 6% | 画素の主要色に補正 | | `accent-1` | `#C63030` | セール価格・割引表示（赤） | 0% | 画素の実測 | | `tint-1` | `#E5A9AA` | 送料無料帯（くすみピンク） | 0% | 画素の実測 | | `dark-section` | `#A39B90` | 悩みセクションの地（グレージュ） | 5% | 画素の実測 | | `surface` | `#111111` | ラベル・黒帯・ヘアタイプ表の見出しセル | 2% | 画素の実測 | | `background-alt` | `#FFFFFF` | ポイント部の生成りベージュ地 | 8% | 画素の実測 | | `secondary` | `#2A8BD0` | 見出しの強調語（シアンブルー） | 0% | 推定 | | `accent-2` | `#55C6EE` | 手順セクションの青グラデ | 4% | 画素の実測 | | `accent-3` | `#D9A84A` | オイル成分の金色バッジ | 1% | 推定 | | `tint-2` | `#F6F4E9` | 表の右セルの薄生成り | 0% | 画素の実測 | | `cta-accessible` | `#118654` | AA を満たす補正値（計算） | | 計算 | - 地は白を基本に、主要セクションには水色・ラベンダー・ピンクの淡い虹色グラデを敷く - 締め色は黒。細い線の枠・帯ラベル・表の見出しセルにだけ使う - 紺の正円バッジは掛け合わせや成分の提示専用にし、白文字を載せる - 赤は価格と割引表示だけ、緑は購入CTAだけに使う - 悩みパートはグレージュ地で暗めにし、その後の明るいグラデで解決感を出す - 成分ポイント部は生成りベージュ地。オイル成分は金色でまとめる - `button-primary` は文字 `#FFFFFF` × 背景 `#13985F` のコントラスト比が 3.69:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#118654`、4.6:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのメイン見出しや大コピー | 明朝 | Shippori Mincho | 500 | 34px | 1.4 | 0.08em | | `headline-lg` | セクションの大見出し（グラデ文字も可） | 明朝 | Noto Serif JP | 500 | 30px | 1.4 | 0.06em | | `headline-md` | 太ゴシックの小見出し・リード | ゴシック | Noto Sans JP | 700 | 20px | 1.5 | 0.08em | | `headline-sm` | 黒帯ラベル・バッジ内の文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0.05em | | `body-md` | 本文・声のコメント | ゴシック | Noto Sans JP | 400 | 14px | 1.85 | 0.04em | | `note` | 成分の注釈・※書き | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `accent` | 見出しに重ねる手書き風の欧文 | 欧文スクリプト | Great Vibes | 400 | 30px | 1.0 | 0.0em | | `label-button` | CTA・欧文ラベル・価格の数字 | 欧文サンセリフ | Montserrat | 600 | 20px | 1.4 | 0.06em | - 大見出しは明朝、補足リードは太ゴシック。この2書体で上下に組む - 強調語は虹色グラデかシアン色の明朝で大きくし、前後を大きな二重引用符で挟む - 見出しの背後に半透明の筆記体欧文を重ねる - ブランド名は字間の広い欧文サンセリフで書き、薄いグレーで大きく敷くこともある - 価格の数字は太いサンセリフで大きく、赤にする - 注釈は10px前後でまとめ、行間を詰める - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。悩みは 2×2、バッジは 3 つ並び - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - 主要ブロックは黒い細線の四角枠で囲む。上辺は見出しのところで途切れさせる - 写真は枠をはみ出して画面幅いっぱいまで広げることがある - 表は左が黒セル、右が生成りセルの2列で、行を重ねて並べる - 手順は3列に並べ、セルの間に「>」の矢印を置く - 価格ボックスは同じ構成で、ページ内に3回繰り返す ## Elevation & Depth - 基本はフラットにし、影は使わない - 丸バッジには白い外縁リングと、光が透けるような淡いグロウを付ける - CTAには下側に薄い影を付け、ボタン面に立体感のあるグラデを入れる ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 悩み写真は正円に切り抜き、成分写真は横長の矩形にする。商品は切り抜き画像を使う - **セクション境界**: 直線で切り替える。逆三角形の吹き出しで次へつなぎ、斜めのグラデ帯も使う - 枠は角丸なしの黒い細線 - 番号は黒の五角形に白抜きで入れる - 掛け合わせは正円2つの間に細い×を置く - ラベルは角丸なしの黒帯か、ピル型の黒帯にする ## Components - **主CTAボタン**（`button-primary`）: 緑のグラデのピル型ボタン。左端に白丸の矢印アイコンを置き、白文字2行で入れる - **価格ボックス**（`price-box`）: 取り消し価格・赤の割引バッジ・赤の大きな価格・ピンクの送料無料帯・CTA・注釈を縦に積む - **黒線フレーム**（`frame-section`）: 見出しのところで上辺が途切れる黒い細線の四角枠。角に黒い三角を付けることもある - **紺の丸バッジ**（`badge-circle-navy`）: 白い外縁リング付きの紺の正円に、白文字の明朝またはゴシックを入れる。間を×でつなぐ - **黒帯ラベル**（`label-black-bar`）: 見出し上や成分名に付ける黒帯の白文字ラベル。ピル型にする場合もある - **五角形ナンバー**（`point-number`）: 黒の五角形に小さな欧文と大きな2桁数字を入れ、左右に細い横線を伸ばす - **タイプ別対応表**（`type-table`）: 左が黒セルに欧文大文字、右が生成りセルに日本語。行ごとに少し間隔をあける - **香りバリエーション帯**（`scent-band`）: 写真を3分割したコラージュに、大きな欧文の名前と色付きの帯ラベルを重ねる ## Do's and Don'ts **Do** - 淡い虹色グラデと黒い細線を必ず組み合わせて使う - 大見出しは明朝で書き、強調語をグラデ文字か青文字にする - 成分や掛け合わせの要素は紺の丸バッジで示す - 価格ボックスとCTAは中盤と終盤でも同じ形で繰り返す - 注釈は小さな文字でも省略せずに書く **Don't** - ビビッドな原色で広い面を塗らない - 黒い枠や帯に角丸を付けない - 緑をCTA以外に使わない - 影を多用して立体的なカードにしない - 丸ゴシックで可愛くしすぎない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（実績と商品を一目で伝える）: プリズム光のある水色背景に商品を並べる。明朝コピーと丸バッジ3つ、黒いピル型ラベル、欧文のブランド名を置く 2. **価格・CTA**（早い段階で購入へ誘導する）: 黒線枠の中に薄いブランド名を敷き、商品写真・赤の割引価格・緑のCTAを入れる 3. **悩みの提起**（ダメージの原因と悩みに共感させる）: 原因アイコンを3つ並べ、グレージュ地に正円写真を2×2で置く。逆三角形で次へつなぐ 4. **解決の提示**（一人ひとりに合わせる発想を示す）: 紺の丸2つを×でつなぎ、パステルのグラデ地に商品を置く 5. **仕組みの説明**（診断して処方する流れを説明する）: 黒線枠の中に、研究室の写真と黒×生成りの2列表を置く 6. **独自診断**（データに基づく信頼感を伝える）: アプリ画面のモックとレーダーチャートを並べる。紺の丸バッジと共同研究先のロゴも置く 7. **香りの選択肢**（楽しさと選ぶ理由を伝える）: 手書きの円形ロゴと虹色の見出しを置き、写真コラージュの帯を5本並べる 8. **仕上がりイメージ**（使った後の姿を想像させる）: ツヤのある髪の大きな写真に、手書き風の強調語と縦書きの明朝コピーを重ねる 9. **著名人・専門家の声**（第三者からの信頼を示す）: 人物の切り抜き写真と黒い名前ラベル、白いコメントカードを置く。プロフィールは線枠で囲む 10. **ご利用の流れ**（手順の簡単さを伝える）: 青グラデ地に Step 01〜03 を3列で並べ、アプリ画面と矢印を入れる 11. **配合成分**（成分の根拠を示す）: 紺の丸バッジを×でつなぎ、その下に小さな注釈を並べる 12. **3つのポイント**（特長を詳しく説明する）: 生成り地に五角形の番号を置き、引用符付きの青い明朝見出しを入れる。写真カードの上に黒帯で成分名を付ける 13. **まとめのCTA**（最後にもう一度購入を促す）: モデル写真と丸バッジでファーストビューを繰り返し、価格ボックスとCTAを置く ## Imagery - 商品は半透明のパステルボトル。水滴や光のプリズムと一緒に明るく撮る - モデルはツヤのある黒髪〜ブラウン髪の女性。柔らかい自然光で撮り、白い服を着せる - 髪の質感はなびく髪の横長の写真で見せる - 香りの素材は果物と花のマクロ写真を3分割コラージュにする - 背景には細い線の幾何学模様・六角形・水滴・光のにじみを薄く入れる - スマホのUIモックや線画のアイコンで、仕組みを図にして説明する - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 画像はないため、以下は推奨。PC では中央に幅 750px 前後の 1 カラムで配置する - PC では左右の余白に淡いグラデ背景を広げる - 悩み写真は PC で4列、香りの帯は2列にしてもよい - 黒線枠の比率と、見出しのところで途切れる表現は保つ - CTA の最大幅は 480px 程度にする ## Agent Prompt Guide ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-b04092f2`（元 LP の URL から採番） - **元 LP**: https://cp.matsukiyococokara-online.com/sp/foru/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 中（7/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。