DESIGN.md — グレー地×黒ラインナップの調味料紹介LP（Gray Studio Spice Product Showcase LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

• 業種: 食品・飲料 ／ 雰囲気: シンプル・ミニマル、クール・先進的、ポップ・元気、ナチュラル
• キーワード: 切り抜き商品・広い余白・グレー地・スパイスの色・黒の一覧・線画背景
• 地の質感: フラットな単色の地に、影をつけない切り抜き写真を置く。レシピ部分の背景は線画イラスト、ラインナップ部分の上端は暗い石の質感の写真。
• 形: 四角いブロックが中心で、カードの角丸は小さい。見出しは波括弧の飾りやリボン型のラベルで囲む。
• 温度感: 前半は落ち着いたニュートラル。スパイスの暖色と黄色で食欲を感じさせる温かみを足す。

Colors

• 前半はグレー地で統一し、商品パッケージの色を主役にする
• レシピ部分は白地に線画の背景、ラインナップ部分は黒地にして、場面ごとに地の色を変える
• 黄色は帯・下線・タブの選択状態だけに使う
• 緑はFVとラベルにだけ使い、広い面には使わない
• 黒い地の上では、文字を白、カードを一段明るい茶系のグレーにする
• 文字の色は黒とグレーだけにし、色をつけるのはラベルだけにする

Typography

• 英字の大見出しは極太で組み、塗りと縁取りの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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。