DESIGN.md — 和紙と筆文字の国産ドッグフードLP（Japanese Washi Brush Pet Food LP）

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

Overview

• 業種: ペット ／ 雰囲気: 和風、ナチュラル、上品・高級、親しみ・手作り感
• キーワード: 和紙・筆文字・縦書き・墨の円相・国産・三色ライン
• 地の質感: 生成りの和紙の繊維感と、黒い石板・木目のざらつき。墨の筆跡で枠や下線を描く。
• 形: 四角い色ブロックと手描きの墨枠・円相。カードは角丸なしで少し傾ける。
• 温度感: あたたかく落ち着いた中間色。白米と焼き色の茶系が中心。

Colors

• 地は生成りの和紙色で、純白は使わない。
• 抹茶・藍・柿オレンジの3色は商品ライン識別に固定して使う。
• 見出しと線は墨色。強調の下線だけ朱赤の筆跡にする。
• 商品一覧と写真まわりは石板風の濃色地で引き締める。
• お客様の声は緑の山並み地に白い紙カードを重ねる。
• square-badge は文字 #F3F3EB × 背景 #959A61 のコントラスト比が 2.66:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#6E7147、4.57:1）を使う。
• circle-badge は文字 #F3F3EB × 背景 #959A61 のコントラスト比が 2.66:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#6E7147、4.57:1）を使う。

Typography

• 大見出しは縦書きで、筆か明朝を使う。
• 本文は横書きのゴシックで、行間を広めにとる。
• バッジ内の文字は2〜4文字に抑える。
• ラインごとの見出しはライン色で塗り、ルビ風の欧文カナを縦に添える。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品3種はSPで縦積み、PCで3列。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• 見出しを縦書きにしてテキストの周りに円形バッジを散らす。
• 写真は全幅で区切りに使う。
• 悩みのチェックリストは墨の手描き枠で囲む。
• 要素を少しずらし、傾けて手作り感を出す。

Elevation & Depth

• 影は使わずフラットにする。
• お客様の声カードだけ薄い影をつけて、紙を置いたように見せる。
• 写真には白フチをつけ、ポラロイド風に傾けて重ねる。

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 999px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの四角か、白フチ付きで傾けた写真。円形の切り抜きも使う。
• セクション境界: 墨のかすれた筆跡ラインと、破れた紙のような不規則な境界。
• バッジは正方形の色ブロックか正円にする。
• 見出しの背景には墨の円相を描く。
• 囲み枠は手描きの墨線で、閉じきらない形にする。

Components

• 三色の特長タイル（feature-tile）: ライン色で塗った正方形に、墨の円相と大きな筆文字2字を重ねて3枚並べる。
• 角型カラーバッジ（square-badge）: 3色の正方形の中に白文字2〜3字。少しずらして散らす。
• 円形見出しバッジ（circle-badge）: 抹茶色の円に縦書きの白文字で特長名を入れる。山吹色の説明円と重ねる。
• 墨の手描き枠（brush-frame）: 悩みリストやメニュー見出しを、かすれた太い墨線でゆるく囲む。
• 朱のチェックリスト（check-list）: 四角い枠に朱の筆チェックを入れ、悩みを1行ずつ3つ並べる。
• 石板風の商品ラインカード（lineup-card）: 濃色地に対象年齢の注記、短い説明、ライン色の縦書き大見出しを置く。
• 紙のお客様の声カード（review-card）: 白っぽい紙片を傾けて置き、年代・性別、星評価、手書き風の本文を入れる。
• 朱の筆下線（brush-underline）: 見出しの下に、朱赤のかすれた筆跡を引く。

Do's and Don'ts

Do - 地は和紙テクスチャにして、墨の筆跡で区切る。 - 見出しは縦書きの明朝か筆文字にする。 - 3色のライン色はラインごとに一貫して使う。 - 犬の写真は表情のわかる寄りで、切り抜いて配置する。 - 要素を少し傾けて、手作業らしい温かみを出す。

Don't - 純白やビビッドな蛍光色は使わない。 - 角丸の大きいポップなボタンは使わない。 - ドロップシャドウやグラデーションの多用は避ける。 - 欧文サンセリフを見出しに使わない。 - 3色を装飾目的だけでランダムに使わない。

Page Structure

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

1. ファーストビュー（国産・和の上質さを一目で伝える）: 石板地に白米・フード・犬の写真を置き、縦書き明朝のキャッチと円形の国産スタンプ、角バッジを重ねる。
2. 三つの特長（ラインごとの効果を短い言葉で示す）: 3色の正方形タイルを横並びにし、円相と筆文字2字を入れる。
3. 導入メッセージ（対象の犬と商品のコンセプトを説明する）: 円形に切り抜いた犬の写真の横に、明朝の見出しとゴシックの本文を置く。
4. 悩みの提起（対象となる飼い主に共感する）: 3色の角バッジを置き、墨枠の中に見出しと朱下線、チェックリスト3行を入れる。
5. 素材のこだわり（原料の栄養メリットを伝える）: 縦書きの大見出しの周りに、緑円の見出しと山吹色の説明円を3組散らす。植物イラストと犬・ご飯の写真を添える。
6. 開発ストーリー（こだわりと開発期間で信頼を得る）: 傾けたポラロイド風写真と、かぎ括弧付きの短文を左右に配置する。
7. ラインナップ（3種類から選べることを示す）: 墨枠の中に縦書き見出しと角バッジを置き、続けて石板風カードを3枚並べる。
8. 商品写真（フードの粒感を見せる）: 白い器に盛ったフードの写真を全幅で配置する。
9. お客様の声（口コミで安心感を与える）: 山並みの緑地に縦書き見出しを中央に置き、傾けた紙カードを左右に交互に重ねる。

Imagery

• 犬は柴犬や小型犬を寄りで撮り、口を開けた笑顔の表情を選ぶ。
• 白米・木のまな板・葉物を、暗い石板の上に置いた俯瞰写真を使う。
• フードは白い器に盛り、自然光で粒の焼き色を見せる。
• 細い植物（稲穂・若葉）の線画イラストを添える。
• 墨のかすれ、円相、和紙の繊維テクスチャを装飾に使う。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SPでは3つの特長タイルを横3列のまま縮小するか、2行に組み替える。
• 商品ラインカードはSPで縦積みにする。
• 縦書き見出しはSPでも維持し、文字サイズを28〜32pxにする。
• 円形バッジの散らし配置は、SPでは見出しの左右に2列で整理する。
• PCでは本文幅を640px前後に抑え、左右の和紙地を広く見せる。

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