DESIGN.md — 朱赤×和紙×墨黒のレトロなラーメン店 LP（Retro Red Ramen Shop LP）

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

Overview

• 業種: 飲食店・レストラン ／ 雰囲気: レトロ、和風、力強い・インパクト、親しみ・手作り感
• キーワード: 朱赤・和紙テクスチャ・墨の筆跡・縦書き・昭和レトロ看板・シズル写真
• 地の質感: 生成りの紙に墨のにじみや筆跡がかかった和紙調。フッターは黒板のようなざらついた墨黒
• 形: 角丸なしの四角が基本。セクションの境目は斜めに切り、破れた紙のような縁も使う
• 温度感: 暖色寄り。朱赤と焼き色のベージュで温かい

Colors

• 朱赤・生成り・焼き色ベージュ・墨黒の 4 種類の地をセクションごとに切り替える
• 朱赤の地には生成りの文字を置き、真っ白は使わない
• ロゴや見出しの箱は朱赤の面に生成りの細い内枠を付け、看板のように見せる
• 墨黒はページの最後（店舗情報）だけに使い、ページを締める
• CTA は朱赤の面に白文字。サブボタンは白の面に墨色の文字
• 寒色は使わない。色の数は暖色の中だけに抑える
• logo-badge は文字 #EEE7D5 × 背景 #DC412E のコントラスト比が 3.52:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#C13220、4.55:1）を使う。
• heading-box は文字 #EEE7D5 × 背景 #DC412E のコントラスト比が 3.52:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#C13220、4.55:1）を使う。
• vertical-heading は文字 #EEE7D5 × 背景 #DC412E のコントラスト比が 3.52:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#C13220、4.55:1）を使う。
• button-primary は文字 #F3F1E9 × 背景 #EC3A2B のコントラスト比が 3.57:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D62213、4.53:1）を使う。
• fixed-bottom-bar は文字 #F3F1E9 × 背景 #DC412E のコントラスト比が 3.84:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#C13220、4.53:1）を使う。

Typography

• 見出しは昭和の看板のような太いレトロ書体にする
• 特長の見出しは縦書きにし、写真の横か上に重ねる
• 本文は小さめの太字ゴシック。行間は広めに取り、中央揃えにする
• 番号ラベルは明朝で書き、下に短い赤線を引く
• ボタン・店舗名・数字は明朝やセリフ体で和の雰囲気を出す
• 写真の上に置く見出しには白い縁取りや影を付けて読めるようにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は画面幅いっぱいか、左右どちらかに寄せる
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 写真と見出しの箱を少し重ね、雑誌のように組む
• こだわりの写真は左右に交互にずらし、画面端まで伸ばす
• 本文は中央揃えで短く改行する
• ボタンは幅 85% で左に寄せ、縦に並べる
• 店舗情報は細い枠のカードに入れ、見出しは枠線の切れ目に置く

Elevation & Depth

• 影はほとんど使わない。重なりと紙の質感で奥行きを出す
• 丼の写真だけに柔らかい落ち影を付ける
• 斜めに傾けた札（価格や特典）には薄い影を付ける

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 4px。ボタンは角丸の長方形。
• 写真の切り抜き: 丼は真上から撮り、円形に切り抜く。ほかの写真は角丸なしの四角
• セクション境界: 斜めのカット、破れた紙の縁、墨の筆跡
• 箱やカードは角丸なしかごく小さい角丸にする
• 見出しの箱は二重枠（外が朱赤、内が生成りの細線）にする
• 特典の札は少し傾け、角を切った枠にする
• ボタンの末尾には二重の山括弧の矢印を付ける

Components

• 看板風のロゴの箱（logo-badge）: 朱赤の正方形に生成りの細い内枠と銀の縁。写真の上に重ねて中央に置く
• 見出しの看板箱（heading-box）: 朱赤の箱に生成りの太い見出しを 2 行で入れる。二重枠にする
• 縦書きの見出し（vertical-heading）: 縦書きのレトロ書体を朱赤の短冊か朱赤の地に置く
• 番号付きのこだわり見出し（numbered-point）: 写真の中央に「其の◯」と赤い下線、その下に項目名を重ねる
• 斜めの特典札（tilted-ticket）: 生成りの札に墨色の太字と小さな注釈。角を切った二重線の枠で傾けて置く
• 主ボタン（button-primary）: 朱赤の四角に白い明朝の文字と二重の矢印を付ける
• サブボタン（button-secondary）: 白い四角に墨色の文字。上に丸く切り抜いた丼の写真を重ねる
• 店舗情報のカード（store-card）: 墨黒の地に白い細枠。店名は枠線の上に置き、営業時間は大きな数字、その下に赤い区切り線を引く
• 画面下に固定するナビ（fixed-bottom-bar）: 朱赤の帯にアイコンと店舗情報への導線、右端に黒い MENU ボタンを置く

Do's and Don'ts

Do - 地には和紙や墨のにじみのテクスチャを敷く - 丼の写真は真上から撮り、大きく見せる - 見出しは看板のような箱か、縦書きで組む - こだわりは「其の1〜4」の番号で並べる - 色の地をセクションごとに変え、境目は斜めに切る - 店舗情報は墨黒の地に細い枠のカードで締める

Don't - フラットな純白の地や寒色を使わない - ピル型のボタンや大きな角丸を使わない - 細く現代的なゴシックで見出しを組まない - グラデーションや光沢の装飾を加えない - 本文を長い段落にしない - 1 枚の画面にたくさんの色を混ぜない

Page Structure

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

1. ファーストビュー（商品の看板とシズル感を一目で伝える）: 朱赤の地に丼 2 つを上下に置き、中央にロゴの箱を重ねる
2. お知らせ（最新の情報への導線）: 朱赤の地に細い枠。左に縦線と英字のラベル、右に一覧へのリンクを置く
3. コンセプト（利用する場面と店の魅力を伝える）: 生成りの地に大きな赤い漢字と墨色のキャッチを組み、店内写真と中央揃えの紹介文を続ける
4. 看板商品（代表メニューを印象づける）: 墨の筆跡の上に丼の写真を置き、縦書きの朱赤の短冊を重ねる
5. 特長（スープ）（味へのこだわりを伝える）: 朱赤の地に縦書きの大見出し、調理写真、白い小さな本文を並べる。境目は斜めに切る
6. こだわりポイント（素材や手作りの工程を 4 つ見せる）: 焼き色ベージュの地に見出しの箱を置き、番号付きの写真を左右交互に並べる
7. 特典の訴求（無料サービスを目立たせる）: 写真の上に斜めの札を重ねる
8. CTA（詳しい情報とメニューへ誘導する）: 朱赤の主ボタンと、丼の写真付きの白いサブボタンを縦に並べる
9. 店舗情報への導線（店舗の詳細ページへ誘導する）: 生成りの地に赤い二重枠の大見出し箱を置き、右下にリンクの帯を付ける
10. 店舗情報・フッター（営業時間・住所・定休日を伝える）: 破れた紙の縁から墨黒の地に切り替え、ロゴ、店舗カード、SNS ボタン、コピーライトを並べる

Imagery

• 料理は真上か斜め上から、明るく彩度の高いシズル写真で撮る
• 丼は白地に赤い文字が入った器を使い、円形に切り抜く
• 調理の場面（湯切りや煮込み）は手元に寄って撮る
• 店内写真は端を和紙にぼかして溶け込ませる
• 墨の筆跡やしぶき、和紙のシミを装飾として重ねる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は FV で丼を左右に置き、ロゴを中央、縦書きのナビを左上に置く
• PC のコンセプト文は縦書きにして、写真の横に置く
• PC のこだわりは 4 枚の写真を互い違いのコラージュに並べる
• PC の店舗カードは 2 列に並べ、フッターにナビを横一列で置く
• SP は画面下に固定のナビ帯を出す

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