DESIGN.md — クラフト紙と手描きの食品サステナ LP（Kraft Paper Hand-drawn Sustainability LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: ナチュラル、親しみ・手作り感、やさしい・柔らかい、ポップ・元気
• キーワード: クラフト紙・手描き線画・テーマ色分け・ラフな波線・社会貢献・温かい
• 地の質感: ベージュの再生紙のような粒状テクスチャを全面に敷く。色面はベタ塗りで縁だけラフにかすれる。
• 形: 角丸写真、ピル型ラベル、葉っぱ形ボタン、大きな円形の本文パネル、少し傾いた紙片。
• 温度感: 暖色寄り。生成りとテラコッタを基調に、青・緑で明るさを足す。

Colors

• 地はクラフト紙ベージュと淡い生成りの 2 種類だけを使う。
• 活動テーマ 3 つに青・オレンジ・緑を 1 色ずつ割り当て、ナビボタンとセクション面の色をそろえる。
• テーマ色の面の上では文字を白、ピルラベルの文字はテーマ色にする。
• 赤はキャッチの強調語と商品ボタンだけに使う。
• 本文パネルはテラコッタの円に緑の太い縁を付け、大地を表す。
• leaf-nav-button は文字 #FEFDF9 × 背景 #0088AE のコントラスト比が 4.02:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#007EA1、4.59:1）を使う。
• pill-section-label は文字 #F1784D × 背景 #FDF3E3 のコントラスト比が 2.54:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#C84010、4.55:1）を使う。
• circle-story-panel は文字 #FEFDF9 × 背景 #D2845A のコントラスト比が 2.87:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#B25E30、4.55:1）を使う。
• button-product は文字 #FFF2F0 × 背景 #F30100 のコントラスト比が 3.99:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E10100、4.57:1）を使う。

Typography

• 見出しは丸ゴシックの太字にして、角張った印象を出さない。
• 本文は中央揃えにし、行間を 2 倍以上とって詩のように 1 文ずつ改行する。
• キャッチは文字ごとに少し上下させ、手描きの揺れを出す。
• 英字の見出しは文字ごとに青・オレンジ・緑・赤を交互に使う。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は活動カードを 2〜3 列、リンクボタンを 2 列にする。
• 本文ブロックの幅: 画面幅の約 80%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• 写真とボタンは左右 40px ほど余白をとって中央に置く。
• テーマセクションは ピルラベル→角丸写真→太字タイトル→説明文 の順に縦に積む。
• テーマナビは葉っぱ形ボタンを 3 つ横に並べる。
• パートナーロゴは白枠カードで 2 列に並べる。

Elevation & Depth

• 影はほぼ使わない。平面のベタ塗りで見せる。
• 紙片パネルを少し傾けて置き、紙を重ねたような奥行きを出す。
• パートナーカードは焦げ茶の 2px 枠線で区切る。

Shapes

• 角丸: 小 8px ／ 中 20px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸 20〜30px。左上と右下だけ大きく丸める非対称の形も使う。
• セクション境界: かすれのあるラフな波線、大きな弧（円の上辺）、緩いアーチ。
• テーマナビは対角の 2 角を大きく丸めた葉っぱ形にする。
• 本文は大きな円形パネルに入れ、上に手描きの木を並べる。
• 境界線はまっすぐにせず、手でちぎったようなギザギザにする。

Components

• 葉っぱ形テーマナビ（leaf-nav-button）: テーマ色の葉っぱ形ボタン。白の 2 行テキストと小さな下向き丸矢印を入れる。
• ピル型セクションラベル（pill-section-label）: テーマ色の面の上に置く生成りのピル。文字はテーマ色にする。
• 円形の本文パネル（circle-story-panel）: 緑の太い縁が付いたテラコッタの大きな円。白文字の本文を中央揃えで入れ、下に白ボタンを置く。
• 白のサブボタン（button-white）: 白い角丸の横長ボタン。焦げ茶の文字と右端に丸アイコンを置く。
• 商品リンクボタン（button-product）: ピル型の太いボタン。左にパッケージ画像、中央に白文字、右に丸矢印を置く。色は赤・緑・ベージュを使い分ける。
• 活動カード（action-card）: 角丸写真の下に白の太字タイトルと説明文を中央揃えで置く。
• パートナーロゴカード（partner-card）: 白地に焦げ茶の枠線を付けた角丸カード。ロゴと右に丸矢印を置く。
• 手描きイラストスライダー（illust-slider）: 傾けた紙片パネルにオレンジ枠の線画イラストを入れる。下端にピルのタイトル、左右に黒丸矢印を置く。

Do's and Don'ts

Do - 全面にクラフト紙のテクスチャを敷く。 - テーマごとの色を、ナビ・セクション面・ラベル文字で一貫させる。 - 線画は太めの手描き線で描き、塗りはずれて重ねる。 - セクションの境界はラフな波線や弧にする。 - 本文は中央揃えにして行間を広くとる。

Don't - 直線や細い罫線でセクションを区切らない。 - グラデーションや強いドロップシャドウを使わない。 - 明朝体や細いゴシックを見出しに使わない。 - テーマ色以外の鮮やかな色を増やさない。 - 写真を角ばった四角のまま置かない。

Page Structure

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

1. ファーストビュー（プロジェクトの世界観を伝える）: 上の両隅に手描きのカカオの枝を置き、中央に緑の線画ロゴを大きく配置する。
2. キャッチコピー（想いを一言で伝える）: 斜線で挟んだ小見出しと、強調語だけ赤で大きくした手描き風のキャッチ。下に線画の木を並べる。
3. 想いのメッセージ（取り組みの背景を語る）: 緑縁の円形テラコッタパネルに白文字の本文を入れ、白ボタンで詳細を開く。
4. 活動テーマ紹介（支援対象を 3 つに分けて見せる）: 傾けた紙片パネルに線画イラストのスライダーを入れる。PC では 3 枚を横に並べる。
5. テーマナビ（各活動へページ内で移動させる）: 青・オレンジ・緑の葉っぱ形ボタンを 3 つ横に並べる。
6. 活動詳細（テーマ1）（具体的な支援活動を見せる）: アーチ状の多色英字見出しの下に青の面を敷く。ピルラベル、角丸写真、説明の順に並べる。
7. 活動詳細（テーマ2）（2 つ目の活動を見せる）: オレンジの面にラフな境界を付け、テーマ1 と同じ構成にする。
8. 活動詳細（テーマ3）（環境への取り組みを見せる）: 緑の面を使い、下端を大きな波形で閉じる。
9. パートナー団体（協力団体への信頼を示す）: 傾けたクラフト紙の上にカカオのアイコン、見出し、白枠のロゴカードを 2 列で並べる。
10. 関連リンク（企業サイトや商品へ送客する）: 白・緑・赤・ベージュのピル型ボタンを縦に並べ、パッケージ画像を添える。
11. フッター（SNS 共有とページトップへの導線）: SNS の丸アイコンを中央に並べ、右下に赤い四角のトップへ戻るボタンを置く。

Imagery

• イラストは太めの緑・赤・黄の手描き線画にし、塗りを線から少しずらしてかすれさせる。
• モチーフはカカオの実・葉・小さな木・笑顔の人物。
• 写真は現地の子どもや人々の自然な笑顔、温かい自然光のもので撮る。
• 商品写真は木目の机の上で手に持つ構図にする。
• 背景は再生紙のような粒状のベージュテクスチャにする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC でも中央 1 カラムを保ち、円形パネルは画面幅いっぱいの大きな円にする。
• PC ではテーマ紹介のスライダーをやめ、3 枚を横並びにする。
• PC では活動写真をテーマ1 で 2 列、それ以外は中央 1 枚にする。
• PC ではパートナーカードと商品ボタンを 2 列グリッドにする。
• 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 行書くと起動時に読み込まれる。