DESIGN.md — 墨色と深紅の和工芸雑貨 LP（Japanese Craft Charcoal & Crimson Product LP）

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

Overview

• 業種: 日用品・生活雑貨 ／ 雰囲気: 和風、上品・高級、ナチュラル、シンプル・ミニマル
• キーワード: 墨色・深紅・明朝・職人・余白・円形写真
• 地の質感: マットな陶器や木目を写した写真に、生成りの紙のような地と細い線画イラストを合わせる
• 形: 角丸のない四角い帯と、大きな円形の切り抜き写真が主役。細い罫線とV字の切り欠きでつなぐ
• 温度感: やや暖かい。写真の木や陶器の暖色に、墨色と赤で引き締める

Colors

• 地は白と生成り(#EFEDEA)を交互に使う。原色の面は使わない
• 見出しの帯・ロゴ枠・特長タイトルは墨色ベタに白文字で統一する
• 深紅は強調語の文字色と、円形写真の裏に置く装飾の面だけに使う
• 本文の中の大事な語は深紅の文字にして、下に細い罫線を引く
• ジャンル写真の多い区間は黒っぽい写真の上に白の明朝体を重ねる
• 金・黄緑・朱は星やグラフなどデータ表示だけに限る
• caption-band は文字 #F2F8F8 × 背景 #847C7A のコントラスト比が 3.8:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#77706E、4.52:1）を使う。

Typography

• 見出しは明朝体を主に使い、本文はゴシック体で軽く組む
• 見出しも本文も字間を0.1em以上取り、ゆったり組む
• 写真の上には縦書きの明朝体を細い縦線と一緒に置く
• 日本語見出しの下に、大文字の英字を小さく添える
• 強調は太字よりも深紅の文字色と下線で表す
• 大きな数字は欧文セリフ体にして、単位は小さくする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。本文と小さい写真の 2 列を部分的に使う
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真は画面幅いっぱいで見せ、本文は左右に16px前後の余白を取る
• 特長は「番号＋円形写真＋墨色帯の見出し＋本文」の順で繰り返す
• 墨色帯の見出しは左右どちらかの画面端に付け、交互に配置する
• 悩みの項目はチェックと罫線で区切った縦リストにする
• お客様の声は吹き出しを縦に積み、写真を左上に重ねる

Elevation & Depth

• 影はほとんど使わず、平面的に構成する
• クラフト紙カードの中の写真は白枠で囲み、プリント写真のように見せる
• 奥行きは影でなく、写真と色面の重なりで出す

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 999px。ボタンは角丸の長方形。
• 写真の切り抜き: 大きな円形の切り抜きを画面からはみ出させる。ほかの写真は角丸なしの四角
• セクション境界: 直線の罫線とV字の切り欠き。生成り地の端に大きな円弧を置く
• 帯・カード・枠は角を丸めない
• 丸を使うのは写真と装飾円だけにする
• ロゴ枠は細い線の二重枠にする
• 見出しの両側に斜線（＼ ／）を添える

Components

• 墨色帯の見出し（title-band）: 画面端に付けた墨色の四角い帯に、白の明朝体を入れる。2行なら帯を段違いにする
• セクションタイトル帯（section-header-band）: 画面幅いっぱいの墨色帯。細い線の枠と英字サブラベルを入れる
• 特長番号（feature-number）: 円形写真の左上に重ねる、欧文セリフ体の大きな番号とドット
• 深紅の装飾円（accent-circle）: 円形写真の後ろに一部だけ見せる深紅の円弧
• 丸バッジ（badge-round）: 深紅の円に、白で品質を表す短い言葉を入れる。ロゴ枠の角に重ねる
• 悩みのチェックリスト（worry-checklist）: チェックボックスの記号と深紅の語句を並べ、下にV字の切り欠きが入った罫線を引く
• クラフト紙カード（kraft-card）: 生成りのカードを少し傾けて置く。中に白枠の写真、明朝体の見出し、英字ラベル、下線付きの本文を入れる
• お客様の声の吹き出し（voice-bubble）: 細い線の円形吹き出し。左上に丸い顔写真を置き、年代、深紅の見出し、金の星、本文の順に並べる
• 写真のキャプション帯（caption-band）: 写真の下に付ける灰茶の帯。白文字で説明を2行入れる
• 下線付きの強調語（underline-emphasis）: 本文の中の語句を深紅の太字にし、下に細い罫線を引く

Do's and Don'ts

Do - 見出しは明朝体にし、字間を広く取る - 特長は「番号・円形写真・墨色帯・本文」の型で繰り返す - 深紅は強調語と装飾円に絞って使う - 写真の上に縦書きのコピーを置き、細い縦線を添える - 要所に細い線画イラスト（人物、豆、道具）を加える - 白の区間と生成りの区間を交互に置いてリズムを作る

Don't - 丸ゴシックやポップな手書き体は使わない - 角丸ボタンやグラデーションの面は使わない - 強調色を何色も並べない。深紅1色に絞る - 濃い影や立体的な装飾は付けない - 余白を詰めて文字を詰め込まない - 彩度の高い背景色を広い面に塗らない

Page Structure

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

1. ファーストビュー（商品の使い方と価値をひと目で伝える）: 注いでいる場面の手元写真を画面いっぱいに置く。縦書きの枠付きコピーと、一部を白抜きにした明朝体の大きなキャッチを重ねる
2. ブランドロゴ枠（産地と品質を印象づける）: 墨色の二重線の枠に、区切り線入りの商品名と英字を入れる。角に深紅の丸バッジを重ねる
3. 実績（支援実績で信頼を得る）: 明朝体で大きな%数値を見せ、強調部分を深紅にする。下に実績パネルのキャプチャを置く
4. 産地・職人（工芸品としての背景を伝える）: 職人の手元の暗い写真に、白の縦書き明朝と地図の線画を重ねる
5. 悩みの提起（読み手の悩みに共感する）: 人物の線画の横に願いを書いた見出しを置く。続けてチェックリストで悩みを短く並べ、問いかけで締める
6. 解決の提示（商品で悩みが解決できると示す）: 商品写真に白文字を重ね、深紅の大見出しを置く。下は縦線付きの本文と小さな写真3枚の2列
7. 特長（特長を順番に説明する）: タイトル帯の後、番号付きの円形写真と墨色帯の見出しを交互に配置する。比較グラフやキャプション帯も入れる
8. サブ特長（そのほかの利点を補う）: 斜線で挟んだ小見出しの後に、傾けたクラフト紙カードを縦に並べる
9. 産地のこだわり（伝統と歴史で価値を高める）: 暗い工房の写真を全面に敷き、白の明朝体見出しと中央寄せの本文を重ねる
10. お客様の声（利用者の評価で後押しする）: 線の吹き出しを3つ縦に並べる。中身は顔写真、年代、深紅の見出し、星、本文
11. 締めのビジュアル（体験への期待をもう一度高める）: 黒地にカップと注いでいる場面の写真を置き、縦書きの白い明朝体を重ねる
12. 製品仕様（サイズや容量などの仕様を伝える）: ロゴ枠を小さくして置き、仕様を左揃えのテキストリストにする。下に商品の切り抜き写真

Imagery

• 自然光で撮った、木のテーブルと白い器のある暮らしの写真
• マットな黒い陶器の質感が分かる寄りの写真
• 職人の手元や工房は、暗めでコントラストの強い写真
• 黒い服の人物が商品を使う、落ち着いたライフスタイル写真
• 細い単線で描いた人物・コーヒー豆・植物・地図の線画
• 鉛筆のラフスケッチを薄く背景に敷き、作り手らしさを出す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像がないため、以下は推奨。PCは本文の幅を720〜960pxに抑えて中央に置く
• 円形写真と本文は左右に並べ、行ごとに左右を入れ替える
• FVは写真を全面に置き、キャッチを左下に大きく置く
• お客様の声は3列にする
• クラフト紙カードは2列に並べる

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