--- version: alpha name: Pop Yellow Character Seafood Brand LP description: 真っ黄色の地色に、手描きのゆるいキャラクターと青白ボーダーを合わせた、元気で親しみやすい水産加工食品のブランドLP。丸いクリーム色の円で特長を区切り、赤い枠で新商品を目立たせる。 colors: primary: '#FEEE01' background: '#FFFEFE' surface: '#FFFBD5' tint-1: '#FFF67F' text: '#35372D' text-muted: '#92814F' accent-1: '#4BB5E5' tint-2: '#BFE3F3' cta: '#E50112' accent-2: '#2A8397' accent-3: '#BAD53B' line: '#F5F039' on-cta: '#EDE834' background-alt: '#FFFFFF' text-muted-accessible: '#817246' cta-accessible: '#CC0110' typography: display: fontFamily: Zen Maru Gothic fontSize: 40px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em headline-lg: fontFamily: Zen Maru Gothic fontSize: 34px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.08em headline-md: fontFamily: Zen Maru Gothic fontSize: 28px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.08em headline-sm: fontFamily: Zen Maru Gothic fontSize: 16px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.1em body-md: fontFamily: Zen Maru Gothic fontSize: 14px fontWeight: 500 lineHeight: 2.0 letterSpacing: 0.05em accent: fontFamily: Dela Gothic One fontSize: 30px fontWeight: 400 lineHeight: 1.1 label-button: fontFamily: Montserrat fontSize: 13px fontWeight: 600 lineHeight: 1.0 letterSpacing: 0.2em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.05em rounded: sm: 4px md: 12px lg: 200px full: 999px spacing: unit: 8px card: 24px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' hero-slider: backgroundColor: '{colors.primary}' textColor: '{colors.background}' typography: '{typography.body-md}' height: 400px circle-feature: backgroundColor: '{colors.surface}' textColor: '{colors.text-muted}' typography: '{typography.headline-lg}' rounded: '{rounded.full}' height: 340px slash-label: textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 28px numbered-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 480px number-badge: backgroundColor: '{colors.accent-3}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 70px button-outline: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px promo-red-panel: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.accent}' height: 640px recipe-card: textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 200px burst-bubble: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.note}' height: 100px --- # DESIGN.md — 黄色×青ストライプのキャラ水産食品LP（Pop Yellow Character Seafood Brand LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 食品・飲料 ／ **雰囲気**: ポップ・元気、親しみ・手作り感、力強い・インパクト - **キーワード**: ビビッドイエロー・手描きキャラクター・ボーダー柄・丸い円カード・語りかけ口調 - **地の質感**: 平塗りのベタ色に、線画イラストと料理写真を重ねる。グラデーションや影はほぼ使わない。 - **形**: 大きな正円、波形のヘッダー下端、太い黄枠の四角いカード、ギザギザの吹き出し - **温度感**: 暖色の黄と赤が主役で、青のボーダーが清涼感を足す明るく温かい印象 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FEEE01` | ページの主となる地色の黄 | 30% | 画素の実測 | | `background` | `#FFFEFE` | こだわりセクションの白地 | 22% | 画素の実測 | | `surface` | `#FFFBD5` | 特長を入れる円のクリーム色 | 7% | 画素の実測 | | `tint-1` | `#FFF67F` | 円上部の薄い黄 | 4% | 画素の実測 | | `text` | `#35372D` | 見出しと本文の墨色 | 5% | 画素の主要色に補正 | | `text-muted` | `#92814F` | 円内のオリーブ茶の見出し文字 | 3% | 画素の主要色に補正 | | `accent-1` | `#4BB5E5` | ボーダー柄の青 | 5% | 画素の実測 | | `tint-2` | `#BFE3F3` | ボーダー柄の淡い水色 | 4% | 推定 | | `cta` | `#E50112` | 新商品バナーと枠の赤 | 5% | 画素の実測 | | `accent-2` | `#2A8397` | キャラクターの青緑 | 3% | 画素の主要色に補正 | | `accent-3` | `#BAD53B` | 番号バッジの黄緑 | 1% | 画素の実測 | | `line` | `#F5F039` | カードを囲む黄色の太枠 | 2% | 画素の主要色に補正 | | `on-cta` | `#EDE834` | 赤地上の黄の商品名文字 | 1% | 画素の実測 | | `background-alt` | `#FFFFFF` | 淡いグレーの区切り地 | 3% | 画素の実測 | | `text-muted-accessible` | `#817246` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#CC0110` | AA を満たす補正値（計算） | | 計算 | - 地色は黄色を基本にする。こだわり紹介だけを白地と青白ボーダーに切り替えて変化をつける。 - 赤は新商品のバナーと枠だけに使う。中に黄色の文字を置いて最も目立たせる。 - 文字は純黒を避けて墨色にする。円の中の見出しはオリーブ茶にする。 - 見出しの下線は黄色の太いラインで引く。 - キャラクターは青緑・クリーム・黄の3色だけで塗り、線画は墨色にする。 - 番号バッジは黄緑の円にする。 - `circle-feature` は文字 `#92814F` × 背景 `#FFFBD5` のコントラスト比が 3.65:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-muted-accessible`（`#817246`、4.52:1）を使う。 - `promo-red-panel` は文字 `#EDE834` × 背景 `#E50112` のコントラスト比が 3.73:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#CC0110`、4.52:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクションの大見出し | 丸ゴシック | Zen Maru Gothic | 700 | 40px | 1.3 | 0.05em | | `headline-lg` | 円の中の特長見出し | 丸ゴシック | Zen Maru Gothic | 500 | 34px | 1.3 | 0.08em | | `headline-md` | 番号カードの見出し | 丸ゴシック | Zen Maru Gothic | 500 | 28px | 1.4 | 0.08em | | `headline-sm` | 斜線で挟んだ小見出し | 丸ゴシック | Zen Maru Gothic | 700 | 16px | 1.4 | 0.1em | | `body-md` | 中央揃えの本文 | 丸ゴシック | Zen Maru Gothic | 500 | 14px | 2.0 | 0.05em | | `accent` | ロゴ風の太い斜体の商品名 | 装飾・ディスプレイ | Dela Gothic One | 400 | 30px | 1.1 | 0.0em | | `label-button` | 英字のボタンラベル | 欧文サンセリフ | Montserrat | 600 | 13px | 1.0 | 0.2em | | `note` | 注釈とコピーライト | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.05em | - 全体を丸ゴシックで統一し、親しみのある語りかけ口調に合わせる。 - 本文は中央揃えにして短く改行し、行間は2.0前後にする。 - カード内の長い本文だけは左揃えにする。 - 小見出しは左右を斜線で挟んで装飾する。 - 商品名だけは太い斜体のディスプレイ書体で、ロゴのように見せる。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SPは1カラム。レシピ一覧のみ3列のグリッドにする。 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算） - 特長は画面幅の約90%の正円に入れ、縦に積み重ねる。 - 円どうしの間は約30px空ける。 - こだわりカードは太い黄枠で囲み、左上に番号バッジをはみ出させて置く。 - ボーダー柄は画面幅いっぱいに敷き、その上にカードを重ねる。 - キャラクターのイラストはセクションの境目に大きく置く。 ## Elevation & Depth - 影は使わず、平面の色と枠だけで階層を表す。 - 面の重なりは、地色の切り替えと太い枠で表現する。 - トップへ戻るボタンだけ、控えめな線で示す。 ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 200px。ボタンはピル型。 - **写真の切り抜き**: 料理写真は角丸12px前後の四角に切る。工場写真はカード幅いっぱいの角丸長方形に切る。 - **セクション境界**: ヘッダー下は波線にする。それ以外は直線で地色を切り替える。 - 特長は正円の中に入れる。 - 吹き出しはギザギザの爆発形にする。 - カードの枠は角丸なしの太線にする。 - ボタンは白地に墨色の線を引いたピル型にする。 ## Components - **写真スライダーのファーストビュー**（`hero-slider`）: 料理写真を全幅で見せ、下にドットを置く。右下に赤い新商品バナーを重ねる。 - **特長の円カード**（`circle-feature`）: クリーム色の大きな正円に、見出し・黄色の下線・本文を入れる。 - **斜線で挟んだ小見出し**（`slash-label`）: 大見出しの上に置くリード文。左右に短い斜線を付ける。 - **番号付きのこだわりカード**（`numbered-card`）: 黄色の太枠のカード。左上に黄緑の円で2桁の番号を入れ、写真と本文を並べる。 - **番号バッジ**（`number-badge`）: 黄緑の正円に、墨色の2桁数字を入れる。 - **プロフィールボタン**（`button-outline`）: 白地に墨色の枠線を引いたピル型ボタン。英字ラベルと右向きの矢印を入れる。 - **新商品の赤枠パネル**（`promo-red-panel`）: 赤い枠に写真とキャラクターを載せ、黄色の太い斜体で商品名を入れる。ギザギザの吹き出しを添える。 - **レシピカード**（`recipe-card`）: 角丸の料理写真の下に、2行のレシピ名を置く。 - **ギザギザ吹き出し**（`burst-bubble`）: 白または黄の爆発形の吹き出しに、短い一言を入れる。 ## Do's and Don'ts **Do** - 地色は鮮やかな黄色を広い面で使う。 - 手描きの線画キャラクターを各セクションに登場させる。 - 本文は語りかける口調にし、中央揃えで短く改行する。 - こだわりは番号付きのカードで順番に見せる。 - 新商品は赤地に黄の文字で、強いコントラストにする。 **Don't** - 細い明朝体や高級感のある黒地は使わない。 - 影やグラデーションで立体感を出さない。 - 写真を角丸なしで小さく詰め込まない。 - 黄・赤・青以外の強い色を増やさない。 - 本文を純黒の小さい文字で詰めて組まない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（ブランドの認知）: 黄色地にキャラクター入りのロゴとハンバーガーメニューを置き、下端を波形にする。 2. **ファーストビュー**（シズル感で惹きつける）: 全幅の料理写真のスライダーにする。短い問いかけのコピーと、赤い新商品バナーを重ねる。 3. **素材の紹介**（素材を知ってもらう）: 斜線で挟んだ小見出しの下に、大見出しと中央揃えの本文4行を置く。 4. **特長**（魅力を4つ伝える）: クリーム色の正円4つを縦に並べ、それぞれに見出し・下線・本文を入れる。 5. **キャラクター紹介**（親しみを作る）: 大きなキャラクターのイラスト、ロゴ、ピル型ボタンを置く。 6. **こだわり**（品質の裏付け）: 白地に導入文を置き、青白ボーダーの上に番号付きの黄枠カードを4枚並べる。 7. **商品パッケージ**（店頭での目印を伝える）: 赤地にパッケージ写真とキャラクターを置き、ギザギザの吹き出しを添える。 8. **レシピ**（食べ方を提案する）: 黄色地に監修者の丸い顔写真、見出し、3列のレシピカードを並べる。 9. **新商品の訴求**（新商品への誘導）: 赤枠のパネルに揚げ物の写真と商品名を載せ、レシピ3点を並べる。 10. **フッター**（企業情報）: 白地に社のロゴとコピーライトを置く。PCではその上に青帯の通販ボタンを置く。 ## Imagery - 写真は料理を真上から、または寄りで撮り、彩りよく盛り付ける。 - 工場の写真は作業風景を青みのある色調で撮り、清潔感を出す。 - イラストは墨色の線画を、青緑・クリーム・黄の平塗りで塗る。 - キャラクターは筋肉質な人物がマスクをかぶったコミカルな擬人化にする。 - ギザギザの吹き出し、汗マーク、粒の飛び散りなどの漫画的な効果を添える。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでは、4つの特長円を中央のキャラクターの周りに2×2で配置する。 - PCでは、こだわりカードを2列のグリッドにする。 - PCのヘッダーにはグローバルナビとSNSアイコンを横並びで置く。 - PCではレシピを3列で複数行並べ、キャラクターのイラストを余白に置く。 - 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-d40c5977`（元 LP の URL から採番） - **元 LP**: https://yamadasuisan.com/yamadanoshishamo/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。