--- version: alpha name: Pop Color Pucks on Gray Studio Haircare LP description: 明るいグレーのスタジオ背景に、ビビッドな多色の丸い容器を浮かせて配置した男性用ヘアワックスの LP。ピンクの抽象ペイント調ビジュアルと黒い太字ゴシック、欧文ジオメトリック体の大見出しを組み合わせ、ポップでクールな印象にまとめている。 colors: background: '#D2D2D2' background-alt: '#F1F1F1' surface: '#FFFFFF' primary: '#FA1C89' text: '#000000' cta: '#010101' on-cta: '#FDFDFD' tint-1: '#F08090' dark-section: '#A73F5D' accent-1: '#E3DD22' accent-2: '#4B9AD1' accent-3: '#3CB6AD' text-muted: '#969695' line: '#FFFFFF' typography: display: fontFamily: Nunito Sans fontSize: 62px fontWeight: 400 lineHeight: 1.0 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 48px fontWeight: 900 lineHeight: 1.15 headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em accent: fontFamily: Montserrat fontSize: 28px fontWeight: 700 lineHeight: 1.0 body-md: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.02em note: fontFamily: Nunito Sans fontSize: 8px fontWeight: 600 lineHeight: 1.4 label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.1em headline-sm: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em rounded: sm: 4px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 16px section: 80px 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: 40px badge-new: backgroundColor: '{colors.primary}' typography: '{typography.note}' height: 24px badge-renewal: textColor: '{colors.surface}' typography: '{typography.note}' height: 24px point-item: textColor: '{colors.text}' typography: '{typography.headline-md}' height: 80px label-black: backgroundColor: '{colors.text}' typography: '{typography.label-button}' height: 22px positioning-chart: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 360px video-tabs: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 300px faq-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 50px diagnosis-banner: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-lg}' rounded: '{rounded.sm}' height: 200px --- # DESIGN.md — グレー地×多色パックの男性用ヘアワックス LP（Pop Color Pucks on Gray Studio Haircare LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ヘアケア・ボディケア ／ **雰囲気**: ポップ・元気、クール・先進的、力強い・インパクト、シンプル・ミニマル - **キーワード**: スタジオグレー・多色の丸パック・浮遊感・ピンクの抽象ペイント・欧文大見出し・黒ラベル - **地の質感**: マットでフラットな地に、ブラーをかけた浮遊物と筆致の荒い抽象ペイントを重ねる - **形**: 円形の容器が主役。UI は角丸小さめの白カードと黒いラベル帯 - **温度感**: ややクールなニュートラルに、ホットピンクで熱を足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#D2D2D2` | ページの基本地（ライトグレー） | 30% | 画素の実測 | | `background-alt` | `#F1F1F1` | チャート・スプレー紹介の明るい地 | 9% | 画素の実測 | | `surface` | `#FFFFFF` | FAQカード・ロゴ帯の白 | 9% | 画素の実測 | | `primary` | `#FA1C89` | ブランドのホットピンク（New バッジ・強調） | 4% | 画素の実測 | | `text` | `#000000` | 見出し・本文の黒 | 4% | 画素の実測 | | `cta` | `#010101` | 診断ボタンの黒ピル | 1% | 画素の実測 | | `on-cta` | `#FDFDFD` | 黒ボタン上の白文字 | 0% | 画素の実測 | | `tint-1` | `#F08090` | 動画セクションのピンク地 | 6% | 推定 | | `dark-section` | `#A73F5D` | 動画プレイヤー周りの深いローズ | 3% | 画素の主要色に補正 | | `accent-1` | `#E3DD22` | 製品色のイエロー | 2% | 画素の実測 | | `accent-2` | `#4B9AD1` | 製品色のブルー | 3% | 画素の実測 | | `accent-3` | `#3CB6AD` | 製品色のティール | 2% | 画素の実測 | | `text-muted` | `#969695` | チャートの軸ラベル帯グレー | 1% | 画素の実測 | | `line` | `#FFFFFF` | 方眼・Renewal枠線 | 0% | 画素の主要色に補正 | - 地はほぼライトグレー一色で通し、主役の多色容器を引き立てる - ピンクは New バッジ・強調ラベル・動画セクション地に限定 - 黒は見出し文字・ラベル帯・CTA ボタンに使う - 製品カラー（黄・青・ティール・オレンジ等）は容器写真のみで UI には使わない - 白はカードとロゴ帯、Renewal の枠線に使う ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 英字の大見出し（ラインナップ・FAQ） | 欧文サンセリフ | Nunito Sans | 400 | 62px | 1.0 | 0.02em | | `headline-lg` | No.1 訴求の大コピー | ゴシック | Noto Sans JP | 900 | 48px | 1.15 | 0.0em | | `headline-md` | 特長の見出し | ゴシック | Noto Sans JP | 700 | 18px | 1.4 | 0.02em | | `accent` | POINT 番号の大数字 | 欧文サンセリフ | Montserrat | 700 | 28px | 1.0 | 0.0em | | `body-md` | 本文・説明 | ゴシック | Noto Sans JP | 500 | 11px | 1.7 | 0.02em | | `note` | 注釈・製品名キャプション | 欧文サンセリフ | Nunito Sans | 600 | 8px | 1.4 | 0.0em | | `label-button` | ボタン・ラベル帯 | ゴシック | Noto Sans JP | 700 | 14px | 1.2 | 0.1em | | `headline-sm` | FAQ の質問文 | ゴシック | Noto Sans JP | 700 | 10px | 1.5 | 0.02em | - 英字の大見出しは細めの丸みあるサンセリフで大きく組む - 日本語の訴求コピーは極太ゴシックで行を詰める - POINT 番号は小さな斜体英字ラベルの下に大数字を置く - 本文は小さめで行間を広く取る - キャッチは縦書きで写真の端に置く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。ラインナップは 3 列の千鳥配置 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算） - 特長は左に番号、右に見出しと本文の 2 段組 - 容器写真は画面端からはみ出すように浮かせる - ラインナップは中央列を半段ずらして千鳥にする - FAQ はカードを 8px 間隔で縦に積む ## Elevation & Depth - 基本はフラットで影は使わない - 容器写真はソフトな落ち影と被写界深度ブラーで奥行きを出す - 動画タブカードは下に濃いローズのずらし影を付ける ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。 - **写真の切り抜き**: 容器は切り抜きで円形のまま浮遊配置。人物は角なしの全幅 - **セクション境界**: 抽象ペイントの筆致や、ゆるい弧でセクションをつなぐ - CTA は黒のピル型に右向き矢印 - ラベルは角なしの黒帯 - バッジは角なしの四角（New は塗り、Renewal は白枠） ## Components - **診断ボタン**（`button-primary`）: 黒のピル型に白文字と右矢印 - **新商品バッジ**（`badge-new`）: ピンク塗りの四角に白い太字の英字と感嘆符 - **リニューアルバッジ**（`badge-renewal`）: 白い細枠のみの四角に白い英字 - **POINT 項目**（`point-item`）: 小さな斜体の英字ラベルと大数字、太字見出し、小さな本文 - **黒ラベル帯**（`label-black`）: チャートの軸名やスプレー名に使う黒地白文字の帯 - **ポジショニングマップ**（`positioning-chart`）: 方眼の地に十字軸を引き、グレーのピルに容器を並べる - **動画タブ**（`video-tabs`）: 白とグレーの 2 タブの下に埋め込み動画を置く白いカード - **FAQ アコーディオン**（`faq-card`）: 白カードに灰色の丸い Q アイコン、質問文、右端に＋ - **診断バナー**（`diagnosis-banner`）: 黒い太枠と黒い見出し帯、方眼地にキャラクターイラストと CTA ## Do's and Don'ts **Do** - 地をグレーで揃え、製品色だけを鮮やかに見せる - 容器は複数個を大小・ブラー違いで浮かせる - 英字の大見出しで各セクションを区切る - ピンクは要所だけに使う **Don't** - UI パーツを製品色で塗り分けない - カードに強い影や大きな角丸を付けない - グラデーション地を多用しない - 本文を大きくしすぎない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（タレントで世界観を伝える）: ピンクの抽象ペイントを背景に人物を全幅で置き、縦書きの短いキャッチを左上へ 2. **ロゴとカラー一覧**（シリーズの多色展開を示す）: 白地に欧文ロゴと小さな色丸を横一列に並べる 3. **実績訴求**（売上 No.1 の信頼を示す）: グレー地に浮遊する容器、極太黒文字の大コピーと小さな注釈 4. **特長**（4 つの強みを説明）: 容器の群れのビジュアルの下に POINT 1〜4 を縦に並べる 5. **動画**（CM を見せる）: ピンクのペイント地に 2 タブの動画カード 6. **選び方マップ**（仕上がり別に商品を選ばせる）: 方眼地の 2 軸チャートに容器を配置し、黒ラベルで軸名 7. **関連商品**（スプレーを紹介）: 2 列で黒ラベルの商品名、短い説明、縦長のボトル写真 8. **診断バナー**（タイプ診断へ誘導）: 黒枠のバナーにイラストと黒ピルの CTA 9. **商品ラインナップ**（全商品を一覧）: 英字大見出しの下に容器の天面を千鳥配置し、バッジと英字の製品名を付ける 10. **よくある質問**（不安を解消）: 英字見出しの下に白いアコーディオンカードを 8 個 ## Imagery - 容器は真上やや斜めから撮り、白背景で切り抜く - 浮遊感は大小のスケール差とピントぼけで表現 - ピンク・紫・白の荒い筆致の抽象ペイントを背景や区切りに使う - 人物はスーツ姿でポーズを取らせ、ペイント背景と合成する - 診断はフラットな線画のキャラクターイラスト - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はファーストビューを横長にし、ロゴと色丸を一行の帯にまとめる - 特長は左にテキスト、右に容器ビジュアルの 2 カラム - 選び方マップとスプレー紹介を横並びにする - ラインナップは 5 列×2 段の整列配置 - FAQ は中央の幅狭カラムに置く ## 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-249e9ac6`（元 LP の URL から採番） - **元 LP**: https://www.gatsby.jp/product/hairstyling/moving-rubber/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（11/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。