DESIGN.md — 墨黒×朱赤×金の筆文字ご当地ラーメン通販LP（Bold Brush Regional Ramen Gift LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: 和風、力強い・インパクト、情報量多め・訴求型、親しみ・手作り感
• キーワード: 筆文字・湯気と麺のシズル・墨黒と金・地域色の帯・番号付き訴求・ギフト
• 地の質感: 暗いスモーク背景の写真、生成りの和紙調の地、金の箔のようなグラデーション文字
• 形: 角ばった帯とラベル、ひし形の番号枠、円で切り抜いた写真、丸いギフト用途バッジ
• 温度感: 暖色寄り。黒・赤・金・オレンジでこってりした温かみを出す

Colors

• 前半は墨黒の写真面、後半は白と生成りの面にして、雰囲気を切り替える。
• 大見出しは黒地に金グラデの筆文字か、白地に黒の明朝で書き、数字だけ朱赤にする。
• 地域ごとに赤・青・緑・黄・水色の帯をあてて色で区別する。
• 実績セクションは朱赤のグラデ地に白文字と金のメダルを置く。
• レビューの強調箇所はオレンジの太字にし、淡いベージュの吹き出しに入れる。
• 比較表とギフトバッジはオレンジ・朱・金の暖色だけで作る。
• gift-badge は文字 #FFFFFF × 背景 #E69000 のコントラスト比が 2.51:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#A66800、4.56:1）を使う。

Typography

• 見出しは明朝か筆文字にして、和の老舗らしさを出す。
• 説明文はゴシックの小さめの文字にし、行間を広めにとる。
• 写真の横に手書き風の短いフレーズを斜めに添える。
• 縦書きの明朝キャッチを写真の右端に重ねる。
• 数字（個数・順位・販売数）は見出しより大きく太くする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。地域紹介は写真と文字を左右に交互に並べる
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 40px、基本単位 8px、カード内 14px（375px 幅換算）
• 写真は全幅で使い、文字はその上に重ねる。
• 地域紹介は写真と説明の左右を交互に入れ替える。
• 番号付き訴求は写真とテキストカードを少し重ねて配置する。
• 調理手順は十字の罫線で区切った2×2グリッドにする。
• 比較表は2列で、中央に縦の点線を入れる。

Elevation & Depth

• テキストカードは白地にごく薄い影を付け、写真に重ねる。
• 金文字には暗い影かグロウを付けて黒地から浮かせる。
• それ以外はほぼフラットにし、罫線と色帯で区切る。

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 料理写真は角版か全幅にする。訴求の一部は円形に切り抜く。商品は切り抜き写真にする
• セクション境界: 直線で区切り、面の色を切り替える。写真の下端はグラデーションで溶かす
• 番号はひし形の枠に朱の明朝数字を入れる。
• ギフト用途は塗りの円形バッジを横に5つ並べる。
• ラベル帯は角ばった長方形にし、片側を地域色で塗る。

Components

• おすすめトッピング帯（region-label-band）: 地域色の帯に白い見出しラベルとトッピング名を入れる
• ひし形番号（diamond-number）: 白地のひし形を朱の線で囲み、明朝の数字を入れる
• 訴求テキストカード（feature-card）: 写真に重ねた白カード。小見出し・大見出し・下線・説明の順に並べる
• レビュー吹き出し（review-bubble）: ベージュの吹き出しにし、要点をオレンジ太字にする。属性を小さく添える
• 月桂冠実績バッジ（award-medal）: 金の月桂樹で数字実績を囲み、下に星を並べる
• ギフト用途丸バッジ（gift-badge）: オレンジ・朱・金の円に白文字で用途名を入れる
• 配送バッジ（shipping-tag）: 常温・送料無料などを示す朱や青の角型タグ
• 関連商品バナー（banner-card）: 赤枠の横長バナーに写真と商品名、小さな詳細ボタンを入れる
• 2列比較表（compare-table）: オレンジの見出しセルと白地の本文セルを点線で区切る

Do's and Don'ts

Do - 麺・スープ・湯気をアップで撮った暗い写真で始める。 - 見出しは明朝か筆文字で書き、数字は朱で大きくする。 - 地域や種類ごとに固有の色を決め、帯と地図アイコンで統一する。 - 実績・受賞は金のメダルと赤い地でまとめて見せる。 - 調理手順は線画イラストと番号で簡潔に示す。

Don't - パステルや寒色を主役にしない。 - 丸ゴシックだけで構成しない。 - 写真を小さな角丸カードに並べるだけにしない。 - 金文字を白地の上に置かない。 - 地域の色を混ぜたり使い回したりしない。

Page Structure

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

1. ファーストビュー（商品と内容の全体像を一目で見せる）: 丼と袋の写真、円形の手書きロゴ風コピー、配送タグ、明朝の商品名
2. 関連商品誘導（別セットへ誘導する）: ＼／で挟んだ見出しと赤枠の横長バナー
3. シズル訴求（本場の味の迫力を伝える）: 黒い背景に麺リフトの写真、金の筆文字、縦書きの説明
4. ラインナップ導入（種類の多さを見せる）: 白地に丼を俯瞰で散らし、茶の縦帯に縦書き見出し
5. 種類別紹介（各地域の味の違いを説明する）: 写真と文字を左右交互に並べ、地域色の帯、地図、手書きフレーズを添える
6. 選ばれる理由（製法と品質を番号付きで訴求する）: 生成りの地に写真と白カードを重ね、ひし形番号、最後は円形写真2つ
7. お客様の声（満足度を伝える）: オレンジ枠に星5つ、ベージュの吹き出し、縦書きの手書きコピー
8. メディア・実績（権威付けをする）: 赤いグラデ地にテレビ枠の画像、金の月桂冠2つ
9. 会社紹介（作り手への信頼を高める）: 工場の写真に認定メダルと縦書き帯を重ね、下に紹介文
10. 製法の比較（半生という特長を理解してもらう）: 麺の写真を背景に、オレンジ見出しの2列比較表と白抜きの大文字
11. 作り方（手軽さを伝える）: 十字罫線の2×2グリッドに線画、朱の番号、注意の縦書き
12. ギフト提案（贈答需要を喚起する）: 朱の帯、箱詰め写真に縦書き、用途の丸バッジ5つ
13. 商品仕様（内容量と保存方法を示す）: 箱の寸法図、袋の切り抜き、生成りの仕様欄と朱のタグ

Imagery

• 黒い背景で湯気と麺のつやを強調し、低い角度のアップで撮る。
• 白地に丼を俯瞰で散らし、卵・ねぎ・にんにくなどの素材を添える。
• 地域の名所や名物を墨の版画風イラストで描き、県の地図は単色のシルエットにする。
• 調理手順は太い黒線の手描き風線画で描く。
• 商品パッケージは切り抜いて斜めに重ねて並べる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像はないため、PC では SP の構成を中央 640〜750px 幅で見せるのを推奨する。
• 全幅の写真セクションは背景を画面幅いっぱいまで広げる。
• 種類別紹介は PC で写真とテキストを 50:50 の2カラムにする。
• 選ばれる理由の5項目は PC で2〜3カラムのカードにしてもよい。
• ギフトの丸バッジは PC でも1行5つを保つ。

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