DESIGN.md — ラベンダー×黄CTAのやさしい終活Webサービス LP（Soft Lavender Digital Legacy Service LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: やさしい・柔らかい、信頼・誠実、情報量多め・訴求型、清潔・爽やか
• キーワード: ラベンダー・大きな英字見出し・紙飛行機・シャボン玉・マーカー見出し・黄色CTA
• 地の質感: フラットな淡色の面に、半透明の球体や薄いロゴ透かしを重ねた軽い質感
• 形: カードは角丸小さめ、CTAはピル型、比較表は細い白線の格子
• 温度感: ややクールで穏やか。紫系の寒色に黄色をアクセントで足す

Colors

• 白・淡グレー青・淡ラベンダーの地をセクションごとに交互に使う
• 英字見出しは淡い藤色か紫で大きく置き、すぐ下に濃い紫の和文サブ見出しを添える
• 黄色は申込CTAだけに使う
• 濃い紫はラベル帯・診断ボタン・比較表ヘッダーに使う
• 料金カードの見出し帯はミント・紫・青で塗り分けて区別する
• 機能カードのアイコン面は多色の中間トーンにして、彩度を揃える

Typography

• 英字大見出しと和文サブ見出しを必ず中央で上下に組む
• キャッチは行ごとに白い帯を敷いて、マーカーのように見せる
• 本文の強調は太字と紫の文字色にとどめる
• 金額は大きく太字にし、税込表記を小さく添える
• 注釈は米印付きで小さく灰色にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム（料金・機能カードは縦積み、機能カードは 2 列も可）
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションの頭に英字大見出しと和文サブ見出しを中央揃えで置く
• イラストやスマホのモックとテキストを交互に配置する
• CTAはセクションの末尾に中央で置く
• 比較表は横スクロールか 3 列に圧縮する
• 注釈はセクション下部にまとめる

Elevation & Depth

• カードはごく薄い影か、影なしで白い面を使う
• スマホのモックだけはやわらかい影で浮かせる
• 半透明のシャボン玉をセクションの境界にまたがせて奥行きを出す

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 人物はイラストの切り抜き、アバターは円形、写真はFVだけ全幅
• セクション境界: 直線で背景色を切り替え、境界に球体の装飾を重ねる
• CTAとサブボタンはピル型
• 料金カードと機能カードは角丸を小さく
• 吹き出しは角丸に小さなしっぽを付ける

Components

• 黄色の申込CTA（button-primary）: ペンのアイコンを付けたピル型の黄色ボタン
• 枠線のサブボタン（button-outline）: 白地に紫の細い枠、右に二重の矢印を付ける
• 濃紫の診断ボタン（button-secondary）: 濃い紫のピル型に白文字
• 英字大見出しセット（section-title）: 淡紫の巨大な英字の下に、濃紫の和文サブ見出し
• 料金プランカード（plan-card）: 色帯の見出しに白い本体、金額を大きく、下にチェックリストとCTA
• サービス比較表（compare-table）: 淡紫のセルを白線で区切り、自社の列を強調。◎○×で比べる
• 機能カード（feature-tile）: 上は色面に白い線のアイコン、下は白地に番号付きの機能名と説明
• MEMOラベル付きボックス（memo-box）: 灰色の小さなラベルを付けた白い補足ボックス
• アバター付き吹き出し（speech-bubble）: 円形のアバターと淡紫の吹き出しで声を見せる
• 体験談アコーディオン（accordion）: アバター、タイトル、冒頭の文章を並べ、右の矢印で開く

Do's and Don'ts

Do - セクションごとに英字大見出しと和文サブ見出しを付ける - 紙飛行機と半透明の球体で、明るい雰囲気を保つ - 申込CTAは黄色のピル型に統一し、何度も置く - 金額・機能は表とカードで整理して見せる - 人物はやさしいトーンのフラットなイラストにする

Don't - 黒や濃い赤など重い色で面を塗らない - 黄色をCTA以外に多用しない - 英字見出しを細い書体や小さいサイズにしない - 写真を多用してテーマを生々しく見せない - 角丸の大きい丸っこいカードにしない

Page Structure

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

1. ファーストビュー（サービスの印象と申込導線）: 家族の写真を全幅に置き、右にサービス名と黄色CTA・ログインボタンを並べる
2. 広告バナー（関連サービスの告知）: ラベンダー地の中央に横長バナーを置く
3. サービス紹介（何ができるかを伝える）: マーカー帯のキャッチ、スマホのモック、イラスト、MEMOボックスを組み合わせる
4. 料金プラン（プランを比べさせる）: 色帯の付いた3枚のカードに金額・機能一覧・CTAを入れ、専門家の顔写真を添える
5. 比較表（他社との差を見せる）: 淡紫の格子の表と、その下に枠線のサブボタン
6. 実績（信頼の数字を示す）: ラベンダー地に会員数のカードと、定期報告のカードを並べる
7. コンセプト（サービスの思いを伝える）: 手とスマホのイラスト、マーカーのキャッチ、吹き出し、動画を置く
8. ストーリー（誕生の経緯を語る）: 罫線ノート風の淡紫の面に紫の文字で物語を書き、人物のイラストを添える
9. サポート案内（問い合わせ先を示す）: メールと電話を淡紫のボックスにまとめ、案内役の女性イラストを置く
10. 機能一覧（無料機能を一覧で見せる）: ロゴの透かしの上に、色面のアイコン付き機能カードを格子状に並べる
11. リスク診断（診断ツールへ誘導）: ラベンダー地にスマホのモックと説明ボックス、濃紫のボタン
12. 体験談（共感と必要性を伝える）: アバター付きのアコーディオンと、締めの吹き出し
13. マンガ（マンガで気軽に理解してもらう）: 白い英字見出しの下にマンガのサムネイルを横スライダーで並べる
14. フッター（SNSでのシェア）: 白地の中央に丸いSNSアイコンを並べる

Imagery

• 人物は紫・ミント・グレーのフラットなイラストで、表情はやわらかく描く
• スマホのモックの画面はミントと白のUIで見せる
• 紙飛行機と流れ星のような軌跡で「メッセージを届ける」を表す
• パール調の半透明の球体をあちこちに浮かべる
• 背景に斜体の英字ロゴを薄く敷き詰める
• 写真はFVの家族写真のように、明るい室内の自然光で撮る
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは2カラムで、テキストとイラストを左右に置く。SPは縦積みにする
• 料金カードはPCで3列、SPで1列にする
• 機能カードはPCで4列、SPで2列にする
• 英字見出しはPC約110px、SPは約56pxにする
• 比較表はSPで横スクロールにする

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