--- version: alpha name: Fresh Green Friendly Banking App LP description: ミントグリーンと濃い緑を地に、白い角丸カードを重ねて組んだ銀行アプリの紹介 LP。手書き風の見出し、フラットな人物イラスト、アプリ画面のモックアップで、親しみやすさと信頼感を両立させている。ストアのダウンロードボタンを入れた白いボックスを、深緑の帯の中で何度もくり返す。 colors: primary: '#00904B' background: '#E5F4ED' background-alt: '#E5F4ED' tint-1: '#B2DDC9' surface: '#F0F4F3' text: '#333333' text-muted: '#5F6B66' accent-1: '#1A8A4A' tint-2: '#E4F4ED' accent-2: '#FFC800' cta: '#020202' on-cta: '#EDEDED' background-alt-2: '#FEFFFF' accent-1-accessible: '#187D43' typography: display: fontFamily: Klee One fontSize: 44px fontWeight: 600 lineHeight: 1.35 letterSpacing: 0.08em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 22px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 19px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.04em headline-sm: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.02em accent: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 6px md: 12px lg: 16px full: 999px spacing: unit: 8px card: 20px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' download-box: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 135px button-store: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 34px button-secondary: backgroundColor: '{colors.tint-2}' textColor: '{colors.accent-1}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 42px case-illustration: textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 170px feature-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 400px icon-tile: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 52px step-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 260px campaign-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-lg}' rounded: '{rounded.lg}' height: 270px --- # DESIGN.md — ミント×深緑のやさしい銀行アプリ LP（Fresh Green Friendly Banking App LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 金融・保険 ／ **雰囲気**: 信頼・誠実、やさしい・柔らかい、清潔・爽やか、シンプル・ミニマル - **キーワード**: ミントグリーン・白カード・アプリ画面モック・フラットイラスト・吹き出し・ステップ - **地の質感**: グラデーションのない平塗り。影はごく薄い - **形**: 角丸カード、雲形の吹き出し、円形のアイコン座布団 - **温度感**: やや涼しいが、イラストと黄色のアクセントで温かみがある ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#00904B` | ブランドの深緑（ダウンロード帯） | 7% | 画素の実測 | | `background` | `#E5F4ED` | 基本の白地 | 40% | 画素の実測 | | `background-alt` | `#E5F4ED` | 薄いミントのセクション地 | 14% | 画素の実測 | | `tint-1` | `#B2DDC9` | ファーストビュー上部のミント地 | 7% | 画素の実測 | | `surface` | `#F0F4F3` | ごく淡いグレーのセクション地 | 9% | 画素の実測 | | `text` | `#333333` | 見出しの濃いチャコール | 2% | 画素の実測 | | `text-muted` | `#5F6B66` | 本文・補足のグレー | 1% | 推定 | | `accent-1` | `#1A8A4A` | Case・Step のラベル用の緑文字 | 0% | 推定 | | `tint-2` | `#E4F4ED` | アイコン座布団・サブボタン地の淡緑 | 1% | 画素の実測 | | `accent-2` | `#FFC800` | イラストやキャンペーンに使う黄色 | 2% | 推定 | | `cta` | `#020202` | ストアボタンの黒地 | 1% | 画素の実測 | | `on-cta` | `#EDEDED` | ストアボタン上の白文字 | 0% | 画素の実測 | | `background-alt-2` | `#FEFFFF` | Case イラスト背景のグレー | 2% | 画素の実測 | | `accent-1-accessible` | `#187D43` | AA を満たす補正値（計算） | | 計算 | - 地は白、ミント、淡いグレーをセクションごとに交互に切り替える - 深緑はダウンロード帯とファーストビュー下半分の面にだけ広く使う - 緑の文字は Case・Step のラベルとサブボタンの文字に限る - 黄色はイラスト内の小物とキャンペーンのバナーに限り、文字には使わない - ストアボタンは公式どおり黒地に白文字にする - 見出しは純黒ではなくチャコールにする - `button-secondary` は文字 `#1A8A4A` × 背景 `#E4F4ED` のコントラスト比が 3.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#187D43`、4.55:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの手書き風キャッチ | 手書き・筆 | Klee One | 600 | 44px | 1.35 | 0.08em | | `headline-lg` | セクション見出し | ゴシック | Zen Kaku Gothic New | 700 | 22px | 1.5 | 0.05em | | `headline-md` | 機能カードの見出し | ゴシック | Zen Kaku Gothic New | 500 | 19px | 1.5 | 0.04em | | `headline-sm` | Case の小見出し、セキュリティ項目のタイトル | ゴシック | Noto Sans JP | 700 | 14px | 1.6 | 0.03em | | `body-md` | 説明文 | ゴシック | Noto Sans JP | 400 | 13px | 1.7 | 0.02em | | `accent` | Case・Step の欧文ラベル | 欧文サンセリフ | Noto Sans JP | 700 | 14px | 1.4 | 0.03em | | `note` | フッターと注記 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `label-button` | サブボタンの文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.4 | 0.05em | - 手書き風の書体はファーストビューのキャッチにだけ使う - 見出しはすべて中央揃えにする - 本文は 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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-acedb982`（元 LP の URL から採番） - **元 LP**: https://lp.tochigin.bankapp.jp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。