--- version: alpha name: Warm Kraft Kids Cooking Contest LP description: 生成りとベージュの地に、こげ茶の文字と帯、オレンジのアクセントを重ねた食品メーカーの子ども向けフォトコンテスト LP。丸ゴシックと手描き風イラスト、波形の区切り、円形の賞品バッジで、親しみやすく温かい印象にまとめている。 colors: primary: '#734F41' background: '#F9EEDC' surface: '#FEFDF8' background-alt: '#FCF9F0' accent-1: '#FF9C3D' tint-1: '#FFEFCB' accent-2: '#50AA6D' accent-3: '#EAB11A' cta: '#EB3963' on-cta: '#FFF4F8' dark-section: '#333333' text-muted: '#988D86' line: '#F0F0E6' marker: '#C83848' accent-1-accessible: '#B25700' cta-accessible: '#DD1645' text-muted-accessible: '#756B64' typography: display: fontFamily: Dela Gothic One fontSize: 72px fontWeight: 400 lineHeight: 1.1 headline-lg: fontFamily: Zen Maru Gothic fontSize: 28px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em headline-md: fontFamily: Zen Maru Gothic fontSize: 21px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.04em headline-sm: fontFamily: Zen Maru Gothic fontSize: 16px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.03em body-md: fontFamily: M PLUS Rounded 1c fontSize: 14px fontWeight: 700 lineHeight: 1.8 letterSpacing: 0.04em note: fontFamily: M PLUS Rounded 1c fontSize: 11px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.02em accent: fontFamily: Montserrat fontSize: 40px fontWeight: 800 lineHeight: 1.1 label-button: fontFamily: Zen Maru Gothic fontSize: 15px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 6px md: 10px lg: 20px full: 999px spacing: unit: 8px card: 28px section: 72px components: page: backgroundColor: '{colors.background}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' speech-band: backgroundColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 100px step-card: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 360px step-number: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 48px button-sns: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 70px button-secondary: backgroundColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 60px prize-circle: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 260px rank-medal: backgroundColor: '{colors.surface}' textColor: '{colors.accent-1}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 110px slash-heading: textColor: '{colors.primary}' typography: '{typography.headline-md}' height: 80px label-pill: backgroundColor: '{colors.line}' textColor: '{colors.text-muted}' typography: '{typography.note}' rounded: '{rounded.full}' height: 28px accordion: textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 90px --- # DESIGN.md — 生成り×こげ茶×オレンジの親子料理キャンペーン LP（Warm Kraft Kids Cooking Contest LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: 親しみ・手作り感、やさしい・柔らかい、ポップ・元気、ナチュラル - **キーワード**: 生成り・こげ茶・オレンジ・丸ゴシック・手描きイラスト・波形の区切り - **地の質感**: フラットな面に、薄い線画の調理器具柄と淡い水玉を敷く。紙のような温かい地色。 - **形**: 角丸カード、正円の賞品バッジ、ギザギザ縁のメダル、スカラップ（波形）のセクション境界、吹き出しの三角。 - **温度感**: 暖色寄り。クリーム・ベージュ・茶で統一し、緑は商品とグラフにだけ使う。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#734F41` | こげ茶。見出しの文字、吹き出し帯、ボタン、フッター | 12% | 画素の実測 | | `background` | `#F9EEDC` | ページ全体のベージュ地 | 28% | 画素の実測 | | `surface` | `#FEFDF8` | 手順や記事を入れる白いカード | 28% | 画素の実測 | | `background-alt` | `#FCF9F0` | ファーストビューの淡いクリーム地 | 6% | 画素の実測 | | `accent-1` | `#FF9C3D` | オレンジ。強調語、番号バッジ、グランプリの円 | 5% | 画素の実測 | | `tint-1` | `#FFEFCB` | 賞品の円などに使う淡いクリーム黄 | 4% | 画素の実測 | | `accent-2` | `#50AA6D` | 緑。年号バッジ、円グラフ | 3% | 画素の実測 | | `accent-3` | `#EAB11A` | 金色の王冠とメダルの縁 | 1% | 画素の実測 | | `cta` | `#EB3963` | SNS フォローの主ボタン（ピンク） | 2% | 画素の実測 | | `on-cta` | `#FFF4F8` | ボタン上の文字 | 0% | 画素の実測 | | `dark-section` | `#333333` | X のボタン（ほぼ黒） | 1% | 画素の実測 | | `text-muted` | `#988D86` | 注釈やキャプションの薄い茶 | 0% | 画素の実測 | | `line` | `#F0F0E6` | 区切り線とラベル用ピル | 0% | 画素の主要色に補正 | | `marker` | `#C83848` | ロゴの赤（差し色） | 0% | 画素の主要色に補正 | | `accent-1-accessible` | `#B25700` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#DD1645` | AA を満たす補正値（計算） | | 計算 | | `text-muted-accessible` | `#756B64` | AA を満たす補正値（計算） | | 計算 | - 地はベージュ、カードは生成り白にする。2 段階の暖色で面を分ける - 見出しも本文も文字はこげ茶。黒は使わない - 強調したい語だけオレンジの文字にする - 吹き出しの帯、サブボタン、フッターはこげ茶の面に白文字 - 緑は商品とグラフ、年号バッジだけに使う - SNS ボタンは各サービスの色（ピンク・黒）を例外として使う - `step-number` は文字 `#FFF4F8` × 背景 `#FF9C3D` のコントラスト比が 1.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#B25700`、4.59:1）を使う。 - `button-sns` は文字 `#FFF4F8` × 背景 `#EB3963` のコントラスト比が 3.69:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#DD1645`、4.57:1）を使う。 - `prize-circle` は文字 `#FFF4F8` × 背景 `#FF9C3D` のコントラスト比が 1.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#B25700`、4.59:1）を使う。 - `rank-medal` は文字 `#FF9C3D` × 背景 `#FEFDF8` のコントラスト比が 2.05:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#B25700`、4.61:1）を使う。 - `label-pill` は文字 `#988D86` × 背景 `#F0F0E6` のコントラスト比が 2.82:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-muted-accessible`（`#756B64`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV のタイトルロゴ（文字を崩した手作り風） | 装飾・ディスプレイ | Dela Gothic One | 400 | 72px | 1.1 | 0.0em | | `headline-lg` | セクション見出し | 丸ゴシック | Zen Maru Gothic | 700 | 28px | 1.4 | 0.05em | | `headline-md` | スラッシュで挟んだ訴求見出し、カードの見出し | 丸ゴシック | Zen Maru Gothic | 700 | 21px | 1.5 | 0.04em | | `headline-sm` | 吹き出し帯の文言、小見出し | 丸ゴシック | Zen Maru Gothic | 700 | 16px | 1.6 | 0.03em | | `body-md` | 中央揃えの本文、手順 | 丸ゴシック | M PLUS Rounded 1c | 700 | 14px | 1.8 | 0.04em | | `note` | ※の注釈、写真キャプション | 丸ゴシック | M PLUS Rounded 1c | 500 | 11px | 1.6 | 0.02em | | `accent` | 大きな数字（日付、金額、％） | 欧文サンセリフ | Montserrat | 800 | 40px | 1.1 | 0.0em | | `label-button` | ボタンの文字 | 丸ゴシック | Zen Maru Gothic | 700 | 15px | 1.4 | 0.05em | - 文字はほぼ太字の丸ゴシックで統一する - 本文は中央揃えにし、短く改行する - 数字は欧文の極太にし、単位は小さく添える - 見出しの一部の語だけオレンジにする - 訴求見出しは左右に斜線を置いて挟む - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。賞品だけ円を左右にずらして重ねる - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 72px、基本単位 8px、カード内 28px（375px 幅換算） - カードは画面幅の約 92%。カードの中身はさらに内側の約 80% に収める - 手順カードは縦に並べ、カード同士を吹き出しの三角でつなぐ - セクションの頭に、こげ茶の吹き出し帯をカードの上端に重ねて置く - 材料表は左に名前、右に分量を置き、行を詰める ## Elevation & Depth - 影はほとんど使わない。面の色の差で階層をつける - 賞品の円には白いフチをつけ、地から浮かせる - メダルはギザギザの縁で立体感を出す ## Shapes - **角丸**: 小 6px ／ 中 10px ／ 大 20px。ボタンは角丸の長方形。 - **写真の切り抜き**: 人物写真は正円に白フチ。料理写真はカード幅いっぱいの角丸長方形 - **セクション境界**: FV の下端とフッターの上端をスカラップ（波形）にする。途中は点線の波線で区切る - ボタンは角丸 8px の長方形。ピル型は小さなラベルにだけ使う - 番号は正円のオレンジバッジ - 吹き出しには下向きの三角をつける - 円を賞品の主役の形にする ## Components - **吹き出し帯**（`speech-band`）: こげ茶の角丸の帯に白い太字を中央揃えで置き、下に三角をつける - **手順カード**（`step-card`）: 生成り白の角丸カード。上端にオレンジの番号円を半分はみ出させて置き、見出しは中央揃え - **番号バッジ**（`step-number`）: オレンジの正円に白い欧文数字（01 のような 2 桁） - **SNS フォローボタン**（`button-sns`）: 幅いっぱいの角丸長方形。左にアイコン、中央に 2 行の文字、右に点線で区切った矢印 - **茶色ボタン**（`button-secondary`）: こげ茶の角丸ボタン。白文字で、右端に「>」を置く - **賞品の円**（`prize-circle`）: オレンジまたはクリームの大きな正円に白いフチ。中に賞品画像と極太の金額を入れる - **賞のメダル**（`rank-medal`）: ギザギザ縁の白い円に王冠のアイコンと賞の名前・人数を入れ、賞品の円に重ねる - **斜線つき見出し**（`slash-heading`）: 見出しの左右に太い斜線を逆ハの字に置く - **区切りラベル**（`label-pill`）: 横線の中央に置くグレーのピル型ラベル。下にオレンジの値を入れる - **規約のアコーディオン**（`accordion`）: 上下を線で区切った帯。中央に見出しを置き、右にこげ茶の円形「+」ボタン ## Do's and Don'ts **Do** - 文字色はこげ茶で統一し、強調はオレンジだけで行う - 人物写真は正円に白フチで切り抜き、FV の周りに散らす - 数字は大きく太くし、単位は小さく添える - カードと地は生成り白とベージュの 2 段階で分ける - セクションの境目に波形を入れて柔らかく見せる **Don't** - 純黒の文字や寒色の背景を使わない - 角が鋭い四角や細い明朝体を使わない - 強い影やグラデーションのボタンを使わない - 緑を見出しや装飾に広げない - 本文を左揃えの長い段落にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（企画名、賞品、応募期間を一目で伝える）: クリーム地に線画の調理器具柄を敷く。中央にタイトルロゴ、両脇にキャラクター、周りに円形の子ども写真。右上にオレンジの賞品タグ、下に大きな日付 2. **企画の趣旨**（商品と体験の価値を伝える）: 吹き出し 2 つで挟んだ商品画像、斜線つき見出し、こげ茶の吹き出し帯、中央揃えの本文、※の注釈 3. **賞品紹介**（応募の動機を高める）: 左揃えの見出しにキャラクターを添える。大小の円を互い違いに重ね、ギザギザのメダルで賞の順位を示す 4. **応募方法**（3 ステップで迷わず応募させる）: 番号つきの縦長カードを三角でつなぐ。写真、SNS ボタン、ハッシュタグのラベルを入れる 5. **推奨レシピと実績**（データで商品の効果を示す）: 吹き出し帯をのせたカード。鉤括弧で囲んだ実績文と、緑の円グラフにオレンジで大きな％を添える 6. **レシピ詳細**（作り方を具体的に見せる）: 幅いっぱいの料理写真、材料の 2 列表、丸数字つきの手順 7. **購入・関連リンク**（購入と特設サイトへ誘導する）: 商品画像を入れたこげ茶のバナーと、2 列の画像バナー 8. **ほかの製品の案内**（対象を広げてレシピサイトへ誘導する）: 斜線つき見出し、商品を横一列に並べる、茶色ボタン 9. **応募規約**（規約を開閉式で載せる）: 線で区切った帯に「+」ボタン 10. **フッター**（ロゴ、問い合わせ、SNS を置く）: 上端を波形にしたこげ茶の面。白いロゴ、リンク、アイコン、コピーライトを置く ## Imagery - 子どもが調理する様子を、明るい室内で自然光のまま撮る。笑顔と手元を見せる - 人物は正円に切り抜き、白い太フチをつける - キャラクターはエプロンと三角巾の子ども。素朴な線と塗りの手描き風 - 背景には茶系の細い線で、鍋や泡立て器を薄く描いて敷く - 料理写真は木や布の上で寄って撮る。カードの幅いっぱいに見せる - 金券は金色で描き、キラキラの星を添える - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はコンテンツ幅を約 900px に収め、両脇をベージュの地で埋める - FV は横長にし、写真をタイトルの左右へ散らす - 手順カードは PC では 3 列に横並びにする - レシピの実績文とグラフ、材料と手順を PC では 2 列にする - 賞品の円は PC では横に広げて重ねる - 購入バナーと関連バナーは PC では 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-d4a9d0be`（元 LP の URL から採番） - **元 LP**: https://www.somi.co.jp/special/3years_cooking_2026/ - **解析に使った画像**: 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/）からご連絡ください。