--- version: alpha name: Clay Green Playful Mobile Service LP description: 鮮やかな純緑と白を基調に、粘土細工風の立体キャラクターやコインで親しみを出した通信サービス LP。太字ゴシックの見出しと、ピル型の緑・黄ボタンで申込を促す。注釈は灰色の角丸パネルにまとめ、楽しさと信頼感を両立させている。 colors: primary: '#019F02' background: '#FFFFFF' background-alt: '#ECECEC' cta: '#FEFE02' on-cta: '#1A8E00' on-primary: '#FFFDFF' text: '#010001' text-body: '#2B2422' tint-1: '#CDECCC' accent-1: '#DB0E0E' dark-section: '#222222' surface: '#F1F1F1' line: '#ECECEC' secondary: '#E58A72' primary-accessible: '#018802' on-cta-accessible: '#188100' typography: display: fontFamily: Noto Sans JP fontSize: 44px fontWeight: 900 lineHeight: 1.15 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 28px fontWeight: 900 lineHeight: 1.6 letterSpacing: 0.04em accent: fontFamily: Archivo Black fontSize: 52px fontWeight: 900 lineHeight: 1.0 headline-sm: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 500 lineHeight: 1.6 label-button: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.1em headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.4 rounded: sm: 8px md: 14px lg: 24px full: 999px spacing: unit: 8px card: 20px section: 100px 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.primary}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 50px button-cta-yellow: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 50px button-outline: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 46px accordion-pill: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 48px feature-icon-nav: textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 110px point-card: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 700px step-circle: backgroundColor: '{colors.tint-1}' textColor: '{colors.primary}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 170px note-panel: backgroundColor: '{colors.background-alt}' textColor: '{colors.text-body}' typography: '{typography.note}' rounded: '{rounded.lg}' height: 600px speech-bubble: backgroundColor: '{colors.primary}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.lg}' height: 60px --- # DESIGN.md — 鮮やか緑×粘土細工の通信サービス LP（Clay Green Playful Mobile Service LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: BtoB・SaaS・ITサービス ／ **雰囲気**: ポップ・元気、かわいい、親しみ・手作り感、シンプル・ミニマル - **キーワード**: 純緑・粘土細工・ピル型ボタン・白地の余白・キャラクター吹き出し・太字ゴシック - **地の質感**: フラットな単色面に、粘土の質感がある立体写真を重ねる - **形**: ピル型ボタン、角丸大きめのカード、正円のステップ、雲状の楕円の境界 - **温度感**: 明るく暖かい。緑と黄にサーモンピンクのキャラクターを添える ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#019F02` | ブランド緑（FV・中盤の地、主ボタン） | 14% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白地 | 50% | 画素の実測 | | `background-alt` | `#ECECEC` | 注釈・料金表の灰色パネル | 8% | 画素の実測 | | `cta` | `#FEFE02` | 黄色の主CTA（緑地の上） | 2% | 画素の実測 | | `on-cta` | `#1A8E00` | 黄ボタン上の緑文字 | 0% | 画素の実測 | | `on-primary` | `#FFFDFF` | 緑地上の白文字 | 2% | 画素の実測 | | `text` | `#010001` | 見出しの黒 | 2% | 画素の実測 | | `text-body` | `#2B2422` | 本文・注釈の濃灰 | 2% | 画素の主要色に補正 | | `tint-1` | `#CDECCC` | ステップ円の淡い緑 | 4% | 画素の実測 | | `accent-1` | `#DB0E0E` | 金額強調の赤 | 0% | 画素の実測 | | `dark-section` | `#222222` | フッターの黒地 | 4% | 画素の実測 | | `surface` | `#F1F1F1` | フッターリンク行の淡灰 | 3% | 画素の実測 | | `line` | `#ECECEC` | 区切り線・枠線 | 0% | 画素の主要色に補正 | | `secondary` | `#E58A72` | キャラクターのサーモンピンク | 2% | 推定 | | `primary-accessible` | `#018802` | AA を満たす補正値（計算） | | 計算 | | `on-cta-accessible` | `#188100` | AA を満たす補正値（計算） | | 計算 | - 地は白が基本。FV と解説ブロックだけ純緑の全面帯にする - 白地の上の主ボタンは緑地に白文字。緑地の上の主ボタンは黄地に緑文字にする - 小見出しやラベルは緑の文字で、大見出しは黒にする - 注釈と料金表は灰色の角丸パネルにまとめ、中に白いカードを重ねる - 赤は金額などの数値強調だけに限定する - フッターは黒地に白文字。その下に淡灰のリンク行を置く - `button-primary` は文字 `#FFFDFF` × 背景 `#019F02` のコントラスト比が 3.48:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#018802`、4.59:1）を使う。 - `button-cta-yellow` は文字 `#1A8E00` × 背景 `#FEFE02` のコントラスト比が 3.95:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `on-cta-accessible`（`#188100`、4.64:1）を使う。 - `button-outline` は文字 `#019F02` × 背景 `#FFFFFF` のコントラスト比が 3.52:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#018802`、4.64:1）を使う。 - `accordion-pill` は文字 `#FFFDFF` × 背景 `#019F02` のコントラスト比が 3.48:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#018802`、4.59:1）を使う。 - `point-card` は文字 `#019F02` × 背景 `#FFFFFF` のコントラスト比が 3.52:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#018802`、4.64:1）を使う。 - `step-circle` は文字 `#019F02` × 背景 `#CDECCC` のコントラスト比が 2.76:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#018802`、4.58:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのキャッチ（白・極太） | ゴシック | Noto Sans JP | 900 | 44px | 1.15 | 0.02em | | `headline-lg` | セクションの大見出し（黒・中央寄せ） | ゴシック | Noto Sans JP | 900 | 28px | 1.6 | 0.04em | | `accent` | 緑地上の英字ロゴ風見出し | 欧文サンセリフ | Archivo Black | 900 | 52px | 1.0 | 0.0em | | `headline-sm` | アイコン下ラベル・カード小見出し（緑） | ゴシック | Noto Sans JP | 700 | 14px | 1.5 | 0.02em | | `body-md` | 本文（中央寄せ・行間広め） | ゴシック | Noto Sans JP | 400 | 15px | 2.0 | 0.04em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 500 | 11px | 1.6 | 0.0em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 17px | 1.2 | 0.1em | | `headline-md` | 料金表の容量・価格の数字 | ゴシック | Noto Sans JP | 700 | 18px | 1.4 | 0.0em | - 見出しは極太ゴシックで、2〜4行の短い改行にする - 本文は中央寄せ、行間2.0で文節ごとに改行する - ボタン文字は字間を広めにとる - ラベルは緑の太字2行を中央に置く - 単位（円・GB）は数字より小さくする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC は画像と文の左右2カラム - **本文ブロックの幅**: 画面幅の約 82% - **余白**: セクション間 100px、基本単位 8px、カード内 20px（375px 幅換算） - セクション同士は大きく余白を取り、境界線は使わない - 緑帯の中に白い角丸カードを縦に積む - 特長は3つのコインアイコンを横に並べ、下向き矢印でアンカーにする - 各特長はアイコン→ラベル→大見出し→本文→イラストの順に並べる - CTAは画面幅の80%ほどのピル型にする ## Elevation & Depth - 影は基本的に使わず、フラットにする - 立体感は粘土写真そのものの陰影で出す - イラストの下には淡灰の楕円を床のように敷く ## Shapes - **角丸**: 小 8px ／ 中 14px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 切り抜き写真を白地や緑地に直接置く - **セクション境界**: 白から緑へは、白い楕円が重なる雲状の縁で切り替える。それ以外は直線 - ボタンはすべてピル型。右端に白丸の矢印アイコンを付ける - アコーディオンは白い枠線のピル型で、右に白丸の下矢印を付ける - ステップは淡緑の正円。間を緑の下向き三角でつなぐ - POINT ラベルは緑のピル型にする - 吹き出しは粘土風の緑で、角が尖ったしっぽを付ける ## Components - **緑の申込ボタン**（`button-primary`）: 白地の上に置くピル型CTA。右に白丸の矢印アイコンを付ける - **黄の申込・相談ボタン**（`button-cta-yellow`）: 緑地の上や副CTAに使う黄色のピル型ボタン。文字は緑 - **緑枠のサブボタン**（`button-outline`）: 白地に緑の細枠と緑文字のピル型。流れの案内などに使う - **白枠のアコーディオン**（`accordion-pill`）: 緑地の上に置く白い線のピル型。質問文と白丸の下矢印を並べる - **コインアイコンのナビ**（`feature-icon-nav`）: 立体コインの下に緑のラベル2行と下矢印。3つ横に並べる - **POINTカード**（`point-card`）: 緑地上の白い角丸カード。緑のピル型ラベルと緑の小見出しから始める - **円形ステップ**（`step-circle`）: 淡緑の正円に白い大きな数字・見出し・説明を入れ、三角でつなぐ - **注釈・料金パネル**（`note-panel`）: 灰色の角丸パネルの中に白いカードを入れる。料金は行ごとに罫線で区切る - **キャラクター吹き出し**（`speech-bubble`）: 両脇の粘土キャラの間に、緑の吹き出しを2つ縦に並べる ## Do's and Don'ts **Do** - 緑は彩度の高い純緑(#019F02)の1色に統一する - イラストは粘土細工風の立体物で統一する - 見出しの周りに十分な白の余白を取る - 緑地では黄ボタン、白地では緑ボタンを使い分ける - 注意事項は灰色パネルにまとめて明示する **Don't** - グラデーションの多用や暗い緑の地は使わない - フラットな線画イラストを混ぜない - 強い影や立体ボタンは使わない - 本文を左寄せの長文で詰め込まない - 赤を見出しや面に使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（ロゴと常設の申込導線）: 白地。左にロゴ、右に緑のピル型ボタン 2. **ファーストビュー**（サービスの価値を一言で伝える）: 緑の全面地に白い極太キャッチ。粘土のスマホとコインを置き、下部に注釈 3. **CTA**（最初の申込導線）: 白地に緑のピル型ボタンを1つ 4. **サービス概要**（仕組みを短く説明する）: 緑の小ラベル、黒の大見出し、粘土ジオラマ、中央寄せの本文 5. **特長ナビ**（3つの特長へ誘導する）: コインアイコン3つを横並び。ラベルと下矢印を付ける 6. **特長1**（独自性を訴求する）: アイコンラベル→大見出し→本文→積んだコインのイラスト 7. **シミュレーション・注釈**（具体例とリスク説明）: 灰色パネル内の白カードに赤い数値。下に細かい注釈を並べる 8. **問いかけ導入**（疑問を投げて解説へ誘導する）: 雲状の縁から緑地へ切り替え。大きな？とキャラの斜め文字 9. **解説（Q&A）**（受け取り方とリスクを説明する）: 英字の大見出し、白枠のアコーディオン、黄CTA、白いPOINTカード、円形ステップ、吹き出し 10. **料金表**（プランと価格を示す）: 灰色パネル内の白カードに、容量と価格を罫線区切りで並べる 11. **特長2・3**（乗り換えの手軽さと回線の安心感）: アイコンラベル、大見出し、淡灰の楕円上のイラスト、本文、枠線ボタン 12. **最終CTA**（申込と相談の2択）: 緑と黄のピル型ボタンを縦に並べる 13. **フッター**（関連リンクと会社情報）: 黒地に2列のリンク、淡灰の矢印付きリンク行、白地にロゴと規約リンク ## Imagery - コイン・スマホ・家具・アンテナを、粘土やクレイで作ったような立体物として撮る - マスコットは鳥型のサーモンピンクの粘土キャラ。緑のくちばしと黒い点の目 - 配色は緑・黄・サーモン・木の茶色に絞る - 切り抜いて白地に置き、床には淡灰の楕円を敷く - 柔らかい光でマットな質感を出す - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCではFVのキャッチを2行にして横長の緑帯にする - PCの特長セクションは、左にアイコン、中央に見出しと本文、右にイラストの横並び - PCのステップは円ではなく、淡緑の横長角丸カードを縦に並べる - PCの料金表は1行に容量・価格・ポイントを横並びにする - PCの最終CTAは緑と黄のボタンを横に並べる - コンテンツ幅はPCで約800pxを中央に置く ## 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-8ed839f3`（元 LP の URL から採番） - **元 LP**: https://xmobile.ne.jp/btc-mobile/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（11/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。