--- version: alpha name: Warm Beige Handwritten Recipe Food LP description: 生成り・ベージュ・小麦色の淡いアースカラーを章ごとに切り替え、太い手書き風ディスプレイ書体の見出しと黒丸の番号付き 3 ステップカードでレンジ調理の手軽さを伝える食品レシピ LP。ボタンは黒とクリームのピル型。 colors: background: '#ECE6CE' primary: '#D4BB9D' secondary: '#E4D2A2' surface: '#ECE6CE' text: '#171610' dark-section: '#232323' on-dark: '#F8F7F5' cta: '#ECE6CD' on-cta: '#5D4E32' accent-1: '#AF925F' accent-2: '#ABA49C' text-muted: '#6F6A57' line: '#2B2523' tint-1: '#D4BB9C' accent-1-accessible: '#866E43' typography: display: fontFamily: Dela Gothic One fontSize: 64px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.05em headline-lg: fontFamily: Dela Gothic One fontSize: 28px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.1em accent: fontFamily: Montserrat fontSize: 11px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.15em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 16px fontWeight: 700 lineHeight: 1.7 letterSpacing: 0.03em body-md: fontFamily: Zen Kaku Gothic New fontSize: 14px fontWeight: 700 lineHeight: 2.2 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 8px md: 20px lg: 32px full: 999px spacing: unit: 8px card: 24px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-cta: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 62px button-detail: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 30px anchor-tab: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 40px step-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 380px step-number: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 46px speech-line: textColor: '{colors.text}' typography: '{typography.body-md}' height: 80px rank-badge: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 36px heading-ruled: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 130px product-card: textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 400px --- # DESIGN.md — 生成り×焼き色ベージュの手軽レシピ食品 LP（Warm Beige Handwritten Recipe Food LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 食品・飲料 ／ **雰囲気**: ナチュラル、親しみ・手作り感、やさしい・柔らかい、シンプル・ミニマル - **キーワード**: 生成りベージュ・手書き風極太見出し・3ステップ調理・ランキング・ピル型ボタン・湯気モチーフ - **地の質感**: フラットな単色面。写真は切り抜きで影は弱く、背景に淡い湯気・米粒の装飾シルエット。 - **形**: 大きな角丸カード、ピル型ボタン、黒い正円の番号、ゆるい波形の内側ベース、上辺が弧状のセクション境界。 - **温度感**: 暖色寄りのニュートラル。焼き色と小麦色で食欲を感じさせる落ち着いた温かさ。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#ECE6CE` | ページ基本地（生成り） | 36% | 画素の実測 | | `primary` | `#D4BB9D` | 第1章の焼き色ベージュ地 | 15% | 画素の実測 | | `secondary` | `#E4D2A2` | 第2章の小麦色地 | 14% | 画素の実測 | | `surface` | `#ECE6CE` | ステップカード面 | 10% | 画素の実測 | | `text` | `#171610` | 見出し・本文の濃い焦げ茶 | 4% | 画素の実測 | | `dark-section` | `#232323` | 番号丸・詳細ボタンの黒 | 2% | 画素の実測 | | `on-dark` | `#F8F7F5` | 黒ボタン上の白文字 | 0% | 画素の実測 | | `cta` | `#ECE6CD` | 購入導線のクリームピルボタン | 2% | 画素の実測 | | `on-cta` | `#5D4E32` | クリームボタン上の茶文字 | 0% | 画素の実測 | | `accent-1` | `#AF925F` | 1位ラベルのブロンズ | 0% | 画素の主要色に補正 | | `accent-2` | `#ABA49C` | 2位ラベルのシルバーグレー | 0% | 画素の実測 | | `text-muted` | `#6F6A57` | 注釈・商品説明のグレー | 0% | 画素の実測 | | `line` | `#2B2523` | 見出し上下の罫線 | 0% | 推定 | | `tint-1` | `#D4BB9C` | 背景装飾シルエットの淡色 | 2% | 画素の実測 | | `accent-1-accessible` | `#866E43` | AA を満たす補正値（計算） | | 計算 | - 地色は生成り→焼き色→小麦色→生成りと章ごとに全幅で切り替える - カードは地色より一段明るいクリームで浮かせる - 強い色は黒のみ。番号丸と詳細ボタンに限定する - ランキングラベルはブロンズ・シルバー・濃いベージュで順位を示す - 鮮やかな色は商品パッケージと料理写真に任せ、UIは低彩度に保つ - 背景装飾は地色より少し濃い同系色で薄く置く - `rank-badge` は文字 `#F8F7F5` × 背景 `#AF925F` のコントラスト比が 2.76:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#866E43`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV・章タイトルの極太手書き風 | 装飾・ディスプレイ | Dela Gothic One | 400 | 64px | 1.2 | 0.05em | | `headline-lg` | セクション見出し（ランキング・ラインナップ） | 装飾・ディスプレイ | Dela Gothic One | 400 | 28px | 1.5 | 0.1em | | `accent` | 英字サブタイトル・透かし英字 | 欧文サンセリフ | Montserrat | 700 | 11px | 1.4 | 0.15em | | `headline-sm` | ランキング商品名・ステップ説明 | ゴシック | Zen Kaku Gothic New | 700 | 16px | 1.7 | 0.03em | | `body-md` | 導入文（中央揃え） | ゴシック | Zen Kaku Gothic New | 700 | 14px | 2.2 | 0.03em | | `note` | 注釈・商品説明 | ゴシック | Noto Sans JP | 400 | 10px | 1.7 | 0.02em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 13px | 1.4 | 0.05em | - 大見出しは手書き風の極太書体で、仮名を大きく崩した親しみある形にする - 大見出しの下に小さな字間広めの英字サブタイトルを添える - 章内に大きな白抜き英字を透かしで敷き、その下に白太字のリード - 本文は太めのゴシックで中央揃え、行間は広め - 注釈と商品説明は細いグレーで小さく - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム、製品ラインナップのみ 2 カラム - **本文ブロックの幅**: 画面幅の約 87% - **余白**: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算） - ステップカードは幅いっぱいに縦に並べ、カード間に点線の矢印 - 番号丸はカード左上の角にはみ出させる - ランキングは1位を大きな料理写真、2・3位は左テキスト＋右パッケージの小型行 - 見出しは上下の黒罫線で挟む - CTAボタンは2つを縦に並べる ## Elevation & Depth - カードとクリームボタンにごく弱い下方向の影 - パッケージ切り抜きにわずかな落ち影 - それ以外はフラット ## Shapes - **角丸**: 小 8px ／ 中 20px ／ 大 32px。ボタンはピル型。 - **写真の切り抜き**: 料理・商品は背景を抜いた切り抜き。FVは円形に切り抜いた写真も使う - **セクション境界**: 章の上辺を大きな弧や角丸でつなぎ、フッター手前は下向きの弧 - ステップカードの下半分にゆるい波形の淡い面を敷く - ランキングラベルは右端を斜めに切った旗型 - 番号は黒い正円に白い太字の数字 ## Components - **購入導線ピルボタン**（`button-cta`）: クリーム地に茶文字、右端に＞矢印。2つを縦に並べる - **詳細ボタン**（`button-detail`）: 商品カード下の黒い小ピルボタン - **ページ内ナビ**（`anchor-tab`）: FV下に3つ並ぶクリームのピル型リンク - **調理ステップカード**（`step-card`）: 大きな角丸カード。写真と吹き出しコメント、下部に太字説明 - **番号丸**（`step-number`）: カード左上の黒い正円に01など - **線画吹き出しコメント**（`speech-line`）: 細い茶の線で囲う斜めの吹き出し。コメントは手書き風に傾ける - **順位旗ラベル**（`rank-badge`）: no.＋大きな数字の旗型。順位で色を変える - **罫線挟み見出し**（`heading-ruled`）: 上下に黒の細線を引き中央に手書き風の見出し - **商品カード**（`product-card`）: パッケージ写真、小リード、太字の商品名、グレーの説明、詳細ボタン ## Do's and Don'ts **Do** - 章ごとに地色を同系の別ベージュに切り替える - 見出しは極太の手書き風書体＋小さな英字 - 調理はかならず番号付きの3ステップで見せる - 料理・商品写真は切り抜いて余白に置く - 湯気や米粒の淡い装飾を背景に散らす **Don't** - 原色のボタンや高彩度のUIを使わない - 角の立った四角いボタンにしない - 濃い影やグラデーションで立体感を出さない - 本文を細すぎる明朝にしない - 白い純白地を広く使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（調理の手軽さとテーマの提示）: 家電と商品の切り抜き写真、黒い短冊吹き出し、極太の手書き風見出しを大きく縦に積む 2. **ページ内ナビ**（章へのジャンプ）: クリームのピル型3つを横に並べる 3. **導入文**（商品の新しい使い方を説明）: 中央揃えの太字ゴシックを広い行間で並べる 4. **料理写真の帯**（章への橋渡し）: 皿の切り抜きを横一列に並べ、その下を弧状の焼き色地にする 5. **章タイトル**（レシピ1の導入）: 湯気の装飾、極太見出し、英字サブ、透かし英字と白抜きリード 6. **調理3ステップ**（作り方を見せる）: 番号丸付きの角丸カードを縦に3枚、点線矢印でつなぐ。最後に注釈 7. **おすすめランキング**（合う商品の提案）: 罫線挟み見出し、1位は大きな料理写真＋パッケージ、2・3位は小さな行 8. **CTA**（購入・店舗案内へ誘導）: クリームのピルボタンを2つ縦に並べる 9. **レシピ2の章**（別レシピの紹介）: 小麦色の地に同じ型（タイトル・3ステップ・ランキング・CTA）を繰り返す 10. **製品ラインナップ**（全商品の一覧）: 生成り地に2カラムの商品カードと黒い詳細ボタン 11. **関連バナー**（関連コンテンツへの回遊）: 白抜きの英字の帯と、横長バナーを縦に並べる 12. **フッター**（SNSリンクと企業情報）: 上辺角丸の淡いベージュ面、ロゴ、縦線区切りのリンク、黒い丸のトップへ戻るボタン ## Imagery - 料理は真上から斜め上の明るい自然光で撮り、背景を抜く - 器は木皿・くすんだ水色の陶器など素朴なもの - パッケージは正面向きの切り抜きで料理と重ねる - 背景装飾は湯気の波線や米粒の楕円を地色より少し濃い単色で - 細い線画の吹き出しと点線矢印で手描き感を足す - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは中央寄せの幅約1000px - PCではステップカード3枚を横に並べ、少しずつ上下にずらす - ランキングはPCで1位を左に大きく、2・3位を右列に - 製品ラインナップはPCで5カラム - CTA2つと関連バナー3枚をPCでは横に並べる - FV見出しはPCで1行にまとめる ## 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-bd7cdb1c`（元 LP の URL から採番） - **元 LP**: https://www.somi.co.jp/special/pouch-udon-risotto/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（12/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。