--- version: alpha name: Warm Orange Picture Book Food Education LP description: 白地を基本に、オレンジの見出しとボタン、白い木目の背景、淡いクリーム色の帯を重ねた子ども向け食育商品の LP です。雲形に切り抜いた親子写真や手描きのスパイスイラスト、吹き出し型の口コミで、温かく親しみやすい印象を出しています。後半は商品グリッドとカートボタンが並ぶ EC 型の構成です。 colors: primary: '#FE9224' cta: '#FE9225' on-cta: '#FFFFFF' secondary: '#FE6633' background: '#FEFEFE' background-alt: '#FFFEDF' tint-1: '#FEFDFA' tint-2: '#FEE1B2' accent-1: '#9CC83C' accent-2: '#4E73B9' accent-3: '#FF5E91' text: '#5A4A42' text-muted: '#777777' line: '#AD7D59' dark-section: '#6D6966' cta-accessible: '#B75C01' primary-accessible: '#B95E01' typography: display: fontFamily: M PLUS Rounded 1c fontSize: 30px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 24px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em headline-sm: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em accent: fontFamily: Poppins fontSize: 24px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0.12em body-lg: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 4px md: 12px lg: 32px 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-cart: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 32px button-outline: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 30px label-circle: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-cta}' typography: '{typography.headline-lg}' rounded: '{rounded.full}' height: 90px card-trial: backgroundColor: '{colors.tint-2}' textColor: '{colors.text}' rounded: '{rounded.lg}' height: 80px bubble-review: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.body-lg}' rounded: '{rounded.md}' height: 90px heading-slash: textColor: '{colors.primary}' typography: '{typography.headline-sm}' height: 20px frame-dotted: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-lg}' rounded: '{rounded.md}' height: 600px badge-time: backgroundColor: '{colors.background}' textColor: '{colors.primary}' rounded: '{rounded.sm}' height: 56px --- # DESIGN.md — オレンジと木目の食育絵本 EC LP（Warm Orange Picture Book Food Education LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 食品・飲料 ／ **雰囲気**: かわいい、親しみ・手作り感、ポップ・元気、やさしい・柔らかい - **キーワード**: 食育・絵本・親子・オレンジ・木目・手描きイラスト - **地の質感**: 白く塗った木目板の背景と、水彩風の手描きスパイスイラストを使う。全体にマットで紙のような質感。 - **形**: 雲形の写真切り抜き、ピル型ボタン、角丸の大きいカード、点線の額縁 - **温度感**: 暖色寄りで明るい。オレンジ・クリーム・若草色の組み合わせ ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FE9224` | 見出し・口コミ吹き出し・ブランドカラー | 8% | 画素の実測 | | `cta` | `#FE9225` | カート追加ボタン | 3% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の文字 | 0% | 画素の主要色に補正 | | `secondary` | `#FE6633` | ファーストビューの購入ボタン（濃いオレンジ） | 0% | 画素の実測 | | `background` | `#FEFEFE` | 基本の背景 | 41% | 画素の実測 | | `background-alt` | `#FFFEDF` | 試し読み帯の淡いクリーム | 5% | 画素の実測 | | `tint-1` | `#FEFDFA` | 木目背景の生成り | 10% | 画素の実測 | | `tint-2` | `#FEE1B2` | 試し読みカードの淡いピーチ | 3% | 画素の実測 | | `accent-1` | `#9CC83C` | 点線の額縁・葉っぱの若草色 | 1% | 推定 | | `accent-2` | `#4E73B9` | 「読む」の円形ラベル（青） | 0% | 画素の実測 | | `accent-3` | `#FF5E91` | 「食べる」の円形ラベル（ピンク） | 0% | 画素の実測 | | `text` | `#5A4A42` | 本文・見出しの濃い茶系グレー | 2% | 推定 | | `text-muted` | `#777777` | 商品名・注釈 | 1% | 推定 | | `line` | `#AD7D59` | ご利用ガイドの枠線（茶） | 0% | 画素の主要色に補正 | | `dark-section` | `#6D6966` | おすすめ商品のサブボタン（グレー） | 0% | 画素の実測 | | `cta-accessible` | `#B75C01` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#B95E01` | AA を満たす補正値（計算） | | 計算 | - 背景は白を基本にし、物語やコンセプトのブロックだけ木目の生成り色にする。 - 試し読みのブロックは淡いクリームの帯で区切る。 - 見出し・吹き出し・ボタンはオレンジ 1 色にまとめる。 - 読む・作る・食べるのような 3 段階は、青・緑・ピンクで色分けする。 - 若草色は点線の額縁と葉っぱなど、飾りだけに使う。 - メインのブロックから外れたおすすめ商品のボタンは、オレンジにせずグレーにする。 - `button-cart` は文字 `#FFFFFF` × 背景 `#FE9225` のコントラスト比が 2.25:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#B75C01`、4.62:1）を使う。 - `bubble-review` は文字 `#FFFFFF` × 背景 `#FE9224` のコントラスト比が 2.25:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#B95E01`、4.5:1）を使う。 - `badge-time` は文字 `#FE9224` × 背景 `#FEFEFE` のコントラスト比が 2.23:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#B95E01`、4.61:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの白抜きキャッチコピー | 丸ゴシック | M PLUS Rounded 1c | 700 | 30px | 1.4 | 0.05em | | `headline-lg` | セクションの大見出し（オレンジ） | 丸ゴシック | M PLUS Rounded 1c | 700 | 24px | 1.4 | 0.03em | | `headline-sm` | 見出しの上に斜線で挟んで置く小見出し | ゴシック | Noto Sans JP | 700 | 14px | 1.5 | 0.05em | | `accent` | 英字の見出し（大きく字間を空ける） | 欧文サンセリフ | Poppins | 600 | 24px | 1.2 | 0.12em | | `body-lg` | リード文・口コミの吹き出し文 | ゴシック | Noto Sans JP | 500 | 16px | 1.8 | 0.03em | | `body-md` | 説明文 | ゴシック | Noto Sans JP | 400 | 13px | 1.7 | 0.02em | | `note` | 商品名・価格・注釈 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.0em | | `label-button` | カート追加・購入ボタンの文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.2 | 0.05em | - 見出しは中央揃えにし、2 行に分けてオレンジで書く。 - 小見出しは「＼ ／」のような斜線で左右を挟む。 - 英字見出しの下に日本語のサブ見出しを添える。 - 口コミは白抜きの太字で、中央揃えにする。 - 説明文はオレンジの文字・中央揃えで 4 行程度にまとめる。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。商品一覧は 2 カラムのグリッド。ご利用ガイドは 3 カラム - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算） - セクションの区切りに、手描きスパイスのイラストを 1 列に並べる。 - 雲形の写真は左右にずらしながら縦に並べる。 - 口コミの吹き出しは、人物の左右を交互に入れ替える。 - 商品カードは、写真・商品名・価格・数量選択・カートボタンの順に縦に積む。 - 1 つのセクションは、見出し・ビジュアル・説明・CTA の順に組む。 ## Elevation & Depth - 吹き出しやバナーには、下方向に柔らかい影を付ける。 - 記事カードには薄い影を付ける。 - そのほかは基本的にフラットにする。 ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 32px。ボタンはピル型。 - **写真の切り抜き**: 人物写真は雲形にくり抜き、色付きの縁を付ける。商品写真は角丸なしの正方形。 - **セクション境界**: 直線で区切り、手描き素材の列や背景色の切り替えで区切りを見せる - CTA はピル型にする。 - 試し読みカードは角丸の大きい横長カードにし、色付きの太い縁を付ける。 - ブランドの紹介は、黄緑の点線で囲った額縁の中に置く。 - ガイドのカードは、茶色の細い線で囲んだ角丸の正方形にする。 ## Components - **カート追加ボタン**（`button-cart`）: オレンジのピル型ボタン。カートのアイコン付き - **一覧へ進むサブボタン**（`button-outline`）: 白地にグレーの細い枠を付けたピル型ボタン - **3 段階の円形ラベル**（`label-circle`）: 雲形の写真に重ねる色付きの円。中に大きな白文字の動詞を入れる - **試し読みカード**（`card-trial`）: ピーチ地に太い色付きの縁を付けたカード。左に表紙、右に作品名と外部リンクのアイコンを置く - **口コミ吹き出し**（`bubble-review`）: オレンジの角丸の吹き出しに白抜きの文字。イラストの人物を左右交互に配置する - **斜線で挟んだ小見出し**（`heading-slash`）: 小見出しを＼／で挟み、その下にオレンジの大見出しを置く - **点線の額縁**（`frame-dotted`）: 黄緑の太い点線の枠。枠の周りに花・虫・家のイラストを配置する - **所要時間バッジ**（`badge-time`）: オレンジ枠の長方形に、タイマーのアイコンと時間を入れる ## Do's and Don'ts **Do** - 子どもと親の自然な笑顔の写真を、雲形に切り抜いて使う。 - 手描き風のスパイスや野菜のイラストを、区切りの飾りにする。 - 強調色はオレンジに統一し、温かい印象を保つ。 - 口コミはイラストの人物と吹き出しで見せる。 - 商品一覧では、各商品のすぐそばにカートボタンを置く。 **Don't** - 黒や濃い色の重い背景は使わない。 - 角の立った硬いボタンにしない。 - 原色を 4 色以上同時に強く使わない（3 色の色分けは段階表現だけにする）。 - 明朝体や細い書体で高級感を出さない。 - 写真を四角いまま大量に並べない（雲形や角丸で柔らかく見せる）。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（対象と価値を一目で伝える）: 親子の写真の上に白抜きの大きなキャッチコピーを置き、受賞バッジ・雲形の試し読みボタン・購入ボタンを配置する 2. **人気セット**（主力商品をすぐ購入できるようにする）: 英字見出し、中央揃えの説明、商品写真、価格、数量選択、カートボタン、一覧へのボタンの順に並べる 3. **コンセプト**（体験の流れを伝える）: 木目の背景に、3 段階の雲形写真と円形ラベル、短い子どもの声を添える 4. **特長**（5 つの仕掛けを説明する）: 斜線で挟んだ小見出しとカルーセルを使い、各スライドに写真と短い説明を入れる 5. **試し読み**（中身を確認してもらう）: クリーム色の帯に横長のカードを 3 枚並べ、キャラクターのイラストと吹き出しを添える 6. **レシピ訴求**（子どもでも作れることを示す）: 調理する子どもの写真に、レシピのページと所要時間バッジを重ねる 7. **お客様の声**（保護者の実感を伝える）: オレンジの吹き出し 4 つと、イラストの人物を左右交互に置く 8. **ブランドストーリー**（開発の背景と作り手を紹介する）: 点線の額縁の中に、作家の似顔絵、ロゴ、ピル型ボタンを置く 9. **インタビュー誘導**（開発秘話の記事へ誘導する）: オレンジの帯で見出しを付けたバナーに、写真と説明文を入れる 10. **商品一覧**（シリーズ全商品を販売する）: 2 カラムの商品カードに、カートボタンを付ける 11. **読みもの**（関連記事を見せる）: 記事カードのカルーセルと、一覧へのボタン 12. **おすすめ商品とご利用ガイド**（ついで買いと購入時の不安解消）: グレーのボタンの商品カードと、茶色の線で描いたアイコンのガイドカード 3 枚 ## Imagery - 自然光のキッチンで、親子が調理したり食べたりする明るい写真を使う。 - 絵本風のやわらかい水彩タッチのキャラクターイラストを使う。 - スパイスやハーブを 1 つずつ手描きにして、横一列に並べる。 - シンプルな線と頬の赤みで描いた人物イラストを、口コミに使う。 - 商品写真は木の天板の上に置き、俯瞰気味に撮る。 - 白く塗った木目板を背景のテクスチャにする。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はファーストビューを横長の写真にし、キャッチコピーを左に寄せる。 - PC の特長は 2 カラムのグリッドで一覧表示する（SP はカルーセル）。 - PC の試し読みカードは 3 枚を横に並べた縦長カードにする。 - PC の口コミは、吹き出しを左右千鳥に散らして配置する。 - PC の商品一覧は、中央の狭い幅に 2 カラムで並べる。記事とおすすめ商品は 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-4cdf87a0`（元 LP の URL から採番） - **元 LP**: https://www.every-house.jp/spicebook/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/15 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。