DESIGN.md — 水彩パステルの健康経営支援 LP（Watercolor Pastel Wellness Corporate LP）

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

Overview

• 業種: 医療・クリニック・ヘルスケア ／ 雰囲気: やさしい・柔らかい、ナチュラル、親しみ・手作り感、清潔・爽やか
• キーワード: 水彩・パステル・手描きイラスト・草花・余白・ゆったり
• 地の質感: 紙に水彩をにじませたような粒状感のあるグラデーション地。イラストもにじみと柔らかいエッジで描く
• 形: 大きな角丸カード、吹き出し型の円ボタン、波打つ色の境界
• 温度感: 春の日だまりのような暖かく明るい温度感

Colors

• 地色は上から空色→黄→若草色→白へ水彩グラデーションで移す
• 解説ボックスは黄・緑のパステルで交互に色分けする
• 文字は真っ黒を使わず墨茶で統一
• 見出しラベルだけ濃茶の面に白文字で締める
• CTAは他にない紫で一点だけ目立たせる
• 原色・ビビッドな色は使わない
• button-primary は文字 #FEF9FF × 背景 #A68FDE のコントラスト比が 2.66:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#7F5ECF、4.59:1）を使う。
• page-top は文字 #FFFEF5 × 背景 #3CCFB8 のコントラスト比が 1.92:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#208273、4.61:1）を使う。

Typography

• 細めの丸ゴシック1書体で全体を統一
• 字間0.1em前後を広めに取り、行間は2倍前後
• 本文は左揃え、大見出しは中央揃え
• お客様の声の要約は「」付きで色ボックスに入れる
• 英字の大見出しは極太丸ゴシックを紫グラデで塗る
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC はイラスト背景の上に本文を左右に散らす
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• 本文の左右余白は約20px
• カードは画面幅の約78%で中央寄せ
• 解説ボックスとお客様の声を1枚のカードの上下に組む
• 価値観は大きな漢字を左、説明文を右に置く横組み
• セクション間は余白を十分に取る

Elevation & Depth

• 影はほぼ使わずフラット
• カードは地色との色差だけで浮かせる
• PCの価値観円カードは白い滲んだぼかし縁で浮かせる

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 32px。ボタンはピル型。
• 写真の切り抜き: 写真は使わず、輪郭のない透過イラストを配置
• セクション境界: 水彩グラデーションと波打つ色の境界でつなぐ
• カードは大きめの角丸
• 見出しラベルは完全なピル型
• CTAは尻尾付きの吹き出し型の円
• 直線的な区切りは会社概要前の細線だけ

Components

• 水彩イラストFV（hero-watercolor）: 空色地に大きな人物と草花を描き、左上にキャッチを2行で置く
• 点線付き小見出し（dotted-heading）: 中央揃えの見出しの下に白い丸ドットを横一列に並べる
• 濃茶ピルラベル（label-pill）: 解説ボックスの上端に重ねる濃茶のピル型見出し
• 解説＋声カード（explain-card）: 上半分はパステル色の解説とイラスト、下半分は白地のお客様の声
• 声の要約ボックス（voice-quote）: 「」付きの要約をパステル色の角丸ボックスに入れる
• 一文字価値観行（value-row）: グラデーションで塗った大きな漢字一文字と短い説明文の横並び
• 吹き出し円CTA（button-primary）: 紫の水彩円に尻尾を付け、中央に白文字と白丸の矢印アイコンを置く
• 鳥型ページトップ（page-top）: 右下に固定する、ターコイズの鳥シルエット型ボタン

Do's and Don'ts

Do - 地色は水彩グラデーションで滑らかに移す - 草花・葉・小鳥のイラストを余白に散らす - 文字は墨茶の丸ゴシックで字間を広めに取る - 解説ボックスはパステル色を交互に使う - CTAは吹き出し型の円にして一点だけ置く

Don't - 写真や実写の人物を使わない - 黒文字や太すぎる見出しで硬くしない - 角張った四角ボタンや強い影を使わない - ビビッドな赤・原色のCTAを使わない - 余白を詰めて情報を詰め込まない

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ファーストビュー（団体の想いを情緒的に伝える）: 空色地に水彩の人物イラスト、左上にロゴとキャッチ2行
2. 理念メッセージ（目指す姿と事業の姿勢を語る）: 黄色地に長めの本文を広い行間で2段落
3. 課題と考え方（健康と組織の関係を示す）: 点線付き中央見出しと短い本文
4. 事業概要（提供プログラムの全体像を伝える）: 淡いクリームの大角丸カードに見出しと本文
5. 手法解説とお客様の声①（1つ目の手法と効果を示す）: 濃茶ラベル付きの黄色ボックス＋イラスト、下に白地の声
6. 手法解説とお客様の声②（2つ目の手法と効果を示す）: 同じ型を緑色ボックスで繰り返す
7. 大切にしている価値観（団体の価値観を3つ示す）: 白地に中央見出し、グラデ漢字一文字と説明を3行並べる
8. 会社概要（団体情報を示す）: 細線の下に項目名と内容を縦積みで並べる
9. 採用案内CTA（採用ページへ誘導する）: 紫グラデの英字大見出しに人物イラスト、本文と吹き出し円ボタン
10. フッター（ロゴと規約リンク）: 草花イラストでロゴを挟み、鳥型ページトップを右下に置く

Imagery

• 水彩ブラシで描いた、輪郭線のないにじみ表現のイラスト
• 人物は目を閉じた穏やかな笑顔、シンプルな丸い顔
• 葉・花・てんとう虫・小鳥・ドットを余白に散らす
• 食べ物は白い丸皿に載せたように手描きする
• 紙のような粒状テクスチャを地とイラストに薄く乗せる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCはFVイラストを全幅に大きく広げ、本文を左右に散らして配置
• PCの解説カードはテキストとイラストを横並びにする
• PCの声は左に人物イラスト、右に本文
• PCの価値観は3つの白い円カードを横に並べる
• PCの会社概要は左に見出し、右に表組み
• PCの採用CTAは本文の右に円ボタンを置く

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 行書くと起動時に読み込まれる。