DESIGN.md — 淡い水彩グラデと有機曲線の介護ホームLP（Soft Watercolor Blob Senior Care LP）

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

Overview

• 業種: 医療・クリニック・ヘルスケア ／ 雰囲気: やさしい・柔らかい、上品・高級、信頼・誠実、ナチュラル
• キーワード: 水彩ぼかし・有機的な曲線・明朝見出し・広い余白・パステル・白いピルボタン
• 地の質感: 白地に、にじんだ水彩のようなピーチ・黄・ミント・ピンクの大きなぼかしを背景に浮かべる。マットで透明感がある
• 形: 写真はアメーバ状の不定形ブロブで切り抜く。カードは大きめ角丸、ボタンは完全なピル型
• 温度感: 暖色寄りでやわらかい。肌なじみのよいピーチ系がベース

Colors

• 地は白とオフホワイト。色面ではなく、大きくぼかしたパステル（ピーチ・黄・ピンク・ミント）を背景に漂わせて彩る
• ぼかしは不透明度が低く、境界を作らない。セクションごとに色の位置を変えてリズムを出す
• 文字は黒に近い茶系。純黒は使わず温かみを残す
• コーラル色は矢印など小さい点だけに使う
• 強いCTAはオレンジ1色に絞る。電話と見学はダークブラウンで、問い合わせ導線の終盤にだけ置く
• 英字見出しは非常に淡いグレーにして、透かしのように扱う
• button-cta は文字 #FFF4EA × 背景 #FE7E4A のコントラスト比が 2.34:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#CC3C01、4.6:1）を使う。

Typography

• 見出しは細めの明朝体で、字間を広めにとる
• 英字ラベルの下に日本語の明朝見出しを2行で重ねる
• 本文はゴシック体、行間は2.0で詩のようにゆったり組む
• 理念の文章は短い行で区切り、左揃えにする
• 太字はボタン・電話番号・ナビだけに使う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。拠点一覧だけ 2 カラムのカード
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 100px、基本単位 8px、カード内 24px（375px 幅換算）
• 本文ブロックは左右に約24pxの余白をとる
• ブロブ写真のあとに英字ラベル、明朝見出し、本文、ピル型ボタンの順で縦に積む
• セクション間は80〜120pxあけ、区切りは余白とぼかしで表す
• 読み物系の内容は、大きな角丸の淡色パネルにまとめる
• ニュースは細い横線で区切ったリストにする

Elevation & Depth

• 影はほぼ使わず、平面的に見せる
• カードは白地にごく淡い影か、影なしにする
• 奥行きは背景のぼかしの重なりで出す

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 32px。ボタンはピル型。
• 写真の切り抜き: 写真はアメーバ状の不定形ブロブで切り抜き、背後にパステルの半透明ブロブを少しずらして重ねる。声と拠点の写真は角丸の長方形
• セクション境界: 直線の境界は作らない。ぼかしのグラデーションで溶け込ませる。問い合わせ周辺だけ細い横線で区切る
• ブロブ写真は毎回形を変える
• ボタンは高さ約70pxの完全なピル型
• 読み物パネルは角丸32px前後で大きく取る

Components

• 白ピルボタン（button-outline-pill）: 白地に細いグレー枠。中央に太字の文字、右端にコーラル色の細い矢印
• 資料請求の主CTA（button-cta）: オレンジのピル型。左に書類アイコン、文字は白
• 見学・電話ボタン（button-dark）: ダークブラウンのピル型。左にカレンダーか電話のアイコン
• ブロブ切り抜き写真（blob-photo）: 有機曲線の写真。背後にパステルのブロブを重ねる
• 英字＋明朝見出し（heading-en-ja）: セリフ体の英字ラベルの下に、明朝2行のキャッチを置く
• 縦書き引用ラベル（vertical-quote）: 写真の右上に、白い縦長の帯で明朝の縦書き引用を重ねる
• 読み物パネル（story-panel）: 淡いピーチのグラデーションを敷いた大角丸パネル。中に写真・見出し・ボタンを収める
• 拠点カード（location-card）: 上半分に角丸の建物写真、下の白地に太字で拠点名を2行
• 電話番号ボックス（tel-box）: 淡色の角丸ボックスに、大きな太字の番号と受付時間を置く
• ニュース行（news-row）: 日付と白ピルのカテゴリタグを並べ、下にタイトル。行は細線で区切る

Do's and Don'ts

Do - 背景のぼかしは大きく淡く、セクションをまたいで漂わせる - 写真は毎回違う形のブロブで切り抜く - 見出しは明朝体にして字間を広くとる - ボタンは白ピル＋コーラル矢印で統一する - 余白をたっぷりとり、1画面の情報量を少なくする

Don't - 彩度の高いベタ塗りの帯や背景にしない - 四角い写真を多用しない（ブロブか角丸にする） - 太いゴシックの大見出しや装飾的なバッジを使わない - オレンジCTAを何度も繰り返さない - 強い影やグラデーションのボタンを使わない

Page Structure

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

1. ファーストビュー（理念を情緒的に伝える）: 全幅の大きなブロブ写真の左上に、ぼかし雲の上で明朝の短いコピーを2行
2. 理念（姿勢・価値観を語る）: 淡いグレーの大きな英字の下に、短い行の詩的な本文を段落ごとに置く
3. 3つの約束（導入）（特長への導入）: 中央揃えの明朝見出し。数字だけを大きくする
4. 特長×3（人・ケア・住まいの強みを伝える）: ブロブ写真、英字ラベル、明朝2行見出し、本文、白ピルボタンの組を3回繰り返す
5. ブランドストーリー（文化・代表の思い・研究を伝える）: 淡色の大角丸パネルに、ロゴ風ビジュアルと縦書き引用付きの写真を並べる
6. お客様の声（家族の実感で信頼を高める）: 角丸写真、明朝の見出し、ハッシュタグ風の小さな注記
7. 拠点一覧（近くの施設へ誘導する）: 2カラムの写真付き角丸カードと探すボタン
8. ニュース（活動の新しさを示す）: 英字見出しと、線で区切ったリスト、一覧ボタン
9. サービス案内（短期利用を紹介する）: ブロブ写真、明朝見出し、本文、ボタン、電話ボックス
10. 見学案内（見学の申込を促す）: ブロブ写真と本文の下に、ダークブラウンのピルボタン
11. 資料請求・問い合わせ（最終コンバージョン）: グラデーションの角丸パネルにパンフレット画像、電話番号、ダークの電話ボタン、オレンジCTAを並べる
12. フッター（ナビとグループ情報）: 白地にロゴ、2列のリンク、SNSアイコン、グループサービス一覧

Imagery

• 自然光の明るい屋外や、木質で清潔な室内で撮った、スタッフと高齢者の笑顔の交流写真
• 淡いブルーの制服、草花、木漏れ日など、やわらかく高めの露出
• 背景装飾は、ぼかしたピーチ・黄・ピンク・ミントの水彩風ブロブ
• 建物写真は青空の下で外観を正面から撮り、角丸でトリミングする
• ロゴ風の重なり合う半透明の円形モチーフを差し色に使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは上部に横並びナビを置き、電話番号とダーク・オレンジの小ボタンをヘッダー右に配置する
• PCでは特長ブロックを写真とテキストの左右2カラムにし、左右を交互に入れ替える
• PCの声は2カラム、拠点一覧は3カラムの横長小カードにする
• PCのニュースは左に見出し、右にリストの2カラム
• PCでもコンテンツ幅は約70%に抑え、左右の余白にぼかしを広げる

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