--- version: alpha name: Watercolor Pastel Wellness Corporate LP description: 空色から黄色、若草色へ移る水彩グラデーションの地に、手描き風の人物・草花イラストを散らした健康支援団体の LP。丸みのある細いゴシックと広い字間で、やさしく穏やかな印象にまとめている。 colors: primary: '#FAE565' secondary: '#8BD3AD' background: '#FFFFFF' background-alt: '#CDEAF8' tint-1: '#FFEA84' tint-2: '#A5EAAB' surface: '#FDF4C4' dark-section: '#3A3428' on-dark: '#FFFEF5' text: '#4A4640' cta: '#A68FDE' on-cta: '#FEF9FF' accent-1: '#3CCFB8' line: '#B1B3A4' cta-accessible: '#7F5ECF' accent-1-accessible: '#208273' typography: display: fontFamily: M PLUS Rounded 1c fontSize: 26px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.12em headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 28px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.15em headline-md: fontFamily: M PLUS Rounded 1c fontSize: 21px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.08em headline-sm: fontFamily: M PLUS Rounded 1c fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em body-md: fontFamily: M PLUS Rounded 1c fontSize: 15px fontWeight: 400 lineHeight: 2.1 letterSpacing: 0.1em note: fontFamily: M PLUS Rounded 1c fontSize: 13px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.05em accent: fontFamily: M PLUS Rounded 1c fontSize: 40px fontWeight: 800 lineHeight: 1.2 label-button: fontFamily: M PLUS Rounded 1c fontSize: 24px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.15em rounded: sm: 8px md: 16px lg: 32px full: 999px spacing: unit: 8px card: 24px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' hero-watercolor: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.display}' height: 600px dotted-heading: textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 50px label-pill: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 36px explain-card: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 1100px voice-quote: backgroundColor: '{colors.tint-2}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 70px value-row: textColor: '{colors.text}' typography: '{typography.accent}' height: 120px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 270px page-top: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.note}' height: 90px --- # DESIGN.md — 水彩パステルの健康経営支援 LP（Watercolor Pastel Wellness Corporate LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 医療・クリニック・ヘルスケア ／ **雰囲気**: やさしい・柔らかい、ナチュラル、親しみ・手作り感、清潔・爽やか - **キーワード**: 水彩・パステル・手描きイラスト・草花・余白・ゆったり - **地の質感**: 紙に水彩をにじませたような粒状感のあるグラデーション地。イラストもにじみと柔らかいエッジで描く - **形**: 大きな角丸カード、吹き出し型の円ボタン、波打つ色の境界 - **温度感**: 春の日だまりのような暖かく明るい温度感 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FAE565` | ブランドの黄（FV〜理念の地） | 10% | 画素の実測 | | `secondary` | `#8BD3AD` | 若草色（中盤の地） | 8% | 画素の実測 | | `background` | `#FFFFFF` | ページ後半の白地 | 44% | 画素の実測 | | `background-alt` | `#CDEAF8` | FVの空色 | 5% | 画素の実測 | | `tint-1` | `#FFEA84` | 解説ボックス黄 | 6% | 画素の実測 | | `tint-2` | `#A5EAAB` | 解説ボックス緑 | 5% | 画素の実測 | | `surface` | `#FDF4C4` | 大カードの淡いクリーム | 3% | 画素の実測 | | `dark-section` | `#3A3428` | 見出しラベルの濃茶 | 0% | 推定 | | `on-dark` | `#FFFEF5` | ラベル上の白文字 | 0% | 画素の実測 | | `text` | `#4A4640` | 本文・見出しの墨茶 | 3% | 推定 | | `cta` | `#A68FDE` | 採用CTAの紫 | 2% | 推定 | | `on-cta` | `#FEF9FF` | CTA上の白文字 | 0% | 画素の実測 | | `accent-1` | `#3CCFB8` | ページトップのターコイズ | 0% | 推定 | | `line` | `#B1B3A4` | 区切り線のベージュ | 0% | 画素の主要色に補正 | | `cta-accessible` | `#7F5ECF` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#208273` | AA を満たす補正値（計算） | | 計算 | - 地色は上から空色→黄→若草色→白へ水彩グラデーションで移す - 解説ボックスは黄・緑のパステルで交互に色分けする - 文字は真っ黒を使わず墨茶で統一 - 見出しラベルだけ濃茶の面に白文字で締める - 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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのキャッチ | 丸ゴシック | M PLUS Rounded 1c | 500 | 26px | 1.7 | 0.12em | | `headline-lg` | セクション大見出し（中央揃え） | 丸ゴシック | M PLUS Rounded 1c | 500 | 28px | 1.6 | 0.15em | | `headline-md` | カード内見出し・会社概要 | 丸ゴシック | M PLUS Rounded 1c | 500 | 21px | 1.6 | 0.08em | | `headline-sm` | ラベル見出し・小見出し | 丸ゴシック | M PLUS Rounded 1c | 700 | 17px | 1.5 | 0.05em | | `body-md` | 本文 | 丸ゴシック | M PLUS Rounded 1c | 400 | 15px | 2.1 | 0.1em | | `note` | お客様の所属・フッター | 丸ゴシック | M PLUS Rounded 1c | 500 | 13px | 1.7 | 0.05em | | `accent` | 価値観の一文字漢字（グラデ） | 丸ゴシック | M PLUS Rounded 1c | 800 | 40px | 1.2 | 0.0em | | `label-button` | 円形CTAの文字 | 丸ゴシック | M PLUS Rounded 1c | 400 | 24px | 1.5 | 0.15em | - 細めの丸ゴシック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 ```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-f2623e1c`（元 LP の URL から採番） - **元 LP**: https://focusacademy.or.jp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。