DESIGN.md — クラフト紙とチョコ色のサステナ菓子 LP（Kraft Chocolate Sustainability LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: ナチュラル、親しみ・手作り感、やさしい・柔らかい、信頼・誠実
• キーワード: クラフト紙・板チョコ・台形モチーフ・生成り・リボン見出し・手描きイラスト
• 地の質感: 茶色とクリームの面にうっすら紙の繊維ノイズを入れる。光沢やグラデーションは使わない
• 形: 上辺が短い台形（板チョコの欠片）を積み重ねて使う。カードは小さめの角丸。セクション境界は台形を連ねた帯
• 温度感: 暖色寄り。チョコ茶とクリームが中心で、赤とからし黄を差し色にする

Colors

• 地はクリーム〜生成りを基本にし、理念やフッター手前だけクラフト茶の面にする
• チョコ濃茶はセクション境界の台形帯とロゴ的モチーフにだけ使う
• 文字は黒を使わず茶色で組む。茶地の上だけ白文字にする
• 赤はリボン見出しとハートに限定する差し色
• からし黄は特設バナー1枚だけに使い、目立たせる
• 写真カードの下部はベージュの面にして白カードと区別する
• ribbon-heading は文字 #FBF1E4 × 背景 #DB3214 のコントラスト比が 4.2:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#D23013、4.51:1）を使う。
• map-trapezoid は文字 #FBF1E4 × 背景 #966A4D のコントラスト比が 4.21:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#8F654A、4.55:1）を使う。

Typography

• 全体を太めの丸ゴシックで統一し、細いウェイトは使わない
• 見出しは字間 0.15em ほど広げて中央揃え
• 理念文は短い行で改行し、中央揃えで行間を広くする
• 本文も太字のまま字間広めで、やわらかく見せる
• 欧文は本文と同じ書体のまま混ぜる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC はカードを 3 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• カードは左右に約 5% の余白を残して置く
• 写真カード同士の間は 30px 前後あける
• 見出しの上下はたっぷり空け、下にリードを 1〜2 行置く
• 茶色の理念セクションは画面の端まで塗る
• 台形の装飾は画面端からはみ出させて置く

Elevation & Depth

• 影はほぼ使わず、色の面の差で階層をつける
• リボン見出しだけ、折り返し部分の濃い赤で立体感を出す
• カードは影なしの平面で角丸だけつける

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: カードの上半分に横長の長方形で敷き、上の角だけ丸める
• セクション境界: チョコ色の小さな台形を横一列に連ねた帯で区切る
• 台形（上辺が短い）を代表モチーフとして見出し・図・境界に繰り返す
• 吹き出しは円形でしっぽを付ける
• ボタンは独立させず、カード右下の矢印で示す

Components

• 台形連続の区切り帯（trapezoid-divider）: 濃茶の台形を横に並べた帯をセクションの上端に置く
• リボン見出し（ribbon-heading）: 赤い帯の両端を折り返したリボンに白文字。白カードの上辺にかぶせる
• 台形タイル図（map-trapezoid）: 中茶の台形に国旗と白い地名を入れ、細線で三角形につなぐ
• 丸い吹き出し（speech-circle）: クリームベージュの円にアイコンと小さなラベル、しっぽ付き
• 写真リンクカード（photo-link-card）: 上に写真、下はベージュ地に国旗・見出し・説明、右下に茶色の矢印
• 白い説明カード（info-card）: 白地に図と太字の説明本文を入れる大きなカード
• 特設バナー（feature-banner）: 左がからし黄地に白い円ロゴと白文字、右が商品写真の横長バナー
• 円形メニューボタン（menu-button）: 右上に固定する白い円。台形アイコンと小さな英字

Do's and Don'ts

Do - 台形チョコのモチーフを見出し・図・区切り帯に繰り返し使う - 文字は茶系の太い丸ゴシックで、字間を広めにとる - 地は生成りとクラフト茶の2トーンを交互に使う - 写真カードは右下の矢印で詳細ページへつなぐ - イラストはフラットで温かい色の手描き風にする

Don't - 純黒の文字や寒色の背景を使わない - 強い影・グラデーション・光沢を入れない - 赤を広い面に使わない - 細い明朝体やシャープな書体を混ぜない - 角丸の大きいピル型ボタンを使わない

Page Structure

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

1. ファーストビュー（ブランドの象徴を静かに見せる）: クリーム地の中央に濃茶の台形を3段積んだシンボルだけを置く。右上に円形メニュー
2. 理念メッセージ（企業の想いを伝える）: クラフト紙風の茶地に白い太字で短文を中央揃え。右下に台形を重ねる
3. 特設コンテンツバナー（関連企画へ誘導する）: 砂色地に、板チョコをハート型に抜いたイラストのバナーを置く
4. 取り組みの導入（テーマと目的を示す）: 台形帯で区切った後、大見出しとリード2行を中央揃え
5. 活動地の図解（活動の全体像を見せる）: 白カードに赤いリボン見出し、台形タイル3つと吹き出し、下に説明文
6. 地域別の活動カード（各地の取り組みへ誘導する）: 写真＋ベージュ下部の縦長カードを縦に並べ、国旗・見出し・矢印を置く
7. 特設バナー（アップサイクルなど別テーマを紹介）: からし黄と商品写真を左右に分けた横長バナー
8. イラストバナー・フッター手前（活動の世界観をまとめる）: クラフト茶地に台形帯で区切り、カラフルな手描き村のイラストバナーを置く

Imagery

• 写真は現地の人々との集合写真。自然光で、緑の木々の中を撮る
• 写真は加工しすぎず、暖かく自然な色のままにする
• イラストは輪郭線のないフラットな手描き風。チョコ茶・赤・黄・緑を使う
• 板チョコのブロックを並べてハートなどの形を作る遊びを入れる
• 国旗やカカオの実を小さなアイコンにしてアクセントにする
• 地にはクラフト紙の繊維テクスチャを薄く敷く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC のファーストビューは左右に分け、左にシンボル、右に茶地の理念文を置く
• PC では地域カードを 3 列に並べ、写真を小さくする
• PC の図解カードは横幅を広げ、説明文を左揃えの長い行にする
• PC の本文の幅は画面の約 80% で中央に置く
• 区切り帯と背景色の切り替えは 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 行書くと起動時に読み込まれる。