DESIGN.md — 水色×生成りの絵本調ヘルスケアアプリ LP（Pastel Watercolor Healthcare App LP）

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

Overview

• 業種: 医療・クリニック・ヘルスケア ／ 雰囲気: やさしい・柔らかい、ナチュラル、信頼・誠実、清潔・爽やか
• キーワード: 絵本調イラスト・空色グラデーション・生成り地・白カード・点線区切り・余白多め
• 地の質感: ざらっとした粒状ノイズ入りのフラットイラスト。面は無地でやわらかい
• 形: 角丸カード、ピル型ボタン、円形の背景に乗せたアプリ画面
• 温度感: やや涼しめの水色に、生成りと黄色で温かみを足した中間温度

Colors

• ファーストビューとフッターは水色グラデの空と黄色い道のイラストで挟む
• セクション地は白と生成りを交互に切り替える
• 見出し・番号・リンクはティール系で統一する
• ボタンは強い色を使わず淡い生成りや白のピルで控えめに
• ビジョン部分のみ淡ピンクの雲形を使い、温かさを出す
• 原色や彩度の高い赤は使わない

Typography

• 見出しは中央揃えで、上に小さな欧文筆記体ラベルを添える
• 本文は行間 2.0 前後とゆったり組む
• 文字間はやや広めに取り、柔らかく見せる
• 太字は見出しのみ、本文は 400 で軽く
• ブランド名の後に ® を小さく添える程度の装飾に留める
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特長は画像→テキストの縦積み、カードは 1〜2 列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• セクション間は広めの余白を取る
• コンセプト文は短い段落を点線で区切り縦に並べる
• 特長はアプリ画面を水色の円の上に置き、番号+見出し+本文を横に添える
• 導入の流れは番号付き 6 ステップを横並び（SP は縦）
• FAQ はカテゴリボタンを並べ一覧ページへ誘導する

Elevation & Depth

• カードは影なしか極薄の影で平面的に
• アプリ画面モックだけにわずかな影を付けて浮かせる
• 立体感はイラストの重なりで表現する

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 記事写真は角丸長方形、アプリ画面は角丸スマホ枠を円形背景に重ねる
• セクション境界: 直線で地色を切り替え、FV・フッターは山と丘のイラストの曲線で区切る
• ボタンは全てピル型で右に矢印
• ビジョンの要素は雲形・ふくらんだ不定形
• カードは角丸 12px 前後
• 細い点線を区切りに使う

Components

• ピル型ボタン（button-pill）: 淡色地にティール文字と右矢印、左に小さな葉アイコン
• 筆記体ラベル付き見出し（heading-script）: 小さな欧文筆記体の上に太めの和文見出しを中央配置
• 円形背景の機能紹介（feature-circle）: 淡水色の円にアプリ画面を重ね、#番号と見出し・本文を添える
• 活用ポイントカード（info-card）: 生成り地上の白カード。上にイラスト、下に見出しと箇条書き
• 雲形ビジョン吹き出し（vision-cloud）: 木のイラストを囲む淡ピンクの雲形に見出しと短文
• 導入ステップ（step-item）: 細い縦線で区切った番号+見出し+アイコン+説明
• お知らせカード（news-card）: 淡水色地に白いカテゴリタグ、日付、タイトル、右矢印
• FV右上の丸いバッジ（floating-bubble）: 白い丸に鳥や葉のイラストを添えた補足リンク

Do's and Don'ts

Do - イラストは粒状ノイズのある淡いフラット調で統一する - 白と生成りの地を交互に使ってリズムを作る - 見出しには必ず筆記体の欧文ラベルを添える - 余白を広く取り、情報を詰め込まない - ボタンはピル型で控えめな色にする

Don't - 彩度の高い赤やオレンジの CTA を使わない - 太く重い見出し書体を使わない - 濃い影やグラデーションボタンを使わない - 写真を全面に敷き詰めない（写真は記事一覧のみ） - 黒ベタのセクションを作らない

Page Structure

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

1. ファーストビュー（サービスの立ち位置とアプリ画面を見せる）: 水色グラデの空、雲と山、中央に伸びる黄色い道のイラスト。中央にロゴ・コピー・スマホ画面
2. コンセプト（理念を伝える）: 白地に短い段落を点線で区切って縦に並べ、両脇に植物イラスト。最後にピルボタン
3. 特長（アプリでできることを 4 つ紹介）: 円形背景+アプリ画面と、#番号付きの見出し・本文を交互に配置
4. 活用提案（法人・自治体での活用を示す）: 生成り地に白カードを複数グリッドで配置、各カードにイラスト
5. ビジョン（目指す未来を描く）: 中央に花の木イラスト、周囲に淡ピンクの雲形吹き出し 4 つ
6. 導入の流れ（導入手順を示す）: 6 ステップを番号とアイコンで横並び、細線で区切る
7. よくある質問（疑問を解消）: 白い大きな角丸カードにカテゴリボタンを並べ、一覧ボタンへ
8. コラム一覧（関連情報で信頼を補強）: 写真付きの記事カード 4 枚とタグ
9. お知らせ（最新の活動を示す）: 淡水色のカードを 2 列で並べる
10. フッター・問い合わせ（問い合わせ導線と関連団体ロゴ）: 生成り地に問い合わせバナー、ロゴ群、下部に丘と山のイラスト

Imagery

• 空・山・丘・花を描いた粒状テクスチャのフラットイラスト
• 白い小花や葉、飛ぶ鳥をアクセントに散らす
• アプリ画面はスマホ枠付きのモックで見せる
• ステップやカードは細線のシンプルアイコンや小さな手描き風イラスト
• 記事用写真は自然光の明るい生活シーン
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP では特長の円形画像を上、テキストを下に縦積み
• 活用カード・お知らせは 1 列に
• 導入ステップは縦に並べ、番号を左に
• FV のイラストは縦長にトリミングし、スマホ画面を中央に
• FAQ カテゴリボタンは 2 列グリッド

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