DESIGN.md — 深紅×炭黒の暮らし系調理鍋 LP（Warm Kitchen Lifestyle Cookware LP）

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

Overview

• 業種: 日用品・生活雑貨 ／ 雰囲気: ナチュラル、上品・高級、やさしい・柔らかい、シンプル・ミニマル
• キーワード: 料理写真主役・深紅とマット黒・生成りの余白・手書き風コピー・黄色のアクセント・暮らしの温度感
• 地の質感: 和紙のような生成りの地。木のテーブルや湯気を写した料理写真で、ぬくもりを出す
• 形: 基本は直線で、カードは角丸なしの白い面。セクションの境目には、ゆるい波形や下向きの三角を使う
• 温度感: 暖色寄り。赤茶のグラデーションと木の茶色で温かく、グレーの地で清潔感を残す

Colors

• 地は生成りと薄グレーを交互に置き、セクションの区切りにする
• 機能説明のセクションだけ、赤茶やチャコールのグラデーションの暗い地に白文字をのせる
• 深紅は強調コピーの文字色と、カラー名の札に限って使う
• 黄色は手描き札・丸バッジ・スペック札など小さな面だけに使う
• 写真の色(深紅・黒・野菜の緑)が主役なので、UI の色数は抑える

Typography

• 見出しは細めから標準の太さで、字間を少し広げて上品にする
• 英字ラベルは見出しの上に小さく、グレーの文字で置く
• 本文は中央揃えで 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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。