--- version: alpha name: Japanese Traditional Checkered Rice Cracker LP description: 深い紅と藍を味ごとに分け、金と紅・藍の市松柄で区切る米菓の商品紹介 LP。和紙調の生成り地に縦書き明朝を置き、職人の製法を落ち着いた調子で伝える。 colors: primary: '#B50005' secondary: '#0F0A5A' background: '#F9EAD3' background-alt: '#F9EBCE' accent-1: '#C2A978' cta: '#B50405' on-cta: '#FFE238' text: '#2B2222' accent-2: '#B04C2C' on-dark: '#FAF2E5' dark-section: '#0F0A5A' surface: '#FAF2E5' typography: display: fontFamily: Shippori Mincho fontSize: 26px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.1em headline-lg: fontFamily: Shippori Mincho fontSize: 22px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.3em headline-md: fontFamily: Noto Serif JP fontSize: 18px fontWeight: 600 lineHeight: 1.7 letterSpacing: 0.1em body-md: fontFamily: Noto Serif JP fontSize: 14px fontWeight: 500 lineHeight: 2.0 letterSpacing: 0.08em accent: fontFamily: Yuji Syuku fontSize: 18px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.05em label-button: fontFamily: Yuji Syuku fontSize: 16px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.1em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em rounded: sm: 0px md: 4px lg: 24px full: 999px spacing: unit: 8px card: 16px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' heading-lined: textColor: '{colors.accent-2}' typography: '{typography.headline-lg}' height: 40px button-sound: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 48px checker-band: backgroundColor: '{colors.accent-1}' height: 60px product-card: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 200px badge-circle: backgroundColor: '{colors.text}' textColor: '{colors.on-cta}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 72px award-box: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 90px link-small: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' height: 20px step-boxes: backgroundColor: '{colors.surface}' textColor: '{colors.secondary}' typography: '{typography.accent}' height: 50px --- # DESIGN.md — 紅×藍×金市松の和風米菓 LP（Japanese Traditional Checkered Rice Cracker LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 菓子・スイーツ ／ **雰囲気**: 和風、上品・高級、力強い・インパクト - **キーワード**: 市松模様・紅と藍の対比・金箔・和紙・縦書き明朝・シズル感 - **地の質感**: 和紙の繊維が見える生成り地と、金箔調の市松柄。濃色の面はベタ塗りで光沢感を出す。 - **形**: 斜めの帯で画面を割り、市松柄の帯でセクションを区切る。カードは角丸なしの四角に細い枠線。 - **温度感**: 温かい（紅・金・生成り）と落ち着いた藍が半々 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#B50005` | 醤油味系の紅、メインのブランドカラー | 18% | 画素の実測 | | `secondary` | `#0F0A5A` | 塩味系の藍 | 18% | 画素の実測 | | `background` | `#F9EAD3` | 和紙調の生成り地 | 22% | 画素の実測 | | `background-alt` | `#F9EBCE` | 商品説明カードの淡いクリーム | 8% | 画素の主要色に補正 | | `accent-1` | `#C2A978` | 金箔・市松柄の金 | 10% | 画素の主要色に補正 | | `cta` | `#B50405` | 音声再生ボタンの紅 | 1% | 画素の主要色に補正 | | `on-cta` | `#FFE238` | ボタン上の金文字 | 0% | 画素の実測 | | `text` | `#2B2222` | 本文・見出しの墨色 | 1% | 推定 | | `accent-2` | `#B04C2C` | 見出し・飾り線の焦げ茶赤 | 1% | 画素の主要色に補正 | | `on-dark` | `#FAF2E5` | 濃色地上の白文字 | 1% | 画素の主要色に補正 | | `dark-section` | `#0F0A5A` | 藍セクションの最暗部 | 2% | 画素の実測 | | `surface` | `#FAF2E5` | 成分ボックスの白 | 1% | 画素の主要色に補正 | - 製法・コンセプトの説明は生成りの和紙地に墨色の文字で組む - 味ごとに紅か藍のどちらかで全面を塗り、商品の色と合わせる - セクションの切り替えには金と紅、または金と藍の市松柄の帯を入れる - 強調したい語だけ金または黄色系にする - 白はカード地と濃色地の上の文字だけに使う ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV のキャッチ | 明朝 | Shippori Mincho | 700 | 26px | 1.4 | 0.1em | | `headline-lg` | セクション見出し（左右に線） | 明朝 | Shippori Mincho | 600 | 22px | 1.4 | 0.3em | | `headline-md` | 縦書きリード・商品名 | 明朝 | Noto Serif JP | 600 | 18px | 1.7 | 0.1em | | `body-md` | 縦書き・横書きの説明本文 | 明朝 | Noto Serif JP | 500 | 14px | 2.0 | 0.08em | | `accent` | 受賞・特選バッジの文字 | 手書き・筆 | Yuji Syuku | 400 | 18px | 1.2 | 0.05em | | `label-button` | ボタン文字 | 手書き・筆 | Yuji Syuku | 700 | 16px | 1.2 | 0.1em | | `note` | 注釈・リンク文字 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.02em | - 基本は明朝体にして、職人らしい落ち着きを出す - 製法の説明は縦書きにし、行間を広く取る - 見出しは字間を広く取り、左右に細い線を引く - ボタンとバッジだけ筆書体にする - 注釈は小さいゴシックで目立たせない - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。商品カードは写真と説明文を重ねて配置する - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - セクションの境は市松柄の帯や斜めの切り返しで区切る - 商品写真はカードの枠からはみ出させて立体感を出す - 煎餅の写真を画面の端に浮かせ、奥行きを出す - 見出しは中央に置き、左右に線を引く ## Elevation & Depth - 商品パッケージと煎餅には柔らかい落ち影を付ける - カードはほぼフラットにして、ごく薄い影だけ付ける - ボタンに影は付けない ## Shapes - **角丸**: 小 0px ／ 中 4px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 商品や素材は切り抜くか円形にトリミングする - **セクション境界**: 斜めの直線と市松柄の帯 - カード・枠は角を立てる - ボタンだけピル型 - バッジは円形や角の取れた四角で、金の縁を付ける ## Components - **線付きセクション見出し**（`heading-lined`）: 中央の明朝見出しの左右に紅の細線を伸ばす - **音声再生ボタン**（`button-sound`）: 紅のピル型ボタン。スピーカーのアイコンと金の筆文字を入れ、下に小さな注釈を付ける - **市松柄の帯**（`checker-band`）: 金と紅、または金と藍の市松柄の帯で、セクションの切り替えに使う - **商品説明カード**（`product-card`）: クリーム地のカードに商品名と縦書きの説明を入れ、パッケージ写真を重ねる - **特選バッジ**（`badge-circle`）: 濃色の円に金の縁を付け、素材を推す言葉を筆文字で入れる - **受賞枠**（`award-box`）: 白地に金の細枠を付け、メダルと受賞の文言を明朝で入れる - **成分表示リンク**（`link-small`）: 白い小さな四角に矢印付きのリンク文字 - **配合図**（`step-boxes`）: 白から水色へのグラデの四角を＋でつなぎ、上に進行を示す矢印の帯、下に左右の矢印を置く ## Do's and Don'ts **Do** - 味ごとに紅と藍を割り当て、セクション全体の色と揃える - 市松柄と金箔調の装飾で和の格を出す - 煎餅の写真を浮かせて配置し、動きを出す - 製法の説明は縦書きの明朝で組む **Don't** - 丸ゴシックやポップな色を使わない - 紅と藍を同じ面に細かく混ぜない（FV の対比は除く） - カードに大きな角丸を付けない - ベタ白の背景を広く取らない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（2 種の商品と品質の高さを一目で伝える）: 紅と藍を斜めに分けた背景に金の市松を重ね、パッケージ 2 つを並べ、周りに煎餅を浮かせる 2. **こだわり製法**（独自の製法と食感を説明する）: 和紙地に縦書きの明朝で説明し、製法ロゴと割れた煎餅の写真を置く 3. **音の体験**（食感を音で伝える）: 紅のピル型ボタンを置き、下に注釈を付ける 4. **商品情報（醤油味）**（1 つ目の味の特徴を伝える）: 市松柄の帯から紅の全面に切り替え、クリームのカード、素材写真、バッジを配置する 5. **受賞実績**（権威付け）: 金枠の白いボックスにメダルと受賞の文言を入れる 6. **商品情報（塩味）**（2 つ目の味の特徴を伝える）: 藍と金の市松を経て藍の全面に切り替え、カードと素材写真を置く 7. **配合の図解**（ブレンドの仕組みを視覚的に示す）: 白文字の見出しの下に、四角を 4 つ＋でつなぎ、矢印で粒度の違いを示す ## Imagery - 煎餅は切り抜いて少し傾け、空中に浮いているように配置する - 素材（醤油を注ぐところ、塩の山）は寄りで撮り、円形にトリミングする - パッケージは正面から撮り、落ち影を付ける - 背景は和紙の繊維が見える質感や金箔調の市松柄にする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央に約 480 相当の幅で組み、左右は背景色で埋める - SP では縦書きのブロックを幅いっぱいに使い、行数を減らす - SP の FV ではパッケージ 2 つを横並びのまま縮小する - SP の商品カードは写真を上、説明文を下に縦積みにしてもよい ## 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-bfe7adaf`（元 LP の URL から採番） - **元 LP**: https://www.sanko-seika.co.jp/niigatajikomi/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（5/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。