DESIGN.md — 若草グリーンと淡色タイルの啓発キャンペーンLP（Fresh Green Infographic Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、かわいい、清潔・爽やか、ナチュラル
• キーワード: 若草グリーン・インフォグラフィック・パステルタイル・マスコットキャラ・フラットイラスト・ハッシュタグ
• 地の質感: フラットな単色面。グラデーションや影はほぼ使わず、イラストは線画＋淡色塗り。
• 形: 四角いタイルを隙間なく敷き詰め、写真は正円切り抜き、ボタンは小さな角丸。
• 温度感: 明るく軽い。緑の爽やかさにパステルの温かみを足した中間〜やや暖かめ。

Colors

• 地は白と若草グリーン帯を交互に。緑帯は見出し・導入・フッターに使う。
• 調査データはタイルごとに黄・黄緑・ピンク・水色・橙・薄グレー・ベージュで色分けする。
• タイル内の大見出しはタイル地より濃い同系色（黄地にオリーブ、ピンク地に濃ピンク）。
• 白地の見出しはブランド緑の文字、本文はグレー。
• ボタンは全てブランド緑の塗り＋白文字に統一する。
• 黒や彩度の高い赤は商品写真以外に使わない。
• button-primary は文字 #FFFFFF × 背景 #63B534 のコントラスト比が 2.56:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#498526、4.5:1）を使う。
• band-heading は文字 #FFFFFF × 背景 #62B634 のコントラスト比が 2.54:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#478426、4.57:1）を使う。
• data-tile は文字 #F08B19 × 背景 #F2EC72 のコントラスト比が 2.02:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#9B570A、4.52:1）を使う。
• play-button は文字 #FFFFFF × 背景 #62B634 のコントラスト比が 2.54:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#478426、4.57:1）を使う。
• banner-card は文字 #62B634 × 背景 #FEFEFE のコントラスト比が 2.52:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#478426、4.53:1）を使う。

Typography

• 見出しは細め〜中太の端正なゴシックで、上品な軽さを保つ。
• 数値は欧文の大サイズで単位だけ小さくする。
• 英字サブ見出しは極小・大文字・薄色で添える。
• 本文は行間2.0前後でゆったり組む。
• 注釈は※付きで小さく、タイル下端に置く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム＋調査タイルのみ 2 カラム
• 本文ブロックの幅: 画面幅の約 80%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• 緑帯は全幅、本文は左右10%の余白。
• 調査タイルは隙間2px程度で白い目地を入れて敷き詰める。
• 大きな結論タイルは全幅、小ネタは半幅2列。
• ダウンロード群はボタンを縦に等間隔で並べ、グループ間を細線で区切る。
• キャラは緑帯の上辺に下半身を隠して乗せる。

Elevation & Depth

• 影は基本使わない完全フラット。
• 立体感は色面の切り替えと線画で出す。
• スマホ画面モックだけ薄グレー枠で浮かせる。

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンは角丸の長方形。
• 写真の切り抜き: 実写は正円トリミング、FVは全幅写真に暗いオーバーレイ
• セクション境界: 直線で色面を切り替え、帯上辺にキャラが顔を出す
• ボタンは小さな角丸の長方形。
• タイルは角丸なしの正方形・長方形。
• ポスター枠や外部バナーは太い緑線の角丸枠。
• 再生ボタンは緑の正円。

Components

• ダウンロードボタン（button-primary）: 幅約75%の緑塗り角丸ボタン。縦に4つ等間隔で並ぶ。
• 緑帯見出し（band-heading）: 全幅の緑帯に白の日本語見出し＋薄い英字サブ。
• 顔出しキャラ（mascot-peek）: 緑線の丸いマスコットが帯の上辺から顔をのぞかせる。
• 調査データタイル（data-tile）: パステル単色地に小見出し・大数値・線画イラスト・注釈を入れる。
• 動画再生ボタン（play-button）: 緑の円に白三角、左右に斜体英字ラベル。
• 円形写真（circle-photo）: 動作を示す実写を正円で切り抜き中央配置。
• SNSシェアアイコン（share-icons）: 正方形のSNSアイコンを3つ横並び。
• 関連企画バナー（banner-card）: 緑地上の白い角丸カードに緑ロゴ。

Do's and Don'ts

Do - 緑は一色に絞り、帯・ボタン・見出しで繰り返す。 - データは1タイル1メッセージで大きな数値を主役にする。 - イラストは線画＋淡色塗りの統一トーンで描く。 - 白地セクションには十分な上下余白を取る。 - マスコットを区切りごとに登場させ親しみを出す。

Don't - タイルに影や角丸を付けない。 - グラデーションや光沢のボタンにしない。 - 本文を黒で太く詰めて組まない。 - パステル以外の濃い色をタイル地に増やさない。 - 写真を多用してイラストの世界観を崩さない。

Page Structure

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

1. ファーストビュー（企画ロゴと動画で掴む）: 暗めの全幅写真上に中央ロゴ、緑のハッシュタグ、再生ボタン、右上にSNSアイコン。
2. 企画の趣旨（活動の意義を伝える）: 緑帯に白の大見出し3行と白本文。
3. アクション紹介（やってほしい行動を示す）: 白地に緑見出し、グレー本文、円形写真。
4. 調査概要（データの前提を示す）: キャラ顔出しの緑帯に白見出しと調査条件。
5. 調査結果インフォグラフィック（数字で問題を楽しく見せる）: 全幅大タイルと半幅タイルを色違いで敷き詰め、大数値と線画。
6. シェア呼びかけ（拡散を促す）: 白地に緑見出し、SNSアイコン3つ、投稿画面モック。
7. ダウンロード（素材配布）: 緑帯見出し後、素材画像と緑ボタン群を細線で区切って繰り返す。
8. 関連企画バナー（姉妹企画へ誘導）: 緑地に白文字ラベルと白い角丸バナー。

Imagery

• 実写は家庭の台所や食卓の自然光、少し暗めのトーン。
• イラストは丸みのある緑線画、塗りは淡いパステル単色。
• 人物は記号的なフラットイラストで表情は簡素。
• マスコットは丸顔で葉脈模様のある緑のキャラ。
• 地図・グラフも線画で、強調部分だけ色を差す。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCはFVを横長写真にし、ロゴを中央に縮小配置。
• PCの導入文は1行を長くセンター揃え。
• アクション紹介は円形写真左・テキスト右の2カラム。
• 調査タイルはPCで4列の不規則グリッドに再配置。
• ダウンロードは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 行書くと起動時に読み込まれる。