DESIGN.md — 市松模様と和紙地の和風食品ブランドLP（Edo Checkered Japanese Food Brand LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: 和風、上品・高級、親しみ・手作り感
• キーワード: 市松模様・和紙テクスチャ・江戸風線画・黒枠見出し・金帯・味ごとの色分け
• 地の質感: 細かい砂目の和紙風ノイズ地に、淡い市松模様を薄く敷いている
• 形: 四角を基本にする。写真は円形に切り抜き、背景に大きな淡い円を重ねる
• 温度感: 暖かい中間調。生成り・桜色・薄藤色・抹茶色の地を使う

Colors

• セクションごとに地の色を生成り・白・薄藤・桜・抹茶へ切り替える。
• セクション境界には多色の市松帯か金の帯を入れる。
• 黒は名札と見出しの枠線に限定し、全体を引き締める。
• 詳細ボタンの色は商品パッケージの主色に合わせて味ごとに変える。
• 赤は見出しの傍点など、ごく小さな面積だけに使う。
• イラストは単色（橙・藍・薄茶・藤色）のベタか線で描く。
• button-primary は文字 #FFFFFF × 背景 #ED6D02 のコントラスト比が 3.09:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#BF5802、4.55:1）を使う。

Typography

• 見出しとコンセプト文は明朝体にして、品のよい和の雰囲気を出す。
• 長い本文は読みやすさを優先してゴシック体にする。
• 見出しの強調したい語の上に赤い傍点を打つ。
• 番号は細い欧文の大きな数字にし、横に明朝の小見出しを置く。
• コンセプト文は中央揃えにし、1行を短く区切る。
• 本文は左揃えで行間を2.0前後と広めにとる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品一覧は写真とテキストを左右に並べる。シリーズ紹介は 2 列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• セクション見出しは白地に黒枠の横長ボックスで中央に置く。
• 商品行は左にパッケージ（幅約45%）、右に名札とボタンを縦に積む。
• 商品写真の背後に淡い大きな円を敷いて、行ごとにリズムを作る。
• セクションの余白に浮世絵風イラストを置き、端からはみ出させる。
• 目次ボタンは2つ並べた下に1つを中央寄せで置く。

Elevation & Depth

• 影は基本的に使わず、フラットで紙のような印象にする。
• 目次ボタンは黒枠の外側に白い余白の縁を付け、少し浮いた見せ方にする。
• パッケージ写真だけごく薄い落ち影を付けてもよい。

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 素材写真は正円で切り抜く。商品パッケージは切り抜いて配置する
• セクション境界: 多色の市松模様の帯と、金のグラデーション帯で直線的に区切る
• ボタン・見出し枠・名札はすべて角丸なしの直角にする。
• 柔らかさは背景の大きな円で出す。
• 四角形の色ブロックを画面の角に散らし、市松のモチーフを示す。

Components

• 黒枠見出しボックス（section-heading-box）: 白地に黒の細枠を付けた横長の箱。中に明朝の見出しを入れ、強調語に赤い傍点を打つ
• 商品名の名札（product-name-plate）: 黒地に金色の明朝で味の名前を入れた帯
• 商品詳細ボタン（button-primary）: 名札の直下に付ける四角いボタン。味の色で塗り、白文字の右に三角の矢印を置く
• 目次ボタン（anchor-nav-button）: 白地・黒の太枠・白い外縁で作るページ内リンク。2つ並べ、下に1つを置く
• 番号つき特長（numbered-feature）: 円形の写真の下に、大きな細い番号・明朝の小見出し・ゴシックの本文を並べる
• 市松帯（checker-band）: 多色の小さな四角を2段に並べた区切り帯。金帯と組み合わせて使う
• 端の色ブロック（edge-color-bar）: 画面の左右端に縦に並べた細い色ブロック。特長の横に添える
• 画像注釈（image-note）: 写真の下に置く小さな注記

Do's and Don'ts

Do - 地の色は淡い和色の和紙テクスチャにし、セクションごとに変える。 - 見出しは必ず黒枠の白ボックスに入れ、強調語に赤い傍点を打つ。 - 詳細ボタンの色は商品のパッケージ色と揃える。 - 江戸風の単色イラストを余白に添えて、遊び心を出す。 - セクション境界に市松帯または金帯を入れる。 - 写真は湯気や素材感が伝わるものを、円形か切り抜きで使う。

Don't - ボタンや枠を角丸やピル型にしない。 - 濃いドロップシャドウやグラデーションのボタンを使わない。 - 見出しをゴシック体の太字だけで済ませない。 - 地を真っ白な無地だけで続けない。 - ネオン色や寒色のグラデーションなど、和のトーンから外れる色を使わない。 - イラストを多色のリアルな画風にしない。

Page Structure

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

1. ファーストビュー（大人向けの上質さを一目で伝える）: 和紙地の上部に明朝のキャッチを置き、茶碗の写真を中央に大きく配置する。四隅に市松の色ブロックを散らす
2. キャンペーンバナー（開催中のキャンペーンへ誘導する）: 淡い金色の市松地の上に、赤枠のバナーを横幅いっぱいに置く
3. 目次ナビ（各セクションへ移動しやすくする）: 黒枠の白ボタンを3つ、2つと1つの2段で並べる
4. コンセプト（ブランドの想いを伝える）: 生成り地に中央揃えの明朝文を置く。左右に浮世絵風の人物と雲のイラストを添え、下端にご飯の写真を置く
5. 柄の由来の解説（パッケージの意匠の背景を伝える）: 上下を市松帯ではさんだ白地に、見出しボックス・中央揃えの本文・パッケージ写真を並べる
6. 特長（3つの秘密）（おいしさの理由を説明する）: 薄藤色の地に番号つき特長を3つ縦に並べる。円形の写真と線画を交互に配し、端に色ブロックを添える
7. 商品一覧（味のバリエーションを見せ、詳細ページへ送る）: 桜色の地に、パッケージ・名札・色分けボタンの行を繰り返す。背景には大きな円と各味のモチーフイラストを置く
8. シリーズ紹介（詰め合わせの関連商品を提案する）: 抹茶色の地にロゴと説明文を置き、2列の商品カードと内容量の注記を並べる。最後に1つを中央に置く

Imagery

• 料理の写真は、陶器の茶碗に盛ったご飯を木の台の上で正面やや上から撮る。湯気が見えるとよい。
• 素材の写真は寄りで撮り、正円に切り抜く。
• イラストは浮世絵や江戸の版画風の人物・動物・道具を、単色のベタか線で描く。
• 背景には砂目のノイズと薄い市松模様を重ねる。
• 白い雲（霞）のモチーフを横に流して、和の空気感を出す。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央の本文幅を約900pxにし、目次ボタンを3つ横一列に並べる。
• PC の柄の解説セクションは、パッケージ写真を左右に分け、本文を中央に置く。
• PC の特長は、写真と本文を左右に並べ、行ごとに左右を入れ替える。
• PC の商品一覧は2列のグリッド、シリーズ紹介は3列にする。
• 市松帯と金帯は、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 行書くと起動時に読み込まれる。