--- version: alpha name: Pastel Pop Senior Recipe Collaboration LP description: クリーム色、サーモンピンク、淡いピンクの面をセクションごとに切り替える、やさしいポップな食品レシピ LP。見出しは黒フチ・白抜きの太い丸ゴシックで、手描き風の本アイコンを添える。カードは黒の細い枠線で囲み、濃いチャコールのピル型ボタンで締める。 colors: primary: '#FCC8CA' background: '#FFFEFE' background-alt: '#FFEDF3' secondary: '#FFF6D9' tint-1: '#FDEFB2' tint-2: '#EFECE5' text: '#333333' cta: '#333333' on-cta: '#FDFEFC' accent-1: '#E87490' accent-2: '#F5B82E' line: '#222222' surface: '#FEFFFF' accent-1-accessible: '#DC2E58' typography: display: fontFamily: Zen Maru Gothic fontSize: 34px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em headline-lg: fontFamily: Zen Maru Gothic fontSize: 24px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em body-lg: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 2.0 letterSpacing: 0.04em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.04em accent: fontFamily: Dela Gothic One fontSize: 12px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.03em label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.04em rounded: sm: 4px md: 12px lg: 40px full: 999px spacing: unit: 8px card: 16px section: 64px 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: 36px button-outline: backgroundColor: '{colors.background}' textColor: '{colors.accent-1}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 52px heading-outlined: textColor: '{colors.background}' typography: '{typography.display}' height: 60px toc-box: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-lg}' rounded: '{rounded.sm}' height: 170px recipe-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-lg}' height: 760px icon-circle: backgroundColor: '{colors.surface}' textColor: '{colors.text}' rounded: '{rounded.full}' height: 160px wavy-subheading: textColor: '{colors.text}' typography: '{typography.headline-md}' height: 30px info-panel: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 800px --- # DESIGN.md — クリーム×ピンクの手描き風レシピ紹介 LP（Pastel Pop Senior Recipe Collaboration LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 食品・飲料 ／ **雰囲気**: やさしい・柔らかい、ポップ・元気、親しみ・手作り感 - **キーワード**: パステル・手描き線・白抜き見出し・レシピカード・学生コラボ・シニア向け - **地の質感**: フラットな単色面。手描き風の線画と、ラフな吹き出し線で手作り感を出す - **形**: 大きく角丸にしたセクション上端、黒い細枠の四角カード、ピル型ボタン、円形のイラスト台座 - **温度感**: 暖色寄り。クリーム、ピンク、ベージュで柔らかく温かい ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FCC8CA` | フレイル解説セクションの地色（サーモンピンク） | 10% | 画素の実測 | | `background` | `#FFFEFE` | カード・ベースの白 | 30% | 画素の実測 | | `background-alt` | `#FFEDF3` | レシピセクションの淡ピンク地 | 12% | 画素の実測 | | `secondary` | `#FFF6D9` | ファーストビュー下の薄クリーム地 | 6% | 画素の実測 | | `tint-1` | `#FDEFB2` | レポートセクションの黄色地 | 8% | 画素の実測 | | `tint-2` | `#EFECE5` | フッター前のグレージュ地 | 6% | 画素の実測 | | `text` | `#333333` | 見出し・本文の濃いチャコール | 4% | 推定 | | `cta` | `#333333` | レシピ詳細ボタンの地 | 1% | 推定 | | `on-cta` | `#FDFEFC` | ボタン上の白文字 | 0% | 画素の実測 | | `accent-1` | `#E87490` | アウトラインボタンの枠と文字のピンク | 0% | 画素の実測 | | `accent-2` | `#F5B82E` | 矢印アイコン・ドット区切りの黄色 | 0% | 推定 | | `line` | `#222222` | カード枠・吹き出しの黒線 | 0% | 推定 | | `surface` | `#FEFFFF` | 円形台座・図解パネルの淡ピンク | 3% | 画素の実測 | | `accent-1-accessible` | `#DC2E58` | AA を満たす補正値（計算） | | 計算 | - セクションごとに地色を切り替える。順番はクリーム→サーモンピンク→淡ピンク→黄色→白→グレージュ - カード類は白地に黒の 1〜2px 枠線で、パステル地から浮かせる - 強い色はチャコールの CTA だけにする。ピンクはアウトラインのサブボタンで使う - 黄色はドット区切りやリンクの小さな矢印に絞る - 図解だけは緑・黄・赤の信号色を使ってよい。他では使わない - `button-outline` は文字 `#E87490` × 背景 `#FFFEFE` のコントラスト比が 2.85:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#DC2E58`、4.56:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクション大見出し（白抜き＋黒フチ＋影） | 丸ゴシック | Zen Maru Gothic | 900 | 34px | 1.3 | 0.02em | | `headline-lg` | レシピ名の見出し（白抜き黒フチ） | 丸ゴシック | Zen Maru Gothic | 900 | 24px | 1.4 | 0.02em | | `headline-md` | 小見出し（左右に波線を添える） | ゴシック | Noto Sans JP | 700 | 18px | 1.5 | 0.05em | | `body-lg` | リード文・カード本文 | ゴシック | Noto Sans JP | 700 | 15px | 2.0 | 0.04em | | `body-md` | 一般の本文 | ゴシック | Noto Sans JP | 500 | 14px | 1.9 | 0.04em | | `accent` | 見出し上の英字ラベル（例: About） | 欧文サンセリフ | Dela Gothic One | 400 | 12px | 1.2 | 0.03em | | `note` | 人物の肩書き・キャプション | ゴシック | Noto Sans JP | 500 | 11px | 1.6 | 0.03em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.2 | 0.04em | - 大見出しは白文字に黒の太いフチ（2〜3px）とドロップシャドウを付ける - 大見出しの上に、手描きの開いた本アイコンと英字ラベルを置く - 本文はシニアでも読みやすいように太め・大きめにし、行間は 1.9〜2.0 にする - リード文は中央揃え、カード内の本文は左揃えにする - 小見出しの左右には細い波線を添える - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。目次は 2×2 グリッド - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - セクション上端は大きく角丸にして、前のセクションに重ねる - レシピカードは画像→本文→考案者の順に縦に積む - 考案者エリアは左に人物の切り抜き写真、右に名前とボタン - 目次ボックスは黒枠＋上辺にピル型タイトルを重ねる - 見出しとカードの間は 24px 前後 ## Elevation & Depth - 影はほぼ使わない。フラットにする - 奥行きは黒い細枠線で出す - 見出しの文字にだけドロップシャドウを付ける ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 40px。ボタンはピル型。 - **写真の切り抜き**: 料理写真は四角。人物は背景を抜いた切り抜き。先生の写真は角丸の黒枠 - **セクション境界**: セクション上端の左右を大きく角丸にする（半径 40px 前後） - 悩みのイラストは淡ピンクの正円の上に載せる - ボタンはすべてピル型 - レシピカードは角丸なしの黒枠 - 手描きのラフな吹き出し線で考案者を区切る ## Components - **詳細ボタン**（`button-primary`）: チャコール地に白文字のピル型ボタン - **アウトラインボタン**（`button-outline`）: 白地にピンク枠・ピンク文字。右端にドットアイコン - **白抜きフチ見出し**（`heading-outlined`）: 白文字に黒フチと影。上に本アイコンと英字ラベルを置く - **目次ボックス**（`toc-box`）: 黒枠ボックスの上辺にピル型の黒タイトルを重ねる。中は 2×2 のリンクで、下に黄色の丸矢印 - **レシピカード**（`recipe-card`）: 黒枠の白カード。料理写真・本文・考案者欄を縦に積む - **円形イラスト項目**（`icon-circle`）: 淡ピンクの円の中に線画の人物とラベル。右に説明を置く - **波線小見出し**（`wavy-subheading`）: 左右を細い波線で挟んだ中央揃えの小見出し - **白い情報パネル**（`info-panel`）: グレージュ地の上に置く角丸の白パネル。タイトル下にドットの区切り線 ## Do's and Don'ts **Do** - セクションごとにパステルの地色を交互に替える - 大見出しは必ず白抜き＋黒フチ＋本アイコンで統一する - 本文は太めで、行間を広く取る - 人物は切り抜き写真で親しみを出す - 手描き風の線や吹き出しで温かみを添える **Don't** - 彩度の高い原色を広い面に使わない - カードに強いドロップシャドウを付けない - 細く小さい本文にしない - 明朝体や硬い企業風の見出しにしない - 角の鋭いボタンを使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（テーマを一目で伝える）: 上部に料理写真を 4 枚並べ、その上に開いた本の形の白いタイトル枠を重ねる。左にピンクの丸バッジ 2. **コラボ紹介と目次**（企画の背景と掲載レシピを示す）: クリーム地に中央揃えのリード文。下に黒枠の 2×2 目次。最後に集合写真の切り抜き 3. **テーマ解説**（健康課題を説明する）: サーモンピンク地で上端を角丸に。円形イラストで 3 項目を示し、白い角丸パネルに図解と吹き出しを置く 4. **レシピ紹介**（具体的なレシピを提案する）: 淡ピンク地にレシピカードを縦に 4 枚並べる。各カードに考案者と詳細ボタン 5. **イベントレポート**（活動の実績を伝える）: 黄色地。中央揃えの本文と、サムネイル付きの写真スライダー 6. **専門家のアドバイス**（信頼性を補う）: 白地で上端を角丸に。左に黒枠の顔写真、右に名前と肩書き。下に本文 7. **団体紹介**（運営団体の説明と外部への誘導）: グレージュ地に白い角丸パネル。ピンクのアウトラインボタンとテキストリンクを置き、マスコットのイラストを添える ## Imagery - 料理は真上か斜め上から撮り、木目のテーブルと柄のある和食器で家庭的に見せる - 人物は白背景で切り抜いた笑顔の上半身。手振りやピースで親しみを出す - イラストは黒の線画にピンクのアクセント。ゆるい人物で状態を表す - 手描き風の本アイコンに黄色とピンクのキラキラ線を添える - 活動写真は角丸で切り抜き、スライダーで見せる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は本文幅を中央 60% 前後に絞り、地色の帯は全幅のままにする - PC では円形イラストの 3 項目を横 3 列に並べる - PC のレシピカードは、左に写真・右に本文と考案者の 2 カラムにする - PC では目次を横 4 列にする - 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-b812da04`（元 LP の URL から採番） - **元 LP**: https://www.ebarafoods.com/recipe/cla_theme/sealabo/ - **解析に使った画像**: 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/）からご連絡ください。