--- version: alpha name: Olive Green Healthy Meal Delivery LP description: 深いオリーブグリーンの帯見出しと生成り地を基調に、赤茶の価格訴求・黄緑のボタン・橙の栄養バッジを重ねた情報量多めの食品通販 LP。料理写真と丸型の数値バッジで、健康感と安さを同時に伝える。 colors: primary: '#41552E' dark-section: '#374919' background: '#F7F4ED' background-alt: '#EFF8E5' surface: '#FBFBFB' secondary: '#BB332A' cta: '#6EB04B' on-cta: '#FBFEF7' accent-1: '#D79350' accent-2: '#3576B4' tint-1: '#F9EBB2' text: '#333333' marker: '#F5E66A' tint-2: '#ECE5DC' cta-accessible: '#508036' accent-1-accessible: '#A56526' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 36px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 26px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.04em headline-md: fontFamily: Noto Sans JP fontSize: 19px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Montserrat fontSize: 40px fontWeight: 800 lineHeight: 1.1 label-button: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em rounded: sm: 4px md: 10px lg: 24px full: 999px spacing: unit: 8px card: 16px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 52px section-band: backgroundColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 72px nutrient-badge: backgroundColor: '{colors.primary}' textColor: '{colors.surface}' rounded: '{rounded.full}' height: 72px price-card: backgroundColor: '{colors.tint-1}' textColor: '{colors.secondary}' typography: '{typography.accent}' rounded: '{rounded.md}' height: 110px menu-label: backgroundColor: '{colors.secondary}' textColor: '{colors.surface}' rounded: '{rounded.md}' height: 30px need-card: backgroundColor: '{colors.accent-1}' textColor: '{colors.surface}' typography: '{typography.headline-md}' height: 90px price-starburst: backgroundColor: '{colors.secondary}' textColor: '{colors.surface}' rounded: '{rounded.full}' height: 70px step-item: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 160px nutrition-cell: backgroundColor: '{colors.tint-2}' textColor: '{colors.accent-1}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 44px --- # DESIGN.md — 深緑×生成りの栄養管理冷凍弁当 LP（Olive Green Healthy Meal Delivery LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 食品・飲料 ／ **雰囲気**: 情報量多め・訴求型、ナチュラル、信頼・誠実、親しみ・手作り感 - **キーワード**: 深緑の帯見出し・生成り地・赤茶の価格強調・丸い数値バッジ・料理写真の多用・ストライプ日よけ装飾 - **地の質感**: フラットな面に紙のような生成り地と淡いチェック柄を敷き、料理写真で温かみを足す - **形**: 角丸の帯・ピル型ラベル・正円バッジ・吹き出し。波形やテント型の区切りも混ぜる - **温度感**: 暖かめ。緑の落ち着きに橙と赤茶の食欲色を足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#41552E` | 見出し帯・数値バッジの深緑 | 9% | 画素の主要色に補正 | | `dark-section` | `#374919` | メッセージ欄の濃い緑地 | 5% | 画素の実測 | | `background` | `#F7F4ED` | 生成りの基本地 | 22% | 画素の実測 | | `background-alt` | `#EFF8E5` | 淡い黄緑の料金エリア地 | 8% | 画素の実測 | | `surface` | `#FBFBFB` | カード・白地 | 12% | 画素の実測 | | `secondary` | `#BB332A` | 価格・制限食ラベルの赤茶 | 5% | 画素の実測 | | `cta` | `#6EB04B` | 購入ボタンの黄緑 | 4% | 画素の実測 | | `on-cta` | `#FBFEF7` | ボタン上の白文字 | 0% | 画素の実測 | | `accent-1` | `#D79350` | 栄養バッジ・悩みカードの橙 | 6% | 画素の主要色に補正 | | `accent-2` | `#3576B4` | 悩みカードの青 | 2% | 画素の実測 | | `tint-1` | `#F9EBB2` | 料金カードの淡黄 | 4% | 画素の主要色に補正 | | `text` | `#333333` | 見出し・本文の濃グレー | 2% | 推定 | | `marker` | `#F5E66A` | 濃緑地上の黄色強調文字 | 0% | 推定 | | `tint-2` | `#ECE5DC` | 栄養表の淡い橙セル | 2% | 画素の実測 | | `cta-accessible` | `#508036` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#A56526` | AA を満たす補正値（計算） | | 計算 | - 地は生成りと白を交互に使い、区切りに深緑の横帯を入れる - 価格・限定・割引は赤茶で塗るか赤茶文字で大きく見せる - 購入・選択ボタンは黄緑の立体ボタンに統一する - 栄養数値は深緑または橙の正円バッジに白文字で載せる - 悩みカードは橙・緑・青・朱の4色を順番に回す - 濃緑地の上の強調文は黄色、通常文は白にする - `button-primary` は文字 `#FBFEF7` × 背景 `#6EB04B` のコントラスト比が 2.59:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#508036`、4.6:1）を使う。 - `need-card` は文字 `#FBFBFB` × 背景 `#D79350` のコントラスト比が 2.48:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#A56526`、4.52:1）を使う。 - `nutrition-cell` は文字 `#D79350` × 背景 `#ECE5DC` のコントラスト比が 2.06:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#A56526`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV・価格訴求の極太見出し | ゴシック | Zen Kaku Gothic New | 900 | 36px | 1.3 | 0.02em | | `headline-lg` | 深緑帯の白抜きセクション見出し | ゴシック | Noto Sans JP | 700 | 26px | 1.4 | 0.04em | | `headline-md` | カード内の悩み・提案見出し | ゴシック | Noto Sans JP | 700 | 19px | 1.5 | 0.02em | | `body-md` | 本文・説明文 | ゴシック | Noto Sans JP | 500 | 14px | 1.8 | 0.03em | | `note` | 送料などの注釈 | ゴシック | Noto Sans JP | 400 | 11px | 1.5 | 0.0em | | `accent` | 価格数字・栄養数値 | 欧文サンセリフ | Montserrat | 800 | 40px | 1.1 | 0.0em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 17px | 1.3 | 0.05em | - 見出しは太字ゴシックで、要点語だけ色や白地ボックスで抜く - 価格数字は単位より2倍以上大きく、税込表記は小さく添える - 見出しの左右にハの字の短い線を付ける - 本文は中央揃えが基本、手順と口コミは左揃え - 濃緑地の文章は1文ずつ改行し強調文を黄色にする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。バッジや料金ボタンは2〜4列 - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算） - セクション冒頭に全幅の深緑帯見出しを置く - 悩みカードは写真と色面を左右交互に並べる - 料金カードは左に食数ラベル、右に価格、下に2ボタン - 栄養値は4列グリッドの小カードで並べる - スライダーは左右に丸矢印、下にドットを置く ## Elevation & Depth - 料金カードとCTAには下方向の濃いめの影で立体感 - 白カードは薄い影か細い枠線 - バッジは影なしのフラット - 写真上の文字カードは半透明白で浮かせる ## Shapes - **角丸**: 小 4px ／ 中 10px ／ 大 24px。ボタンは角丸の長方形。 - **写真の切り抜き**: 料理は角丸矩形か斜めカット、皿は円形切り抜き、人物は背景切り抜き - **セクション境界**: 直線の帯、緩い波形、テント風ストライプを使い分ける - 数値は正円バッジ - 制限食名は赤茶の角丸ピルラベル - 吹き出しは角丸の白か深緑 - ボタンは角丸8〜10pxで右に三角矢印 ## Components - **購入ボタン**（`button-primary`）: 黄緑の立体角丸ボタン、白太字と右向き三角 - **深緑帯見出し**（`section-band`）: 全幅の深緑帯に白抜き見出し、両脇にハの字線 - **栄養数値バッジ**（`nutrient-badge`）: 正円に項目名と数値を2段で入れる - **料金カード**（`price-card`）: 淡黄地、左上に赤茶の食数タグ、大きな赤茶価格と2ボタン - **制限食ラベル**（`menu-label`）: 赤茶の角丸ピルに白文字、下に小さな説明 - **悩みカード**（`need-card`）: 色面と写真を半々に、要点語を白地ボックスで抜く - **価格円バッジ**（`price-starburst`）: 赤茶の円に白い数字で初回価格を示す - **手順項目**（`step-item`）: 線画アイコンと深緑のステップラベル、区切り線に下三角 - **栄養表セル**（`nutrition-cell`）: 橙見出しと淡橙地の数値の小カード ## Do's and Don'ts **Do** - 価格・割引は赤茶で大きく繰り返し見せる - セクションごとに深緑帯見出しで区切る - 数値情報は円バッジや表で視覚化する - 料理写真を大きく使い食欲を出す - CTAは各メニュー後に必ず置く **Don't** - 寒色を主役にしない - 細い明朝で上品に寄せすぎない - ボタン色を黄緑以外に変えない - 余白を広げすぎて情報密度を落とさない - 写真を暗く加工しない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（最安訴求と初回価格提示）: 深緑地に極太見出し、料理写真、赤茶の価格円とCTA帯 2. **メディア掲載**（信頼付け）: 金色調プレートの見出しと雑誌・人物写真 3. **特長まとめ**（手軽さと栄養管理を示す）: 淡いチェック地に手順写真と深緑の円バッジ 4. **メニュー紹介スライダー**（料理の魅力と栄養値）: 大きな料理写真と赤茶の栄養表 5. **初回キャンペーン**（価格オファー）: 深緑帯見出し、取消線価格→大きな赤茶価格、特典ボックス、黄緑CTA 6. **悩みの提起**（ニーズに共感）: 4色の悩みカードを写真と交互に並べる 7. **専門家監修**（安心感）: 人物写真と資格証、制限食ラベル一覧 8. **品質・冷凍技術**（おいしさの不安解消）: 吹き出し見出しと写真スライダー 9. **安さの理由**（低価格の根拠）: 比較棒グラフ風の積み上げ図 10. **定期便と配送**（利用の柔軟性を示す）: 組み合わせ図、置き配イラスト、小カード2枚 11. **よくある質問**（疑問解消）: 深緑吹き出し見出しとスライド式Q&Aカード 12. **メニュー別料金**（購入選択）: 制限食ごとに説明カード・栄養表・料金カードを繰り返す 13. **ご利用方法**（購入手順）: 線画アイコン付き3ステップ 14. **お客様の声・メッセージ**（共感と想い）: 似顔絵付き口コミ、SNS写真グリッド、濃緑地の黄色強調メッセージ ## Imagery - 仕切り容器の冷凍弁当を真上や斜め上から明るく撮る - 紺や白の和皿に盛った料理を寄りで撮る - シニアや介護場面の人物写真を自然光で使う - 手順やメッセージは太線で黄色差しの線画イラスト - 野菜を角に切り抜いて添える - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは中央に約750px幅でSPと同じ構成を表示する - 左右の余白は生成りか淡いチェック柄で埋める - 料金カードは2列に並べてもよい - 見出し文字は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-fbfcfef1`（元 LP の URL から採番） - **元 LP**: https://magokoro-care-shoku.com/lp1 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。