--- version: alpha name: Vivid Vegetable Color-Block Brand LP description: 生成り地に、緑・黄・オレンジの大きな色面ブロックを交互に積んだポップな野菜ブランドサイト。切り抜き野菜を浮かせたFV、極太ゴシックのコピー、細線の角丸カード、黒いピル型ボタンが特徴。英字の白抜きアウトライン見出しで遊び心を出している。 colors: primary: '#46B036' secondary: '#FDD31E' accent-1: '#F77730' background: '#FBF8F3' surface: '#FEFEFE' cta: '#000000' on-cta: '#DADADA' text: '#111111' accent-2: '#F84241' marker: '#FDD52F' line: '#333333' text-muted: '#888888' tint-1: '#93D4F3' primary-accessible: '#2B6C21' typography: display: fontFamily: Dela Gothic One fontSize: 76px fontWeight: 900 lineHeight: 1.15 letterSpacing: -0.02em headline-lg: fontFamily: Montserrat fontSize: 28px fontWeight: 700 lineHeight: 1.1 letterSpacing: 0.02em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 22px fontWeight: 900 lineHeight: 1.5 letterSpacing: 0.04em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.04em body-md: fontFamily: Zen Kaku Gothic New fontSize: 12px fontWeight: 500 lineHeight: 2.0 letterSpacing: 0.08em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.1em accent: fontFamily: Montserrat fontSize: 50px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0.04em label-button: fontFamily: Montserrat fontSize: 11px fontWeight: 600 lineHeight: 1.0 letterSpacing: 0.06em rounded: sm: 10px md: 18px lg: 60px full: 999px spacing: unit: 8px card: 18px section: 70px 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.full}' height: 50px section-heading: textColor: '{colors.on-cta}' typography: '{typography.headline-lg}' height: 50px color-card: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 400px news-list: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 300px product-card: backgroundColor: '{colors.surface}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 260px nav-card: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.headline-lg}' rounded: '{rounded.md}' height: 300px tab-switch: textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 40px outline-text: typography: '{typography.accent}' height: 120px --- # DESIGN.md — 緑・黄・橙の色面で魅せる野菜ブランドLP（Vivid Vegetable Color-Block Brand LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 食品・飲料 ／ **雰囲気**: ポップ・元気、ナチュラル、親しみ・手作り感、力強い・インパクト - **キーワード**: 色面ブロック・切り抜き野菜・極太ゴシック・黒ピルボタン・アウトライン英字・細線の角丸カード - **地の質感**: フラットな単色の面。ドット柄の淡いパターンを余白に少しだけ置く - **形**: 角丸24px前後のカードに1pxの黒い細線。セクション上辺は片側だけ大きく丸める - **温度感**: 暖かく元気。原色寄りのビタミンカラー ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#46B036` | ブランドの緑（ニュース・ブランドストーリー・VEGE LAB・VOICE の面） | 16% | 画素の実測 | | `secondary` | `#FDD31E` | 黄色の面（ラインアップ・ブランドヒストリー・生産者向け） | 14% | 画素の実測 | | `accent-1` | `#F77730` | オレンジの面（ブランド紹介・レシピ・販促カード） | 9% | 画素の実測 | | `background` | `#FBF8F3` | 生成りのページ地 | 24% | 画素の実測 | | `surface` | `#FEFEFE` | カード内の白 | 7% | 画素の実測 | | `cta` | `#000000` | 黒のピル型ボタン | 3% | 画素の実測 | | `on-cta` | `#DADADA` | ボタン上の白文字と矢印 | 0% | 画素の実測 | | `text` | `#111111` | 見出し・本文の黒 | 3% | 推定 | | `accent-2` | `#F84241` | 商品名帯の赤 | 1% | 画素の実測 | | `marker` | `#FDD52F` | 緑面上の黄色い小見出し（カナ） | 0% | 画素の主要色に補正 | | `line` | `#333333` | カードの細い黒枠・フッター区切り線 | 0% | 推定 | | `text-muted` | `#888888` | フッターの補助リンク | 0% | 推定 | | `tint-1` | `#93D4F3` | FV の空色背景 | 4% | 画素の実測 | | `primary-accessible` | `#2B6C21` | AA を満たす補正値（計算） | | 計算 | - 地は生成り。緑・黄・オレンジの単色面をセクションごとに交互に切り替える - 同系色の面を隣接させない。緑の次は黄かオレンジ - ボタンは常に黒地＋白文字の一色に統一する - 英字見出しは色面上で白、カナ併記は黄（緑面）か赤（黄面） - 色面上の本文は白（緑・橙）か黒（黄）で可読性を確保 - 商品カードの帯は野菜の色に合わせて赤・橙などを差す - `color-card` は文字 `#DADADA` × 背景 `#46B036` のコントラスト比が 2.0:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#2B6C21`、4.59:1）を使う。 - `news-list` は文字 `#DADADA` × 背景 `#46B036` のコントラスト比が 2.0:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#2B6C21`、4.59:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの大コピー | ゴシック | Dela Gothic One | 900 | 76px | 1.15 | -0.02em | | `headline-lg` | セクションの英字見出し | 欧文サンセリフ | Montserrat | 700 | 28px | 1.1 | 0.02em | | `headline-md` | 日本語の大見出し | ゴシック | Zen Kaku Gothic New | 900 | 22px | 1.5 | 0.04em | | `headline-sm` | カード名・タブ名 | ゴシック | Zen Kaku Gothic New | 700 | 17px | 1.5 | 0.04em | | `body-md` | 本文 | ゴシック | Zen Kaku Gothic New | 500 | 12px | 2.0 | 0.08em | | `note` | 英字見出し下のカナ・日付 | ゴシック | Noto Sans JP | 700 | 10px | 1.4 | 0.1em | | `accent` | 背景の白抜きアウトライン英字・縦書きループ | 欧文サンセリフ | Montserrat | 500 | 50px | 1.0 | 0.04em | | `label-button` | ボタン英字 | 欧文サンセリフ | Montserrat | 600 | 11px | 1.0 | 0.06em | - 見出しは英字大＋カナ小の2段組みで統一 - FVコピーは極太で画面幅いっぱい - 本文は字間を広め、行間2.0でゆったり - アウトライン英字は細線で、セクション境界にまたがせる - 日本語見出しは2行に改行して短く区切る - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。カードは横スライダー - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 70px、基本単位 8px、カード内 18px（375px 幅換算） - カードは左右18px程度の余白で画面幅ほぼいっぱい - スライダーは中央カードを見せ、左右に隣のカードを少し覗かせる - 写真とテキストカードを少しずらして重ねる - ボタンはカード内左寄せか中央に配置 - 色面セクションの上辺左右どちらかを大きく丸めて変化をつける ## Elevation & Depth - 影はほぼ使わずフラット - 奥行きは1pxの黒い細線と重なりで表現 - 切り抜き野菜は影なしで浮かせる ## Shapes - **角丸**: 小 10px ／ 中 18px ／ 大 60px。ボタンはピル型。 - **写真の切り抜き**: 角丸長方形。野菜は白抜きの切り抜き - **セクション境界**: 色面の上辺の片角を大きく丸める（R60px以上）。直線の切替も併用 - カード角丸は約18px - ボタンは完全なピル型 - カードには1px黒枠 - 円形の黒い矢印アイコンを右端に置く ## Components - **黒ピルボタン**（`button-primary`）: 黒地に英字ラベルを左、右端に白丸線の矢印アイコン - **英字＋カナ見出し**（`section-heading`）: 太い英字の下に小さいカナを色違いで添える - **色面テキストカード**（`color-card`）: 緑や黄の角丸カードに見出し・本文・ボタンを収め、写真と重ねる - **ニュースリスト**（`news-list`）: 緑カード内に日付・白枠ピルのカテゴリ・タイトルを点線で区切る - **商品カード**（`product-card`）: 白地に切り抜き野菜、下部に色帯で商品名 - **写真付き導線カード**（`nav-card`）: 上に写真、下に色帯と英字名・カナ、右に黒丸矢印 - **下線タブ**（`tab-switch`）: 選択中は黒文字＋下線と下向き三角、非選択は白文字 - **アウトライン英字装飾**（`outline-text`）: 大きな英字を白や橙の細線で縁取り、背景装飾にする ## Do's and Don'ts **Do** - 緑・黄・橙の色面を交互に使う - ボタンは全て黒ピル＋円形矢印で統一 - 野菜は切り抜きで大胆に配置する - カードに1px黒枠と角丸を付ける - 英字見出しにカナを小さく添える **Don't** - グラデーションや強い影を使わない - 寒色や暗い色を主役にしない - 細い明朝体を使わない - ボタン色を色面に合わせて変えない - 写真を角丸なしの四角で置かない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（ブランドの世界観と一言コピーを伝える）: 空色背景に切り抜き野菜を散らし、野菜上に悩みワードを詰め込む。下に極太の大コピー 2. **ピックアップスライダー**（話題・コラボ情報への導線）: 黒枠角丸のバナーカードを横スライド、下にキャプション 3. **お知らせ**（最新情報を伝える）: 英字見出し＋緑カードのリスト、黒ピルボタン 4. **商品ラインアップ**（商品の一覧と選び方）: 上角丸の黄色面、タブ切替、白カードのスライダー 5. **ブランド紹介**（商品のコンセプト説明）: アウトライン英字を境界に置いたオレンジ面、白文字本文、角丸写真 6. **ブランドストーリー**（思いを伝える）: 緑の色面カードと写真をずらして重ねる 7. **歴史**（開発の歩みを伝える）: 黄カードと研究写真を重ね、ドット柄を添える 8. **コラム・記事**（読み物で関心を深める）: 上角丸の緑面に白い記事カードのスライダー 9. **導線カード群**（購入先・動画・レシピへの誘導）: 写真＋色帯カードを黄・緑・橙で縦に3枚、左に縦書き英字ループ 10. **お客様の声募集**（投稿を促す）: 緑面に白線の吹き出しアイコン、黒ピルボタン 11. **事業者向け**（生産者・販売者への案内）: 黄色面に写真付き白カードと橙・緑の矢印付きリンクカード 12. **フッター**（サイト内リンクとSNS）: 葉っぱの小装飾、2列リンク、ロゴ、薄緑のアウトライン英字 ## Imagery - 彩度の高い野菜を白抜き切り抜きで大きく配置 - FVは野菜を空中に浮かせ、表面に文字を貼り込む - 写真は明るく彩度高めの野菜接写や手元カット - アイコンは白の太めの単線イラスト - 余白に白い楕円ドットパターンと緑の葉っぱ形を散らす - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCではFVコピーが1行になり横幅いっぱい - PCのテキストカードと写真は左右2カラムで重ねる - 導線カードはPCで写真と色面を左右に並べた横長カード - スライダーはPCで4〜5枚同時表示＋左右矢印 - PCは上部に横並びナビ、SPはハンバーガー ## 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-49ee02ac`（元 LP の URL から採番） - **元 LP**: https://phytorich.jp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。