DESIGN.md — 墨黒×藍紺の静かな和の調味料 LP（Quiet Navy Washi Japanese Seasoning LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: 和風、上品・高級、シンプル・ミニマル、信頼・誠実
• キーワード: 墨色の料理写真・明朝体・縦書き・広い余白・藍紺・老舗の落ち着き
• 地の質感: 白地にうっすら和紙の紙目。写真は暗く沈んだローキー調
• 形: 角丸なしの四角が基本。円形バッジと細い点線の円で柔らかさを足す
• 温度感: やや冷たく静か。生成りベージュと朱色でぬくもりを少し足す

Colors

• 地はオフホワイトを基本にする。生成りベージュはアーカイブとお客様の声の帯にだけ使う
• 暗い面は料理写真と藍紺の比較表セクションで作る。純黒の単色ベタは使わない
• 文字は藍墨色に統一し、真っ黒は使わない
• 朱色はCTAボタンとお客様の声の強調語だけに使う
• 青紫は再生ボタンや「＋」など操作できるアイコンに限って使う
• button-primary は文字 #FEFEFE × 背景 #C25C50 のコントラスト比が 4.21:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#BF5548、4.52:1）を使う。

Typography

• 情緒を伝える文章と見出しは明朝体で組む
• 成分・分量などの事実情報はゴシック体で読みやすくする
• 字間は0.1em以上空け、行間は2倍前後でゆったり組む
• FVのコピーと物語の見出しは縦書きにする
• 本文は短い行で改行し、段落の間を空行で区切る
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。アーカイブは3列カード、お客様の声は1列で積む
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 96px、基本単位 8px、カード内 24px（375px 幅換算）
• 左右の余白は約30pxで固定する
• 写真は左右どちらかに寄せ、端まで裁ち落として非対称に置く
• 小さい写真2枚は斜めにずらして重ねる
• 縦書きの見出しは本文の右側に置く
• セクションの上下は80〜120pxと大きく空ける

Elevation & Depth

• 影は基本的に使わない
• 比較表の白パネルだけ、ごく淡い外側の光彩をつける
• カードは地との色差だけで浮かせる

Shapes

• 角丸: 小 0px ／ 中 2px ／ 大 4px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの長方形。縦長・横長を混ぜ、画面端で裁ち落とす
• セクション境界: 直線で地の色を切り替える
• ボタンとラベルは角丸なしの長方形にする
• 特長の見出しは白い円にし、外側を点線の円で囲む
• 円から細い線と点を伸ばして説明文につなぐ
• お客様の声のカードには下に小さな三角の吹き出しをつける
• 数字は細線の円で囲む

Components

• 朱色CTAボタン（button-primary）: 幅いっぱいの角丸なし長方形。明朝体の白文字で、右端に→をつける
• 円形の特長バッジ（feature-circle）: 暗い写真の上に置く白い円。中に明朝体の語を入れ、外側を点線の円で囲み、下へ細い線を伸ばす
• 紺の見出しラベル（label-band）: 左寄せの紺帯。白い明朝体で小見出しを入れる
• 動画レシピカード（recipe-card）: 縦長の写真に青紫の再生丸を重ね、下に月と料理名を入れる。3列で並べる
• お客様の声カード（testimonial-card）: 白いカード。紺の大きな引用符で始め、強調語を朱色にする。区切り線の下に右寄せで愛用歴を入れ、下に吹き出しの三角をつける
• 希釈目安カード（ratio-card）: 白いカード。グラスのアイコンと円で囲んだ数字で、原液と水の比率を図で示す
• 特徴の行（spec-row）: 紺地の上に置く行。左に濃紺の四角ラベル、右に白い説明文
• もっと見るボタン（more-button）: 細線の円に＋を入れ、下に明朝体の小さな文字を添える

Do's and Don'ts

Do - 余白を広く取り、1画面に置く情報は少なくする - 写真は暗めのトーンでそろえ、器と手元に焦点を当てる - 物語・理念の見出しは縦書きの明朝体にする - 強調は朱色の文字だけで行う - 写真は大きさを変え、ずらして非対称に置く

Don't - 鮮やかなグラデーションやポップな色を使わない - 大きな角丸やピル型ボタンにしない - 強い影や立体的な装飾をつけない - 本文を真っ黒の太ゴシックにしない - 朱色を背景の大面積に広げない

Page Structure

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

1. ファーストビュー（老舗らしさと商品の世界観を一目で伝える）: 墨黒の背景に煮物の器を真上から撮った写真を置く。欧文の創業年、筆文字のロゴ、縦書きの明朝コピーを重ねる
2. ブランド理念（食卓に寄り添う思いを語る）: かぎ括弧つきの明朝見出しを置き、短い行の本文を大きな行間で組む。下に写真3枚を非対称にずらして並べる
3. こだわり3点（素材・製法・味作りの強みを示す）: 暗い調理写真を全面に敷き、円形バッジ3つをジグザグに置く。各バッジに白文字の説明を添える
4. 月替わりレシピ（使い方を動画で提案する）: 左に縦書きの月と料理名、右に縦長の動画を置く
5. レシピアーカイブ（過去のレシピへ誘導する）: ベージュの帯に3列のカードを並べ、最後に朱色のCTAを置く
6. 商品情報（容量・原材料・使い方を伝える）: 商品の切り抜きをサイズ順に並べる。紺ラベルの下に原材料と注釈、続けて希釈目安のカードを置く
7. ラインナップ比較（商品ごとの味の違いを位置づける）: 紺地に白い2軸マップを置き、淡いぼかしの円で商品群を分ける。下に節の特徴を行で並べる
8. 誕生秘話（歴史と信頼を伝える）: 全幅の料理写真のあとに、右に縦書きの見出し、左に明朝の本文を組む。下に写真をずらして並べる
9. お客様の声（長く使われてきた実感を伝える）: ベージュ地に吹き出し型の白カードを縦に積み、強調語を朱色にする。最後に「もっと見る」を置く

Imagery

• ローキーの自然光で撮り、背景は黒や濃いグレーに沈める
• 陶器の器に盛った和食を、斜め上か真上から撮る
• 手元やエプロン姿など、人物は顔を出さず部分だけ写す
• 注ぐ・盛り付けるといった動きの瞬間を切り取る
• 商品パッケージは白背景の切り抜きにする
• 装飾は細線・点線の円・淡いぼかしの円だけに抑える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでも本文はSPと同じ約440pxの中央カラムを保つ
• PCでは左右の余白を濃紺の暗いグラデーションで埋める
• PCの左余白に月替わりレシピ動画を固定表示する
• PCの右上にロゴ、右側に縦並びのページ内ナビを置く
• 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 行書くと起動時に読み込まれる。