DESIGN.md — ミント×クリームのポップな決済サービス LP（Mint and Cream Pop Fintech Service LP）

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

Overview

• 業種: 金融・保険 ／ 雰囲気: ポップ・元気、清潔・爽やか、親しみ・手作り感、信頼・誠実
• キーワード: ミントグリーン・クリーム地パネル・紙吹雪・吹き出し見出し・マスコット・黄色マーカー
• 地の質感: グラデーションや影のないフラットな塗り。写真は角丸で切り抜く。
• 形: 大きな角丸パネル、パネル右上の段差（タブ形状）、吹き出し、ピル型の枠。
• 温度感: 明るく軽やか。やや暖かいクリームと、涼しいミントを組み合わせる。

Colors

• ページの外枠はミント。本文はクリーム色の大きなパネルに載せる。
• ファーストビューだけは白地にし、黄色の紙吹雪で華やかにする。
• 情報カードは濃いミントの面に白文字。
• 小見出しは白地に濃いミントの枠と文字の吹き出し。
• 機能見出しの強調語には黄色マーカーを下半分に引く。
• ピンクと黒はマスコットのアクセントに限定する。
• speech-heading は文字 #04B59B × 背景 #FDFEFE のコントラスト比が 2.57:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#038370、4.63:1）を使う。
• info-card は文字 #FFFEFE × 背景 #04B59B のコントラスト比が 2.58:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#038370、4.65:1）を使う。

Typography

• セクション見出しは英字の大見出しを白で置き、下に 2 色バーと和文ラベルを並べる。
• サービス説明のリード文は中央揃え。機能の本文は左揃え。
• 本文の行間は 1.9 前後と広めにとる。
• 強調は太字ではなく黄色マーカーで行う。
• 注釈は※付きの小さい文字で、各ブロックの直下に置く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は情報カードを 3 列、機能紹介を 2 列にする。
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 18px（375px 幅換算）
• クリームのパネルは左右に約 8px のミントの余白を残して置く。
• パネル内の要素は左右 16〜20px の内側余白で配置する。
• 機能紹介は写真→マーカー見出し→本文の順で縦に積む。
• 情報カードは縦に並べ、間隔は 16px。

Elevation & Depth

• 影は使わず、すべてフラットに描く。
• 奥行きは地色の差（ミント／クリーム／白）だけで表現する。

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は横長 16:9 程度の角丸 12px で切り抜く。
• セクション境界: ファーストビュー下は右側が一段盛り上がった波形の段差。クリームのパネルも右上がタブ状に盛り上がる。
• 吹き出し見出しはピル型に近い大きな角丸で、下中央に三角を付ける。
• ロゴ枠はピル型で、ミントとチャコールの破線ボーダーにする。
• パネルの終わりには下向き三角付きの曲線を置き、次の要素へ視線を誘導する。

Components

• 英字大見出し＋2色バー（section-heading）: 白の英字大見出しの下に、ミントとチャコールの短いバーと和文ラベルを置く。
• 吹き出し見出し（speech-heading）: 白地に濃いミントの太枠を付け、文字も濃いミント。下中央に三角を付ける。
• 情報カード（info-card）: 濃いミントの角丸面に白の太字で短い説明を書く。
• 機能紹介ブロック（feature-block）: 角丸の写真、黄色マーカー付きの見出し、本文の順で並べる。
• 店舗リンクボタン（button-primary）: 白地に濃いミントの枠を付け、ロゴと短いラベルを入れる。右端に矢印を置く。
• 黄色マーカー（marker-highlight）: 見出しの一部に、文字の下半分の高さで黄色の帯を敷く。
• クリーム角丸パネル（content-panel）: 右上がタブ状に盛り上がった大きな角丸パネル。
• 注釈（note-text）: ※付きの小さい文字。各ブロックの下に置く。

Do's and Don'ts

Do - ミント・クリーム・白の 3 層で面を構成する。 - 大きな角丸と吹き出しで、柔らかく親しみやすい形を保つ。 - 強調は黄色マーカーで行う。 - 注釈は各ブロックの直下に小さく添える。 - ファーストビューにはマスコットと紙吹雪を置き、楽しさを出す。

Don't - 影やグラデーションを使わない。 - 赤や紺などの強い色を広い面に使わない。 - 角の立った四角いボタンにしない。 - 本文を詰めすぎない（行間は 1.8 以上を保つ）。 - 写真を角丸なしで裁ち落とさない。

Page Structure

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

1. ファーストビュー（サービス名と開始時期を告知する。）: 白地に紙吹雪を散らす。上部に短いコピーを 2 つ、太字のキャッチ、破線枠のロゴ、マスコット 2 体、開始時期の大きな文字の順に縦に並べる。
2. 注釈（開始時期の補足を伝える。）: ミント地に小さい文字で置く。
3. ムービー（動画でサービスの世界観を伝える。）: 英字見出しの下に角丸の動画埋め込みを置き、下に注釈を添える。
4. サービス概要（サービスが何かを説明する。）: クリームのパネル内に、ロゴと「とは…」の見出し、中央揃えのリード文、アプリ画面の図解を置く。
5. 残高の説明（仕組みを要点ごとに整理する。）: 吹き出し見出しの下に、濃いミントの情報カードを 3 枚並べる。
6. 便利な機能（機能を 4 つ紹介する。）: 吹き出し見出しの下に、写真＋マーカー見出し＋本文のブロックを 4 回繰り返す。
7. 利用店舗への導線（使える店舗を探すページへ誘導する。）: 下向き三角付きの曲線の下に、枠線ボタンを 2 つと注釈を置く。

Imagery

• スマホを手に持ち、決済画面を見せる実写。背景は浅い被写界深度でぼかす。
• 店頭のレジやテーブル上など、生活の場面を自然光で撮る。
• アプリ画面の図解は白地のモックアップを使い、切り替えを曲線の矢印で示す。
• マスコットは太い輪郭線のシンプルなフラットイラストにする。
• 背景装飾は黄色の四角い紙吹雪を、ランダムな角度で散らす。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はファーストビューを横に広げ、ロゴを中央、マスコットを左右に分けて配置する。
• PC のクリームパネルは最大幅 約 800px 相当で中央に置き、周りをミントの余白にする。
• 情報カードは PC で 3 列、機能紹介は 2 列のグリッドにする。
• 店舗ボタンは PC で横 2 列に並べる。
• 英字見出しは 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 行書くと起動時に読み込まれる。