DESIGN.md — 和紙と墨絵の和風ペットおやつ LP（Washi Ink Storytelling Pet Treat LP）

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

Overview

• 業種: ペット ／ 雰囲気: 和風、親しみ・手作り感、ナチュラル、レトロ
• キーワード: 和紙・墨絵・縦書き物語・筆文字・焼き色・国産
• 地の質感: 和紙の繊維感と淡い麻の葉模様を全面に敷き、墨絵の挿絵がにじむように溶け込む
• 形: 写真は不定形の有機シェイプや楕円で切り抜く。ラベルは角張った矩形とひし形を組み合わせる
• 温度感: 暖色寄り。生成り・きつね色・焦げ茶で温かく素朴

Colors

• 地は生成りの和紙色で統一し、本文ボックスだけ一段明るい生成りにする
• 文字は黒ではなく焦げ茶を使う
• キャッチ見出しは赤茶の筆文字で焼き色を表現する
• 帯見出しは臙脂と抹茶の矩形を橙のひし形でつなぐ
• 強調語は金茶の文字色か、淡い緑の下地マーカーで示す
• 吹き出しやラベルにはきつね色の面に白文字を使う
• speech-blob は文字 #FBF8EC × 背景 #C2A162 のコントラスト比が 2.3:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#8B6E36、4.51:1）を使う。
• tag-label は文字 #FBF8EC × 背景 #C2A162 のコントラスト比が 2.3:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#8B6E36、4.51:1）を使う。

Typography

• 物語パートは明朝体の縦書きで、行間を広めに取る
• 説明の本文は太めのゴシックで横書きにする
• キャッチは筆文字を大きく使い、写真の上に重ねてもいい
• 見出しの一文字を円形の筆跡モチーフに入れて区切りにする
• 強調語は色だけで目立たせ、太さは本文のままにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真と縦書き文章を左右にずらして交互に置く
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• 縦書きの文章ブロックと挿絵を左右に振り分ける
• 写真は画面端まで寄せてはみ出させ、文字と重ねる
• 本文ボックスは角丸の淡い面で包む
• 犬の切り抜き写真をセクションの角に置いて視線を誘導する
• セクション間は余白と挿絵で区切り、罫線は使わない

Elevation & Depth

• 影はほぼ使わず、平面的に重ねる
• 切り抜き写真は輪郭を生かし、浮かせない
• カードは影なしで、明るい生成りの面だけで区別する

Shapes

• 角丸: 小 4px ／ 中 16px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: 不定形の有機シェイプ・楕円・丸。人物や犬は背景を抜いて切り抜く
• セクション境界: 直線の境界は使わず、墨絵のにじみと余白でつなぐ
• 帯見出しは角丸なしの矩形にする
• つなぎにはひし形の小さな記号を使う
• 吹き出しは丸みのある不定形にして、しっぽを付ける
• バッジは円形か六角形にする

Components

• 二色帯見出し（heading-band）: 臙脂と抹茶の矩形帯を橙のひし形でつなぐ見出し
• 筆円の一文字マーク（brush-circle-mark）: 筆で描いた円の中に漢字一文字を置き、章の区切りにする
• 容量バッジ（badge-volume）: 焦げ茶の円に白文字で容量を大きく入れる
• きつね色吹き出し（speech-blob）: 写真に重ねる不定形の面に白い太字ゴシックを入れる
• 犬のセリフ吹き出し（dog-bubble）: 白い面を焦げ茶の線で囲んだ手描き風の吹き出し
• 説明カード（info-card）: 明るい生成りの角丸カード。キーワードは金茶の文字にする
• チェック特長リスト（check-list）: 緑のチェックで特長を3つ並べ、筆の円弧で囲む
• おすすめ対象リスト（recommend-list）: 見出しの下に、小アイコンと太字の文を並べる角丸カード
• 産地ラベル（tag-label）: きつね色の小さな矩形に白文字を2行入れる

Do's and Don'ts

Do - 地には和紙の質感と淡い麻の葉模様を敷く - 物語のパートは明朝体の縦書きにして、墨絵の挿絵と組み合わせる - 写真は不定形のシェイプで切り抜き、画面端からはみ出させる - 犬の切り抜き写真で、親しみやすさをこまめに足す - 強調には臙脂・抹茶・金茶を少しだけ使う

Don't - 純白や純黒をベタ塗りで使わない - 寒色やビビッドな原色を入れない - 四角い写真をグリッドで均等に並べない - 影の強いカードや光沢のあるボタンを使わない - 細い欧文フォントで現代的にしすぎない

Page Structure

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

1. ファーストビュー（和の世界観と商品名を一目で伝える）: 墨絵の犬と寺の挿絵で筆文字のロゴを挟み、下に小さなサブコピーを入れる
2. 物語（素材の由来）（原料の歴史で価値をつくる）: 縦書きの明朝コピーと、田園や船の墨絵を左右交互に置く
3. 物語のまとめ（原料と犬の暮らしをつなぐ）: 太字ゴシックの横書き本文を4〜5行で入れる
4. 製法（技）（手仕事で焼いていることを伝える）: 筆円の一文字マークを置き、不定形の写真ときつね色の吹き出しを重ねる
5. 手仕事の文化（不揃いさが価値だと伝える）: 明るい面の上に縦書きの長文を置き、背景に墨絵を薄く敷く
6. 商品紹介（中身と容量を見せる）: 大きな商品写真に縦帯のロゴと容量の円バッジを重ねる
7. 素材の訴求（無添加であることを伝える）: 墨絵の米袋の横に、マーカーで強調した短い文を置く
8. 心（届けたい想い）（情緒的な共感をつくる）: 油絵調の風景を不定形に切り抜き、人物の挿絵と本文を添える
9. コンセプト説明（商品名の意味を説明する）: 白い和紙カードに赤と黒の縦書きを入れ、ひし形の帯で見出しを組む
10. 安心ポイント（アレルゲンが少なく国産で安全だと伝える）: 二色帯見出し、チェックリスト、丸写真、六角バッジ、説明カードを使う
11. 味わい（香ばしさで食欲を刺激する）: 赤茶の筆文字キャッチと焼き網の丸写真を使い、犬の吹き出しを添える
12. おすすめ対象（自分に向いていると思ってもらう）: 角丸カードに、アイコン付きの対象者を3行並べる

Imagery

• 挿絵はセピア色の墨絵・銅版画風。江戸の町並み、田園、職人を描く
• 商品写真は暖色光で撮り、焼き色を強調する。網焼きのシズル感を入れる
• 柴犬は笑顔の切り抜き写真にして、ページのあちこちに置く
• 風景は油絵調に加工して、懐かしい雰囲気にする
• 地には和紙の繊維と麻の葉の幾何学模様を薄く敷く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 版も 650px 幅の縦長 1 カラムなので、中央寄せでそのまま使う
• SP では縦書きブロックを 2 列までにし、文字は 16〜18px にする
• PC では左右の余白に和紙の地を広げ、本文は 650px 程度に収める
• はみ出す写真は SP でも片側の端に寄せて残す

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