DESIGN.md — 朱赤×麺色のラーメン屋風アニメ公式 LP（Ramen Shop Themed Anime Official Site）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ポップ・元気、和風、親しみ・手作り感、力強い・インパクト
• キーワード: ラーメン屋・雷文・朱赤・麺の黄色・レシート・肉球
• 地の質感: 淡黄地に麺のうねり線の透かし、マス目、海苔の質感、和紙風の淡いムラ
• 形: ピル型ボタン、ひし形サムネイル、四隅に雷文角のある枠、ギザギザの切り取り線
• 温度感: 暖色寄り。朱赤と黄色で食欲と賑わいを感じさせる

Colors

• 地色は白→淡黄→朱赤→白→淡黄→白と交互に切り替え、セクションの区切りを色で示す
• 朱赤地の上は白文字と黄色アクセントだけを使う
• 英字見出しは白地では深紅、淡黄地では朱赤、朱赤地では白、レシート内では黒
• 黄色は選択中タブ・話数・麺の線など『今ここ』の強調に限定
• 海苔カードは濃緑黒地に白文字で写真を引き立てる
• レシート内の価格・ポイントは薄グレーで遊び要素として控えめに
• button-pill は文字 #FFF2E3 × 背景 #CB4113 のコントラスト比が 4.43:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#C94013、4.51:1）を使う。
• badge-episode は文字 #CB4113 × 背景 #F5CD02 のコントラスト比が 3.16:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#A1340F、4.52:1）を使う。

Typography

• 英字見出しは極太の角張ったサンセリフ大文字で、右に雷文パターンを添える
• 各見出しの右上に縦書きの漢字見出しを細線の看板枠で薄く重ねる
• 本文はやや太めのゴシックで行間広め
• 強調フレーズは朱赤の帯に白抜き文字
• 下線は点線（朱赤）で手書き伝票風に
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、配信ボタンは 2 列グリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• 見出しは左寄せ、看板枠は右上に配置
• リストは横線区切りで日付＋タイトルの 2 行
• ボタングリッドは列間 10px、行間 8px
• 海苔カードは中央寄せで縦に積む
• セクション上部に食べ物写真をはみ出させて境界をまたぐ

Elevation & Depth

• 基本はフラットで影なし
• 食べ物の切り抜き写真に柔らかい落ち影
• キャラクターに黄色のずれ影（オフセット塗り）
• レシート面にごく薄い影

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 動画・写真は角丸ほぼなしの矩形、サムネはひし形、食べ物とキャラは切り抜き
• セクション境界: 色面の直線切替、雷文の帯、レシートのギザギザ線
• 枠は細線＋四隅に雷文の角飾り
• 海苔カードは端を不規則にちぎった形
• 話数の選択中は丼型の黄色シェイプ
• スライダー矢印は朱赤の円ボタン

Components

• 配信先ピルボタン（button-pill）: 朱赤地に白文字の全角丸ボタンを 2 列に敷き詰める
• 雷文角の MORE ボタン（button-more）: 白地に朱赤細線枠、左上と右下に雷文の角飾り
• 英字見出し＋雷文（heading-section）: 極太英字の右に雷文パターン、右上に縦書き看板枠
• 話数バッジ（badge-episode）: 黄色地に朱赤枠と朱赤文字で『○杯目』表記
• 話数タブ（tab-episode）: 白数字を 6 列並べ、選択中は丼型の黄色
• 海苔風カード（card-nori）: 濃緑黒の質感地に写真、曲名、クレジット、白肉球
• レシート風一覧（list-receipt）: 役職＋人名を並べ、右端に薄グレーの円記号と肉球、最後に合計
• 強調帯（band-highlight）: 朱赤ベタに白抜きの太文字で配信中を告知
• ひし形サムネ（thumb-diamond）: 白縁のひし形、選択中は黄縁でカラー、他はモノクロ

Do's and Don'ts

Do - セクション毎に地色を白・淡黄・朱赤で切り替える - 全ての英字見出しに雷文パターンを添える - 肉球アイコンを小見出しや区切りに散らす - ラーメン・餃子・卵など食べ物写真を境界にまたがせる - 一覧はレシートや伝票に見立てる

Don't - 寒色を主役にしない（藍は暖簾のみ） - 細い明朝で本文を組まない - ボタンを角ばった矩形にしない（MORE を除く） - 影やグラデーションを多用しない - お店の見立てと無関係な装飾を足さない

Page Structure

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

1. ファーストビュー（作品の世界観と配信中を伝える）: 淡黄地にキャラ集合イラストを丼に乗せ、縦書きキャッチ、上下に雷文と朱赤菱柄の帯
2. ビジュアル切替（キービジュアルの選択）: 朱赤帯の上にひし形サムネを 3 つ
3. 動画スライダー（PV を見せる）: 雷文角の枠、左右に朱赤円矢印、ひし形ドット
4. お知らせ（最新ニュース）: 日付＋タイトルを横線区切り、MORE ボタン
5. 放送・配信情報（視聴先の案内）: 淡黄地、強調帯、ピルボタン 2 列グリッド
6. あらすじ（各話紹介）: 朱赤地に話数タブ、話数バッジ、場面写真とサムネ列、白文字本文
7. 音楽（主題歌紹介）: 白地に海苔風カードを縦に 2 枚
8. キャラクター（登場人物紹介）: 淡黄マス目地に大きな透かし英字、切り抜きキャラ、名前と声優
9. スタッフ・キャスト（クレジット）: レシート風一覧、ギザギザ線で区切り合計表記
10. フッター（関連リンクと共有）: 藍の暖簾ロゴ、原作バナー、雷文挟みの SHARE、朱赤菱柄帯にコピーライト

Imagery

• アニメ調のキャラクターを切り抜きで大きく配置
• ラーメンの具や餃子を実写切り抜きで境界に置く
• 箸から伸びる黄色の多重線で麺を図案化
• 雷文・菱柄・麺のうねり線を地紋に使う
• 肉球アイコンを白・朱赤で散らす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は見出しと看板枠を左、内容を右の 2 カラム
• PC の配信ボタンは 3 列
• PC のスタッフ・キャストはレシートを 3 枚横並びにし朱赤地に置く
• PC の FV はロゴとキャッチを左右に分けイラストを中央
• 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 行書くと起動時に読み込まれる。