--- version: alpha name: Warm Orange Flat-Icon Meal Kit Subscription LP description: 白と生成りの地に鮮やかなオレンジの面を大きく敷く、温かみのある食品宅配サブスクの LP。野菜や調理器具のフラットな幾何学イラスト、自然光で撮った家族の食卓写真、緑のアクセントで、家庭的で親しみやすい印象をつくる。欧文の英字ラベルと日本語ゴシックの太い見出しで構成し、角丸カードとオレンジのボタンで行動を促す。 colors: primary: '#F06E1A' background: '#FFFFFF' background-alt: '#F6F2EF' surface: '#F5F3EF' text: '#080A08' text-muted: '#8A8580' accent-1: '#4E8A3A' cta: '#F26D1B' on-cta: '#FFFFFF' accent-2: '#FBAA22' accent-3: '#1CC045' tint-1: '#FABE80' line: '#E3DED3' tint-2: '#E4EAE0' cta-accessible: '#C5520B' primary-accessible: '#C3540D' accent-2-accessible: '#A56803' accent-1-accessible: '#427431' accent-3-accessible: '#148831' typography: display: fontFamily: Outfit fontSize: 30px fontWeight: 500 lineHeight: 1.2 headline-lg: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.03em headline-md: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em accent: fontFamily: Outfit fontSize: 12px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 2.0 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.04em body-lg: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.4 rounded: sm: 4px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 14px section: 72px 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: 32px button-inverse: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 32px arrow-square: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-cta}' rounded: '{rounded.md}' height: 26px eyebrow-label: textColor: '{colors.primary}' typography: '{typography.accent}' height: 16px category-badge: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 28px plan-header: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 28px step-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 280px delivery-banner: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 62px speech-bubble: backgroundColor: '{colors.tint-2}' textColor: '{colors.accent-1}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 100px line-cta: backgroundColor: '{colors.accent-3}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 52px --- # DESIGN.md — オレンジ×生成りの手料理宅配サブスク LP（Warm Orange Flat-Icon Meal Kit Subscription LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 食品・飲料 ／ **雰囲気**: ナチュラル、ポップ・元気、親しみ・手作り感、やさしい・柔らかい - **キーワード**: 鮮やかなオレンジ・生成りの地・フラットな野菜アイコン・家族の食卓写真・角丸カード・英字ラベル - **地の質感**: 質感のないフラットな塗り。写真は自然光で、少しフィルムっぽく温かい色味 - **形**: 角丸 8〜12px のカードと写真。ボタンは小さな角丸の長方形。イラストは円・半円・しずく型を組み合わせた幾何学形 - **温度感**: 暖色寄り。オレンジと焼き色ブラウンが中心で、緑を少しだけ差す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#F06E1A` | ブランドオレンジ（セクション面・見出し強調） | 12% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白地 | 29% | 画素の実測 | | `background-alt` | `#F6F2EF` | 生成りの地（会社紹介・締めのエリア） | 11% | 画素の実測 | | `surface` | `#F5F3EF` | オレンジ面の上に置く生成りのカード | 4% | 画素の主要色に補正 | | `text` | `#080A08` | 見出しと本文の濃い墨色 | 3% | 画素の実測 | | `text-muted` | `#8A8580` | 注釈・補足のグレー | 1% | 推定 | | `accent-1` | `#4E8A3A` | 葉の緑（英字ラベルの後半・副菜バッジ） | 1% | 推定 | | `cta` | `#F26D1B` | 主な行動ボタン（オレンジ） | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `accent-2` | `#FBAA22` | 黄みオレンジの矢印ボタン | 0% | 画素の実測 | | `accent-3` | `#1CC045` | LINE 登録ボタンの緑 | 1% | 画素の実測 | | `tint-1` | `#FABE80` | 淡いオレンジのイラスト塗り | 1% | 画素の実測 | | `line` | `#E3DED3` | カードの細い枠線 | 1% | 画素の主要色に補正 | | `tint-2` | `#E4EAE0` | 吹き出しの淡いセージ | 0% | 画素の実測 | | `cta-accessible` | `#C5520B` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#C3540D` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#A56803` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#427431` | AA を満たす補正値（計算） | | 計算 | | `accent-3-accessible` | `#148831` | AA を満たす補正値（計算） | | 計算 | - 基本は白地。メニュー紹介と読み物の 2 か所だけ、全幅のオレンジ面にして強弱をつける - オレンジ面の上では文字とボタンを白にし、カードは生成りにする - 英字ラベルは前半をオレンジ、後半を緑の 2 色に塗り分ける - 主菜バッジはオレンジ、副菜バッジは緑で区別する - 会社紹介から締めのエリアは生成りの地にして、白いカードを浮かせる - LINE 登録だけは LINE の緑にして、ほかのボタンと区別する - `button-primary` は文字 `#FFFFFF` × 背景 `#F26D1B` のコントラスト比が 3.01:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#C5520B`、4.58:1）を使う。 - `button-inverse` は文字 `#F06E1A` × 背景 `#FFFFFF` のコントラスト比が 3.02:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#C3540D`、4.57:1）を使う。 - `arrow-square` は文字 `#FFFFFF` × 背景 `#FBAA22` のコントラスト比が 1.93:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#A56803`、4.58:1）を使う。 - `category-badge` は文字 `#FFFFFF` × 背景 `#F06E1A` のコントラスト比が 3.02:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#C3540D`、4.57:1）を使う。 - `speech-bubble` は文字 `#4E8A3A` × 背景 `#E4EAE0` のコントラスト比が 3.41:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#427431`、4.54:1）を使う。 - `line-cta` は文字 `#FFFFFF` × 背景 `#1CC045` のコントラスト比が 2.42:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-3-accessible`（`#148831`、4.57:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | オレンジ面の英字セクション名 | 欧文サンセリフ | Outfit | 500 | 30px | 1.2 | 0.0em | | `headline-lg` | セクションの日本語大見出し | ゴシック | Noto Sans JP | 700 | 22px | 1.6 | 0.03em | | `headline-md` | プラン名・カード見出し | ゴシック | Noto Sans JP | 700 | 16px | 1.5 | 0.02em | | `accent` | 見出しの上の小さな英字ラベル | 欧文サンセリフ | Outfit | 600 | 12px | 1.4 | 0.02em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 500 | 13px | 2.0 | 0.03em | | `note` | 注釈・日付・税込表記 | ゴシック | Noto Sans JP | 400 | 9px | 1.6 | 0.02em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 10px | 1.4 | 0.04em | | `body-lg` | 価格表示 | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0.0em | - 見出しは「英字ラベル（小）→日本語の太字見出し」の 2 段で組む - 本文は行間を 2.0 前後と広くし、短い行で改行してゆったり見せる - 価格は太字で大きく、「/週」や税込表記は小さくする - オレンジ面の英字見出しは中央揃え・白・細めのウェイトにする - 数字や日付だけを大きくしたオレンジの強調表示を使ってよい - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。写真は 2 列の石積み風グリッドと横スクロールのカルーセル - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 72px、基本単位 8px、カード内 14px（375px 幅換算） - 左右の余白は 14〜24px と狭めにし、写真は幅いっぱいに大きく見せる - セクションは英字ラベル・見出し・短い説明・ボタンの順で、中央揃えを基本にする - ピックアップ・使い方・ニュースは、隣のカードが少し見える横スクロールにする - プランは写真カードを縦に並べ、カードの下にプラン名と価格を中央揃えで置く - コンセプト文などは左揃えで、余白を大きく取る ## Elevation & Depth - 影はほぼ使わない。白地と生成り・オレンジの面の差で階層をつける - カードは白か生成りの塗りにし、必要なときだけ 1px の淡い枠線を付ける - ファーストビュー上のヘッダーと固定バナーだけ、白い角丸のバーにして浮かせる ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。 - **写真の切り抜き**: 角丸 8〜12px の長方形。PC では大きな写真を角丸 24px 程度にする - **セクション境界**: 直線。オレンジの面はわずかに角丸を付けた全幅のブロックにする - ボタンは角丸 6〜8px の小さな長方形 - 矢印ボタンは黄みオレンジの角丸の正方形 - バッジは角丸 3px の小さな四角 - 吹き出しは楕円に小さなしっぽを付ける ## Components - **オレンジボタン**（`button-primary`）: 白地の上の「詳しく見る」系ボタン。中央に置く - **白抜きボタン**（`button-inverse`）: オレンジ面の上に置く、白地にオレンジ文字のボタン - **矢印ボタン**（`arrow-square`）: カードの右下に置く黄みオレンジの正方形。白い右矢印入り - **2 色の英字ラベル**（`eyebrow-label`）: 見出しの上に置く英字。前半はオレンジ、後半は緑 - **主菜・副菜バッジ**（`category-badge`）: 写真の左上に置く小さな四角いバッジ。品数を 2 行で入れる - **プラン区分のバー**（`plan-header`）: 人型アイコンと生成りの帯を組み合わせ、右寄せでプランの区分名を書く - **ステップカード**（`step-card`）: 上にオレンジの帯で STEP 番号を入れ、生成りのカードに見出し・説明・画面図を入れる。カードの間は三角の矢印でつなぐ - **受付中の固定バナー**（`delivery-banner`）: 画面下に固定する白い角丸バー。料理のサムネイル、オレンジの受付バッジ、日付、矢印ボタンを並べる - **吹き出し**（`speech-bubble`）: 写真に重ねる淡いセージ色の楕円。中の文字は緑 - **LINE 登録ボタン**（`line-cta`）: LINE の緑の横長ボタン。白文字 2 行と、右端に LINE のアイコン ## Do's and Don'ts **Do** - 野菜や調理器具のフラットなアイコンを、余白のアクセントとしてセクションの角に置く - 写真は自然光の温かい食卓や、家族の自然な表情を選ぶ - オレンジは全幅の面として大胆に使い、その上は白文字だけにする - 英字ラベルと日本語見出しの 2 段の見出しを全セクションで揃える - 価格・日付は太字で大きく、注釈は小さくグレーにする **Don't** - グラデーションや強い影を使わない - 原色の赤や青など、暖色と緑以外の色を増やさない - スタジオで撮ったような冷たい白背景の物撮りばかりにしない - 明朝体や手書き風の書体を使わない - ボタンを大きすぎるピル型にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品の利用シーンを印象づける）: 全画面の暗めの生活写真か動画。上に白い角丸のヘッダーを浮かせ、下に受付中のバナーを重ねる 2. **ブランドコンセプト**（サービスの価値を伝える）: 白地に英字ラベル・大見出し・ゆったりした本文。角にイラストを置き、その下に写真を 2 列の石積み風に並べる 3. **サービス概要**（何が届くかを一言で示す）: 左揃えの 3 行見出しと、角丸の料理写真カルーセル 4. **メニュー紹介**（料理の品質と、次回の配送を案内する）: 全幅のオレンジ面。白い英字見出し、白抜きボタン、生成りのカードに写真のコラージュと日付を入れる 5. **人気メニュー**（具体的な料理を見せる）: オレンジ面の中に、主菜・副菜バッジ付きの大きな写真を横スクロールで並べる 6. **サービスの特長**（届け方を説明する）: 角丸の写真カルーセルと、中央揃えの見出し、オレンジのボタン 7. **料金プラン**（価格を比較させる）: 人数別の区分バーの下に、写真カード・プラン名（オレンジ）・価格を縦に並べる 8. **利用シーン**（生活への取り入れ方を見せる）: 家族写真に吹き出しを重ね、見出しと説明、ボタンを続ける 9. **使い方ステップ**（申し込みの手軽さを伝える）: 3 つのステップカードを矢印でつなぎ、横スクロールで見せる 10. **読み物・ストーリー**（継続的な発信で信頼を得る）: オレンジ面に記事カード（画像・白い見出し・日付・枠線のタグ）を縦に並べる 11. **会社紹介・動画**（安心感を伝える）: 生成りの地に、写真をずらして重ね、動画のサムネイルを置く 12. **お知らせ**（最新情報を伝える）: 白い角丸の面に、ロゴ入りのカードを横スクロールで並べる 13. **最終 CTA**（登録を促す）: 白いカードにイラストの集合、キャッチ、オレンジの実績バッジ、LINE 緑のボタンを入れる。その下に案内カードを横に並べる 14. **フッター**（サイト内を案内する）: 白地にロゴ、2 列のリンク、SNS アイコン、大きなイラストの集合 ## Imagery - 写真は自然光の家庭のキッチンや食卓。少し暖かくくすんだフィルム調にする - 料理は陶器の器や白い容器に盛り、木のテーブルの上を俯瞰で撮る - 人物は家族や夫婦が食事を楽しむ自然な瞬間を撮る - イラストは野菜・魚・鍋・ミトンなどを、円や半円で作るフラットな幾何学形で描く。色はオレンジ・淡オレンジ・緑・グレーの 4 色 - イラストは小さく角に置くか、締めとフッターで大きく敷き詰める - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では写真と文章を左右 2 カラムで交互に配置する - PC ではプランを 4 列の横並びにし、人数別の区分バーを 2 グループで並べる - PC ではステップを 3 列で一度に見せ、カルーセルにしない - PC のお知らせは縦に並べるリストにし、最終 CTA は大きなカード 1 枚と案内カード 4 枚のグリッドにする - PC ではヘッダーの白いバーにナビゲーションの文字を並べる。コンテンツ幅は 1000px 程度 ## 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-9963f352`（元 LP の URL から採番） - **元 LP**: https://www.tsuklio.com/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。