DESIGN.md — 生成り紙と水彩にじみの物語ゲーム LP（Watercolor Paper Narrative Game LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: やさしい・柔らかい、上品・高級、ナチュラル、シンプル・ミニマル
• キーワード: 水彩にじみ・生成り紙・明朝体・切り抜きイラスト・青から赤のグラデーション・叙情的
• 地の質感: わずかにざらつく生成り紙の地に、輪郭のぼけた水彩の色だまりを背景として散らす。
• 形: 四角い枠と細い罫線が中心。強調には真円のボタンを使う。
• 温度感: 青を基調にした涼しい色に、ローズの赤を差して温かみを足す。

Colors

• 背景は生成りの紙色を基本にし、セクションの境目は水彩のにじみでぼかしてつなぐ。
• 英字の見出しは青に統一する。和文の大見出しは、青から藤色、ローズへ移る文字グラデーションにする。
• 赤は購入ボタン・再生ボタン・タッチバッジの真円だけに使う。
• シーン画像を並べる帯は、左から赤、紫、青への横グラデーションで縁取る。
• 暗い面はフッターだけに使う。
• コピーの帯は、淡い水色または藤色が横に消えていくグラデーションにする。
• button-buy-circle は文字 #FDFDFD × 背景 #F54554 のコントラスト比が 3.52:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E90D1F、4.55:1）を使う。
• badge-touch は文字 #FDFDFD × 背景 #F54554 のコントラスト比が 3.52:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E90D1F、4.55:1）を使う。

Typography

• 文字はすべて明朝系・セリフ系でそろえ、ゴシック体は使わない。
• 英字の見出しは大文字にし、字間を広く取る。
• 本文は中央寄せにし、行間を 2 以上取って、ゆったり読ませる。
• 導入文は縦書きの 2 行で、詩のように見せてもよい。
• 大見出しの中の 1 文字か 1 語だけを赤やローズに変えて強調する。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラムで中央寄せ。お知らせだけは左に見出し、右に一覧の 2 列。
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• セクション同士は水彩のにじみでつなぎ、くっきりした区切り線は引かない。
• イラストと文章は交互に置き、イラストを左右に少しずらす。
• 仕様表は右寄せの英字ラベルと縦の罫線で 2 列にする。
• 余白を多めに取り、1 画面に載せる情報を少なくする。

Elevation & Depth

• 動画のサムネイル枠にだけ、ぼかしの大きい淡い影を付ける。
• シーン画像の帯の写真には、画鋲の装飾と軽い影を付ける。
• それ以外は平面のままにし、立体感は水彩の重なりで出す。

Shapes

• 角丸: 小 0px ／ 中 2px ／ 大 4px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物の輪郭に沿って白い縁を残す切り抜き、または水彩のにじみの形で切る。
• セクション境界: 水彩のにじみがグラデーションで消えていく形にする。
• 主ボタンは白い細線の縁取りを付けた真円にする。
• 動画の枠とラベルは角丸なしの四角にする。
• ストアのバッジは小さく角を丸めた四角にする。

Components

• 円形の購入ボタン（button-buy-circle）: 赤い真円の中に白い英字と和文を 2 段で入れる。キービジュアルの上に重ねて置く。
• タッチバッジ（badge-touch）: 赤い小さな円で、英字と小さな和文を入れる。イラストの角に重ねる。
• 動画サムネイル（video-card）: 細い青線の四角い枠。中央に赤い円の再生ボタンを置き、下に淡い水色のラベル帯を付ける。
• お知らせ一覧（news-list）: 白い日付ラベルの下に 1 行の本文を置き、下線で区切る。淡い水色の帯の上に並べる。
• シーン画像帯（scene-strip）: 赤から青へのグラデーションの帯に、画鋲で留めた写真風のカードを横に並べ、無限スクロールで流す。
• コピー帯（copy-band）: 1 行ずつ淡い色の帯を敷き、2 行を左右にずらして置く。
• 仕様表（spec-table）: 左に右寄せの英字ラベル、右に値を置き、縦の罫線で区切る。
• フッター（footer-dark）: 墨色の面に、白枠の SNS ボタン、ロゴ、権利表記を中央に並べる。

Do's and Don'ts

Do - 背景には必ず水彩のにじみを散らし、紙の質感を残す。 - 見出しは英字の大文字見出しと和文の明朝見出しを組み合わせる。 - 赤は丸い操作要素だけに使い、ほかの面には使わない。 - イラストは白い縁取り付きの切り抜きで配置する。 - 余白を広く取り、静かに読み進めるリズムを作る。

Don't - ゴシック体の太字や派手な見出し帯は使わない。 - 原色のベタ塗りや濃い影を使わない。 - 角丸の大きいカードやピル型のボタンを使わない。 - セクションをくっきりした直線や色の切り替えで区切らない。 - 1 画面に情報を詰め込まない。

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ヘッダー（対応機種、言語切替、SNS への導線）: 小さな機種ロゴと言語切替を左に、SNS を右に置いた細いバー。
2. ファーストビュー（作品の世界観と発売日を伝える）: 明朝のキャッチと手書き欧文のロゴの下に、水彩の人物の大きなイラストを置く。左に赤い円の購入ボタン、下に青から赤へのグラデーション文字で日付を置く。
3. お知らせ（最新情報を伝える）: 淡い水色の帯に、左の英字見出しと右の下線付き一覧を並べる。
4. 動画（トレーラーへ誘導する）: 青い枠のサムネイルを縦に 2 つ並べ、それぞれに水色のラベルを付ける。
5. シーン帯（作品の場面を見せて雰囲気を伝える）: グラデーションの帯に、画鋲で留めた画像を横に流す。
6. 作品紹介（表現技法とスタッフを紹介する）: グラデーション文字の見出しと中央寄せの本文の下に、鉛筆の線画を置き、肩書きと人名を縦に並べる。
7. 物語（あらすじを情緒的に伝える）: 空の水彩背景に縦書きの導入文を置く。続けて、タッチバッジ付きのイラストとコピー帯を交互に並べる。
8. ダウンロード・製品情報（購入先と仕様を示す）: ロゴの下にグラデーション帯の見出しを置き、ストアのバッジを並べ、その下に縦罫線の仕様表を置く。
9. 締めのビジュアル（余韻を残す）: 水彩のにじみの形で切り抜いた人物の風景イラスト。
10. フッター（SNS、公式サイト、権利表記を載せる）: 墨色の面に、白枠ボタンとロゴを中央に並べる。

Imagery

• 人物は透明感のある水彩風のデジタル画で描き、頬と輪郭に赤みを差す。
• 背景素材は青・藤色・ローズの水彩のにじみや空、雲にし、輪郭をぼかす。
• スタッフ紹介には鉛筆のハッチングで描いた線画を使い、色を付けない。
• シーン画像は写真風のカードにし、縁を破いたような白縁と金色の画鋲を付ける。
• 日常の教室や校舎、画材、空など、懐かしさを感じるモチーフを選ぶ。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はキービジュアルの人物を右半分に置き、タイトルとボタンを左に並べる。
• PC は動画を 2 列で横に並べる。
• PC の作品紹介は、線画を左、本文を右に並べ、スタッフは 2 列と 1 列に配置する。
• PC の物語は、イラストとコピー帯を左右交互に並べる。
• PC のダウンロード欄は、左にロゴとバッジ、右に仕様表の 2 列にする。
• 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 行書くと起動時に読み込まれる。