--- version: alpha name: Gray Studio Spice Product Showcase LP description: 明るいグレーの地に商品パッケージと木製スプーンを切り抜いて置く、余白多めの食品プロモーションLP。後半はスパイスを撒いた黒い写真からダークグレーの商品カード一覧に切り替わる。強調色は黄色とスパイスの色で、レシピ部分は手描き線画の背景で柔らかくしている。 colors: primary: '#66B82F' background: '#E5E5E5' background-alt: '#FEFEFE' dark-section: '#363636' surface: '#423E3B' accent-1: '#FED202' tint-1: '#F7F2EF' text: '#373736' on-dark: '#FEFEFE' accent-2: '#85B65B' secondary: '#BC8247' line: '#E5E5E5' text-muted: '#B8B8B8' typography: display: fontFamily: Montserrat fontSize: 44px fontWeight: 900 lineHeight: 1.0 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.08em headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.05em accent: fontFamily: Montserrat fontSize: 10px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0.1em label-button: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 2px md: 6px lg: 10px full: 999px spacing: unit: 8px card: 16px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' point-label: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.accent}' height: 18px bracket-heading: textColor: '{colors.text}' typography: '{typography.headline-md}' height: 60px outline-display: textColor: '{colors.text}' typography: '{typography.display}' height: 110px collab-banner: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 170px recipe-tab: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 90px time-badge: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 44px product-card: backgroundColor: '{colors.surface}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 180px text-link: textColor: '{colors.on-dark}' typography: '{typography.label-button}' height: 20px ingredient-list: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.note}' height: 400px --- # DESIGN.md — グレー地×黒ラインナップの調味料紹介LP（Gray Studio Spice Product Showcase LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 食品・飲料 ／ **雰囲気**: シンプル・ミニマル、クール・先進的、ポップ・元気、ナチュラル - **キーワード**: 切り抜き商品・広い余白・グレー地・スパイスの色・黒の一覧・線画背景 - **地の質感**: フラットな単色の地に、影をつけない切り抜き写真を置く。レシピ部分の背景は線画イラスト、ラインナップ部分の上端は暗い石の質感の写真。 - **形**: 四角いブロックが中心で、カードの角丸は小さい。見出しは波括弧の飾りやリボン型のラベルで囲む。 - **温度感**: 前半は落ち着いたニュートラル。スパイスの暖色と黄色で食欲を感じさせる温かみを足す。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#66B82F` | ブランドの緑（FV背景） | 6% | 画素の実測 | | `background` | `#E5E5E5` | 前半の明るいグレー地 | 30% | 画素の実測 | | `background-alt` | `#FEFEFE` | レシピ部分の白い地 | 11% | 画素の主要色に補正 | | `dark-section` | `#363636` | ラインナップ部分の黒い地 | 10% | 画素の実測 | | `surface` | `#423E3B` | 商品カードの面 | 11% | 画素の主要色に補正 | | `accent-1` | `#FED202` | コラボの黄色い帯・下線 | 3% | 画素の実測 | | `tint-1` | `#F7F2EF` | 材料欄の淡いベージュ | 6% | 画素の実測 | | `text` | `#373736` | 見出しと本文の黒 | 2% | 画素の主要色に補正 | | `on-dark` | `#FEFEFE` | 黒い地の上の白文字 | 1% | 画素の主要色に補正 | | `accent-2` | `#85B65B` | RECIPEラベル・ポイント注記の緑 | 1% | 画素の主要色に補正 | | `secondary` | `#BC8247` | 木のスプーン・スパイスの茶色 | 6% | 画素の主要色に補正 | | `line` | `#E5E5E5` | 罫線・区切り線 | 1% | 画素の主要色に補正 | | `text-muted` | `#B8B8B8` | コピーライトなどの注記 | 1% | 画素の実測 | - 前半はグレー地で統一し、商品パッケージの色を主役にする - レシピ部分は白地に線画の背景、ラインナップ部分は黒地にして、場面ごとに地の色を変える - 黄色は帯・下線・タブの選択状態だけに使う - 緑はFVとラベルにだけ使い、広い面には使わない - 黒い地の上では、文字を白、カードを一段明るい茶系のグレーにする - 文字の色は黒とグレーだけにし、色をつけるのはラベルだけにする ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 英字の大見出し（白抜き・縁取り） | 欧文サンセリフ | Montserrat | 900 | 44px | 1.0 | 0.02em | | `headline-lg` | コンセプトの見出し | ゴシック | Noto Sans JP | 700 | 24px | 1.6 | 0.08em | | `headline-md` | ポイントの結論（太字） | ゴシック | Noto Sans JP | 700 | 18px | 1.5 | 0.05em | | `headline-sm` | レシピ名・商品名 | ゴシック | Noto Sans JP | 500 | 16px | 1.5 | 0.03em | | `body-md` | 説明文・手順 | ゴシック | Noto Sans JP | 400 | 13px | 1.8 | 0.03em | | `note` | 小さい補足や「だから」の接続語 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.05em | | `accent` | POINTやRECIPEの英字ラベル | 欧文サンセリフ | Montserrat | 600 | 10px | 1.2 | 0.1em | | `label-button` | 下線つきのテキストリンク | ゴシック | Noto Sans JP | 500 | 12px | 1.4 | 0.05em | - 英字の大見出しは極太で組み、塗りと縁取りの2つを重ねる - ポイントは「前提（細字）→小さな接続語→結論（太字）」の3段で、中央揃えにする - 本文は13px前後の小さめの文字にして、余白で読ませる - 強調する数字だけ大きくして太字にする - 見出しの両側には斜線（＼／）や波括弧を添える - 明朝体は使わない - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SPは1カラム。ラインナップのカードは画像とテキストの2列構成 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算） - ポイントは画像とテキストを左右交互に並べ、SPでは縦に積む - 商品写真の周りに大きな余白をとる - レシピの詳細は、手順カラムと材料カラムの2段構成にする - ラインナップはPCで2列のカード、SPでは1列にする - タブ型のレシピ切り替えを上下に配置する ## Elevation & Depth - 影はほぼ使わない - 切り抜き写真は影なしで、地に直接置く - カードは地の色との差だけで浮かせる ## Shapes - **角丸**: 小 2px ／ 中 6px ／ 大 10px。ボタンは角丸の長方形。 - **写真の切り抜き**: 商品とスプーンは切り抜き、レシピ写真は角丸の小さい長方形 - **セクション境界**: 直線で地の色を切り替える - POINTのラベルはリボン（燕尾）型の細い枠にする - 時間のバッジは黄色い円にする - コラボの帯の上端にスパイス色の細いストライプを入れる - 手順の番号は黒い丸の白数字にする ## Components - **ポイントリボン**（`point-label`）: 白地に細い黒枠をつけた燕尾型のラベル。中に英字でPOINTと入れる - **波括弧見出し**（`bracket-heading`）: 左右に大きな波括弧を置き、2行の中央揃えの見出しを挟む - **縁取り英字見出し**（`outline-display`）: 極太の英字と縁取り英字を2段に重ね、下に和文の小見出しを置く - **黄色の帯バナー**（`collab-banner`）: 黄色の地に薄い英字を透かして敷き、中央にタイトル、左右に商品を置く - **レシピタブ**（`recipe-tab`）: サムネイルとレシピ名を並べたタブ。選択中のタブには黄色の下線を引く - **調理時間バッジ**（`time-badge`）: 黄色い円の中に、調理時間の数字を大きく入れる - **商品カード**（`product-card`）: 暗い地の上に置くカード。左にパッケージ、右に説明文と関連レシピのサムネイル一覧を並べる - **下線リンク**（`text-link`）: 白文字に下線を引いた「詳しく」リンク - **材料リスト**（`ingredient-list`）: 淡いベージュの地に、材料名と分量を左右に振り分け、点線で区切って並べる ## Do's and Don'ts **Do** - 商品は切り抜き写真にして、グレー地の中央に大きな余白をとって置く - スプーンに盛ったスパイスを並べて、色の多さを見せる - ポイントは3つにして、画像を左右交互に配置する - 地の色を切り替えてセクションを区切る - 英字の大見出しは極太と縁取りを組み合わせる **Don't** - グラデーションや強い影を使わない - 前半のグレー地に原色の大きな面を置かない - ボタンをピル型にしない - 本文を大きくして余白を詰めない - 飾りの多い書体や明朝体を混ぜない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品の存在を印象づける）: 緑の地に商品とスプーンを斜めに散らし、中央に白い円形のロゴと料理写真を置く 2. **商品の紹介**（商品形状を見せる）: グレー地に大きな英字を透かして敷き、その上に商品を順に配置する。左右にはスプーンを並べる 3. **使用量の説明**（1本あたりの量を直感的に伝える）: 商品とスプーンをイコール記号でつなぎ、それぞれに短いキャプションをつける 4. **料理写真の帯**（使い道の広さを伝える）: 全幅の料理写真に白い一言コピーを重ね、下に商品を横一列に並べる 5. **コンセプト**（商品の価値を伝える）: 2行の見出しと短い本文を置き、四隅にスプーンを配置する 6. **特長ポイント**（便利さを3つに分けて伝える）: 波括弧の見出しの下に、リボン型ラベル・3段のテキスト・画像を左右交互に並べる 7. **レシピ紹介**（使ってみたい気持ちを高める）: 線画の背景の上に縁取り英字の見出しを置き、レシピ写真を横スクロールで並べる 8. **コラボレシピ**（具体的な調理方法を見せる）: 黄色の帯バナーの下にタブを置き、手順カラムと材料カラムの2段で詳細を見せる 9. **商品ラインナップ**（全種類と使い道を一覧で見せる）: スパイスを撒いた暗い写真に縁取り英字を重ね、下に黒い地の2列カードを並べる 10. **フッター**（SNSでのシェアを促し、権利表記を置く）: SNSアイコンとコピーライトを置き、最下部に極太のロゴと商品の列を敷く ## Imagery - 商品は真正面から撮り、背景を抜いた切り抜き写真にする - 木製スプーンに色の違うスパイスを盛り、真上から撮る - 料理は皿ごと少し上から撮り、明るい自然光にする - 黒い石の上にスパイスを撒いた写真を、暗いセクションの導入に使う - 食材やスプーンを細い線画で描き、薄いグレーで背景に敷き詰める - スティックからスパイスがこぼれる動きをイラスト風に見せる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは中央寄せで左右に大きな余白をとる。SPは画面幅の約88%で組む - ポイントの左右交互の配置は、SPでは画像を上・テキストを下にする - レシピ詳細の2カラムは、SPでは手順→材料の縦並びにする - ラインナップのカードはPCで2列、SPで1列にする - 透かしの英字や縁取りの英字は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-f4334092`（元 LP の URL から採番） - **元 LP**: https://www.sbfoods.co.jp/stickspice/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（6/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。