--- version: alpha name: Bold Brush Regional Ramen Gift LP description: 黒い背景に湯気の立つ麺の写真を置き、金色の筆文字見出しで本場の味の迫力を出す。後半は生成りと白の面に切り替え、地域ごとの色帯、番号付きの訴求、オレンジ枠のレビュー、赤地のメディア実績で信頼を積み上げる。食品通販らしい情報量の多い縦長構成。 colors: primary: '#98160B' dark-section: '#190E09' accent-1: '#DCBD90' secondary: '#E69000' background: '#FFFFFF' background-alt: '#FEF9E5' tint-1: '#FDECCC' surface: '#FFFFFF' text: '#303031' text-muted: '#7C5139' accent-2: '#3B5DA4' accent-3: '#017D3E' marker: '#FCCD02' on-dark: '#FFFFFF' secondary-accessible: '#A66800' typography: display: fontFamily: Yuji Syuku fontSize: 44px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.08em headline-lg: fontFamily: Shippori Mincho fontSize: 28px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.05em headline-md: fontFamily: Noto Serif JP fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.06em headline-sm: fontFamily: Noto Serif JP fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.1em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.04em accent: fontFamily: Yomogi fontSize: 16px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em rounded: sm: 2px md: 4px lg: 8px full: 999px spacing: unit: 8px card: 14px section: 40px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' region-label-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' height: 44px diamond-number: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-md}' height: 40px feature-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 120px review-bubble: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 56px award-medal: textColor: '{colors.accent-1}' typography: '{typography.headline-lg}' height: 110px gift-badge: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 76px shipping-tag: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 26px banner-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 110px compare-table: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 260px --- # DESIGN.md — 墨黒×朱赤×金の筆文字ご当地ラーメン通販LP（Bold Brush Regional Ramen Gift LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 食品・飲料 ／ **雰囲気**: 和風、力強い・インパクト、情報量多め・訴求型、親しみ・手作り感 - **キーワード**: 筆文字・湯気と麺のシズル・墨黒と金・地域色の帯・番号付き訴求・ギフト - **地の質感**: 暗いスモーク背景の写真、生成りの和紙調の地、金の箔のようなグラデーション文字 - **形**: 角ばった帯とラベル、ひし形の番号枠、円で切り抜いた写真、丸いギフト用途バッジ - **温度感**: 暖色寄り。黒・赤・金・オレンジでこってりした温かみを出す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#98160B` | 朱赤（メディア帯・見出し強調・番号） | 6% | 画素の主要色に補正 | | `dark-section` | `#190E09` | 墨黒の写真背景セクション | 12% | 画素の主要色に補正 | | `accent-1` | `#DCBD90` | 金（筆文字見出し・メダル） | 3% | 画素の主要色に補正 | | `secondary` | `#E69000` | オレンジ（比較表見出し・レビュー枠） | 8% | 画素の実測 | | `background` | `#FFFFFF` | 白の基本背景 | 25% | 画素の実測 | | `background-alt` | `#FEF9E5` | 生成りの帯セクション | 8% | 画素の実測 | | `tint-1` | `#FDECCC` | 淡いベージュ（レビュー吹き出し） | 3% | 画素の実測 | | `surface` | `#FFFFFF` | 淡いグレーの地 | 4% | 画素の実測 | | `text` | `#303031` | 見出し・本文の濃い文字 | 4% | 画素の主要色に補正 | | `text-muted` | `#7C5139` | 茶系の注記・地名 | 2% | 画素の主要色に補正 | | `accent-2` | `#3B5DA4` | 地域色の青 | 1% | 画素の実測 | | `accent-3` | `#017D3E` | 地域色の緑 | 1% | 画素の実測 | | `marker` | `#FCCD02` | 地域色の黄・強調 | 1% | 画素の実測 | | `on-dark` | `#FFFFFF` | 暗色上の白文字 | 1% | 画素の主要色に補正 | | `secondary-accessible` | `#A66800` | AA を満たす補正値（計算） | | 計算 | - 前半は墨黒の写真面、後半は白と生成りの面にして、雰囲気を切り替える。 - 大見出しは黒地に金グラデの筆文字か、白地に黒の明朝で書き、数字だけ朱赤にする。 - 地域ごとに赤・青・緑・黄・水色の帯をあてて色で区別する。 - 実績セクションは朱赤のグラデ地に白文字と金のメダルを置く。 - レビューの強調箇所はオレンジの太字にし、淡いベージュの吹き出しに入れる。 - 比較表とギフトバッジはオレンジ・朱・金の暖色だけで作る。 - `gift-badge` は文字 `#FFFFFF` × 背景 `#E69000` のコントラスト比が 2.51:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#A66800`、4.56:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 暗色写真上の大キャッチ（金の筆文字） | 手書き・筆 | Yuji Syuku | 700 | 44px | 1.2 | 0.08em | | `headline-lg` | セクション見出し（数字を大きく朱で） | 明朝 | Shippori Mincho | 800 | 28px | 1.3 | 0.05em | | `headline-md` | 地域名・訴求項目のタイトル | 明朝 | Noto Serif JP | 700 | 20px | 1.4 | 0.06em | | `headline-sm` | 縦書きキャッチ・小見出し | 明朝 | Noto Serif JP | 700 | 17px | 1.5 | 0.1em | | `body-md` | 説明文 | ゴシック | Noto Sans JP | 500 | 12px | 1.7 | 0.04em | | `accent` | 写真に添える手書きの方言フレーズ | 手書き・筆 | Yomogi | 700 | 16px | 1.2 | 0.05em | | `note` | 注釈・レビュー属性 | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.02em | | `label-button` | ラベル帯・バッジ | ゴシック | Noto Sans JP | 700 | 12px | 1.3 | 0.05em | - 見出しは明朝か筆文字にして、和の老舗らしさを出す。 - 説明文はゴシックの小さめの文字にし、行間を広めにとる。 - 写真の横に手書き風の短いフレーズを斜めに添える。 - 縦書きの明朝キャッチを写真の右端に重ねる。 - 数字（個数・順位・販売数）は見出しより大きく太くする。 - 書体は画像からの推定で、フォント名は近い印象の 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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-1cb17f2b`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/kyushu-sanchoku/mrk10000919/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 中（8/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。