--- version: alpha name: Pastel Meadow Character Game LP description: ページ全体に若草色の野原のイラストを敷き、茂み・花・切り株を散らした絵本風のゲームアプリ LP。見出しはパステルのリボン帯で、本文は茶色の丸ゴシック。雲形の吹き出しと、白フチの付いた額縁のような画像枠でかわいく柔らかく見せる。 colors: primary: '#CEE4A4' background-alt: '#ABCAA0' text: '#7A6656' line: '#978474' accent-1: '#F4A3AE' accent-2: '#F7CF7A' accent-3: '#A9D3EE' tint-1: '#FEF4D3' tint-2: '#FDE6E6' surface: '#FEFEFE' background: '#E3F5FF' marker: '#E58C8E' text-muted: '#F7FDF0' accent-1-accessible: '#E4213C' typography: headline-md: fontFamily: M PLUS Rounded 1c fontSize: 16px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.08em body-lg: fontFamily: M PLUS Rounded 1c fontSize: 15px fontWeight: 700 lineHeight: 1.8 letterSpacing: 0.06em display: fontFamily: M PLUS Rounded 1c fontSize: 24px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.04em body-md: fontFamily: M PLUS Rounded 1c fontSize: 12px fontWeight: 700 lineHeight: 1.7 letterSpacing: 0.05em accent: fontFamily: M PLUS Rounded 1c fontSize: 10px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.03em note: fontFamily: M PLUS Rounded 1c fontSize: 9px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.03em rounded: sm: 4px md: 10px lg: 24px full: 999px spacing: unit: 8px card: 12px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' ribbon-heading: backgroundColor: '{colors.accent-1}' textColor: '{colors.surface}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 30px cloud-bubble: backgroundColor: '{colors.tint-2}' textColor: '{colors.text}' typography: '{typography.display}' rounded: '{rounded.lg}' height: 200px screenshot-frame: backgroundColor: '{colors.surface}' rounded: '{rounded.sm}' height: 290px banner-carousel: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 100px character-selector: textColor: '{colors.accent-1}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 70px video-cloud-panel: backgroundColor: '{colors.tint-1}' rounded: '{rounded.lg}' height: 250px signboard-embed: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 280px sns-circle: backgroundColor: '{colors.surface}' textColor: '{colors.text}' rounded: '{rounded.full}' height: 32px --- # DESIGN.md — 若草色の野原と手描きキャラのゲームアプリLP（Pastel Meadow Character Game LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: かわいい、やさしい・柔らかい、親しみ・手作り感、ナチュラル - **キーワード**: 野原の背景・パステルのリボン見出し・雲形の吹き出し・手描きの茶色い線・キャラが主役 - **地の質感**: 手描きの線画と平塗り。紙の上の絵本のようにマットで、影はほとんど付けない - **形**: ふくらみのある雲形、リボン帯、角丸の額縁、円形のアイコン - **温度感**: 暖かく穏やか。黄緑の地に、ピンク・クリーム・水色を差し色にする ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#CEE4A4` | 野原の地色（若草色） | 45% | 画素の実測 | | `background-alt` | `#ABCAA0` | 茂み・木陰の濃い緑 | 7% | 画素の実測 | | `text` | `#7A6656` | 見出しテキスト・線画の茶色 | 3% | 推定 | | `line` | `#978474` | 枠線・イラストの輪郭 | 2% | 画素の実測 | | `accent-1` | `#F4A3AE` | ピンクのリボン見出し・強調語 | 2% | 推定 | | `accent-2` | `#F7CF7A` | オレンジ・黄色のリボン見出し | 2% | 推定 | | `accent-3` | `#A9D3EE` | 水色のリボン見出し・強調語 | 1% | 推定 | | `tint-1` | `#FEF4D3` | 雲形パネルのクリーム色 | 6% | 画素の主要色に補正 | | `tint-2` | `#FDE6E6` | 吹き出しの淡いピンク | 3% | 推定 | | `surface` | `#FEFEFE` | カード・額縁の白 | 8% | 画素の実測 | | `background` | `#E3F5FF` | 空・明るい背景 | 7% | 画素の実測 | | `marker` | `#E58C8E` | 強調語のピンク文字 | 0% | 画素の実測 | | `text-muted` | `#F7FDF0` | フッターの注記 | 0% | 画素の実測 | | `accent-1-accessible` | `#E4213C` | AA を満たす補正値（計算） | | 計算 | - 地色は全セクション共通で若草色にする。セクションごとに地色を変えない - 区切りは帯ではなく、茂みや花のイラストで自然に分ける - 見出しのリボンはピンク・黄・水色を順に使い回す - 強調語はピンクか水色の文字にし、本文は茶色で書く - 雲形パネルにはクリーム色または淡いピンクを敷いて、野原と分ける - 黒や純色の原色は使わず、線は茶色でそろえる - `ribbon-heading` は文字 `#FEFEFE` × 背景 `#F4A3AE` のコントラスト比が 1.95:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#E4213C`、4.54:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `headline-md` | リボン帯のセクション見出し | 丸ゴシック | M PLUS Rounded 1c | 800 | 16px | 1.3 | 0.08em | | `body-lg` | 紹介のリード文 | 丸ゴシック | M PLUS Rounded 1c | 700 | 15px | 1.8 | 0.06em | | `display` | 遊び方の強調ワード（かぎ括弧付き） | 丸ゴシック | M PLUS Rounded 1c | 800 | 24px | 1.3 | 0.04em | | `body-md` | キャラ説明・吹き出しの本文 | 丸ゴシック | M PLUS Rounded 1c | 700 | 12px | 1.7 | 0.05em | | `accent` | キャラ名ラベル（キャラごとに色を変える） | 丸ゴシック | M PLUS Rounded 1c | 800 | 10px | 1.3 | 0.03em | | `note` | フッターのリンク・著作権表記 | 丸ゴシック | M PLUS Rounded 1c | 700 | 9px | 1.6 | 0.03em | - 全体を太めの丸ゴシックで統一する - 見出しは白文字で、色付きのリボン帯に載せる - 強調語はかぎ括弧で囲み、本文の 1.6 倍ほどに拡大する - 吹き出しの文は行ごとに左右へずらし、リズムを付ける - 明朝体や細い書体は使わない - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。キャラ選択は 5 列＋2 列のアイコン並び - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 80px、基本単位 8px、カード内 12px（375px 幅換算） - セクションは、リボン見出し・本文・大きなイラストの順に縦に積む - 遊び方は、縦長のスクショ枠と雲形の吹き出しを左右交互にずらして重ねる - キャラを枠の外にはみ出させ、立体的に重ねる - 余白には花・茂み・切り株のイラストを散らす ## Elevation & Depth - 影はほぼ付けない。重なりは白フチと茶色の線で表す - 額縁やカードは茶色の 2px 線と白い内側で浮かせる - 雲形パネルは白い太フチを付けて、地から切り離す ## Shapes - **角丸**: 小 4px ／ 中 10px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: スクショは角丸が小さい縦長の額縁に入れる。キャラは輪郭に沿って切り抜く - **セクション境界**: 直線の境界はなく、茂み・草地のイラストで地続きにつなぐ - パネルはもこもこした雲形にする - 見出しは両端が切れ込んだリボン形にする - SNS ボタンは白い円に茶色のフチを付ける - キャラアイコンは選択中だけピンクの花形の背景を付ける ## Components - **リボン見出し**（`ribbon-heading`）: 両端が切れ込んだパステルのリボン帯に、白文字の見出しを中央寄せで置く - **雲形吹き出し**（`cloud-bubble`）: 淡色の雲形に強調語と説明を載せ、キャラを添える - **額縁スクショ**（`screenshot-frame`）: 白フチと茶色の線で囲んだ縦長のゲーム画面 - **バナーカルーセル**（`banner-carousel`）: 左右がはみ出すバナースライダー。ドットのページ送りと三角の矢印を付ける - **キャラ選択アイコン**（`character-selector`）: 丸いキャラアイコンと色付きの名前を並べ、選択中は花形の背景と矢印で示す - **動画雲パネル**（`video-cloud-panel`）: クリーム色のチェック柄の雲形の中に、額縁付きの動画を置く - **看板型埋め込み**（`signboard-embed`）: 白い看板に SNS の投稿を埋め込み、木の脚で地面に立たせる - **SNS丸ボタン**（`sns-circle`）: 白い円に茶色のフチと SNS のロゴ ## Do's and Don'ts **Do** - 背景は一続きの野原イラストにし、茂みや花で区切る - 線は茶色の手描き調にそろえる - キャラを枠の外にはみ出させて動きを出す - 見出しリボンの色はセクションごとに順番に変える - 強調語はかぎ括弧で囲み、大きなピンクか水色の文字にする **Don't** - 黒い線や濃い原色を使わない - 角張った四角いセクション帯で区切らない - 強いドロップシャドウやグラデーションのボタンを使わない - 細い書体や明朝体を使わない - 写真素材を使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（世界観とリリース時期を伝える）: 空と野原の大きなイラストにキャラを集め、右上にロゴ、左上に告知の手書き文字を置く 2. **バナーカルーセル**（事前登録や特典へ誘導する）: 白フチのバナーを横スライドで見せ、ドットと矢印を付ける 3. **作品紹介**（アプリの概要を伝える）: ピンクのリボン見出し、茶色のリード文、端末とキャラのイラストの順に置く 4. **キャラクター紹介**（登場キャラを見せる）: 切り株に立つ大きなキャラと説明文を置き、下に選択アイコンを並べる 5. **PV**（動画で魅力を伝える）: クリーム色の雲形パネルに額縁付きの動画を置く 6. **あそびかた**（ゲームの遊び方を紹介する）: 縦長のスクショ枠と雲形の吹き出しを左右交互に 3 つ並べる 7. **SNS**（最新情報への導線）: 水色のリボン見出しの下に、看板型の投稿埋め込みを置く 8. **フッター**（SNS・規約・著作権の表記）: 遠くの森と門の風景イラストに、丸い SNS ボタンと白い小さな文字のリンクを載せる ## Imagery - 茶色の線で描いた、ゆるい手描きキャラのイラスト - 黄緑の野原、丸い茂み、小花、切り株、風船など牧歌的な小物 - ほほの赤みなど、淡いピンクの差し色 - 平塗りに薄い陰影だけを付けた絵本調 - チェック柄や斜線の地紋をパネルに薄く入れる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央に約 950px 幅の 1 カラムで、両端も野原の背景を続ける - PC ではバナーを 3 枚並べて固定表示する - PC ではキャラアイコンを 7 体 1 列に並べる - PC ではリード文を 1 行にまとめる - 遊び方の交互配置は、PC でも中央寄せの幅で保つ ## 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-ea5a9fdf`（元 LP の URL から採番） - **元 LP**: https://jp.chiikawa-pocket.com/ja/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（7/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。