--- version: alpha name: Warm Beige and Leaf Green Lifestyle App LP description: 生成りベージュの地に深い緑を一色だけ効かせた、落ち着いたライフスタイル系アプリの LP。吹き出し型の緑ピル見出し、大きな細身の欧文番号、角丸写真で、余白の多いやさしい印象にまとめている。 colors: primary: '#3B834D' background: '#F2EFE6' surface: '#FFFFFF' cta: '#36854D' on-cta: '#FFFFFF' text: '#4C3F38' text-body: '#4C3F38' text-muted: '#9F9C96' secondary: '#38744C' line: '#8EA991' accent-1: '#2E9A44' tint-1: '#FDF4E4' background-alt: '#F2EFE5' typography: display: fontFamily: Noto Sans JP fontSize: 32px fontWeight: 500 lineHeight: 1.45 letterSpacing: 0.04em headline-lg: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.04em headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.04em headline-sm: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 8px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.05em accent: fontFamily: Montserrat fontSize: 28px fontWeight: 400 lineHeight: 1.0 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.04em rounded: sm: 6px md: 12px lg: 16px full: 999px spacing: unit: 8px card: 14px section: 90px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 30px heading-bubble: backgroundColor: '{colors.primary}' typography: '{typography.headline-lg}' rounded: '{rounded.full}' height: 34px tab-underline: textColor: '{colors.text}' typography: '{typography.body-md}' height: 30px idea-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 56px feature-number: textColor: '{colors.secondary}' typography: '{typography.accent}' height: 30px faq-item: textColor: '{colors.secondary}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 36px button-outline: textColor: '{colors.secondary}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 32px share-banner: backgroundColor: '{colors.accent-1}' textColor: '{colors.primary}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 210px floating-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 84px --- # DESIGN.md — 生成り×深緑のやさしい家計簿アプリ LP（Warm Beige and Leaf Green Lifestyle App LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ナチュラル、やさしい・柔らかい、シンプル・ミニマル、清潔・爽やか - **キーワード**: 生成りベージュ・深緑一色・吹き出し見出し・大きな細い番号・余白多め・日常写真 - **地の質感**: テクスチャなしのフラットな生成り地。影はほぼ使わず、細い緑線で囲む - **形**: 角丸 12〜16px の写真とカード、ピル型ボタン、下に三角が付く吹き出し見出し - **温度感**: 暖かめのニュートラル。ベージュの温かさに緑で爽やかさを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#3B834D` | ブランドの深緑（見出しピル・ボタン） | 4% | 画素の実測 | | `background` | `#F2EFE6` | ページ全体の生成り地 | 55% | 画素の実測 | | `surface` | `#FFFFFF` | カード・タブカード・フッターの白 | 10% | 画素の実測 | | `cta` | `#36854D` | ダウンロードボタン | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン・ピル上の白文字 | 0% | 画素の主要色に補正 | | `text` | `#4C3F38` | 見出し・小見出しの濃い茶黒 | 2% | 画素の主要色に補正 | | `text-body` | `#4C3F38` | 本文の茶グレー | 3% | 画素の主要色に補正 | | `text-muted` | `#9F9C96` | 非選択タブ・注釈 | 1% | 画素の実測 | | `secondary` | `#38744C` | 緑の見出し文字・大番号 | 1% | 画素の実測 | | `line` | `#8EA991` | FAQ枠・カード枠の淡い緑線 | 2% | 画素の実測 | | `accent-1` | `#2E9A44` | バナー枠の鮮やかな緑 | 2% | 推定 | | `tint-1` | `#FDF4E4` | バナー内のクリーム面 | 1% | 画素の実測 | | `background-alt` | `#F2EFE5` | SNSアイコン円の淡いベージュ | 0% | 画素の主要色に補正 | - 地は生成りベージュ一色で通し、白はカード・バナー・フッターだけに使う - 強調色は深緑一色。見出しピル、ボタン、番号、FAQ の文字に限る - 本文は純黒を使わず茶系の濃いグレーにする - 線は淡い緑の 1px で、面を塗らずに区切る - 写真の中の色を除き、赤や黄などの強い色は足さない ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのキャッチ（写真上の白文字） | ゴシック | Noto Sans JP | 500 | 32px | 1.45 | 0.04em | | `headline-lg` | 吹き出しピル内のセクション見出し | ゴシック | Noto Sans JP | 700 | 17px | 1.4 | 0.04em | | `headline-md` | 機能名などの緑見出し | ゴシック | Noto Sans JP | 700 | 18px | 1.4 | 0.04em | | `headline-sm` | 特長の小見出し | ゴシック | Noto Sans JP | 700 | 13px | 1.5 | 0.03em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 10px | 1.9 | 0.03em | | `note` | 注釈・見出し上のリード | ゴシック | Noto Sans JP | 500 | 8px | 1.6 | 0.05em | | `accent` | 01〜04 の大きな番号 | 欧文サンセリフ | Montserrat | 400 | 28px | 1.0 | 0.02em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 10px | 1.2 | 0.04em | - 和文は Noto Sans JP 系のゴシックで統一 - 番号だけ細身の欧文サンセリフを大きく緑で置く - 見出しの上に緑の小さなリード文を 1 行添える - 本文は小さめで行間を広く取る - 太字は見出しとボタンに限定する - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。カルーセルは横にはみ出させて並べる - **本文ブロックの幅**: 画面幅の約 82% - **余白**: セクション間 90px、基本単位 8px、カード内 14px（375px 幅換算） - セクション間は広く空けて余白で区切る - 特長の写真は左右交互に寄せ、番号は写真の反対側の下に重ねる - 見出しは中央、本文ブロックは左揃え - FAQ は全幅に近い枠を縦に積む - CTA の下に条件の注釈を小さく添える ## Elevation & Depth - 基本はフラットで影を使わない - FV の浮きカードとシェアバナーにだけ、ぼかしの大きい淡い影を付ける - 写真には影を付けず角丸だけにする ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 角丸 12〜16px の横長長方形。スマホ画面は端末フレームで見せる - **セクション境界**: 区切り線なしで余白のみ。FV 写真の下端は生成り色へグラデーションで溶かす - CTA と見出しはピル型 - 見出しピルの下中央に小さな三角を付けて吹き出しにする - カードの角丸は 8〜12px、枠は淡い緑の細線 - FAQ 枠は角丸 6px の細線 ## Components - **ダウンロードボタン**（`button-primary`）: 深緑のピル型。左にアイコン、白文字。下に条件の注釈を添える - **吹き出し見出し**（`heading-bubble`）: 深緑のピルに白抜き太字。下に三角。上に緑の小さなリード文 - **下線タブ**（`tab-underline`）: 選択中は濃い文字に濃い下線、非選択はグレーの文字に細い下線 - **アイデアカード**（`idea-card`）: 白地に緑線の角丸カード。上辺にピル型のラベルを重ね、価格帯を小さく出す - **特長番号**（`feature-number`）: 写真の横に大きな細い緑の欧文数字を置き、写真の下端に揃える - **FAQ アコーディオン**（`faq-item`）: 緑の細線枠。左に Q、右に＋。文字は緑 - **問い合わせボタン**（`button-outline`）: 緑の細線の角丸ボタンに緑文字と右矢印 - **シェアバナー**（`share-banner`）: 鮮やかな緑の枠にクリーム面の告知画像。下に白い帯のシェアリンク - **FV 浮きカード**（`floating-card`）: 写真の上に置く半透明の白カード。左に短い文、右に小さな写真 ## Do's and Don'ts **Do** - 生成り地と深緑の 2 色を軸にする - 見出しは必ず吹き出しピルにし、上にリード文を付ける - 写真は自然光の日常シーンを角丸で使う - 特長は写真を左右交互に置き、大きな番号を添える - 余白を広く取り、本文は短く 2〜3 行にまとめる **Don't** - 純白や純黒をページの地や本文に使わない - 緑以外の強い色をボタンや見出しに使わない - 濃い影や光沢グラデーションを付けない - 太い枠線や角張ったボタンにしない - 文字を詰め込んで余白を削らない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（雰囲気とアプリの価値を一目で伝える）: 全画面の人物写真に白い大きなキャッチ。浮きカードを重ね、下端は生成り色に溶かす。下に CTA と注釈 2. **使い方の体験**（気分別の提案を体験させる）: 吹き出し見出し、下線タブ、横にはみ出すアイデアカードのカルーセル 3. **機能紹介**（主な機能を画面で見せる）: スマホ画面のカルーセルとドット。下に緑の機能名と短い説明 4. **選ばれる理由**（4 つの特長で安心感を与える）: 角丸写真を左右交互に置き、大きな番号、小見出し、本文、注釈を添える 5. **よくある質問**（不安を解消する）: 緑の中央見出しに緑線のアコーディオン。下に枠線の問い合わせボタン 6. **シェア促進**（SNS での拡散を促す）: 吹き出し見出しと緑枠の告知バナー、白帯のシェアリンク、注釈 7. **SNS リンク**（公式アカウントへ誘導する）: 緑の文字ラベルに丸いアイコンボタンを横に並べる 8. **フッター**（再度の CTA と各種リンク）: 白地にロゴ、説明、CTA と QR、太字のリンクリスト、コピーライト ## Imagery - 20〜30 代女性の自然な日常写真。柔らかい自然光で、ベージュや茶の服が中心 - 手に持ったスマホでアプリ画面を見せる、生活感のあるカット - アプリ画面は端末フレーム付きで、緑のUIが映えるように見せる - 緑の丸いマスコットキャラクターをバナーなどにアクセントで使う - 装飾は電球などの細線アイコン程度にとどめる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC の FV は左にロゴ・キャッチ・CTA・QR、右に写真カードを 2 段で置く 2 分割にする - PC は右上にピル型のナビと CTA を固定して置く - 機能紹介は PC では白い大カードの中に説明とスマホ画面を横並びにする - 特長は PC ではジグザグ 2 列で、写真を小さくする - FAQ とバナーは PC でも 1 カラムで横幅を広げる - フッターは PC ではロゴ・CTA とリンクリストを左右 2 列にする ## 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-327a2070`（元 LP の URL から採番） - **元 LP**: https://yutoribi.com/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（8/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。