--- version: alpha name: Fresh Mint Stripe Gourmet Feature LP description: ミントグリーンのストライプ地に白い角丸パネルを重ね、サーモン橙のリボン見出しと手描き線画イラストを添えた、明るく親しみやすいグルメ特集 LP。テーマごとに店舗カードのカルーセルを並べる構成。 colors: primary: '#05A772' background: '#6DCAAB' surface: '#FFFFFF' background-alt: '#F5F5F5' cta: '#FF6E4F' on-cta: '#FFF1E7' secondary: '#FE6C53' accent-1: '#FFFF67' dark-section: '#05AE77' on-dark: '#FFFFFF' text-body: '#444444' text-muted: '#888888' tint-1: '#CCEDE2' cta-accessible: '#D62600' primary-accessible: '#048259' secondary-accessible: '#DA2101' typography: display: fontFamily: Dela Gothic One fontSize: 48px fontWeight: 400 lineHeight: 1.1 letterSpacing: 0.05em headline-lg: fontFamily: Mochiy Pop One fontSize: 34px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0.04em headline-sm: fontFamily: M PLUS Rounded 1c fontSize: 16px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.08em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.03em body-lg: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 700 lineHeight: 1.5 note: fontFamily: Noto Sans JP fontSize: 8px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Montserrat fontSize: 20px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0.05em label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.08em rounded: sm: 4px md: 8px lg: 20px full: 999px spacing: unit: 8px card: 10px section: 24px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 44px button-filter: backgroundColor: '{colors.accent-1}' textColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 40px tab-theme: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 48px ribbon-heading: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 28px shop-card: backgroundColor: '{colors.background-alt}' textColor: '{colors.text-body}' typography: '{typography.body-lg}' rounded: '{rounded.md}' height: 280px badge-region: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 16px pager: backgroundColor: '{colors.primary}' textColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 24px badge-burst: backgroundColor: '{colors.accent-1}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 90px --- # DESIGN.md — ミント緑×サーモン橙の手描きグルメ特集 LP（Fresh Mint Stripe Gourmet Feature LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: ポップ・元気、親しみ・手作り感、清潔・爽やか、情報量多め・訴求型 - **キーワード**: ミントストライプ・手描き線画・角丸白パネル・リボン見出し・カードカルーセル・おでかけ - **地の質感**: 縦の細ストライプ地。紙のような質感のミント緑 - **形**: 大きめ角丸のパネルとカード。上辺が弧を描くセクション境界 - **温度感**: 明るく軽やか。緑で爽やかさ、橙で食欲と温かみを出す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#05A772` | 見出し文字・バッジ・ボタンの主緑 | 5% | 画素の実測 | | `background` | `#6DCAAB` | ストライプ地のミント緑 | 22% | 画素の実測 | | `surface` | `#FFFFFF` | 白い角丸パネル | 31% | 画素の実測 | | `background-alt` | `#F5F5F5` | 店舗カードの薄グレー地 | 12% | 画素の実測 | | `cta` | `#FF6E4F` | 主 CTA ボタンのサーモン橙 | 1% | 画素の実測 | | `on-cta` | `#FFF1E7` | CTA 上の白文字 | 0% | 画素の実測 | | `secondary` | `#FE6C53` | リボン見出しのサーモン橙 | 2% | 画素の実測 | | `accent-1` | `#FFFF67` | 絞り込みボタン・丸バッジのレモン黄 | 1% | 画素の実測 | | `dark-section` | `#05AE77` | 締め CTA 帯の濃緑 | 5% | 画素の実測 | | `on-dark` | `#FFFFFF` | 濃緑帯上の白文字 | 0% | 画素の主要色に補正 | | `text-body` | `#444444` | 本文のダークグレー | 2% | 推定 | | `text-muted` | `#888888` | 更新日・店名の薄グレー | 0% | 推定 | | `tint-1` | `#CCEDE2` | ページ送りの淡緑・縦書き英字 | 0% | 画素の実測 | | `cta-accessible` | `#D62600` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#048259` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#DA2101` | AA を満たす補正値（計算） | | 計算 | - 地はミント緑の縦ストライプ、その上に白い角丸パネルを載せる - 見出し文字とバッジは主緑で統一する - セクション見出しの上に橙のリボン型サブ見出しを置く - 主 CTA は橙一色、白文字と白フチで目立たせる - 黄色は絞り込みボタンと丸い吹き出しバッジだけに使う - 締めの CTA 帯だけ濃緑の面にして白文字にする - `button-primary` は文字 `#FFF1E7` × 背景 `#FF6E4F` のコントラスト比が 2.5:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#D62600`、4.59:1）を使う。 - `button-filter` は文字 `#05A772` × 背景 `#FFFF67` のコントラスト比が 2.91:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#048259`、4.55:1）を使う。 - `tab-theme` は文字 `#05A772` × 背景 `#FFFFFF` のコントラスト比が 3.1:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#048259`、4.54:1）を使う。 - `ribbon-heading` は文字 `#FFF1E7` × 背景 `#FE6C53` のコントラスト比が 2.54:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#DA2101`、4.52:1）を使う。 - `badge-region` は文字 `#FFFFFF` × 背景 `#05A772` のコントラスト比が 3.1:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#048259`、4.54:1）を使う。 - `badge-burst` は文字 `#05A772` × 背景 `#FFFF67` のコントラスト比が 2.91:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#048259`、4.55:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の大見出し（橙の雲型の上に白抜き） | 装飾・ディスプレイ | Dela Gothic One | 400 | 48px | 1.1 | 0.05em | | `headline-lg` | セクション見出し（緑の手書き風太字） | 手書き・筆 | Mochiy Pop One | 400 | 34px | 1.3 | 0.04em | | `headline-sm` | 橙リボンのサブ見出し | 丸ゴシック | M PLUS Rounded 1c | 800 | 16px | 1.3 | 0.08em | | `body-md` | 導入文・リード文（中央揃え） | ゴシック | Noto Sans JP | 500 | 13px | 1.9 | 0.03em | | `body-lg` | カード内の施設名 | ゴシック | Noto Sans JP | 700 | 11px | 1.5 | 0.0em | | `note` | 店名・更新日・注釈 | ゴシック | Noto Sans JP | 400 | 8px | 1.5 | 0.0em | | `accent` | パネル左右の縦書き英字装飾 | 欧文サンセリフ | Montserrat | 500 | 20px | 1.0 | 0.05em | | `label-button` | ボタン・タブのラベル | ゴシック | Noto Sans JP | 700 | 13px | 1.3 | 0.08em | - 見出しは手書き風の太い丸文字にし、少し揺らぎを出す - 見出しの上に「＼ ／」で挟んだ小さなキャッチを置く - リード文は 2〜3 行の中央揃えで短く切る - カード内の文字は小さく、施設名だけ太字にする - 英字装飾は細身のサンセリフを縦書きにし、淡い緑で背景になじませる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。カードは 2 列×2 段を横スワイプ - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 24px、基本単位 8px、カード内 10px（375px 幅換算） - 白パネルは左右 0〜4px のほぼ全幅で、上下にストライプ地を約 24px 見せる - パネル内はアイコン＋リボン＋見出し＋リード文＋カードの順に置く - カード群の下にページ番号と進捗バーを置く - テーマのタブは 4 分割で横一列に並べる - 要素は中央揃えを基本にする ## Elevation & Depth - 影はほぼ使わず、色の面で階層を分ける - カードは薄グレー地の上に白い写真枠を置いて段差を出す - ボタンは白フチまたは緑の太枠で浮かせる ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 20px。ボタンは角丸の長方形。 - **写真の切り抜き**: カード内は角丸の白枠に料理写真を収め、FV は大きな円にコラージュする - **セクション境界**: 上辺がゆるい弧を描く白・濃緑の面 - パネルは大きな角丸 20px - ボタンは角丸 8px の横長長方形 - 地域バッジは角丸 2px の小さな緑の四角 - 吹き出しバッジは黄色のギザギザ円 ## Components - **主 CTA ボタン**（`button-primary`）: 橙の全幅ボタン。白フチ、右端に白い三角 - **絞り込みボタン**（`button-filter`）: 黄色地に緑の太枠と緑文字、右に＋ - **テーマタブ**（`tab-theme`）: 白地に緑枠の 4 分割タブ。下に▼ - **リボン見出し**（`ribbon-heading`）: 橙の丸いリボンに白文字のサブ見出し - **店舗カード**（`shop-card`）: 薄グレー地。地域バッジ・更新日・施設名・写真・店名を並べる - **地域バッジ**（`badge-region`）: 緑地に白文字の小さな四角ラベル - **ページ送り**（`pager`）: 緑の丸い矢印ボタンと数字、右に細い進捗バー - **吹き出しバッジ**（`badge-burst`）: 黄色のギザギザ円に緑文字で一言添える ## Do's and Don'ts **Do** - 地は縦ストライプのミント緑にする - 線画イラストは緑の単色で、見出し周りに散らす - テーマごとに白パネルを分け、構成をそろえる - 料理写真は明るく、皿全体が入る構図にする - 人物イラストはおでかけ中の家族やカップルにする **Don't** - 黒や濃紺の重い背景は使わない - 見出しを明朝やかっちりしたゴシックにしない - 橙をボタンとリボン以外に広げない - パネルの角を直角にしない - カードに強い影を付けない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（関連施設のロゴを示す）: 白地の細い帯に小さなロゴを横に並べる 2. **ファーストビュー**（特集の楽しさを一目で伝える）: ミント地に料理写真の円形コラージュ、橙の雲型の大見出し、ガーランドと人物イラスト、黄色バッジ 3. **導入**（特集の内容を説明する）: 弧型の白面に緑の見出しと中央揃えのリード文、下に角丸写真を横に流す 4. **ピックアップ・絞り込み**（地域とテーマで探せるようにする）: 英字の見出し、黄色の絞り込みボタン、4 分割のテーマタブ 5. **テーマ別特集（複数）**（テーマごとにお店を紹介する）: 白い角丸パネルに線画・リボン・見出し・リード文、2×2 カードのカルーセル、両脇に縦書き英字 6. **締めの CTA**（施設サイトへ誘導する）: 上辺が弧の濃緑帯に白文字 4 行と橙の全幅ボタン ## Imagery - 料理写真は真上か斜め上から撮り、明るく彩度高めにする - 背景は白皿や木目で清潔感を出す - イラストは細い線の手描き風。料理・飛行機・地図などの小物を描く - 人物は塗りの少ないフラットなイラストにする - ガーランドやフォーク・スプーンの白線画を FV に散らす - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はストライプ地を全幅で見せ、中央の白パネルを約 90% 幅にする - PC のカードは 4 列×2 段にする - PC の FV は横長の写真コラージュにし、見出しを中央に重ねる - PC はリード文を 1 行につなげる - PC でも縦書き英字はパネル両脇に残す ## 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-89e9a8a0`（元 LP の URL から採番） - **元 LP**: https://mitsui-shopping-park.com/area/g/funfunfes2025/eatfair/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。