DESIGN.md — ミント×深緑のやさしい銀行アプリ LP（Fresh Green Friendly Banking App LP）

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

Overview

• 業種: 金融・保険 ／ 雰囲気: 信頼・誠実、やさしい・柔らかい、清潔・爽やか、シンプル・ミニマル
• キーワード: ミントグリーン・白カード・アプリ画面モック・フラットイラスト・吹き出し・ステップ
• 地の質感: グラデーションのない平塗り。影はごく薄い
• 形: 角丸カード、雲形の吹き出し、円形のアイコン座布団
• 温度感: やや涼しいが、イラストと黄色のアクセントで温かみがある

Colors

• 地は白、ミント、淡いグレーをセクションごとに交互に切り替える
• 深緑はダウンロード帯とファーストビュー下半分の面にだけ広く使う
• 緑の文字は Case・Step のラベルとサブボタンの文字に限る
• 黄色はイラスト内の小物とキャンペーンのバナーに限り、文字には使わない
• ストアボタンは公式どおり黒地に白文字にする
• 見出しは純黒ではなくチャコールにする
• button-secondary は文字 #1A8A4A × 背景 #E4F4ED のコントラスト比が 3.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#187D43、4.55:1）を使う。

Typography

• 手書き風の書体はファーストビューのキャッチにだけ使う
• 見出しはすべて中央揃えにする
• 本文は 13px 前後のグレーにし、強調部分は太字のチャコールにする
• 見出しは 2 行に分け、改行位置を意味の区切りに合わせる
• Case・Step のラベルは英字に数字を付けた形にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。その他機能だけ 2 列グリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• 白いカードは左右に約 14px の余白をとって置く
• 機能カードの中は見出し、説明、端末モックの順に縦に並べる
• 端末モックはカードの下端で切れるように配置する
• Step カードは縦に並べ、カードの間に下向きのシェブロンを置く
• ダウンロード帯は途中にもくり返し挿入する

Elevation & Depth

• カードには 0 2px 6px 程度のごく薄い影を付ける
• アイコンタイルは下辺にだけグレーの影を付け、浮いて見せる
• ストアボタンには影を付けない

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 端末モックは角丸の筐体ごと見せ、カードの下端でトリミングする。人物は胸から上
• セクション境界: 直線で背景色を切り替えるだけ
• 吹き出しは雲形にし、小さな丸を 2 つ添えて思考を表す
• アイコンは淡緑の円の中に緑の線画で描く
• サブボタンは緑の枠線を付けた淡緑のピル型にする
• Case の背景は斜めの境界でグレー（悩み）とミント（解決）に塗り分ける

Components

• ダウンロードボックス（download-box）: 深緑の帯の上に白い角丸ボックスを置き、見出しの下に iOS と Android の黒いストアボタンを 2 つ並べる
• ストアボタン（button-store）: 黒地の角丸ボタンに、ロゴと白い 2 行の文字を入れる
• もっと見るボタン（button-secondary）: 淡緑地に緑の枠線と緑文字を入れた横長のピル型ボタン
• ビフォーアフター吹き出し（case-illustration）: 左にグレー地と悩む人物、右にミント地と喜ぶ人物を置き、それぞれ雲形の吹き出しを付ける
• 機能カード（feature-card）: 白い角丸カードに、中央揃えの見出しと説明を入れ、その下にアプリ画面の端末モックを置く
• 機能アイコンタイル（icon-tile）: 白い角丸タイルの左に淡緑の円アイコン、右に 2 行のラベルを入れる
• ステップカード（step-card）: 緑の Step ラベル、端末のイラスト、太字の見出し、グレーの説明を順に入れる白いカード
• キャンペーン告知カード（campaign-card）: 白いカードに見出しと説明を入れ、黄色のバナー画像と、その下の暗色の「詳しく」帯を付ける

Do's and Don'ts

Do - 地色を白、ミント、グレーで交互に切り替え、リズムを作る - 機能の説明には必ず実際のアプリ画面の端末モックを添える - 人物イラストは線の少ないフラットなタッチで統一する - ダウンロードの導線をファーストビュー、中盤、末尾の 3 か所に置く - 余白を広くとり、1 カードに 1 メッセージにする

Don't - 赤や紫を大きな面に使わない - 濃いグラデーションや強い影を付けない - 手書き風の書体を本文に使わない - カードの中を左揃えの長文で埋めない - ストアボタンの色や形を変えない

Page Structure

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

1. ファーストビュー（アプリの価値を一言で伝える）: ミント地に手書き風の大見出しとサブコピーを置き、端末を 2 台重ねる。下半分は深緑にし、ダウンロードボックスを入れる
2. キャンペーン告知（今の特典で利用を促す）: 淡いグレー地に白いカードを置き、黄色のバナー画像を入れる
3. 利用シーン（悩みと解決を対比して見せる）: 白地に Case 1〜3 を縦に並べる。各 Case は小見出しとビフォーアフターの吹き出しイラストで作る
4. 主要機能（代表的な機能を画面付きで紹介する）: ミント地に機能カードを 3 枚、縦に並べる
5. その他の機能（機能の幅広さを示す）: 淡いグレー地にアイコンタイルを 2 列で並べ、最後にもっと見るボタンを置く
6. CTA（途中でダウンロードを促す）: 深緑の帯にダウンロードボックスを入れる
7. セキュリティ（安心感を伝える）: 白地に 3 項目を縦に並べる。各項目はイラスト、太字の見出し、説明で作る
8. はじめかた（始める手順を示す）: ミント地にステップカードを 3 枚、シェブロンでつないで並べる
9. 最終 CTA とフッター（最後にダウンロードを促す）: 深緑の帯にダウンロードボックスを入れる。その下に小さなリンクとコピーライトを置く

Imagery

• 人物は線の少ないフラットなイラストで描き、肌色、黒髪、ピンクや青の服を使う
• 小物（ATM、カード、時計、グラフ）は黄、緑、紫の平塗りで描く
• 端末モックは白い筐体に角丸の画面を入れ、緑を基調にした UI を見せる
• ファーストビューの周りに貯金箱、カード、グラフ、コインなどの小さなアイコンを散らす
• 手順のイラストは黒い線の端末に黄色の丸い吹き出しを添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC のファーストビューは、左にコピー、右に端末を置く横並びにする
• PC では Case を 3 列、Step を 3 列、セキュリティを 3 列に並べる
• PC の機能カードは横長にし、画像と文字を左右交互に置く
• PC のダウンロード帯は端末イラストと QR コード付きのボックスにする
• PC のコンテンツ幅は約 900px で中央に寄せる

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