DESIGN.md — 若草色の野原と手描きキャラのゲームアプリLP（Pastel Meadow Character Game LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: かわいい、やさしい・柔らかい、親しみ・手作り感、ナチュラル
• キーワード: 野原の背景・パステルのリボン見出し・雲形の吹き出し・手描きの茶色い線・キャラが主役
• 地の質感: 手描きの線画と平塗り。紙の上の絵本のようにマットで、影はほとんど付けない
• 形: ふくらみのある雲形、リボン帯、角丸の額縁、円形のアイコン
• 温度感: 暖かく穏やか。黄緑の地に、ピンク・クリーム・水色を差し色にする

Colors

• 地色は全セクション共通で若草色にする。セクションごとに地色を変えない
• 区切りは帯ではなく、茂みや花のイラストで自然に分ける
• 見出しのリボンはピンク・黄・水色を順に使い回す
• 強調語はピンクか水色の文字にし、本文は茶色で書く
• 雲形パネルにはクリーム色または淡いピンクを敷いて、野原と分ける
• 黒や純色の原色は使わず、線は茶色でそろえる
• ribbon-heading は文字 #FEFEFE × 背景 #F4A3AE のコントラスト比が 1.95:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#E4213C、4.54:1）を使う。

Typography

• 全体を太めの丸ゴシックで統一する
• 見出しは白文字で、色付きのリボン帯に載せる
• 強調語はかぎ括弧で囲み、本文の 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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。