DESIGN.md — 淡いアクアとティールのAIメンタルケアアプリLP（Soft Aqua Teal AI Wellness App LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: 清潔・爽やか、やさしい・柔らかい、信頼・誠実、クール・先進的
• キーワード: 淡いアクア・ティールグラデーション・白い丸角カード・曲線リボン・3Dマスコット・アプリ画面モック
• 地の質感: フラットな淡色の面に、ごく弱いぼかし影と、細い曲線ライン・小さな点の装飾を重ねる
• 形: 角丸16〜24pxのカード、ピル型のラベル、大きく弧を描くリボン状の曲線
• 温度感: やや寒色寄り。ただし白と淡色が多いため、冷たさはなく穏やかな印象

Colors

• 地は白と淡いアクアをセクションごとに交互に使い、境界には曲線を入れる
• 強調にはティール単色を使う。グラデーションは帯・ステップ番号・フッターだけに限る
• 見出しは濃紺ティール、サブ見出しはティール文字、本文はグレーと3段階で使い分ける
• 英字の大見出しは背景よりわずかに濃い淡水色にして、存在を控えめにする
• ストアボタンだけは黒にして、ページ内の配色から浮かせる
• 暖色は評価の星（黄色）程度にとどめる
• concern-card は文字 #46ABB6 × 背景 #FDFEFE のコントラスト比が 2.68:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#348088、4.53:1）を使う。
• step-pill は文字 #FFFFFF × 背景 #46ABB6 のコントラスト比が 2.71:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#35818A、4.51:1）を使う。
• tag-badge は文字 #FFFFFF × 背景 #46ABB6 のコントラスト比が 2.71:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#35818A、4.51:1）を使う。
• speech-bubble は文字 #46ABB6 × 背景 #FDFEFE のコントラスト比が 2.68:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#348088、4.53:1）を使う。

Typography

• 英字の大見出しのすぐ下に、日本語見出しを重ねるように置く
• セクション見出しは中央揃え、カード内の見出しは左揃えにする
• 悩みカードは、上段を濃紺の通常文字、下段をティールの太字にした2段構成にする
• 本文は行間を広め（1.8〜1.9）にとり、詰めすぎない
• 数字（価格・件数）は欧文の太字で大きく見せる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。悩み・特長カードは 2 列グリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• カードは左右に約20pxの余白をとって並べる
• ステップは大きな薄水色カードにまとめ、上部中央にピル型の番号を置く
• 機能はアプリ画面と説明文をセットにした白カードで縦に並べる
• お客様の声は横スクロールのカードで見せる
• セクションの上下にはたっぷり余白をとる

Elevation & Depth

• カードには、ぼかしの大きいごく薄い影（0 4px 20px rgba(40,120,130,0.08)）をつける
• アプリ画面のモックには、やや強めの柔らかい影をつける
• フッターと動画帯には影をつけず、フラットな面にする

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 28px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸16pxの長方形で切り抜く。アプリ画面はスマホ枠ごと見せる
• セクション境界: 大きく弧を描く曲線とリボン状の波で区切る
• ラベル・タグ・STEP番号はすべてピル型にする
• 吹き出しは白の角丸に小さなしっぽをつける
• 装飾として細い曲線と小さな水色の点を散らす
• 直角の要素はほとんど使わない

Components

• アプリストアボタン（store-buttons）: 黒地に白文字の、ストア公式の形をした2つのボタンを横に並べる
• 悩みカード（concern-card）: 白い角丸カードを2列に並べる。上段に状況、下段にティール太字で願いを書く
• STEP番号ピル（step-pill）: 濃いティールのグラデーションのピルに、白の英字でSTEP番号を入れる
• ステップカード（step-card）: 薄水色の大きな角丸カードの中に、アプリ画面・見出し・本文・タグをまとめる
• 機能カード（feature-card）: 上半分にアプリ画面、下半分にタイトル・AIバッジ・1行の説明を置く白カード
• ハッシュタグ・AIバッジ（tag-badge）: ティール地に白文字の小さなタグ。角丸またはピル型
• 吹き出し（speech-bubble）: マスコットのセリフを、白地にティール文字の角丸吹き出しで見せる
• 料金カード（pricing-card）: 白カードの上部にプラン切替タブを置き、大きな価格と、チェック付きの特典リストを並べる
• アイコン付きリンク行（list-row-card）: 白い角丸の行。左にアイコン、中央にタイトルと説明、右に矢印を置く

Do's and Don'ts

Do - 白と淡いアクアの地を交互に使い、曲線で区切る - 機能は必ずアプリ画面のモックと一緒に見せる - マスコットや吹き出しを入れて、親しみやすさを出す - セクションの頭に、薄い英字の大見出しを入れる - 実績は数字と月桂冠のモチーフで見せる

Don't - 赤やオレンジなど強い暖色を、ボタンや見出しに使わない - 濃い色の地を、フッター以外で多用しない - 角の立った四角いカードや太い枠線は使わない - 文字を詰め込みすぎない - 強い影や立体的なボタンは使わない

Page Structure

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

1. ファーストビュー（サービスの価値と信頼性を一目で伝える）: 手元のスマホ写真の下端を曲線で切り抜き、アプリ画面・キャッチ・ロゴ・月桂冠付きの実績2つを重ねる
2. ブランド動画（世界観を動画で伝える）: アクアの帯の上に角丸の動画枠を置き、下に英字の小見出しと日本語タイトルを入れる
3. 悩みの提起（ユーザーの願いに共感する）: 淡いアクア地に、白い悩みカードを2列×3段で並べる
4. 仕組みの説明（技術と専門性の掛け合わせを示す）: 2つのピル見出しとアイコンを×印で結び、その下に特長カード4枚とまとめのボックスを置く
5. 使い方ステップ（利用の流れを理解してもらう）: STEPピル付きの薄水色カードを3つ並べ、最後にマスコットのカードを置く
6. アプローチ図（変化の道のりを見せる）: 山のイラストに沿って、段階の吹き出しを配置する
7. キャラクター紹介（AIパートナーへの親しみを持ってもらう）: 3Dマスコットと紹介文を置き、ピルのラベル付きでプロフィールの表を見せる
8. 機能一覧（機能の幅広さを示す）: カテゴリ見出しごとに、画面付きの機能カードとアイコン付きのリンク行を並べる
9. お知らせ（更新が続いていることを示す）: 白カードの中に、日付とタイトルを線で区切ったリストで並べる
10. 専門性の根拠（学術的な裏付けを示す）: 英字の大見出し、解説文、監修者の写真、研究の説明、注釈の順に置く
11. 実績（信頼性を補強する）: イラスト入りのバナーと、見出し・説明のセットを4つ縦に並べる
12. お客様の声（利用者の評価を見せる）: 写真と評価バッジを置き、星評価付きのレビューカードを横スクロールで並べる
13. 料金（プランを比較してもらう）: 薄グレー地に、有料プランと無料プランのカードを置く。無料トライアルの案内はピルで見せる
14. 最終CTA・フッター（ダウンロードへ誘導する）: 分析結果のイメージ、ロゴ、ストアボタン、アプリ画面を順に置き、最後にティールのグラデーションのフッターにリンクを並べる

Imagery

• 白く丸みのある3Dマスコットにする。目は濃紺の帯の中に水色で光らせる
• アプリ画面は白基調のUIにし、ティールのアクセントを入れてスマホ枠ごと見せる
• 写真は自然光のやわらかいトーンで、スマホを使う手元や人物を写す。ティールの曲線を重ねてもよい
• 装飾として細い曲線ライン、小さな水色の点や球、紙吹雪を使う
• イラストはフラットなティールのグラデーションで描く（山・リボンなど）
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約70%幅のコンテナにまとめる
• PC のファーストビューは中央に見出しを置き、写真の上下を大きな曲線で切り抜く
• ステップは、PC では左にテキスト・右に画面の横並びにする
• 機能カードは、PC では 2 列（リンク行は 3 列）にする
• 料金は PC で 2 カードを横に並べ、レビューは 4 枚を横に並べる
• PC のフッターではリンクを横一列に並べる

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