DESIGN.md — 空色×白丸文字のやさしいブランド企画LP（Sky Blue Soft Pop Brand Campaign LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: やさしい・柔らかい、ポップ・元気、清潔・爽やか
• キーワード: 空色一色・白の丸文字・中央揃え・数値カード・吹き出しバッジ・雲と芝生
• 地の質感: グラデなしのフラットな空色の面。ところどころに写実的な雲を浮かべる。
• 形: 角丸の大きいカード、円形バッジ、感嘆符モチーフ、細い白線の囲み枠
• 温度感: 明るく涼しげ。ただし冷たくはなく、親しみのある温度感

Colors

• メインの地は空色1色で通す。白文字だけで情報を読ませる
• 数値カードはテーマごとに黄緑、黄、コーラル、ブルーで色を分け、文字はすべて白
• カードの下に同系色の濃い影を落として、ぷっくりした立体感を出す
• 白は文字、バッジ、細い囲み線に使い、面としてはほぼ使わない
• フッター手前に緑の芝生帯を入れ、白地の関連エリアへ切り替える
• 関連エリアは白とライトグレー、紺のリンクで落ち着いたトーンにする
• stat-card は文字 #F3FBFC × 背景 #A9CF55 のコントラスト比が 1.7:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#617C23、4.53:1）を使う。
• badge-circle は文字 #F3FBFC × 背景 #A9CF55 のコントラスト比が 1.7:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#617C23、4.53:1）を使う。
• badge-white は文字 #9CC8EB × 背景 #FDFEFD のコントラスト比が 1.75:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#2679BB、4.58:1）を使う。

Typography

• 本文も含め、メインエリアはすべて太い丸ゴシックの白文字にする
• メッセージは短い行で改行し、中央揃えで広い行間をとる
• 数値は欧文の極太で大きく、単位は小さく添える
• カード上の小見出しは円弧状に曲げて配置する
• 関連エリアだけ普通のゴシックにして、トーンを切り替える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC では数値カードを 2+3 の横並びにする
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 70px、基本単位 8px、カード内 20px（375px 幅換算）
• 中央揃えを基本とする
• 数値カードはやや右寄せにし、左上に円形バッジをはみ出させる
• カード同士の間隔は約 50px
• プロフィールは白の細線で角丸に囲み、上辺は見出しで切る
• 最後に関連特集の写真カードを縦に並べる

Elevation & Depth

• 数値カードには下方向に同系色の濃いベタ影（ぼかしなし、約 6px）を付ける
• 円形バッジには薄いドロップシャドウを付ける
• そのほかは影なしのフラットにする

Shapes

• 角丸: 小 4px ／ 中 16px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角丸の矩形か、フルブリードの矩形にする。人物写真は 2×2 のグリッドに並べる
• セクション境界: 直線で切り替える。終盤は芝生の帯と牛のイラストで白地へつなぐ
• バッジは正円にし、右上に感嘆符の装飾を付ける
• 数値カードは大きめの角丸にし、右下に小さな矢印を置く
• 見出しの左右に斜線を入れて挟む

Components

• 数値実績カード（stat-card）: 上に小見出し、中央に指標名、大きな数値、右下に矢印。色はテーマ別
• 感嘆符つき円形バッジ（badge-circle）: カードや枠の左上に重ねる 2〜3 行の分類ラベル
• 白の円形バッジ（badge-white）: プロフィール枠内の項目ラベル。文字は空色
• アーチ見出し（heading-arch）: 円弧状の小見出しの下に、斜線で挟んだ名前の大見出し
• 白線の囲み枠（outline-frame）: 白の 1.5px 線の角丸枠。プロフィールと動画を囲む
• 白の点線区切り（dotted-divider）: 枠内で項目を区切る白の点線
• 関連特集カード（related-card）: 写真の下にグレーの帯。紺のリンク見出しと山括弧、その下に説明文

Do's and Don'ts

Do - 空色の地を大きく使い、余白を広く取る - テキストは白の丸ゴシックで中央揃えにする - 数値はカード 1 枚に 1 指標とし、大きく見せる - 感嘆符モチーフを装飾として繰り返す - 雲や芝生のイラストでやわらかさを出す

Don't - メインエリアに黒文字や細い明朝を使わない - 数値カードの色を 4 系統より増やさない - 空色の地にグラデーションや柄を入れない - 鋭角な四角いボタンや強い影を使わない - 長文を左揃えで詰めて組まない

Page Structure

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

1. ファーストビュー（商品と笑顔の人物でコンセプトを印象づける）: フルブリードの人物写真に、白い極太丸文字の縦横混在コピーを重ねる
2. ブランドメッセージ（企画の想いを伝える）: 空色の地に大見出しを置き、短い行の白文字を中央揃えで縦に並べる
3. 人物グリッド（多様な人に親しまれていることを示す）: 2×2 の写真グリッドの中央に、白角丸の縦書きコピーを重ねる
4. 取り組み実績（社会貢献を数値で示す）: リード見出しの下に、色分けした数値カードを 5 枚、円形バッジ付きで並べる
5. キャッチの再掲（コンセプトを想起させる）: 雲の写真を散らし、大見出しを中央に置く
6. キャラクター紹介（起用人物のプロフィールを伝える）: アーチ見出しと白線の枠の中に、角丸写真と中央揃えの経歴文を置く
7. 特別動画（動画への導線をつくる）: 点線で区切った下に、短い導入文と埋め込み動画を置く
8. 装飾の締め（世界観で余韻を残す）: 緑の芝生の帯に、牛のイラストを点在させる
9. 関連特集（他の取り組みへの回遊を促す）: 白地に小見出しを置き、写真とグレーの帯のカードを縦に並べる

Imagery

• 人物は明るい屋外の逆光気味で撮る。商品を手に持って笑う自然な表情
• 背景はやや白っぽく飛ばし、淡いトーンでまとめる
• プロフィール写真は白シャツで、グレー背景のシンプルな正面カット
• リアルな白い雲を切り抜き、空色の地の左右に散らす
• 白黒の牛と緑の芝生はフラットなイラストで描く
• 感嘆符と商品の小さなカットアウトを写真の上に添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はメインエリアを全幅の空色にし、本文は 1 行を長くして中央揃えにする
• PC の数値カードは上 2 枚、下 3 枚の横並びにして小さくする
• PC のプロフィールは写真左、経歴右の 2 カラムにする
• PC の動画は導入文の右に並べる
• PC の関連特集は 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 行書くと起動時に読み込まれる。