DESIGN.md — コーラル×生成りのやさしい写真アプリ LP（Warm Coral Family Photobook App LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: やさしい・柔らかい、かわいい、親しみ・手作り感、ナチュラル
• キーワード: コーラル・生成りクリーム・丸ゴシック・手描き線画・家族写真・スマホモック
• 地の質感: フラットな単色の面に、自然光の柔らかい写真を合わせる。影はほぼ使わない
• 形: 大きな角丸カード、円形の写真切り抜き、雲形の吹き出し、FV 下の弧
• 温度感: 暖色寄りで、やわらかく温かい

Colors

• 地は白と生成りクリームをセクションごとに切り替え、交互に並べる
• 強調語はコーラルで色を変え、見出しの一部だけに使う
• キーワードにはコーラルの手書き風の波線を下線として引く
• クリーム地の上には白い角丸カードを重ねる
• 黒は使わず、文字はこげ茶系で柔らかく見せる
• 黄色は紙吹雪など小さな装飾だけに使う
• tag-button は文字 #FFF4E7 × 背景 #EF9074 のコントラスト比が 2.17:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#CA4017、4.54:1）を使う。
• coupon-ticket は文字 #FFF4E7 × 背景 #EF9074 のコントラスト比が 2.17:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#CA4017、4.54:1）を使う。

Typography

• 見出しは丸ゴシックの太字にし、字間を 0.1em 以上取る
• 見出しは中央揃えで 2〜3 行に改行する
• 強調語だけをコーラルにして、ひと回り大きくする
• FV や締めのコピーは縦書きを使う
• 本文は短く、詰め込まない
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、中央揃え
• 本文ブロックの幅: 画面幅の約 75%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは左右に 12% ほどの余白を取って中央に置く
• セクションの上下の余白はたっぷり取る
• スマホモックは画面幅の 55〜65% で中央に置く
• アプリストアのバッジは 2 つ横に並べ、要所に繰り返し置く

Elevation & Depth

• 影は基本使わず、フラットにする
• カードは地色との差だけで浮かせる
• 写真の上に白い箱の見出しを重ねる

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 28px。ボタンは角丸の長方形。
• 写真の切り抜き: 大きめの角丸の長方形と、円形の切り抜き
• セクション境界: FV 下は弧状の白い面。その他は直線で色を切り替える
• カードの角丸は 20〜28px にする
• シーン写真は円形に切り抜き、コーラル丸のアイコンを重ねる
• 吹き出しは雲形で、尾を付ける
• クーポンは左右に半円の切り欠きを入れたチケット形にする

Components

• アプリストアバッジ（store-badges）: 黒地の 2 つのバッジを横に並べた主 CTA
• ステップカード（step-card）: クリーム地の上の白い角丸カード。カードの上端にコーラルの Step 番号を重ね、中にスマホモックを入れる
• コーラルのタグ（tag-button）: やや角丸のコーラル面に白抜き文字を入れ、縦に積む
• 手書きの波線（wavy-underline）: キーワードの下にコーラルの波線を引く
• シーン紹介（scene-list）: 円形写真とテキストを左右交互に並べ、円写真にアイコンバッジを重ねる
• SNS 風の声カード（voice-card）: 太いコーラル枠の角丸カード。写真・ハート・コメントで投稿風にする
• 手書きの吹き出し（speech-cloud）: クリームの雲形に、手書き書体と似顔絵アイコンを添える
• FAQ（faq-item）: コーラルの Q と太字の質問、灰色の回答。項目間に細い区切り線
• クーポン券（coupon-ticket）: コーラル面に白抜きの特大数字。左右に半円の切り欠き、周りに紙吹雪

Do's and Don'ts

Do - コーラルは強調語・タグ・枠線に絞って使う - 白とクリームの帯を交互に配置する - 線画アイコンはコーラルの単線でゆるく描く - 手順はスマホ画面のモックで見せる - ストアバッジは FV 下・途中・最後に置く

Don't - 真っ黒や原色の赤を大面積に使わない - 角ばった太いゴシックで威圧的にしない - 濃い影やグラデーションのボタンにしない - 文字を詰め込みすぎない - 写真を硬い直角のまま並べない

Page Structure

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

1. ファーストビュー（家族の温かい情景で価値を伝える）: 全面の家族写真。下端を白い弧で区切り、主コピーを置く
2. コンセプト（完成品と届く速さを示す）: 角丸写真に縦書きコピーと円形バッジを重ね、下にストアバッジを置く
3. 課題の提起（データのままにしない動機づけ）: スマホモック、短い見出し、角丸写真、イラスト付きの強調語の順に並べる
4. 使い方ステップ（作成の簡単さを示す）: クリーム地に Step 番号付きの白カードを縦に並べ、中にアプリ画面を入れる
5. AI 機能のまとめ（自動化できる範囲を示す）: ロボットの線画とコーラルのタグを 2 つ並べる
6. 品質訴求（製本の品質を伝える）: 淡くぼかした写真を背景に白箱の見出し、クリームの丸バッジ、波線の下線
7. 利用シーン（贈る場面を具体的に示す）: 似顔絵付きの見出しタブと、円形写真＋テキストを左右交互に並べる
8. お客様の声（共感と信頼を得る）: SNS 風の枠付きカードと手書きの吹き出し
9. よくある質問（不安を解消する）: 線画アイコンと見出し、Q 付きのリストを区切り線で並べる
10. クロージング（情緒的に背中を押す）: 白基調の写真に縦書きの明朝コピーを重ねる
11. CTA（クーポン）（登録を促す）: チケット形クーポン、ストアバッジ、SNS への誘導
12. 問い合わせ・フッター（連絡先を示す）: 黄色の横棒付き小見出しと、グレージュのフッター帯

Imagery

• 自然光の明るい室内で家族が笑顔の写真。白とベージュ中心の色調
• 木目の床やテーブルにアルバムを俯瞰で並べた物撮り
• 赤ちゃんの写真を手元で持つクローズアップ
• コーラルの単線で描くゆるい似顔絵・ロボット・アイコン
• 黒フレームのスマホモックにアプリ画面を入れる
• 黄・水色・コーラルの小さな紙吹雪
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 版の画像がないため、以下は推奨。PC では内容幅 960px 前後で中央に置く
• ステップカードは 2〜3 列に並べる
• FV は写真を横長にし、コピーを左右どちらかに寄せる
• 利用シーンは 3 列のカードにする
• ストアバッジは QR コードの併記を推奨

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