DESIGN.md — 朱赤×クリームの中華風アニメゲーム LP（Ramen Shop Red and Cream Anime Game LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ポップ・元気、和風、かわいい、親しみ・手作り感
• キーワード: 中華風ラーメン店・朱赤とクリーム・雷文フレーム・肉球モチーフ・アニメキャラ・のれん
• 地の質感: クリーム地にうっすら肉球や波線の地紋。朱赤の面にも濃い肉球柄を薄く散らす。帯には格子柄の赤チェック。
• 形: 角丸のカード画像に雷文の帯を上下に付ける。見出しは肉球アイコン付きで下に点線を引く。
• 温度感: 暖色。赤・橙・黄で温かい食べ物の印象。

Colors

• クリーム地と朱赤地を大きなブロックで交互に敷く。
• 朱赤地では文字を白にし、見出しも白の極太ゴシックにする。
• クリーム地では本文を茶灰色、英字見出しとラベルを赤にする。
• 紺はのれん・バッジ枠など和の差し色だけに使う。
• 黄は肉球アイコンやきらめきに少しだけ使う。
• CTA は公式ストアバッジの黒を使い、独自の色は付けない。
• page は文字 #776F67 × 背景 #F8E9A6 のコントラスト比が 4.04:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-accessible（#6F6760、4.54:1）を使う。

Typography

• 本文も太め（700）にして、にぎやかな面に負けないようにする。
• 本文は行間を広め（2.0）、字間 0.08em にする。
• 特長見出しはポップな極太丸文字にし、頭に肉球アイコンを付ける。
• 英字見出しは赤の極太サンセリフ、下に日本語のサブ見出しを赤で添える。
• FVのキャッチは縦書きにして、店の看板らしさを出す。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は特長を画像と文字が左右に入れ替わる 2 カラムにする
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 特長は「見出し→点線→画像カード→説明文」の順に縦に積む。
• 画像カードは画面幅いっぱいから左右に約 20px ずつ余白を取る。
• カルーセルは左右に赤い丸の矢印、下にひし形のドット。
• セクションの境目に、料理写真（卵・餃子）をはみ出させて置く。

Elevation & Depth

• 基本はフラットにし、影はほとんど付けない。
• スマホ枠のモックは黒く太い縁取りで立体感を出す。
• 料理写真は切り抜いて軽い落ち影を付け、セクション境界に重ねる。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸 12px のカード。上下に雷文の帯を付け、クリームの地紋の上にスクリーンショットを斜めに重ねる。
• セクション境界: 直線で色を切り替える。境界に切り抜きの料理写真やキャラの手をはみ出させる。
• 装飾枠には雷文（四角い渦巻き）を使う。
• バッジは角丸の長方形にし、紺の二重線で縁取る。
• スペック表のラベルは小さな赤い四角タグにする。

Components

• アプリストアボタン（store-badges）: 黒い角丸の公式ストアバッジを 2 つ横に並べる
• 肉球付き特長見出し（feature-heading）: 白の極太丸文字で、頭に肉球アイコン、下に白い点線
• 英字＋日本語見出し（section-title）: 赤の極太英字の下に赤の日本語サブ見出し。背景に縦書きの薄い文字
• 雷文フレーム画像カード（feature-card）: クリーム地紋の角丸カードで、上下に赤い雷文の帯を付ける
• カルーセル矢印（carousel-arrow）: 朱赤の丸に白の矢印を入れ、白い縁を付ける
• 配信中バッジ（status-badge）: 白地に紺の二重枠を付け、左右に黄色の肉球、紺の文字
• スペック表の行（spec-row）: 赤い小タグのラベルと太字の値。行の間は赤い点線で区切る
• のれん型ロゴ（noren-logo）: 棒に吊るした紺色ののれんに白文字のタイトルを入れる
• 雷文挟み小見出し（meander-label）: 赤の英字の左右に雷文の帯を並べる

Do's and Don'ts

Do - 朱赤とクリームの大きな面を交互に使う。 - 肉球・雷文・のれんなど、店やキャラにちなむモチーフを繰り返し使う。 - 料理の切り抜き写真をセクション境界に重ね、立体感を出す。 - 見出しは極太で、遊び心のある書体にする。 - ゲーム画面はスマホ枠や角丸カードに入れて見せる。

Don't - 青や緑の寒色を地の色に使わない。 - 細い明朝の本文で弱々しくしない。 - 装飾のない平らな四角い画像を並べない。 - CTA に独自色のボタンを作り、ストアバッジとちぐはぐにしない。 - 白地ばかりにして、色の帯の切り替えをなくさない。

Page Structure

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

1. ファーストビュー（作品の世界とキャラを一目で伝え、配信中を知らせる）: クリームの地紋にキャラの集合イラスト、縦書きキャッチ、お品書き札、白フチの極太告知、ストアバッジ。上下は赤いチェックの帯
2. PV動画（動画で雰囲気を見せる）: 白地に雷文枠のカルーセル。赤丸の矢印、中央に再生ボタン
3. 概要（ゲームの内容を説明する）: クリーム地に英字見出し、本文、スマホ枠に入れた画面のカルーセル
4. 特長（遊びの要素を一つずつ紹介する）: 朱赤の肉球柄の地に、肉球見出し・点線・雷文カード・白い本文を繰り返す
5. 出演声優（豪華キャストを打ち出す）: 特長と同じ型で文章だけ。下に餃子写真と猫の手をはみ出させる
6. ダウンロード・作品情報（インストールへ導く）: 白地に配信中バッジ、アプリアイコン、点線区切りのスペック表、ストアバッジ
7. フッター（原作への導線とシェア）: クリーム地にのれんロゴ、原作バナー、雷文を挟んだ見出しとSNSアイコン、リンク。最下部に赤チェックの帯

Imagery

• セル塗りのアニメ風キャラを全身で切り抜き、元気なポーズで使う。
• ゲーム画面のスクショを斜めに重ね、矢印やきらめきを手描き風に添える。
• ラーメンの具や餃子は真上や斜めから撮った写真を切り抜き、シズル感を出す。
• 地紋は肉球・波線・どんぶりのシルエットを低いコントラストで散らす。
• 雷文と赤い格子チェックを帯の装飾に使う。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は FV でキャラを中央、縦書きキャッチを左、ロゴとストアバッジを右に置く横長の構成にする。
• PC の特長は、画像と文字を左右交互に入れ替える 2 カラムにする。
• PC の概要は、文字を左・スマホ枠の画面を右に置く。
• PC のフッターは SHARE と COMIC を横に並べる。
• コンテンツ幅は PC で約 900px の中央寄せにする。

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