DESIGN.md — 緑×オレンジ方眼ノートのゲーム紹介LP（Playful Green Notebook Game LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ポップ・元気、親しみ・手作り感、ナチュラル、情報量多め・訴求型
• キーワード: 方眼ノート・深緑の帯・オレンジCTA・キャラ切り抜き・紙と文房具・クローバー
• 地の質感: 薄い方眼紙や鉛筆の落書き柄を地に敷き、木目・芝生・空のイラスト帯で場面を切り替える
• 形: 角丸カード、太枠の角丸ボックス、斜めに貼った写真、波形やフリンジのセクション境界
• 温度感: 暖かく明るい。緑の自然さとオレンジの元気さ

Colors

• 地は方眼柄の淡い黄緑・クリーム・白をセクションごとに切り替える
• 深緑は日付帯・見出し・太枠・ポイント解説の全面地に使う
• 主CTAは山吹オレンジ一色、角丸ボタンに白文字と右向き三角
• 朱オレンジは注意書き・セクション見出し帯・強調語に限定
• 強調語は緑またはオレンジの文字で、下線や波線を添える
• サブボタンは黄緑やベージュ金で、主CTAと差をつける
• button-primary は文字 #FFFFFF × 背景 #FDA201 のコントラスト比が 2.03:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#A46901、4.57:1）を使う。
• button-sub は文字 #FAFEF9 × 背景 #BEAA6F のコントラスト比が 2.25:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#86733C、4.55:1）を使う。
• notice-box は文字 #FAFEF9 × 背景 #F26414 のコントラスト比が 3.12:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#C84F0B、4.5:1）を使う。
• speech-bubble は文字 #FAFEF9 × 背景 #F26414 のコントラスト比が 3.12:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#C84F0B、4.5:1）を使う。
• tab-switch は文字 #F26414 × 背景 #F6F1DE のコントラスト比が 2.81:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#C84F0B、4.5:1）を使う。

Typography

• 本文も太めのウェイトで、子どもにも読める明快さ
• 大見出しは極太丸ゴシックで、助詞だけ小さくして抑揚をつける
• 重要語にふりがなを振ることがある
• 強調語は色を変え、波線か下線を引く
• 本文は中央揃えが基本。長文の解説だけ左揃え
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。メダルや比較表など一部は 2 分割
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションは太枠の角丸ボックスか、背景色の帯でまとめる
• 画像は帯幅いっぱいか、カード内に角丸で収める
• CTAボタンはカード下部の中央、幅75%程度
• 写真は数枚を斜めに重ね、余白にキャラを置く
• 見出し前後に花やクローバーのアイコンを左右対称に置く

Elevation & Depth

• ボタンは下方向に濃い色の薄い影で立体感
• 斜めに貼った写真に白フチと軽い影
• カードは基本フラットで、枠線で区切る

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸の長方形。白フチ付きで斜めに貼った写真やキャラ切り抜きを混ぜる
• セクション境界: 波形・スカラップ、芝生やクローバーのフリンジ、雲などイラストの境界
• 主ボタンは角丸6px程度の長方形
• カードは角丸12〜20px、緑やオレンジの太枠3〜4px
• タブは上だけ角丸
• 丸い＋アイコンで2つの要素をつなぐ

Components

• 主CTAボタン（button-primary）: 山吹オレンジの角丸ボタン。白の太字と右の三角
• サブボタン（button-sub）: ベージュ金や黄緑の控えめなボタン
• 発売日帯（date-band）: 深緑の全幅帯に白で日付を大きく表示
• 注意ボックス（notice-box）: 朱オレンジ地の角丸ボックスに白文字で必要条件を伝える
• 機能リストカード（feature-list-card）: 深緑の枠の中に白カードを縦に並べる。キャラ画像・見出し・オレンジの三角
• 見出しリボン（heading-ribbon）: 緑の横線上に吹き出しやリボン状のラベルを載せ、極太の大見出しを置く
• 吹き出しバッジ（speech-bubble）: 朱オレンジの楕円吹き出しに白文字で一言
• ポイントタブ（tab-switch）: 緑地上の3つの角丸タブ。選択中はクリームでオレンジ文字
• 紙カード（paper-card）: クリーム色の紙をクリップで留め、クローバーの縁取りを付けた説明カード

Do's and Don'ts

Do - 地は方眼や落書き柄の淡い色にして、紙のような質感を出す - CTAは山吹オレンジだけに統一する - キャラやモチーフの切り抜きを見出しの左右に置いて賑やかにする - 強調語は色と波線で目立たせる - セクションごとに地の色や場面イラストを変えてリズムをつける

Don't - 黒や濃いグレーの重い地は使わない - 細い明朝体やシャープな書体は使わない - CTAに緑やオレンジ以外の色を混ぜない - グラデーションや光沢の強い装飾は避ける - 余白を詰めて文字を小さくしすぎない

Page Structure

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

1. ファーストビュー（作品の世界観とタイトルを見せる）: 全幅のキービジュアルの下に、方眼地の追加要素ロゴを＋アイコンでつなぐ
2. 発売日・注意（発売日と必要条件を伝える）: 深緑の日付帯と、朱オレンジの注意ボックス
3. お知らせ・映像（最新情報と紹介映像への導線）: ベージュのスクロール枠と、サムネ付きの白カード
4. できることの概要（本編と新要素の関係を示す）: オレンジ太枠の中に本編カード、＋アイコン、緑の機能リストカード、アップグレード案内
5. 新要素の紹介（新モードの内容を説明）: 大ロゴ、動画枠、図解イラスト付きの黄緑ボックス
6. お題の例（遊び方を具体的に見せる）: オレンジ見出し帯のクリームカードに画面写真とCTA、写真の斜め貼りコラージュ
7. 一週間の流れ（スケジュールを示す）: 吹き出し付きの緑リボン見出し、曜日の枠、ステップ説明
8. 報酬の紹介（続ける動機を示す）: クリップ留めの紙カードと、緑枠の白カード
9. 更新案内（継続的な追加を伝える）: 空色の帯に雲、写真2枚、キャラを左右に置く
10. 上達のポイント（コツをタブで解説）: 芝生のフリンジから始まる深緑の全面地、タブとスライダー
11. 相棒キャラ紹介（新しい音声機能を訴求）: クリーム地にキャラのイラスト、動画、木目帯にボタン3つ
12. エディション説明（違いを比較で示す）: オレンジ枠の2段比較表を＋でつなぐ
13. 商品情報・購入（購入へ誘導）: クリーム地にパッケージ画像、価格、オレンジの購入CTA
14. 関連リンク・フッター（関連サイトへの回遊）: 角丸バナーを縦に並べ、白地のフッターへ

Imagery

• 3DCGのキャラを白背景で切り抜き、見出しの左右に配置する
• ゲーム画面は角丸か白フチ付きで、少し傾けて重ねる
• 鉛筆・クリップ・定規などの文房具を写実的に置く
• 方眼紙に落書きした線画を背景柄に敷く
• クローバー・小花・雲・木目でセクションの場面を作る
• 2Dのフラットなキャラで図解をつくる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCではキービジュアルを左右2分割にし、発売日をビジュアル上に重ねる
• PCは中央約70%幅のコンテンツで、両脇に文房具やキャラの装飾を置く
• 機能リストや比較表はPCで横並びの2カラムにする
• 写真のコラージュはPCで本文カードの左右にはみ出して配置
• 商品情報はPCで左に画像、右に情報とCTAの2カラム

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 行書くと起動時に読み込まれる。