--- version: alpha name: Bold Black Type Yellow Marker Food LP description: 生成りのベージュ地に、極太の黒ゴシックを大きく組んだ訴求型の食品 LP。強調語には黄色のマーカーを敷く。紺のピル型ボタンと白カードで情報を整理し、シズル感のある料理写真と商品の切り抜きでテンポよく見せていく。 colors: background: '#EDEAE1' text: '#000000' primary: '#150D62' on-primary: '#FFFFFF' marker: '#FAF02C' accent-1: '#FBF101' surface: '#FFFFFF' cta: '#FD2B14' on-cta: '#FFFFFF' secondary: '#23AA3A' accent-2: '#82BCCB' dark-section: '#27282E' line: '#27282E' background-alt: '#EDEAE1' cta-accessible: '#E91902' typography: display: fontFamily: Dela Gothic One fontSize: 52px fontWeight: 900 lineHeight: 1.05 letterSpacing: -0.04em headline-lg: fontFamily: Noto Sans JP fontSize: 32px fontWeight: 900 lineHeight: 1.25 letterSpacing: -0.02em headline-md: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 900 lineHeight: 1.3 headline-sm: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 800 lineHeight: 1.4 body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.04em rounded: sm: 4px md: 8px lg: 16px full: 999px spacing: unit: 8px card: 16px section: 72px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 40px button-cta-banner: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 44px marker-highlight: backgroundColor: '{colors.marker}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 24px feature-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 160px voice-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 180px filter-tab: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.note}' rounded: '{rounded.full}' height: 24px faq-row: textColor: '{colors.text}' typography: '{typography.body-md}' height: 52px purchase-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 200px --- # DESIGN.md — 生成り地×極太黒文字×黄マーカーの栄養食品 LP（Bold Black Type Yellow Marker Food LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 食品・飲料 ／ **雰囲気**: 力強い・インパクト、情報量多め・訴求型、ポップ・元気 - **キーワード**: 極太ゴシック・黄色マーカー・生成り地・シズル写真・白カード・紺ピルボタン - **地の質感**: 紙のようなフラットな生成り地。グラデーションは使わず、写真の質感で厚みを出す - **形**: 角丸の小さい白カード。ボタンは紺のピル型。料理は円形の器や全面写真で見せる - **温度感**: 温かみのある中間色の地に黒と黄色を強く効かせ、元気で前のめりな印象 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#EDEAE1` | ページ全体の生成り地 | 39% | 画素の実測 | | `text` | `#000000` | 極太見出しと本文の黒 | 7% | 画素の実測 | | `primary` | `#150D62` | ブランドの紺。ボタンやタブ、ロゴ円に使う | 3% | 画素の実測 | | `on-primary` | `#FFFFFF` | 紺の上に置く白文字 | 1% | 画素の主要色に補正 | | `marker` | `#FAF02C` | 強調語の下に敷く黄色マーカー | 2% | 画素の主要色に補正 | | `accent-1` | `#FBF101` | ブランド紹介帯や告知バナーの黄色面 | 5% | 画素の実測 | | `surface` | `#FFFFFF` | 情報カードの白 | 7% | 画素の実測 | | `cta` | `#FD2B14` | 購入へ送るオレンジ赤のボタンとバナー | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTA 上の白文字 | 0% | 画素の主要色に補正 | | `secondary` | `#23AA3A` | サブ購入ボタンの緑 | 0% | 画素の実測 | | `accent-2` | `#82BCCB` | サブ訴求バーの水色 | 1% | 画素の実測 | | `dark-section` | `#27282E` | 動画枠と CM 帯の暗色面 | 6% | 画素の主要色に補正 | | `line` | `#27282E` | FAQ の区切り線 | 0% | 画素の主要色に補正 | | `background-alt` | `#EDEAE1` | 購入エリアの淡い地 | 4% | 画素の実測 | | `cta-accessible` | `#E91902` | AA を満たす補正値（計算） | | 計算 | - 地は生成りベージュで統一し、白カードで情報を浮かせる - 見出しは黒の極太文字。強調語の下にだけ黄色マーカーを敷く - 紺はブランドの記号として、ロゴ円・タブ・詳細ボタンに使う - 購入導線は赤橙か緑の横長ボタンで目立たせる - 黄色の全幅帯はブランド紹介に 1 回だけ使う - 暗色は動画と CM の帯に限る - `button-cta-banner` は文字 `#FFFFFF` × 背景 `#FD2B14` のコントラスト比が 3.8:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#E91902`、4.56:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV と締めの特大コピー | ゴシック | Dela Gothic One | 900 | 52px | 1.05 | -0.04em | | `headline-lg` | 理由ごとの大見出し | ゴシック | Noto Sans JP | 900 | 32px | 1.25 | -0.02em | | `headline-md` | セクション見出し（FAQ・ニュースなど） | ゴシック | Noto Sans JP | 900 | 24px | 1.3 | 0.0em | | `headline-sm` | カード見出し、隅付き括弧で囲むラベル | ゴシック | Noto Sans JP | 800 | 18px | 1.4 | 0.0em | | `body-md` | 本文と説明 | ゴシック | Noto Sans JP | 500 | 14px | 1.7 | 0.02em | | `note` | ※注釈と価格補足 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | | `label-button` | ボタンのラベル | ゴシック | Noto Sans JP | 700 | 14px | 1.2 | 0.04em | - 見出しは字間を詰めた極太にする。強調語は 1.3〜1.6 倍に拡大し、大小を混ぜる - 強調語だけに黄色マーカーを敷く - 理由の番号は隅付き括弧と丸数字で示す - 料理写真の上は白い極太文字に黒い影を付けて可読性を保つ - 本文は短く、2〜4 行で止める - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。カードは 2 列グリッドも可 - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算） - 見出しは左寄せで大きく組み、商品画像を重ねて置く - 理由セクションは番号付きで縦に並べる - 特長は写真付きの小カードを並べる - FAQ は線で区切った一行アコーディオンにする - 購入エリアは白カードで、プランごとに区画を分ける ## Elevation & Depth - 白カードには弱い影（0 2px 6px rgba(0,0,0,.1)）を付ける - 商品の切り抜きには柔らかい落ち影を付ける - ボタンは影なしのフラット ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 商品は切り抜き。料理は円形の器を真上から撮るか全幅の写真。声の人物は切り抜き - **セクション境界**: 直線で区切る。黄色帯や柄背景のバナーで切り替える - カードは角丸小さめ - 詳細ボタンは黒か紺のピル型にし、右端に＋アイコンを付ける - 購入ボタンは横長の角丸にし、右矢印を付ける ## Components - **紺ピルボタン**（`button-primary`）: 詳細や購入に使う紺のピル型ボタン - **赤橙の横長バナー**（`button-cta-banner`）: 関連商品へ送る全幅バー。右端に矢印と商品画像を置く - **黄色マーカー**（`marker-highlight`）: 強調語の下に敷く黄色の帯 - **特長カード**（`feature-card`）: 上に写真、下に短い見出しを置き、右下に黒丸の＋を付けた白カード - **お客様の声カード**（`voice-card`）: 人物の切り抜き、黄色のペルソナラベル、マーカー付きの感想を載せる白カード - **カテゴリタブ**（`filter-tab`）: 選択中は紺で塗り、他は白地に紺の枠線を付けたピル型 - **FAQ 行**（`faq-row`）: 左に Q、右に黒丸の＋を置き、下線で区切る - **購入プランカード**（`purchase-card`）: アイコン、プラン名、説明、紺ボタンを縦に並べ、お得バッジを付ける ## Do's and Don'ts **Do** - 見出しは極太で大きく、字間を詰めて組む - 強調語には必ず黄色マーカーを敷く - シズル感のある料理写真を大きく使う - 白カードの右下に＋アイコンを置いて詳細へ誘導する - 理由を番号付きで 3 つ程度並べる **Don't** - 細い明朝や繊細な書体を使わない - 地を真っ白にしない（生成りを保つ） - マーカーを多用して強調をぼかさない - グラデーションや装飾的な影を多用しない - パステル調の淡い配色にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（インパクトのある一言で興味を引く）: 人物と商品の切り抜きに特大の黒コピーを重ね、動画ボタンを添える 2. **問いかけ**（何がすごいのかと疑問を投げる）: 小さな前置きに続けて特大の問いを置き、横に商品を並べる 3. **理由1 栄養**（栄養バランスを訴求する）: 商品の大きな切り抜きに、マーカー付きの見出しと白カード 2 枚を添える 4. **理由2 おいしさ**（味と技術を伝える）: 円形の器の料理写真に白い極太文字を重ね、下に特長カードを 4 枚並べる 5. **理由3 ラインアップ**（種類の豊富さを示す）: タブで絞り込み、商品カルーセルと紺の情報パネルを置く 6. **認証・実績**（信頼性を補強する）: 黄黒の警告柄バナーとスポーツ選手の画像、動画を並べる 7. **締めコピーと CM ギャラリー**（記憶に残す）: 特大コピーに商品を挟み込み、縦長の動画サムネを並べる 8. **お客様の声**（共感と信頼を得る）: ペルソナラベル付きの声カードを 2×2 で並べる 9. **よくある質問**（不安を解消する）: 線で区切ったアコーディオンにする 10. **ニュース**（話題性を示す）: サムネカードを 3 枚横に並べる 11. **ブランド紹介**（ブランドの定義を伝える）: 黄色の全幅帯に大きな紺の円ロゴと説明文を置く 12. **購入案内**（購入方法を選ばせる）: 定期購入の大カードと、3 プランのカードで構成する 13. **関連商品バナー**（クロスセルにつなげる）: 柄背景の枠に写真と CTA ボタンを置く ## Imagery - 料理は真上か斜めから寄り、湯気が立つようなシズル感で撮る - 商品パッケージは白背景で切り抜き、落ち影を付ける - 人物は表情豊かに撮って切り抜き、コピーと重ねる - 食材は小さな正方形写真で質感を見せる - 関連バナーは食欲をそそる暖色の柄背景にする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央 900px 前後の幅に収め、左右は生成り地にする - SP では声カードや特長カードを 1〜2 列に落とす - 特大コピーは SP で 48〜56px に縮め、改行位置を調整する - カルーセルは SP でスワイプ操作にする - ブランド紹介帯は 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-cdb3ac5b`（元 LP の URL から採番） - **元 LP**: https://www.nissinkanzenmeshi.com/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。