DESIGN.md — 鮮やか緑×白の角丸パネル型チケットSaaS LP（Fresh Green Mascot SaaS Ticketing LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 清潔・爽やか、ポップ・元気、信頼・誠実、親しみ・手作り感
• キーワード: 鮮やか緑・大きな角丸パネル・マスコットキャラ・吹き出し・薄グレー地のドット・ゴシック太字
• 地の質感: フラットな単色面。薄グレー地に淡いドット柄と巨大な薄いロゴ文字の透かしを敷く。カードは淡い緑の影でふんわり浮かせる。
• 形: 角丸24〜32pxの大パネル、ピル型ボタン・ラベル、円形のフロー図。
• 温度感: 明るく爽やかでやや温かい。ポップだが情報は整理されている。

Colors

• 地は白と薄グレーを交互に使い、要所で緑の大パネルを挟む。
• 見出しの一部語句だけを緑文字にして強調する。
• 赤は問い合わせの主CTAのみに限定する。
• サブボタンは黒ピル、緑面上のボタンは白ピルにする。
• 英字サブ見出しは小さな緑の太字で添える。
• 黄色はフロー図などイラスト内のアクセントに留める。
• button-primary は文字 #FFFFFF × 背景 #FB012B のコントラスト比が 4.08:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#EC0128、4.56:1）を使う。
• speech-bubble は文字 #3CB156 × 背景 #FFFFFF のコントラスト比が 2.76:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#2E8742、4.51:1）を使う。
• badge-label は文字 #FFFFFF × 背景 #3CB156 のコントラスト比が 2.76:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#2E8742、4.51:1）を使う。
• merit-card は文字 #3CB156 × 背景 #FFFFFF のコントラスト比が 2.76:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#2E8742、4.51:1）を使う。
• price-card は文字 #FFFFFF × 背景 #3CB156 のコントラスト比が 2.76:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#2E8742、4.51:1）を使う。
• industry-tile は文字 #FFFFFF × 背景 #3CB156 のコントラスト比が 2.76:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#2E8742、4.51:1）を使う。

Typography

• 全体を太めのゴシックで統一する。
• 見出し直下に英字の緑小見出しを置く。
• 強調語は緑文字で、下線やマーカーは使わない。
• 本文は短い行で改行し、左揃えにする。
• 料金は数字を大きく、単位を小さく添える。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。業界別のみ 2 列グリッド、券種は横スクロールカルーセル。
• 本文ブロックの幅: 画面幅の約 58%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 特長・料金・コラムの本文ブロックは画面幅の約6割で中央寄せ。
• 緑の大パネルは左右に約11pxの余白を残す。
• 見出しは中央揃えと左揃えを章ごとに使い分ける。
• 事例・お知らせは全幅に近いテキストリスト。
• マスコットは画面端からはみ出し気味に配置。

Elevation & Depth

• カードは淡い緑の下影（0 6px 16px 緑20%）。
• 料金カード・パネルは影なしのフラット。
• 写真は影なしで角丸のみ。

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 28px。ボタンはピル型。
• 写真の切り抜き: 角丸16〜20pxの長方形、一部角だけ大きく丸める。
• セクション境界: 大きな角丸パネルの上端カーブで切り替える。
• ボタン・ラベル・吹き出しはすべてピル型。
• 料金カードは右上を大きめに丸める。
• フロー図は円形で連結する。

Components

• 赤の問い合わせボタン（button-primary）: 赤ピルに白文字、右に白丸の再生アイコン。
• 黒ピルボタン（button-secondary）: 一覧・詳細導線の黒ピル。
• 白ピル枠ボタン（button-outline）: 白地に灰線のピル、資料請求用。
• マスコット吹き出し（speech-bubble）: 緑線の白ピル吹き出しを写真下に重ね、横にマスコット。
• 緑ラベルバッジ（badge-label）: 見出し上の緑ピル＋下向き三角。
• アイコンカード（merit-card）: 白角丸カードに線画アイコン、右下に緑の番号。
• 料金カード（price-card）: 緑面に白文字、縦書き英字プラン名、区切り線と箇条書き。
• 記事リスト行（news-row）: 日付＋タイトル、右端に緑矢印、下に細線。
• 業界タイル（industry-tile）: 緑角丸タイルに白丸アイコンと白文字。

Do's and Don'ts

Do - 緑の大パネルと白・薄グレー地を交互に並べる。 - 各特長に写真＋吹き出し＋マスコットをセットで置く。 - 見出しには英字の緑サブ見出しを添える。 - ボタンは全てピル型にする。 - 赤は問い合わせCTAだけに使う。

Don't - 緑以外のブランド色を増やさない。 - 角の立った四角い写真やボタンを使わない。 - 濃い影や立体的なグラデーションを使わない。 - 明朝体や手書き書体を混ぜない。 - 赤をCTA以外の強調に使わない。

Page Structure

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

1. 告知バー・ヘッダー（既存利用者への案内と導線）: 緑の細帯に白文字、下に白地のロゴと緑丸メニュー。
2. ファーストビュー（サービスの価値を一言で示す）: 中央ロゴと短いコピー、PC・スマホ画面のモックとカラフルなキャラ。
3. 仕組みの図解（利用の流れを可視化）: 緑の大パネルに円形ステップを矢印で縦につなぐ。
4. 特長（POINT）（4つの利点を訴求）: 薄グレー地に角丸写真、吹き出し、POINT番号と緑強調見出し。
5. メリット（選ばれる理由を3つ）: 白地に緑ラベル＋見出し＋線画アイコンカード。
6. 料金（プランを比較）: 緑の料金カードを縦積み、オプションは灰枠。
7. 運営の信頼性（安心感の提示）: 灰色角丸パネルにビル写真と本文、マスコット吹き出し。
8. CTA（資料請求・問い合わせ）: 緑パネル内に白カード2枚、白枠ボタンと赤ボタン。
9. 取扱券種（種類の紹介）: 角丸写真カードの横スクロールと緑の進捗バー。
10. 業界別利用法（用途の想起）: 灰地に緑タイル2列グリッド。
11. 導入事例・お知らせ（実績と最新情報）: 日付付きテキストリストと黒ピルの一覧ボタン。
12. コラム（記事への誘導）: 緑の大パネルに白角丸の記事カード、白ピルボタン。
13. フッター（ナビと規約）: 上端角丸の灰地、中央ロゴ、縦リンク、キャラ柄を並べる。

Imagery

• 明るい室内でスマホを操作する人物の自然光写真。
• 写真は白背景寄りで彩度は控えめ、清潔感重視。
• 緑の四角いおばけ風マスコットを点の目で描き、吹き出しと組み合わせる。
• メリットは黒の線画アイコンで統一。
• FVは管理画面のデバイスモックにカラフルなキャラを散らす。
• 薄グレー地に淡いドット柄と巨大ロゴ文字の透かし。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCではヘッダーにグローバルナビと資料請求・赤の問い合わせボタンを並べる。
• PCのFVはロゴ・コピー左、デバイスモック右の2カラム。
• 特長は写真左・テキスト右の横並び。
• メリット・料金・コラムはPCで3〜4列に並べる。
• フロー図はPCで円環状に配置。
• 事例・お知らせは日付とタイトルを1行に並べる。

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