--- version: alpha name: Kraft Organic Spice Natural LP description: 空と畑の写真、緑のボケ、濃い木目、白い板の背景をセクションごとに切り替えるナチュラル系の食品 LP。クラフト紙のパウチや紙タグ、手書き風の見出しで手作り感と環境配慮を伝え、最後は商品一覧を 3 列グリッドで並べる。 colors: primary: '#4A2A14' background: '#FBFAFE' surface: '#FEFEFC' secondary: '#E4CDA3' dark-section: '#703E2C' cta: '#024A3D' on-cta: '#FEFEFE' accent-1: '#16876F' accent-2: '#5B78D0' accent-3: '#C8860A' marker: '#E31313' tint-1: '#F5F29C' tint-2: '#B7E1BB' text: '#4D3F2D' on-dark: '#FEFEFE' accent-1-accessible: '#16856D' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 26px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.04em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 24px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.05em accent: fontFamily: Yomogi fontSize: 28px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.4 body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 500 lineHeight: 1.7 label-button: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 700 lineHeight: 1.2 rounded: sm: 4px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 20px section: 60px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-detail: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 20px button-recipe: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 20px badge-form: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 16px anchor-nav: textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 50px heading-swash: textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 60px card-kraft-tag: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.lg}' height: 250px card-note: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 260px venn-circles: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 200px banner-link: backgroundColor: '{colors.surface}' textColor: '{colors.marker}' typography: '{typography.headline-md}' height: 90px --- # DESIGN.md — クラフト紙と木目のオーガニック食品 LP（Kraft Organic Spice Natural LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 食品・飲料 ／ **雰囲気**: ナチュラル、親しみ・手作り感、信頼・誠実 - **キーワード**: クラフト紙・木目・オーガニック・手書き見出し・環境配慮・商品カタログ - **地の質感**: 白い木の板、濃い茶色の木目、緑のボケ写真、クラフト紙の質感を背景に重ねる - **形**: 角丸のパウチ型カード、ピル型の小ボタン、円形のベン図、地球の円 - **温度感**: 暖かい（茶・生成り）に、爽やかな緑・青を差す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#4A2A14` | ブランドの焦げ茶（ロゴ帯・詳細ボタン） | 4% | 推定 | | `background` | `#FBFAFE` | 白い木板の背景 | 35% | 画素の実測 | | `surface` | `#FEFEFC` | 説明カードの白地 | 10% | 画素の実測 | | `secondary` | `#E4CDA3` | 紙タグ・パウチのクラフト色 | 12% | 画素の実測 | | `dark-section` | `#703E2C` | 濃い木目セクション | 12% | 画素の主要色に補正 | | `cta` | `#024A3D` | レシピを見るボタンの深緑 | 2% | 画素の実測 | | `on-cta` | `#FEFEFE` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#16876F` | 見出し・ホール表記の青緑 | 1% | 画素の実測 | | `accent-2` | `#5B78D0` | パウダー表記ラベルの青紫 | 0% | 推定 | | `accent-3` | `#C8860A` | あらびき表記ラベルの山吹色 | 0% | 推定 | | `marker` | `#E31313` | リンクバナーの赤 | 0% | 画素の実測 | | `tint-1` | `#F5F29C` | ベン図の黄色い円 | 2% | 画素の実測 | | `tint-2` | `#B7E1BB` | ベン図の淡い緑の円 | 2% | 画素の主要色に補正 | | `text` | `#4D3F2D` | 本文・商品名の焦げ茶 | 2% | 画素の実測 | | `on-dark` | `#FEFEFE` | 写真・木目上の白文字 | 1% | 画素の主要色に補正 | | `accent-1-accessible` | `#16856D` | AA を満たす補正値（計算） | | 計算 | - 地の色はセクションごとに写真・木目・白板へ切り替え、単色ベタ面はほとんど使わない - 焦げ茶をブランド色としてロゴ帯・詳細ボタン・本文に使う - 深緑はレシピなどサブ導線のボタンにだけ使う - 形状の区別ラベルは青緑・青紫・山吹の 3 色で色分けする - 濃い背景の上では文字を白にし、軽いドロップシャドウを付ける - 赤は外部リンクのバナーだけに使い、ほかでは使わない - `badge-form` は文字 `#FEFEFE` × 背景 `#16876F` のコントラスト比が 4.4:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#16856D`、4.52:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV のブランド訴求コピー | ゴシック | Zen Kaku Gothic New | 900 | 26px | 1.3 | 0.04em | | `headline-lg` | セクション見出し（白抜きの太字） | ゴシック | Zen Kaku Gothic New | 900 | 24px | 1.4 | 0.05em | | `accent` | 斜めの手書き風サブ見出し | 手書き・筆 | Yomogi | 700 | 28px | 1.5 | 0.05em | | `headline-md` | カード見出し（青緑） | ゴシック | Noto Sans JP | 700 | 20px | 1.4 | 0.02em | | `headline-sm` | 商品名・目次リンク | ゴシック | Noto Sans JP | 700 | 13px | 1.4 | 0.0em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 500 | 13px | 1.8 | 0.02em | | `note` | 紙タグ内の小さな説明 | ゴシック | Noto Sans JP | 500 | 9px | 1.7 | 0.0em | | `label-button` | 小型のピル型ボタン | ゴシック | Noto Sans JP | 700 | 9px | 1.2 | 0.0em | - 見出しは極太ゴシックに、下に手描き風の曲線を一本引く - サブ見出しは手書き体で、やや右上がりに傾ける - 本文は中央揃えか左揃えにし、行間は 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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-d890762e`（元 LP の URL から採番） - **元 LP**: https://housefoods.jp/products/special/gaban-organic/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 中（8/15 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。