--- version: alpha name: Butter Yellow Navy Illustrated Food Brand LP description: 濃紺の文字と黄色マーカー見出しを軸にした LP。地色はクリーム、ミント、若草の淡い色。手描き風の人物イラストとざらっとした紙の質感で、家庭の食卓のような親しみやすさを出す。商品カードはクリーム地のぎざぎざした縁で、ボタンは白地に紺線のピル型。 colors: primary: '#022973' marker: '#E8C15C' background: '#FFFFFF' background-alt: '#F3E9C5' tint-1: '#D2F2ED' tint-2: '#CDE1BE' accent-1: '#E8C15C' accent-2: '#B4C2DC' surface: '#F6EDC6' secondary: '#7E9A7A' cta: '#FEFEFE' on-cta: '#0C2258' line: '#F7FBFD' dark-section: '#12268B' typography: display: fontFamily: Zen Maru Gothic fontSize: 30px fontWeight: 900 lineHeight: 1.5 letterSpacing: 0.05em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 28px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.05em headline-md: fontFamily: Zen Maru Gothic fontSize: 16px fontWeight: 700 lineHeight: 1.8 letterSpacing: 0.2em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.7 letterSpacing: 0.05em accent: fontFamily: Kanit fontSize: 22px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.05em label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.1em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.05em rounded: sm: 4px md: 8px lg: 16px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' lead-ribbon: backgroundColor: '{colors.dark-section}' typography: '{typography.body-md}' height: 26px heading-marker: backgroundColor: '{colors.marker}' textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 40px vertical-label: textColor: '{colors.primary}' typography: '{typography.accent}' height: 120px point-badge: backgroundColor: '{colors.primary}' textColor: '{colors.marker}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 70px product-card: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.body-md}' height: 380px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px banner-card: backgroundColor: '{colors.background}' rounded: '{rounded.sm}' height: 230px recipe-panel: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 600px pagetop: backgroundColor: '{colors.dark-section}' rounded: '{rounded.full}' height: 40px --- # DESIGN.md — 紺×バター黄のイラスト食品ブランド LP（Butter Yellow Navy Illustrated Food Brand LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 食品・飲料 ／ **雰囲気**: 親しみ・手作り感、やさしい・柔らかい、ナチュラル、ポップ・元気 - **キーワード**: バター黄・濃紺・手描きイラスト・紙のざらつき・縦書き英字ラベル・マーカー見出し - **地の質感**: 背景に細かなノイズ。紙や布のような質感を出し、縦ストライプや点々の手描きの模様を重ねる - **形**: 丘のような緩い曲線、縁がぎざぎざの紙片カード、角丸の白パネル、ピル型ボタン - **温度感**: 暖かい。クリーム色と黄色で温かみを出し、ミントと若草色で爽やかさを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#022973` | 見出し・本文・ロゴの濃紺 | 4% | 画素の実測 | | `marker` | `#E8C15C` | 見出し下の黄色マーカー | 1% | 画素の主要色に補正 | | `background` | `#FFFFFF` | 基本の白地 | 34% | 画素の実測 | | `background-alt` | `#F3E9C5` | 特長セクションのクリーム地 | 16% | 画素の実測 | | `tint-1` | `#D2F2ED` | FV 上部のミント地 | 5% | 画素の実測 | | `tint-2` | `#CDE1BE` | FV・レシピの若草色の丘 | 7% | 画素の実測 | | `accent-1` | `#E8C15C` | 商品イメージの濃い黄色 | 6% | 画素の主要色に補正 | | `accent-2` | `#B4C2DC` | 年号の大きな数字（くすんだ青） | 1% | 推定 | | `surface` | `#F6EDC6` | 商品カードの淡いクリーム | 5% | 画素の実測 | | `secondary` | `#7E9A7A` | 手描き模様のくすんだ緑 | 1% | 推定 | | `cta` | `#FEFEFE` | ボタンの白地 | 1% | 画素の実測 | | `on-cta` | `#0C2258` | ボタンの文字・枠線（濃紺） | 1% | 画素の実測 | | `line` | `#F7FBFD` | 取扱店ボタンの薄い枠線 | 1% | 画素の主要色に補正 | | `dark-section` | `#12268B` | リード帯・トップへ戻るボタンの紺 | 1% | 画素の実測 | - 文字は本文も見出しもすべて濃紺で統一し、黒は使わない - セクションの地色は白、クリーム、ミント、若草の淡い色を交互に使う - 黄色は見出し下のマーカーと商品カラーだけに使う - ボタンは白地に紺の文字と紺の枠線。色で塗りつぶしたボタンは使わない - 強調ラベルの帯は紺地に白文字にする - 大きな年号など装飾の数字はくすんだ青で薄く背景に置く ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV のメインコピー | 丸ゴシック | Zen Maru Gothic | 900 | 30px | 1.5 | 0.05em | | `headline-lg` | セクション見出し（マーカー付き） | ゴシック | Zen Kaku Gothic New | 900 | 28px | 1.3 | 0.05em | | `headline-md` | 特長ポイントの説明 | 丸ゴシック | Zen Maru Gothic | 700 | 16px | 1.8 | 0.2em | | `body-md` | リード文・商品名・レシピ名 | ゴシック | Noto Sans JP | 700 | 13px | 1.7 | 0.05em | | `accent` | 縦書きの英字セクションラベル・Point 表記 | 欧文サンセリフ | Kanit | 500 | 22px | 1.2 | 0.05em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.4 | 0.1em | | `note` | 取扱店リンクなどの補足 | ゴシック | Noto Sans JP | 500 | 11px | 1.5 | 0.05em | - 見出しは極太で中央揃えにし、文字の下半分に黄色マーカーを敷く - セクションごとに英字ラベルを画面端に縦書きで置き、横に細い線を添える - 特長の説明文は字間を広く取り、2 行で中央揃えにする - 本文は太めのゴシックで短く、2 行程度に収める - 文字色は濃紺だけにする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。商品とレシピは 2 列グリッド、PC は 3〜4 列 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - 見出しは中央、英字の縦書きラベルは左端か右端に交互に置く - 特長の 3 項目は 2 個＋1 個のずれた配置にする - 商品カードは 2 列で、左右の高さを少しずらして並べる - レシピは大きな白パネルの中に写真の 2 列グリッドを入れる - セクションの最後に中央のピル型ボタンを 1 つ置く ## Elevation & Depth - バナーカードには白い縁と薄い影を付ける - レシピの白パネルは影を付けず、角丸だけで背景から浮かせる - それ以外は平面で、影はほとんど使わない ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 料理写真は角丸 4px 前後の長方形。商品は切り抜きで配置する - **セクション境界**: 丘のような緩い曲線、縦ストライプの手描き帯、ぎざぎざの紙の縁 - Point バッジは紺の波形の円にする - 商品カードは四辺をぎざぎざにした紙片の形にする - ボタンはすべてピル型で、紺の 1px 枠線を付ける - トップへ戻るボタンは紺の正円にする ## Components - **リードの帯ラベル**（`lead-ribbon`）: メインコピーの上に置く紺地に白文字の帯。右端を斜めに切る - **マーカー見出し**（`heading-marker`）: 極太の紺文字の下半分に黄色の帯を敷いた見出し - **縦書き英字ラベル**（`vertical-label`）: 画面端に縦書きで置く英字のセクション名。細い線を添える - **Point バッジ**（`point-badge`）: 紺の波形の円に黄色い数字を入れたバッジ。線画イラストに重ねる - **商品カード**（`product-card`）: ぎざぎざした縁のクリーム色の紙片に、商品の切り抜き、商品名 3 行、詳細ボタンを入れる - **ピル型ボタン**（`button-primary`）: 白地に紺の枠線と紺の文字。右端に矢印アイコンを付ける - **Pick UP バナー**（`banner-card`）: 白い縁と薄い影の付いた正方形に近いバナー画像 - **レシピパネル**（`recipe-panel`）: 白い角丸パネルの中に、写真と料理名の 2 列グリッドを並べる - **トップへ戻るボタン**（`pagetop`）: 右下に固定する紺の正円に白い矢印 ## Do's and Don'ts **Do** - 文字色は濃紺だけにし、見出しには黄色マーカーを敷く - セクションごとに縦書きの英字ラベルを入れる - 淡い地色に紙のノイズ感を重ねる - 人物や料理は手描き風のフラットなイラストで添える - ボタンは白地に紺枠のピル型で統一する **Don't** - 真っ黒の文字や彩度の高い原色を使わない - 塗りつぶしの派手な CTA ボタンを作らない - 角の鋭い四角いカードを並べない - 写真を背景いっぱいに敷いて文字をのせない - 黄色を広い面に使いすぎない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（ロゴとメニューの表示）: 白地の中央にロゴ、右端にハンバーガーメニューを置く 2. **ファーストビュー**（商品の価値を一言で伝える）: ミントから若草色の丘を背景に、紺の帯ラベル、マーカー付きの 2 行コピー、中央の商品、周りに生活シーンのイラストを置く 3. **ピックアップ**（注目のコンテンツへ誘導する）: 縦書きラベルを添え、白い縁のバナーを縦に 2 枚並べる 4. **特長**（便利さの要点を 3 つ伝える）: クリーム地に縦ストライプを敷く。Point バッジ付きの線画イラストと 2 行の説明を 2 個＋1 個で配置する 5. **商品ラインナップ**（商品の種類を見せる）: ぎざぎざの紙片カードを 2 列で並べ、それぞれに詳細ボタンを付ける 6. **取扱店検索**（購入先へ誘導する）: 薄い枠線の横長ボタンにアイコンと短い文を入れる 7. **レシピ**（使い方の幅を見せる）: 黄緑の曲線背景の上に白パネルを置き、料理写真 6 枚を 2 列で並べる。最後にもっと見るボタン 8. **ヒストリー**（ブランドの歴史を伝える）: 大きな薄青の年号の上に、歴代パッケージを矢印でつないで並べ、詳細ボタンを置く ## Imagery - 人物や家具を描いた手描き風のフラットなイラスト。紺、黄、緑、グレーで塗り、輪郭は控えめにする - 特長の説明は黒の線画に黄色を一部だけ塗り、英字の手書きワードを添える - 商品は背景を切り抜いた正面の画像 - 料理写真は明るく温かい色調で、真上や斜め上から撮る - 背景には緑の点々、斜線、縦ストライプの手描き模様を散らす - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はヘッダーメニューをロゴの左右に 2 つずつ振り分ける - PC の FV は、左にコピー、右に商品、下にバナー 2 枚を横並びにする - 特長は PC で 3 列横並びにする - 商品カードは PC で 4 列、レシピは 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-3804b298`（元 LP の URL から採番） - **元 LP**: https://www.meiji.co.jp/dairies/butter/tube-butter/ - **解析に使った画像**: 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/）からご連絡ください。