--- version: alpha name: Sunny Yellow Hand-Drawn Family Haircare LP description: 全面を明るい黄色で塗り、手描き風の文字と素朴な線画イラストで家族の日常を描くブランドLP。前半は詩のような短文を縦に並べる。後半は製品写真と白い角丸ボタンで情報を整理する。最後は白とグレーのフッターで締める。 colors: primary: '#FBD840' text: '#2A2A22' accent-1: '#014356' tint-1: '#FDEB9E' secondary: '#6CC4C5' surface: '#FEFEFE' cta: '#1778A2' on-cta: '#FFFFFF' background: '#FFFFFF' background-alt: '#F6F6F4' line: '#E0E8E1' text-muted: '#5C5C5C' accent-2: '#254E52' typography: display: fontFamily: Yomogi fontSize: 56px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.1em headline-lg: fontFamily: Yomogi fontSize: 32px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em headline-sm: fontFamily: Yomogi fontSize: 22px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em body-lg: fontFamily: Klee One fontSize: 17px fontWeight: 600 lineHeight: 2.0 letterSpacing: 0.1em body-md: fontFamily: Zen Kaku Gothic New fontSize: 14px fontWeight: 500 lineHeight: 2.1 letterSpacing: 0.03em note: fontFamily: Zen Kaku Gothic New fontSize: 10px fontWeight: 500 lineHeight: 1.6 label-button: fontFamily: Zen Kaku Gothic New fontSize: 15px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.05em accent: fontFamily: Montserrat fontSize: 26px fontWeight: 300 lineHeight: 1.2 letterSpacing: 0.15em rounded: sm: 4px md: 14px lg: 20px full: 999px spacing: unit: 8px card: 16px section: 90px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' hand-heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 60px dash-subheading: textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 32px video-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.lg}' height: 170px poster-card: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.lg}' height: 165px feature-badge: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 75px button-detail: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 30px button-shop: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 95px footer-link-button: backgroundColor: '{colors.surface}' textColor: '{colors.text-muted}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 42px --- # DESIGN.md — 黄色地×手描き文字の家族向けヘアケアLP（Sunny Yellow Hand-Drawn Family Haircare LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ヘアケア・ボディケア ／ **雰囲気**: 親しみ・手作り感、やさしい・柔らかい、ポップ・元気、ナチュラル - **キーワード**: 黄色一面・手描き文字・線画イラスト・家族の日常・泡の水玉・余白多め - **地の質感**: フラットな黄色地。紙に描いたようなかすれた筆跡のイラストと文字を重ねる - **形**: 角丸のカードと白い長方形ボタン。小さな白い丸（泡）を見出しの周りに散らす - **温度感**: 暖かく陽だまりのような明るさ ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FBD840` | ページ全体の黄色地 | 58% | 画素の実測 | | `text` | `#2A2A22` | 手描き見出し・本文の黒 | 3% | 推定 | | `accent-1` | `#014356` | メインタイトルの紺青文字 | 0% | 画素の実測 | | `tint-1` | `#FDEB9E` | 特長バッジの淡い黄 | 4% | 画素の実測 | | `secondary` | `#6CC4C5` | ポスターカード下部のターコイズ | 2% | 画素の実測 | | `surface` | `#FEFEFE` | カード・詳細ボタンの白 | 14% | 画素の実測 | | `cta` | `#1778A2` | 購入ボタン帯の青 | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | 購入ボタン上の白文字 | 0% | 画素の主要色に補正 | | `background` | `#FFFFFF` | フッター上部の白地 | 5% | 画素の実測 | | `background-alt` | `#F6F6F4` | フッターの薄グレー地 | 5% | 画素の実測 | | `line` | `#E0E8E1` | カード枠・フッター罫線 | 0% | 画素の主要色に補正 | | `text-muted` | `#5C5C5C` | フッター文字・SNS円アイコンのグレー | 0% | 画素の実測 | | `accent-2` | `#254E52` | フッターナビの濃い青緑文字 | 0% | 画素の実測 | - メインコンテンツは全部黄色の一面塗り。セクションごとに地の色を変えない - 文字は黒に近い墨色を基本にする。タイトルの一語だけ紺青で強調する - 白はカード・ボタン・動画枠に限定し、黄色地に浮かせる - ターコイズはポスターカードの下半分など、イラスト背景にだけ使う - 購入導線だけ青い帯にして、黄色の中で目立たせる - フッターから下は白と薄グレーに切り替え、企業情報のトーンにする ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの大タイトル（3行縦積み） | 手書き・筆 | Yomogi | 700 | 56px | 1.4 | 0.1em | | `headline-lg` | セクション見出し（泡の装飾つき） | 手書き・筆 | Yomogi | 700 | 32px | 1.4 | 0.08em | | `headline-sm` | 左右に横棒が付く小見出し | 手書き・筆 | Yomogi | 700 | 22px | 1.4 | 0.05em | | `body-lg` | FVの詩のような手書き本文 | 手書き・筆 | Klee One | 600 | 17px | 2.0 | 0.1em | | `body-md` | 製品説明・成分の本文（中央揃え） | ゴシック | Zen Kaku Gothic New | 500 | 14px | 2.1 | 0.03em | | `note` | 注釈・イメージ表記 | ゴシック | Zen Kaku Gothic New | 500 | 10px | 1.6 | 0.0em | | `label-button` | 詳細ボタン・購入ボタン | ゴシック | Zen Kaku Gothic New | 500 | 15px | 1.4 | 0.05em | | `accent` | SHAREなどの欧文ラベル | 欧文サンセリフ | Montserrat | 300 | 26px | 1.2 | 0.15em | - 見出しはすべて手描き風書体を使う。整ったゴシックは使わない - FVの本文は短い文を1〜3行のまとまりにし、段落間を大きく空ける - 説明文はゴシックで中央揃え。行間は2倍前後とる - 小見出しは左右に短い横棒「— 〜 —」を付ける - 太字や色文字で強調せず、言葉の間合いで読ませる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。製品画像は横 3〜4 点並び - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 90px、基本単位 8px、カード内 16px（375px 幅換算） - FV本文は左揃えで、画面幅の約70%を中央に置く - イラストは本文の左右の余白に散らす - ギャラリーは横スクロールのカルーセルにし、ドットと一時停止ボタンを付ける - 特長バッジは2列のグリッドに並べる - 製品ブロックは小見出し→画像→詳細ボタンの順に縦に積む ## Elevation & Depth - 影はほぼ使わず、フラットにする - カードは細い濃グレーの枠線で輪郭をとる - 製品写真には自然な接地影だけ残す ## Shapes - **角丸**: 小 4px ／ 中 14px ／ 大 20px。ボタンは角丸の長方形。 - **写真の切り抜き**: 製品は切り抜き。動画とポスターは角丸の長方形に収める - **セクション境界**: 黄色地の中は区切り線なしで余白だけで分ける。フッターで直線的に白へ切り替える - 詳細ボタンは白の長方形で角丸は小さくし、右端に矢印を付ける - 特長バッジは角丸を大きくした淡黄色のタイルにする - 見出しの周りに大小の白丸（泡）を不規則に配置する ## Components - **泡付き手描き見出し**（`hand-heading`）: 手描き文字の見出しの周りに、黒い縁取りの白丸を数個散らす - **横棒小見出し**（`dash-subheading`）: 左右に短い横棒を付けた手描きの小見出し - **動画サムネカード**（`video-card`）: 白地で角丸、細い枠線の横長カード。中央に円形の再生ボタンを置き、下にタイトルとドットナビを付ける - **ポスターカード**（`poster-card`）: 縦長の角丸カード。上半分は白地に手書きの一言、下半分はターコイズ地に線画を入れ、隅に拡大アイコンを置く - **特長バッジ**（`feature-badge`）: 淡黄色の角丸タイルに手描き文字で特長を入れ、2列で並べる - **詳細ボタン**（`button-detail`）: 白い長方形に黒文字と右矢印を入れたボタン。製品画像の下に中央配置する - **オンラインショップCTA**（`button-shop`）: 上段は淡黄色地にカートアイコンと手描き文字、下段は青い帯に白文字と矢印。2段構成のバナー型ボタン - **フッター枠ボタン**（`footer-link-button`）: グレー地に置く、白地でグレー枠の角丸リンクボタン ## Do's and Don'ts **Do** - 黄色地を最後のCTAまで途切れさせない - 人物イラストはかすれた線と少ない色で、日常の一場面を描く - 見出しは手描き文字にして、泡の白丸を添える - 製品情報は中央揃えにして、余白を大きくとる - ボタンは白か青の帯に限定し、目的をはっきりさせる **Don't** - グラデーションや強い影を使わない - 見出しに硬いゴシックや明朝を使わない - 黄色以外の色をセクション背景に挟まない - 赤や派手な色の値引きバッジを置かない - 本文を詰めて長い段落にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（ブランドの世界観を情緒的に伝える）: 黄色地に手描きの大タイトルを3行で置き、周りに家族の線画イラストを散らす 2. **ブランドメッセージ**（家族の日常への共感を呼ぶ）: 手書き本文の短文を段落ごとに並べ、左右にイラストを置く。最後に泡のイラストで締める 3. **CMギャラリー**（動画で世界観を補強する）: 角丸の動画カードを横スクロールで見せ、ドットと一時停止ボタンを付ける 4. **ポスターギャラリー**（短いコピーとイラストで共感を広げる）: 白×ターコイズの縦長カードを横に流す 5. **ブランド紹介**（製品の位置づけを説明する）: 手描き見出しの下に製品の切り抜き写真を置き、中央揃えの説明文を続ける 6. **成分・効能**（機能面の信頼を示す）: 横棒小見出しと植物の線画を置き、成分を中央揃えで書いて注釈を添える 7. **特長バッジ**（処方の特徴を一目で伝える）: 淡黄色の角丸タイルを2×2で並べる 8. **製品ラインナップ**（シリーズごとに製品を紹介する）: シリーズ名の小見出し、製品の並び写真、白い詳細ボタンを1組にして繰り返す 9. **新製品バナー**（関連商品へ誘導する）: 横長の写真バナーを1枚置く 10. **購入CTA**（オンライン購入へ送る）: 淡黄色と青帯の2段バナーボタンを置く 11. **SNSシェア・フッター**（SNSと企業サイトへつなぐ）: 白地に細い欧文見出しと円形SNSアイコンを置く。その下は薄グレー地にナビ、枠ボタン、リンク格子を並べる ## Imagery - 人物は太さの揺れるかすれた線画にし、少ない色をずらして塗った絵本調にする - 家族が遊ぶ・走る・洗う日常の動きを小さく描き、余白に点在させる - 泡は白い雲形と、黒縁の白い小丸で表す - 植物成分は色鉛筆風のボタニカルイラストにして、イメージ表記を添える - 製品は白背景で撮った切り抜き写真にし、黄色地に直接置く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでも黄色地の1カラム中央寄せを保ち、コンテンツ幅を約60%に絞る - PCでは動画カードを2枚並べ、ポスターは画面幅いっぱいに横に流す - PCでは成分の2ブロックを横並びにし、特長バッジは4つを1行に並べる - PCでは製品ラインナップを2列グリッドにする - PCのフッターナビは4列の横並びにする ## 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-f71cd4b1`（元 LP の URL から採番） - **元 LP**: https://www.kao.co.jp/merit/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。