DESIGN.md — クラフト紙と木目のオーガニック食品 LP（Kraft Organic Spice Natural LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: ナチュラル、親しみ・手作り感、信頼・誠実
• キーワード: クラフト紙・木目・オーガニック・手書き見出し・環境配慮・商品カタログ
• 地の質感: 白い木の板、濃い茶色の木目、緑のボケ写真、クラフト紙の質感を背景に重ねる
• 形: 角丸のパウチ型カード、ピル型の小ボタン、円形のベン図、地球の円
• 温度感: 暖かい（茶・生成り）に、爽やかな緑・青を差す

Colors

• 地の色はセクションごとに写真・木目・白板へ切り替え、単色ベタ面はほとんど使わない
• 焦げ茶をブランド色としてロゴ帯・詳細ボタン・本文に使う
• 深緑はレシピなどサブ導線のボタンにだけ使う
• 形状の区別ラベルは青緑・青紫・山吹の 3 色で色分けする
• 濃い背景の上では文字を白にし、軽いドロップシャドウを付ける
• 赤は外部リンクのバナーだけに使い、ほかでは使わない
• badge-form は文字 #FEFEFE × 背景 #16876F のコントラスト比が 4.4:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#16856D、4.52:1）を使う。

Typography

• 見出しは極太ゴシックに、下に手描き風の曲線を一本引く
• サブ見出しは手書き体で、やや右上がりに傾ける
• 本文は中央揃えか左揃えにし、行間は 1.8 前後
• 見出しの後ろに小さく『について』を添え、主語との差をつける
• 写真の上に置く文字には薄い影を付けて読みやすくする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。目次は 2×2、商品一覧は 3 列グリッド
• 本文ブロックの幅: 画面幅の約 85%
• 余白: セクション間 60px、基本単位 8px、カード内 20px（375px 幅換算）
• 各セクションは全幅の背景画像で区切る
• 紙タグ型のカードは 2 列で並べ、端数の 1 枚は中央に置く
• 商品は名前・形状ラベル・パッケージ・2 つのボタンを縦に積んで 1 セルにする
• 説明カードは木の板の画像の上に重ね、左上と右下に葉を飾る
• 商品一覧の各行の間は約 50px あける

Elevation & Depth

• パッケージ写真にはごく薄い落ち影を付ける
• 紙タグはリングで吊るした見た目にし、軽い影で立体感を出す
• 白カードは影なしで木板の上にフラットに置く
• ボタンは影なしのフラットにする

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 商品は切り抜き。背景写真は全幅の矩形、ベン図と地球は円形
• セクション境界: 背景画像を直線で切り替える。地球セクションの上辺だけ大きなカーブにする
• ボタン・形状ラベルはピル型にする
• 紙タグは上部にハトメ穴を付けた角丸長方形にする
• 説明カードは角丸なしの白い矩形にする

Components

• 商品詳細ボタン（button-detail）: 焦げ茶のピル型。右端に丸い三角アイコンを付ける
• レシピボタン（button-recipe）: 深緑のピル型。右に別窓アイコンを付ける
• 形状ラベル（badge-form）: 商品名の下に置くピル型ラベル。形状ごとに色を分ける
• 目次リンク（anchor-nav）: 焦げ茶の手書き風の文字に下向き三角を添え、2×2 で並べる
• 曲線付き見出し（heading-swash）: 白い太字見出しの下に手描きの曲線を引く
• 紙タグのポイントカード（card-kraft-tag）: クラフト紙のタグにアイコンと 3 行の説明を入れ、上から吊るす
• 白い解説カード（card-note）: 木板の上に置く白い矩形。青緑の見出しと本文を入れる
• ベン図（venn-circles）: 黄と淡緑の円を重ね、それぞれに価値を 3 語ずつ並べる
• 外部リンクバナー（banner-link）: 白地に赤枠と赤い帯を組み、イラストを添えたリンクバナー

Do's and Don'ts

Do - 背景は写真・木目・白板など質感のある画像にする - 商品パッケージはクラフト紙と焦げ茶の帯で統一し、グリッドに並べる - 見出しには手描きの曲線や手書き体を添える - 環境配慮の要素は紙タグ型のカードで見せる - 形状ラベルは色で区別を一目でわかるようにする

Don't - 蛍光色や原色のベタ背景を使わない - 大きな角丸のカードや強い影を多用しない - ボタンを大きくしすぎず、カタログの整列を崩さない - 明朝体で高級感を出さない - 赤をリンクバナー以外に使わない

Page Structure

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

1. ファーストビュー（ブランドとシリーズの認知）: 青空と畑の写真を背景に、白い太字コピー、焦げ茶のロゴ帯、手書き風ロゴ、4 つのパッケージを置く
2. 外部リンクバナー（レシピサイトへの誘導）: 赤枠と赤帯のバナーにスパイスのイラストを添える
3. 目次（各セクションへのページ内リンク）: 白板の背景に、下向き三角付きの手書き風の文字を 2×2 で並べる
4. 特長（ブランド価値とオーガニックを掛け合わせた価値を伝える）: 緑のボケ写真の上に、曲線付き見出し、手書きのサブ見出し、ベン図、白い本文を置く
5. 3 つのポイント（認証・紙素材・寄付の 3 点を示す）: 濃い木目の背景に、吊るした紙タグを 2+1 枚並べ、消印風のスタンプを飾る
6. 用語解説（認証や支援機関の説明）: 木板の画像の上に白カードを 2 枚重ね、葉を飾る
7. 社会貢献（企業としての想いを伝える）: 水彩の地球を手のひらに乗せたビジュアルに、中央揃えの本文を重ねる
8. ラインアップ（全商品の一覧と、詳細・レシピへの導線）: 上部は青空と畑の写真、その下は白板の背景。3 列グリッドで名前・ラベル・パッケージ・2 つのボタンを並べる
9. フッター（SNS でのシェア）: 白地に丸い SNS アイコンを中央に並べる

Imagery

• 青空と広い畑の写真を FV と一覧の見出し背景に使う
• 緑の葉を大きくぼかした写真を特長の背景に使う
• 濃い茶色の板張りの木目と、白く塗った板の木目を背景に使う
• パッケージはクラフト紙のスタンドパウチを正面から切り抜いて見せる
• 葉の枝・地球・手のひらは水彩やリアル寄りの素材にする
• 線画アイコンは焦げ茶の単色にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約 1000px 幅で、FV はロゴを左、パッケージを右に置く横並びにする
• PC の目次は 4 つを横 1 列に並べる
• PC の紙タグは 3 枚、白カードは 2 枚を横に並べる
• PC の商品一覧は 5 列グリッドにする
• 背景画像は全幅のまま、文字サイズは 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 行書くと起動時に読み込まれる。