--- version: alpha name: Warm Beige Kitchen Tool LP description: 生成り・ベージュの地に、味噌色に近い茶系のアクセントを合わせたキッチン雑貨の商品紹介 LP。字間を広くとった丸みのあるゴシック、吹き出し型のポイント、手描きイラスト、白いカードに並べたレシピで、毎日の料理をやさしく楽にする雰囲気をつくる。 colors: primary: '#9B8161' background: '#F8F3ED' surface: '#FEFEFE' background-alt: '#EDE4DB' secondary: '#C29F74' text: '#574C43' text-body: '#6B6058' dark-section: '#9F947E' on-dark: '#FFFFFF' tint-1: '#ECE7DC' tint-2: '#F7F7EB' accent-1: '#E7D1B5' line: '#C3C0AE' primary-accessible: '#887155' dark-section-accessible: '#80755F' typography: display: fontFamily: Zen Maru Gothic fontSize: 32px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.2em headline-lg: fontFamily: Zen Maru Gothic fontSize: 22px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.15em headline-md: fontFamily: Zen Maru Gothic fontSize: 19px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.15em headline-sm: fontFamily: Zen Maru Gothic fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.1em body-md: fontFamily: Zen Kaku Gothic New fontSize: 14px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.1em note: fontFamily: Zen Kaku Gothic New fontSize: 11px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.05em accent: fontFamily: Caveat fontSize: 14px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.05em label-button: fontFamily: Montserrat fontSize: 10px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.15em rounded: sm: 4px md: 10px lg: 20px full: 999px spacing: unit: 8px card: 16px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' point-bubble: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 110px pennant-tag: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' height: 44px step-card: backgroundColor: '{colors.background-alt}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 220px worry-balloon: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 56px heading-frame: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 44px pill-heading: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 40px recipe-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.note}' rounded: '{rounded.md}' height: 180px spec-table: backgroundColor: '{colors.tint-2}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 120px --- # DESIGN.md — 生成りと味噌色の台所道具 LP（Warm Beige Kitchen Tool LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 日用品・生活雑貨 ／ **雰囲気**: ナチュラル、やさしい・柔らかい、親しみ・手作り感、シンプル・ミニマル - **キーワード**: 生成り・味噌色・台所・吹き出し・広い字間・手描きイラスト - **地の質感**: マットで平らな面。影はごく薄く、紙のような温かさがある - **形**: 角丸カード、楕円の吹き出し、ペナント型の番号タグ、円形のステップ番号 - **温度感**: 暖色寄り。低めの彩度でまとめる ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#9B8161` | ブランドを代表する茶ベージュ（タグ・吹き出し） | 7% | 画素の主要色に補正 | | `background` | `#F8F3ED` | ページの基本地（生成り） | 25% | 画素の実測 | | `surface` | `#FEFEFE` | カード・白い面 | 27% | 画素の実測 | | `background-alt` | `#EDE4DB` | 帯セクションの淡いベージュ地 | 9% | 画素の実測 | | `secondary` | `#C29F74` | 濃い茶（STEP の円・枠） | 5% | 画素の主要色に補正 | | `text` | `#574C43` | 見出し文字の焦げ茶 | 2% | 画素の実測 | | `text-body` | `#6B6058` | 本文のグレーブラウン | 1% | 推定 | | `dark-section` | `#9F947E` | 悩みセクションの暗いグレージュ地 | 6% | 画素の主要色に補正 | | `on-dark` | `#FFFFFF` | 濃い地の上の白文字 | 1% | 画素の主要色に補正 | | `tint-1` | `#ECE7DC` | 吹き出しの淡いベージュ | 3% | 画素の主要色に補正 | | `tint-2` | `#F7F7EB` | スペック表の淡いオリーブ地 | 4% | 画素の実測 | | `accent-1` | `#E7D1B5` | レシピカードの小見出しラベル | 2% | 画素の主要色に補正 | | `line` | `#C3C0AE` | 点線・区切り線 | 1% | 画素の主要色に補正 | | `primary-accessible` | `#887155` | AA を満たす補正値（計算） | | 計算 | | `dark-section-accessible` | `#80755F` | AA を満たす補正値（計算） | | 計算 | - 地は生成りと白を交互に置き、セクションを区切る - 強調には茶ベージュだけを使い、彩度の高い色は入れない - 悩みセクションは写真に暗いグレージュを重ね、淡い吹き出しを浮かせる - 見出し文字は黒ではなく焦げ茶にする - 番号タグ・吹き出しは primary の地に白文字 - スペック表は淡いオリーブ地と点線で静かに見せる - `point-bubble` は文字 `#FFFFFF` × 背景 `#9B8161` のコントラスト比が 3.68:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#887155`、4.63:1）を使う。 - `pennant-tag` は文字 `#FFFFFF` × 背景 `#9B8161` のコントラスト比が 3.68:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#887155`、4.63:1）を使う。 - `pill-heading` は文字 `#FFFFFF` × 背景 `#9F947E` のコントラスト比が 3.0:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `dark-section-accessible`（`#80755F`、4.54:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの大コピー | 丸ゴシック | Zen Maru Gothic | 500 | 32px | 1.4 | 0.2em | | `headline-lg` | セクション見出し | 丸ゴシック | Zen Maru Gothic | 500 | 22px | 1.6 | 0.15em | | `headline-md` | ポイントの縦書き・横書き見出し | 丸ゴシック | Zen Maru Gothic | 500 | 19px | 1.7 | 0.15em | | `headline-sm` | カード名・レシピ名 | 丸ゴシック | Zen Maru Gothic | 700 | 17px | 1.5 | 0.1em | | `body-md` | 本文・吹き出しの文 | ゴシック | Zen Kaku Gothic New | 400 | 14px | 1.9 | 0.1em | | `note` | 注釈・材料リスト | ゴシック | Zen Kaku Gothic New | 400 | 11px | 1.7 | 0.05em | | `accent` | 欧文の手書き添え字 | 欧文スクリプト | Caveat | 400 | 14px | 1.4 | 0.05em | | `label-button` | POINT・STEP などの小ラベル | 欧文サンセリフ | Montserrat | 700 | 10px | 1.2 | 0.15em | - 和文は字間を 0.1〜0.2em と広くとり、ゆったり見せる - 強調したい語の上に傍点を打つ - 数字だけを大きくして段差をつける - 欧文の小ラベルは大文字で、字間を広くする - 写真の脇に縦書きの見出しを置いてよい - 太字は控えめにし、500 前後を基本にする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。ステップは 3 列、ポイントは吹き出しを 2〜3 列で並べる - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算） - 写真は横幅いっぱいに置き、余白のあるテキスト帯と交互に並べる - ポイントは写真と縦書き見出しを左右に振り分ける - レシピカードは写真と文を左右交互に置く - 注釈は中央揃えの小さな文字で置く - 手描きイラストをセクションの角に散らす ## Elevation & Depth - カードにごく薄い影（0 2px 6px rgba(90,70,50,.12)）を付ける - レシピカードは右下にずらしたベージュの面を重ね、紙を重ねたように見せる - それ以外はフラットにする ## Shapes - **角丸**: 小 4px ／ 中 10px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 角丸の四角を基本にし、ステップ写真は上だけ角丸にする。断面写真は円で切り抜く - **セクション境界**: 直線を基本にし、帯の下端だけ緩い弧にする - ポイントは尻尾付きの楕円吹き出しにする - 番号タグは下が三角に切れたペナント型にする - 見出しは二重線の角枠かピル型の帯で囲む - STEP 番号は円形で、カードに半分重ねる ## Components - **ポイント吹き出し**（`point-bubble`）: 茶ベージュの楕円に尻尾を付け、上に POINT と番号、下に 2 行の要点を書く - **番号ペナント**（`pennant-tag`）: 下が V 字に切れた縦長のタグ。POINT 番号を白で入れる - **ステップカード**（`step-card`）: 円形の STEP 番号を写真の上に重ね、下に淡い地の説明文を置く。カードの間に三角の矢印を入れる - **悩み吹き出し**（`worry-balloon`）: 暗い地の上に淡いベージュの雲形吹き出しを 4 つ置き、中央に困り顔のイラストを入れる - **角枠見出し**（`heading-frame`）: 白地に細い二重線の四角い枠で、中央に見出しを置く - **ピル帯見出し**（`pill-heading`）: 左端から伸びる右側が丸い濃い帯に、白い見出しを置く - **レシピカード**（`recipe-card`）: 白いカードに写真・ピル型のキャッチ・料理名・材料リストを置き、背景にベージュの面を重ねる - **スペック表**（`spec-table`）: 淡いオリーブ地に点線で区切った 2 列の表。横に寸法線付きの商品図を置く ## Do's and Don'ts **Do** - 生成り・ベージュ・茶の 3 段階で全体をまとめる - 見出しは字間を広くし、傍点で要点を目立たせる - 使い方は生活感のある手元写真で見せる - 番号付きのポイントを一覧で見せたあと、1 つずつ詳しく説明する - 手描きイラストや欧文の手書き文字を小さく添える **Don't** - 赤や青などの鮮やかな強調色を使わない - 真っ黒の文字や太すぎる見出しを使わない - 影の濃いカードや光沢のある装飾を使わない - 情報を詰め込みすぎず、余白を削らない - 角張った硬い書体を見出しに使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（使い方の動作を 4 つの言葉で見せる）: 縦長の写真を 4 枚並べ、各写真に縦書きの動詞と欧文を重ねる。下に傍点付きの大コピーと商品写真を置く 2. **悩みの提起**（料理中の困りごとに共感させる）: 暗い写真の上に吹き出しを 4 つ置き、中央に困り顔のイラストを入れる 3. **解決提示**（商品で解決できることを示す）: 両側に手元写真を置き、中央の円の中にコピーを入れる 4. **使い方ステップ**（3 段階の手軽さを伝える）: 淡い帯の見出しの下にステップカードを 3 列並べる 5. **サイズの目安**（量の違いを比べられるようにする）: 白いカードを 2 つ並べ、量の数値と器の写真で比べる。下に注釈を置く 6. **ポイント一覧**（5 つの利点をひと目で見せる）: 白い枠の中に吹き出しを 5 つ置き、中央に弧を描くタイトルと商品写真を配置する 7. **ポイント詳細**（利点を 1 つずつ詳しく説明する）: ペナント番号・縦書き見出し・写真・比較写真・ピル帯見出しを、ポイントごとに変化させて並べる 8. **活用レシピ**（ほかの使い道を見せる）: 角枠見出しの下に、写真と文を左右交互にしたレシピカードを並べる 9. **イメージ写真**（使う場面を印象づける）: 横幅いっぱいの写真に、白い手書きの欧文を小さく添える 10. **スペック**（寸法と素材を伝える）: ペナント型の見出し、点線の表、寸法線付きの商品図、注釈を置く ## Imagery - 白いホーロー鍋や木べらなどの台所道具を、自然光で明るく撮る - 手元をアップにして、生活感のある使用場面を見せる - 背景は白・生成り・木目にし、彩度をやや落とす - 人物は線と茶色の面だけで描いた手描きイラストにする - 道具の線画や湯気のような小さな装飾を散らす - 料理写真は真上か斜め上から撮り、皿ごと切り抜いて添える - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 版も 480px 前後の中央カラムで組み、両側は生成り地にする - SP では 3 列のステップを維持し、文字は 12px 以上を保つ - ポイント詳細は SP で写真を上、見出しを下に積んでもよい - レシピカードは SP で写真と文を縦に積む - 横幅いっぱいの写真は 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-23a7da57`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/auc-risecreation/r0629/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（5/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。