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

• 基本は白地。メニュー紹介と読み物の 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

• 見出しは「英字ラベル（小）→日本語の太字見出し」の 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

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

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