--- version: alpha name: Warm Kitchen Lifestyle Cookware LP description: 深い赤とマットな黒の鍋の写真を主役にした、生活雑貨らしい LP。生成りや薄グレーの地に細いゴシック体を置き、黄色い手描き風の札や丸いバッジで親しみを足している。機能の説明では赤茶やチャコールの暗い面に切り替え、メリハリをつける。 colors: primary: '#7A2220' background: '#F9F6F2' background-alt: '#ECECEC' surface: '#FEFEFE' dark-section: '#6B1C15' secondary: '#5A534B' on-dark: '#F9EFE1' accent-1: '#FCE654' text: '#2A2A2A' text-body: '#5A534B' text-muted: '#9A9590' line: '#CBC0B4' tint-1: '#E4E4E4' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 28px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.05em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 24px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.05em headline-md: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.05em accent: fontFamily: Yomogi fontSize: 22px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.08em note: fontFamily: Montserrat fontSize: 13px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0.12em label-button: fontFamily: Montserrat fontSize: 20px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.02em rounded: sm: 0px md: 2px lg: 0px full: 999px spacing: unit: 8px card: 8px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' point-heading: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 140px handwritten-tag: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.accent}' height: 80px recipe-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 220px circle-badge: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 50px dark-feature: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 650px color-label: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' height: 110px spec-table: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' height: 270px caution-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.headline-sm}' height: 190px --- # DESIGN.md — 深紅×炭黒の暮らし系調理鍋 LP（Warm Kitchen Lifestyle Cookware LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 日用品・生活雑貨 ／ **雰囲気**: ナチュラル、上品・高級、やさしい・柔らかい、シンプル・ミニマル - **キーワード**: 料理写真主役・深紅とマット黒・生成りの余白・手書き風コピー・黄色のアクセント・暮らしの温度感 - **地の質感**: 和紙のような生成りの地。木のテーブルや湯気を写した料理写真で、ぬくもりを出す - **形**: 基本は直線で、カードは角丸なしの白い面。セクションの境目には、ゆるい波形や下向きの三角を使う - **温度感**: 暖色寄り。赤茶のグラデーションと木の茶色で温かく、グレーの地で清潔感を残す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#7A2220` | 鍋の深紅・ブランド色と強調見出し | 7% | 画素の主要色に補正 | | `background` | `#F9F6F2` | 生成りの基本地 | 25% | 画素の実測 | | `background-alt` | `#ECECEC` | レシピ一覧の薄グレー地 | 11% | 画素の実測 | | `surface` | `#FEFEFE` | カードや表の白い面 | 14% | 画素の実測 | | `dark-section` | `#6B1C15` | 機能説明に使う赤茶の暗い地 | 9% | 画素の実測 | | `secondary` | `#5A534B` | チャコールの機能セクション地 | 7% | 画素の主要色に補正 | | `on-dark` | `#F9EFE1` | 暗い地の上に置く白文字 | 2% | 画素の実測 | | `accent-1` | `#FCE654` | 黄色の手描き風見出し札や丸バッジ | 2% | 画素の実測 | | `text` | `#2A2A2A` | 見出しの黒文字 | 3% | 画素の実測 | | `text-body` | `#5A534B` | 本文のダークグレー | 2% | 画素の主要色に補正 | | `text-muted` | `#9A9590` | 英字ラベル(POINT等)のグレー | 0% | 推定 | | `line` | `#CBC0B4` | 見出し下の細線と表の罫線 | 0% | 画素の主要色に補正 | | `tint-1` | `#E4E4E4` | 仕様表の見出しセルのグレー | 1% | 画素の実測 | - 地は生成りと薄グレーを交互に置き、セクションの区切りにする - 機能説明のセクションだけ、赤茶やチャコールのグラデーションの暗い地に白文字をのせる - 深紅は強調コピーの文字色と、カラー名の札に限って使う - 黄色は手描き札・丸バッジ・スペック札など小さな面だけに使う - 写真の色(深紅・黒・野菜の緑)が主役なので、UI の色数は抑える ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 大きいリードコピーとセクションのキャッチ | ゴシック | Zen Kaku Gothic New | 400 | 28px | 1.5 | 0.05em | | `headline-lg` | POINT の見出し | ゴシック | Zen Kaku Gothic New | 400 | 24px | 1.4 | 0.05em | | `headline-md` | 暗い地の機能名見出し | ゴシック | Noto Sans JP | 700 | 22px | 1.4 | 0.05em | | `headline-sm` | 深紅の強調コピーと注意カードの見出し | ゴシック | Noto Sans JP | 700 | 18px | 1.5 | 0.03em | | `body-md` | 本文の説明文 | ゴシック | Noto Sans JP | 400 | 12px | 1.9 | 0.05em | | `accent` | 手書き風のコピーと黄色札の文字 | 手書き・筆 | Yomogi | 400 | 22px | 1.4 | 0.08em | | `note` | 英字ラベル(POINT/SPEC 等) | 欧文サンセリフ | Montserrat | 600 | 13px | 1.2 | 0.12em | | `label-button` | サイズ数値とカラー名の札 | 欧文サンセリフ | Montserrat | 700 | 20px | 1.2 | 0.02em | - 見出しは細めから標準の太さで、字間を少し広げて上品にする - 英字ラベルは見出しの上に小さく、グレーの文字で置く - 本文は中央揃えで 2 行程度に収め、行間は広めにとる - 手書き風の書体は、ハッシュタグ風のコピーと黄色札だけに使う - 数値は欧文の太字で大きくし、単位は小さく添える - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。レシピは 2 列カード、注意事項は 2 列＋1 列 - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 56px、基本単位 8px、カード内 8px（375px 幅換算） - 写真は全幅で配置し、テキストブロックと交互に並べる - POINT ブロックは英字ラベル、見出し、細線、2 行の説明の順で中央に置く - 写真の上に重ねる文は左右どちらかに寄せ、白文字にする - 仕様表は全幅に近い幅の白地に、細い罫線で組む ## Elevation & Depth - 影はほぼ使わず、平面的に作る - カードは白い面とグレーの地の明度差だけで浮かせる - 写真の上の文字帯は半透明の暗い面にする ## Shapes - **角丸**: 小 0px ／ 中 2px ／ 大 0px。ボタンは角丸の長方形。 - **写真の切り抜き**: 全幅の長方形。商品は切り抜きで、湯気や水しぶきの演出を添える - **セクション境界**: ゆるい波形のカーブと、吹き出し風の下向き三角 - 黄色バッジは正円にし、カードの左上にはみ出させる - 見出し札は手でちぎったような不定形の黄色 - カラー名の札は角丸なしの四角い色面 - 注意カードは細い黒枠の四角 ## Components - **POINT 見出し**（`point-heading`）: 小さな英字ラベルの下に大きな見出しを置き、その下に全幅の細線と 2 行の説明を続ける - **手描き風黄色札**（`handwritten-tag`）: 不定形の黄色い面に手書き風の文字を 2 行のせる。セクション導入に使う - **調理法カード**（`recipe-card`）: 白枠の中に料理写真と 2 行の説明を置き、左上に黄色の丸バッジで調理法を示す - **丸バッジ**（`circle-badge`）: 黄色の正円に手書き風の短い語を入れる - **暗色機能ブロック**（`dark-feature`）: グラデーションの暗い地に、括弧付きのサブ見出し・機能名・図解を中央揃えで並べる - **カラー名札**（`color-label`）: 写真の上に重ねる四角い色面。英字の大文字とカナ名を 2 段で入れる - **仕様表**（`spec-table`）: 見出しの行と列をグレーにし、数値は欧文の太字で大きく見せる - **使い方注意カード**（`caution-card`）: 細い黒枠の中に線画アイコン、太字見出し、説明を入れる ## Do's and Don'ts **Do** - 湯気の立つ料理写真と商品の切り抜きを大きく使う - 生成りやグレーの地に、細いゴシック体を中央揃えで置く - 黄色は小さな札とバッジに限って使う - 機能説明は暗いグラデーションの地に図解を入れて見せる - 線画アイコンは細線で単色にする **Don't** - 角丸のピル型ボタンや派手なグラデーションのボタンを置かない - 原色の赤や蛍光色を UI の色に使わない - 見出しを極太にしすぎない - ドロップシャドウを強くかけない - 手書き風の書体を本文に使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品の世界観とサイズ・対応熱源を示す）: 木のテーブルに置いた鍋の写真の上にロゴを置き、黄色の帯ラベルでスペックを 2 つ示す 2. **コンセプト**（暮らしの中での価値を伝える）: 白地に手書き風のコピーと大きなキャッチを置き、調理シーンの写真を続ける 3. **商品とは**（調理法の原理を説明する）: 黄色の札、2 行のキャッチ、野菜に囲まれた商品写真の順に並べる 4. **特長 1**（味の向上を示す）: POINT 見出しの後に写真、深紅の強調コピー、比較の棒グラフを置く 5. **機能解説**（仕組みを図で説明する）: 赤茶とチャコールの暗い地に、断面の図解と矢印を入れる 6. **特長 2 調理レパートリー**（多用途であることを示す）: グレー地に 2 列×3 段の料理カードと丸バッジを並べる 7. **特長 3〜5**（軽さ・手入れ・デザインを伝える）: POINT 見出しと全幅のシーン写真を交互に並べ、線画アイコンと白文字を添える 8. **カラー展開**（色を選ぶ楽しさを伝える）: 波形で区切った白地に 2 色の鍋の切り抜きを並べ、写真の上にカラー名札を重ねる 9. **ラインナップ・仕様**（サイズと仕様を比較する）: 3 サイズの切り抜きと数値、罫線の仕様表、熱源の対応表を並べる 10. **使い方**（注意点を伝える）: 枠付きのカードにアイコン・見出し・説明を入れ、2 列＋1 列で並べる ## Imagery - 木のテーブルと自然光の中で、湯気の立つ料理を斜め上から撮る - 商品は白抜きの切り抜きにし、葉や野菜を添える - 台所で使っている手元の写真で生活感を出す - 機能は断面の図解に矢印・湯気・水滴を加えて描く - アイコンは細い線画を単色で描く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はコンテンツ幅を約 750px に固定して中央に置き、左右には地の色を延長する - 写真は PC でもコンテンツ幅いっぱいに置く - レシピカードは PC で 3 列にする - 見出しのサイズは 1.3 倍程度に上げる ## 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-d2721d24`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/k-kitchen/100476/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（8/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。