--- version: alpha name: Dark Roast Spice Craft Food LP description: ほぼ黒に近い焦げ茶を地にして、生成りの文字と細い線で上品にまとめた食品 LP。明朝体と欧文セリフで本格派の空気を出し、料理写真のシズル感を主役にしている。冒頭だけ生成りの面を入れてスパイス素材を並べ、その後は暗い地のまま専門家・特長・レシピへ流す。 colors: background: '#190909' background-alt: '#EAE2D5' primary: '#190909' on-dark: '#F0EDE9' cta: '#EBE2D5' on-cta: '#2A1712' text: '#2B201C' line: '#AF9C82' marker: '#EBE3D4' accent-1: '#936A4C' text-muted: '#CDC6B8' typography: display: fontFamily: Playfair Display fontSize: 56px fontWeight: 800 lineHeight: 1.0 letterSpacing: 0.02em headline-lg: fontFamily: Shippori Mincho fontSize: 22px fontWeight: 600 lineHeight: 1.6 letterSpacing: 0.1em headline-md: fontFamily: Shippori Mincho fontSize: 17px fontWeight: 600 lineHeight: 1.6 letterSpacing: 0.08em headline-sm: fontFamily: Shippori Mincho fontSize: 14px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.05em accent: fontFamily: Cormorant Garamond fontSize: 12px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 8px fontWeight: 400 lineHeight: 1.6 label-button: fontFamily: Shippori Mincho fontSize: 11px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0.1em rounded: sm: 4px md: 8px lg: 12px 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}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 28px expert-circle: textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 140px product-frame: backgroundColor: '{colors.background}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 760px point-circle: textColor: '{colors.on-dark}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 130px tag-label: backgroundColor: '{colors.marker}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 18px numbered-list: textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 180px section-eyebrow: textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 80px recipe-card: textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 300px side-dish-card: textColor: '{colors.on-dark}' typography: '{typography.note}' height: 170px --- # DESIGN.md — 焦げ茶×生成りの本格スパイス食品 LP（Dark Roast Spice Craft Food LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 食品・飲料 ／ **雰囲気**: ラグジュアリー・ダーク、上品・高級、和風 - **キーワード**: 焦げ茶の地・生成りの文字・明朝と欧文セリフ・細線の枠・料理シズル写真・スパイス素材 - **地の質感**: マットで暗い単色の地に、湯気や照りのある料理写真が浮かぶ。装飾は細い線だけに絞っている。 - **形**: 円形の人物写真と円形のポイント枠、角丸の細線カード、ピル型ボタン。 - **温度感**: 暖色寄りで、ローストしたような深い温かみがある。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#190909` | ページ全体の焦げ茶の地 | 70% | 画素の実測 | | `background-alt` | `#EAE2D5` | 素材紹介セクションの生成りの地 | 8% | 画素の実測 | | `primary` | `#190909` | ブランドを代表する焦げ茶 | 5% | 画素の実測 | | `on-dark` | `#F0EDE9` | 暗い地の上の見出しと本文の生成り文字 | 3% | 画素の主要色に補正 | | `cta` | `#EBE2D5` | 詳しく見るボタンの生成りの面 | 0% | 画素の実測 | | `on-cta` | `#2A1712` | ボタン上の焦げ茶文字 | 0% | 画素の主要色に補正 | | `text` | `#2B201C` | 生成りの地の上の見出し文字 | 0% | 画素の実測 | | `line` | `#AF9C82` | カード枠・円枠・区切りの細線 | 0% | 画素の主要色に補正 | | `marker` | `#EBE3D4` | 名前ラベルとタグの生成りの帯 | 0% | 画素の実測 | | `accent-1` | `#936A4C` | スパイスを思わせる茶色の差し色 | 1% | 画素の実測 | | `text-muted` | `#CDC6B8` | 注釈や欧文ラベルの灰ベージュ | 0% | 画素の主要色に補正 | - 地はほぼ黒の焦げ茶 1 色に統一する。生成りの面はファーストビュー直下の素材紹介にだけ使う。 - 暗い地の文字は真っ白にせず、生成り（#F0EDE9）にする。 - 強調は色を変えずに、生成りのラベル帯・細線・字の大きさで付ける。 - ボタンは生成りの面に焦げ茶の文字を載せ、地色と反転させる。 - 線はくすんだベージュの 1px にして、主張させない。 - 色数を抑え、写真の料理の色で温かみを出す。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの大きな欧文ロゴタイプ | 欧文セリフ | Playfair Display | 800 | 56px | 1.0 | 0.02em | | `headline-lg` | セクションの大見出し | 明朝 | Shippori Mincho | 600 | 22px | 1.6 | 0.1em | | `headline-md` | 特長リストやポイント名 | 明朝 | Shippori Mincho | 600 | 17px | 1.6 | 0.08em | | `headline-sm` | 人物名・レシピ名 | 明朝 | Shippori Mincho | 700 | 14px | 1.5 | 0.05em | | `body-md` | 説明本文 | ゴシック | Noto Sans JP | 400 | 11px | 2.0 | 0.05em | | `accent` | 見出し上の欧文サブラベル・Point 表記 | 欧文セリフ | Cormorant Garamond | 500 | 12px | 1.4 | 0.05em | | `note` | ※付きの注釈 | ゴシック | Noto Sans JP | 400 | 8px | 1.6 | 0.0em | | `label-button` | ボタンの文字 | 明朝 | Shippori Mincho | 500 | 11px | 1.0 | 0.1em | - 見出しはすべて明朝にし、字間を広めに取る。 - 本文だけは小さめのゴシックにして、行間を 2.0 ほど取る。 - 見出しの上に、欧文セリフの小さなラベルと下線を添える。 - 数字の番号には欧文セリフの大きめの数字を使う。 - 人物名につける敬称は、本体より一段小さくする。 - 見出しは中央揃え、本文は左揃えにする。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。専門家紹介は 2 列、副菜レシピは横スクロールカード。 - **本文ブロックの幅**: 画面幅の約 82% - **余白**: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算） - セクション間は 70〜90px と広めに取る。 - 製品紹介は細線の角丸枠で囲み、パッケージ画像を枠の上辺にはみ出させる。 - 写真は左右に余白を取った 80% 幅で置く。 - 工程の写真は互い違いにずらして配置し、リズムを出す。 - 特長リストは番号付きの行を細線で区切る。 - 本文の左右余白は 16px 程度にする。 ## Elevation & Depth - 影はほとんど使わず、平面的に構成する。 - 副菜カードは、写真の右下に細線の枠をずらして重ね、奥行きを出す。 - パッケージ画像だけ、わずかに浮いた見え方にしてよい。 ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。 - **写真の切り抜き**: 料理写真は角丸 6px 程度の長方形、人物は細線の二重円で円形に切り抜く。 - **セクション境界**: 直線で色を切り替える。暗い地どうしの境目は余白だけで区切る。 - ポイントは、上部が切れた細線の円の中に番号と名前を入れる。 - ボタンは生成りで塗ったピル型にする。 - ラベル帯は角丸なしの長方形にする。 - 太い線や塗りの枠は使わない。 ## Components - **詳しく見るボタン**（`button-primary`）: 生成りのピル型ボタン。焦げ茶の明朝文字で、中央に置く。 - **専門家の円形ポートレート**（`expert-circle`）: 細線の二重円で切り抜いた人物写真。上に欧文名を弧状に添え、下に肩書きと名前を置く。 - **製品紹介の細線枠**（`product-frame`）: 1px のベージュ線で囲んだ角丸の枠。上辺にパッケージ画像を重ね、中に説明・ボタン・ポイントを入れる。 - **ポイント円**（`point-circle`）: 上部に切れ目のある細線の円。Point の欧文ラベルと番号を載せ、中に名前と短い説明を入れる。 - **生成りのラベル帯**（`tag-label`）: 見出し上のリード文や名前に敷く、生成りの長方形の帯。文字は焦げ茶。 - **番号付き特長リスト**（`numbered-list`）: 欧文セリフの数字と明朝の文を組み、行と行を細線で区切る。最後に注釈を添える。 - **欧文サブラベル付きの見出し**（`section-eyebrow`）: 小さな欧文セリフのラベルと下線の下に、明朝の大見出しを中央揃えで置く。 - **レシピ写真カード**（`recipe-card`）: 角丸の料理写真。左下に円形の人物アイコンを重ね、その横に肩書きと名前のラベルを置く。 - **副菜の横スクロールカード**（`side-dish-card`）: 正方形に近い写真に、ずらした細線の枠を重ねる。下に明朝 2 行で料理名を置く。 ## Do's and Don'ts **Do** - 暗い焦げ茶の地を守り、写真の料理の照りを引き立てる。 - 見出しは明朝で字間を広めに取り、欧文セリフのラベルを添える。 - 装飾は 1px の細線と円形のモチーフに絞る。 - スパイスの粒や粉を、白い地に切り抜いて図鑑のように並べる。 - 余白を大きく取り、1 画面に入れる情報を絞る。 **Don't** - 赤や黄色の派手な CTA ボタンを使わない。 - 純白の背景セクションを多用しない。 - 丸ゴシックやポップな書体を使わない。 - 濃い影やグラデーションのボタンを使わない。 - 価格訴求の大きなバッジを乱立させない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（本格感とシズル感で引き込む）: 暗い背景で料理を俯瞰した写真を全面に置く。下部に明朝の小さなコピーと、生成りの大きな欧文セリフのロゴタイプを重ねる。 2. **素材紹介**（原料スパイスのこだわりを見せる）: 生成りの地に、皿の写真と切り抜いたスパイスを弧状に配置する。各スパイスには小さな欧文名を付け、下に明朝の 3 行コピーを置く。 3. **専門家紹介**（監修者の権威で信頼を出す）: 暗い地に 2 列で円形ポートレートを並べ、欧文名・肩書き・名前を添える。 4. **商品紹介と特長**（商品概要と 3 つのポイントを伝える）: 細線の角丸枠の上辺にパッケージ画像を重ね、本文とピル型ボタンを入れる。その下にポイント円を縦に 3 つ並べる。 5. **使い方**（手軽さを伝える）: 生成りのラベル帯、明朝の 2 行見出し、本文の順に置く。工程写真を互い違いに配置し、円弧状の欧文装飾を添える。 6. **製品の利点リスト**（形状のメリットを列挙する）: 金色のメダル風のエンブレムの下に、細線区切りの番号付きリスト 4 行と注釈、ボタンを置く。 7. **スペシャルレシピ**（監修者のレシピで使い方を広げる）: 欧文ラベル付きの見出しの後に、人物アイコン付きの料理写真カードを縦に 4 枚並べる。 8. **アレンジレシピ**（公式レシピの提案）: 欧文の小見出しと下線、写真、明朝の料理名、説明文を 1 組にして 2 品並べる。 9. **つけあわせレシピ**（副菜の提案で回遊させる）: ずらした細線の枠付きの写真カードを横スクロールで並べ、スクロールできることを示すヒントを添える。 10. **インタビュー**（専門家の言葉で深みを出す）: 細線の角丸カードに、人物写真・Vol 番号・明朝の引用見出し・肩書き・名前を入れる。 11. **フッター**（シェアとブランドの締め）: スパイスを俯瞰した写真を背景に、シェアの円形アイコンと大きな欧文ロゴタイプを置く。 ## Imagery - 料理は鉄鍋や陶器の皿に盛り、暗めの背景でローキーに撮る。照りと湯気を強調する。 - スパイスは粒や粉を小山にして、白い背景で真上から撮って切り抜く。 - レシピ写真は木の台や布を敷き、自然光の下、斜め上から撮る。 - 人物は料理人らしい服装で、キッチンや店内を背景にした自然なポートレートにする。 - 見出しの周りに、欧文セリフの文字を円弧状に並べた薄い装飾を入れる。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はコンテンツ幅をおよそ 75% にして中央に寄せ、周囲に暗い地の余白を広く取る。 - PC の素材紹介は、右側に明朝の縦書きコピーを置く。 - 専門家は PC で 4 列に横一列で並べる。 - ポイント円は PC で横 3 列にする。利点リストはエンブレムの右に置いた横組みにする。 - レシピカードは PC で 2 列、副菜は 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-cfa7beb8`（元 LP の URL から採番） - **元 LP**: https://www.sbfoods.co.jp/craftcurry/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（7/11 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。