DESIGN.md — 黄色地×手描き文字の家族向けヘアケアLP（Sunny Yellow Hand-Drawn Family Haircare LP）

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

Overview

• 業種: ヘアケア・ボディケア ／ 雰囲気: 親しみ・手作り感、やさしい・柔らかい、ポップ・元気、ナチュラル
• キーワード: 黄色一面・手描き文字・線画イラスト・家族の日常・泡の水玉・余白多め
• 地の質感: フラットな黄色地。紙に描いたようなかすれた筆跡のイラストと文字を重ねる
• 形: 角丸のカードと白い長方形ボタン。小さな白い丸（泡）を見出しの周りに散らす
• 温度感: 暖かく陽だまりのような明るさ

Colors

• メインコンテンツは全部黄色の一面塗り。セクションごとに地の色を変えない
• 文字は黒に近い墨色を基本にする。タイトルの一語だけ紺青で強調する
• 白はカード・ボタン・動画枠に限定し、黄色地に浮かせる
• ターコイズはポスターカードの下半分など、イラスト背景にだけ使う
• 購入導線だけ青い帯にして、黄色の中で目立たせる
• フッターから下は白と薄グレーに切り替え、企業情報のトーンにする

Typography

• 見出しはすべて手描き風書体を使う。整ったゴシックは使わない
• 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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。