--- version: alpha name: Icy Aqua Cool Haircare LP description: 空と水しぶきを思わせる水色グラデーションを地に、六角形の写真枠と黄色の CTA で清涼感を打ち出すヘアケア LP。後半は診断チェックから白カードのタイプ別商品紹介へつなぐ。 colors: primary: '#3FD1E8' secondary: '#1486DB' cta: '#FEFE01' on-cta: '#3FBEDB' background: '#FFFFFE' background-alt: '#BFF1F9' tint-1: '#E2F7FC' tint-2: '#FFFFFF' surface: '#FDF8F2' text: '#5D6776' text-muted: '#ACA8A4' accent-1: '#78ECE3' accent-2: '#92BEFE' on-dark: '#F8FDFD' on-cta-accessible: '#1B7B91' secondary-accessible: '#1279C6' primary-accessible: '#117A8A' typography: display: fontFamily: M PLUS Rounded 1c fontSize: 80px fontWeight: 500 lineHeight: 1.1 headline-lg: fontFamily: Zen Maru Gothic fontSize: 28px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em headline-md: fontFamily: Zen Maru Gothic fontSize: 22px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.1em headline-sm: fontFamily: Zen Maru Gothic fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.08em body-md: fontFamily: Zen Maru Gothic fontSize: 14px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.06em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Quicksand fontSize: 36px fontWeight: 400 lineHeight: 1.1 letterSpacing: 0.02em label-button: fontFamily: Quicksand fontSize: 18px fontWeight: 600 lineHeight: 1.0 letterSpacing: 0.15em rounded: sm: 4px md: 16px lg: 60px full: 999px spacing: unit: 8px card: 16px section: 56px 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}' height: 52px button-diagnosis: backgroundColor: '{colors.background}' textColor: '{colors.secondary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 52px hex-badge: backgroundColor: '{colors.tint-1}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' height: 110px highlight-band: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 40px checklist-paper: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 460px result-pill: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 230px point-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 140px product-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 250px one-point: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 140px --- # DESIGN.md — 水色×レモン黄の爽快ヘアケア LP（Icy Aqua Cool Haircare LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ヘアケア・ボディケア ／ **雰囲気**: 清潔・爽やか、ポップ・元気、情報量多め・訴求型 - **キーワード**: 清涼感・水色グラデーション・六角形・水しぶき・診断コンテンツ・パステル - **地の質感**: 空や水滴のぼかし写真、薄い三角形の幾何学パターン - **形**: 六角形の写真フレームとバッジ、縦長ピル型の商品カード、角丸の白カード - **温度感**: 寒色中心でひんやりした印象。差し色の黄で明るさを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#3FD1E8` | ブランドの水色・セクション地 | 12% | 画素の実測 | | `secondary` | `#1486DB` | 見出し帯・強調ラベルの青 | 4% | 画素の実測 | | `cta` | `#FEFE01` | 購入ボタンの黄色 | 2% | 画素の実測 | | `on-cta` | `#3FBEDB` | CTA 上の文字 | 0% | 画素の主要色に補正 | | `background` | `#FFFFFE` | カード・コンテンツ地の白 | 28% | 画素の実測 | | `background-alt` | `#BFF1F9` | 淡い水色パターン地 | 12% | 画素の主要色に補正 | | `tint-1` | `#E2F7FC` | ごく淡い水色 | 6% | 画素の主要色に補正 | | `tint-2` | `#FFFFFF` | 淡いピンク(After・サブ系統) | 3% | 画素の実測 | | `surface` | `#FDF8F2` | チェックリストの生成り紙 | 3% | 画素の実測 | | `text` | `#5D6776` | 見出し・本文のグレー | 3% | 画素の主要色に補正 | | `text-muted` | `#ACA8A4` | type 表記などの淡グレー | 0% | 画素の実測 | | `accent-1` | `#78ECE3` | type A ミント | 2% | 画素の実測 | | `accent-2` | `#92BEFE` | type C ラベンダーブルー | 2% | 画素の実測 | | `on-dark` | `#F8FDFD` | 色地上の白文字 | 2% | 画素の実測 | | `on-cta-accessible` | `#1B7B91` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#1279C6` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#117A8A` | AA を満たす補正値（計算） | | 計算 | - 地は水色グラデーションと淡い水色パターンを交互に置き、白カードで情報を載せる - 購入 CTA だけを鮮やかな黄色にして最も目立たせる - 強調語は青の帯に白文字で一部だけ反転させる - 診断タイプは A=ミント、B=水色、C=ラベンダーブルーで色分けし、カード枠やラベルに統一する - 商品カード下の MORE 帯は各商品のパッケージ色にそろえる - 本文は真っ黒にせず青みのあるグレーにする - `button-primary` は文字 `#3FBEDB` × 背景 `#FEFE01` のコントラスト比が 2.02:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `on-cta-accessible`（`#1B7B91`、4.52:1）を使う。 - `button-diagnosis` は文字 `#1486DB` × 背景 `#FFFFFE` のコントラスト比が 3.84:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#1279C6`、4.59:1）を使う。 - `hex-badge` は文字 `#3FD1E8` × 背景 `#E2F7FC` のコントラスト比が 1.65:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#117A8A`、4.54:1）を使う。 - `highlight-band` は文字 `#F8FDFD` × 背景 `#1486DB` のコントラスト比が 3.75:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#1279C6`、4.54:1）を使う。 - `one-point` は文字 `#F8FDFD` × 背景 `#3FD1E8` のコントラスト比が 1.78:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#117A8A`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の大きな斜めキャッチ | 丸ゴシック | M PLUS Rounded 1c | 500 | 80px | 1.1 | 0.0em | | `headline-lg` | セクション大見出し | 丸ゴシック | Zen Maru Gothic | 700 | 28px | 1.4 | 0.08em | | `headline-md` | 帯見出し・シーン見出し | 丸ゴシック | Zen Maru Gothic | 700 | 22px | 1.5 | 0.1em | | `headline-sm` | カード内小見出し | 丸ゴシック | Zen Maru Gothic | 700 | 17px | 1.5 | 0.08em | | `body-md` | 説明文 | 丸ゴシック | Zen Maru Gothic | 500 | 14px | 1.7 | 0.06em | | `note` | 注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.0em | | `accent` | 英字見出し・Point 番号 | 欧文サンセリフ | Quicksand | 400 | 36px | 1.1 | 0.02em | | `label-button` | ボタン文字 | 欧文サンセリフ | Quicksand | 600 | 18px | 1.0 | 0.15em | - 和文はすべて丸ゴシックでやわらかく爽やかにする - 字間を広め(0.06〜0.1em)にとる - 強調したい語だけを青帯で反転させ、1 行に 1 か所までにする - 英字見出しや Point 番号は細身の丸いサンセリフで大きめにする - 『One Point』など小さな見出しは黄色の筆記体にする - 注釈は※番号で小さく添える - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。特長とラインナップは 3 列の小カード - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算） - 写真とテキストは左右交互に配置し、写真を画面端まで寄せる - タイプ別の紹介は太い色枠の白パネルで囲む - Point カードは 3 列で、細い水色線の枠に番号を上辺からはみ出させる - ラインナップは 3 列(最終行は中央寄せ)の縦長ピルカード - CTA は横幅 85% で中央に置く ## Elevation & Depth - 基本的に影なしのフラットデザイン - 商品カードにだけごく薄いぼかし影を付ける - 奥行きは写真のぼかしと水しぶきで出す ## Shapes - **角丸**: 小 4px ／ 中 16px ／ 大 60px。ボタンはピル型。 - **写真の切り抜き**: 人物写真は六角形に切り抜き水色の縁を付ける。商品は背景を抜いた切り抜き - **セクション境界**: 直線で背景色を切り替える。診断部分はちぎった紙のギザギザ縁 - 特長バッジは半透明白の六角形 - 診断タイプのラベルは上部が丸いタブ型にする - 商品カードは上下とも大きく丸めた縦長ピル型にし、下端に色帯を付ける - One Point カードは角丸 16px の水色グラデーション ## Components - **購入 CTA**（`button-primary`）: 黄色の横長ボタン。左にカートアイコン、中央に字間を広げたストア名 - **診断開始ボタン**（`button-diagnosis`）: 白いピル型ボタンで、黄色のずらし影と右向き矢印を付ける - **六角形特長バッジ**（`hex-badge`）: 半透明白の六角形に、特長を 2〜3 行の短い言葉で入れる - **青帯強調見出し**（`highlight-band`）: 青い帯に白文字を載せた 1 行のコピー。2 本並べて使う - **診断チェックリスト**（`checklist-paper`）: 生成りの紙にタイプ別の □ チェック項目を 3 つずつ並べ、間を区切り線で分ける - **タイプ結果カード**（`result-pill`）: 縦長ピル型のカード。タイプ色の地に、個数表示の白い枠と短い説明を入れる - **Point 番号カード**（`point-card`）: 細い線枠のカード。上辺に大きな番号を重ねて載せる - **ラインナップカード**（`product-card`）: 白の縦長ピルカード。商品画像・名前・色付きの MORE 帯を入れる - **One Point 補足カード**（`one-point`）: 水色グラデーションの角丸カード。黄色の筆記体ラベルと白文字に、右に写真を添える ## Do's and Don'ts **Do** - 水色・白・黄の 3 色を軸に、清涼感を保つ - 写真は六角形の枠に切り抜いて、統一感を出す - 訴求は短い言葉の 2〜3 行に区切る - タイプ別の色を、枠・ラベル・ボタンで一貫して使う - 購入 CTA を FV 直後と特長の後に繰り返し置く **Don't** - 暖色や黒を広い面に使わない - 角ばった太いゴシックで威圧感を出さない - 黄色を CTA 以外に多用しない - 濃い影や立体的な装飾を付けない - 注釈を省いて No.1 などの表記だけを置かない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（清涼感と実績を一目で伝える）: 空と水しぶきの写真の上に、大きな斜めの白キャッチと商品の斜め配置。左に月桂樹付きの実績マークと、六角形バッジ 3 つを縦に並べる 2. **ベネフィット要約・CTA**（使用感を言い切り、購入へ誘導する）: 青帯 2 本、大きな白見出し、商品の小画像、黄色の CTA、注釈 3. **診断導線バナー**（自分に合う商品探しへ誘う）: 青の枠付きバナーの中に商品画像を散らし、白いピル型ボタンを置く 4. **利用シーン**（使いたい場面を想起させる）: 三角形パターンの淡い水色地に、六角形の人物写真と青帯強調のコピーを左右交互に 6 つ並べる 5. **ビフォーアフター**（効果を視覚で示す）: 白カードの中に、水色とピンク地の比較写真を 2 枚並べる 6. **使い方**（使用方法と応用を示す）: 青グラデーション地に細い英字見出し、白帯の説明文、黄色のピル型タグ 2 つ、笑顔の人物写真 7. **香り訴求**（付加価値を伝える）: 柑橘の断面を透かした水色地に、白文字と商品画像 8. **特長まとめ・再 CTA**（成分の特長を示して再度購入を促す）: FV と同じビジュアルに、六角形の特長 3 つと黄色の CTA 9. **タイプ診断**（チェック式で最適なタイプへ振り分ける）: アーチ形の見出しから、ちぎれ紙のチェックリストと 3 色の結果ピルカードへつなぐ 10. **タイプ別商品紹介**（タイプごとのシリーズを紹介する）: タイプ色の枠の白パネルに、タブ見出し・商品集合写真・Point 3 列・写真とテキストの交互配置・One Point カードを入れる 11. **ラインナップ**（各商品の詳細ページへ送る）: 縦長ピルカードを 3 列で並べ、下端に色付きの MORE 帯 12. **フッター**（企業情報への導線）: 白地の中央にロゴ、ポリシーリンク、コピーライト ## Imagery - 空・雲・水しぶきを淡い水色で明るく撮り、ぼかして背景に使う - 人物は 20〜30 代の女性。自然光で汗を拭く・扇ぐなど生活のワンシーンを撮る - 商品は背景を抜いて斜めに大きく置き、ミストの噴射を添える - 果物やハーブは丸く切り抜き、パステル色の円の中に並べる - 背景には薄い三角形の幾何学パターンや柑橘の断面の透かしを敷く - 小さなキラキラや線の装飾を黄色・水色で添える - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 画像はないため、PC では中央に 480〜600px のコンテンツ列を置く推奨 - PC の左右余白は水色グラデーションの背景で埋める - PC の利用シーンは写真とテキストの左右配置を広げてもよい - PC のラインナップは 4〜5 列まで増やせる - CTA は最大幅 400px 程度で中央に置く ## 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-13223c64`（元 LP の URL から採番） - **元 LP**: https://lp.moist-diane.jp/069/?utm_source=Insta&utm_medium=banner&utm_campaign=B009_DianePB_image_click&utm_content=dryshampoo2025_banner_2504&utm_id=6716291021229&utm_term=6716316191429&fbclid=PAZXh0bgNhZW0BMABhZGlkAAAGH_GaEfUBpzyQ2eKV0okYJYGL_lNt9W6q-noE - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。