DESIGN.md — 空色×金の斜め帯 高級調味料 LP（Bright Sky Blue Premium Dressing LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: 上品・高級、清潔・爽やか、ナチュラル、シンプル・ミニマル
• キーワード: 空色・金の細罫・縦書き明朝・斜め帯・筆記体見出し・余白多め
• 地の質感: フラットな単色面と明るく柔らかい自然光の料理写真。装飾は細線と筆記体のみで軽い。
• 形: 角丸なしの四角。セクション境界は斜めに傾けた帯。商品上の素材タグだけ白い円。
• 温度感: 爽やかでやや涼しい。茶色の帯で大地の温かみを足す。

Colors

• 地は白を基本に、FV と特長帯だけ色面を使う。
• 空色はブランドの顔。FV と最後の特長帯に置く。
• 特長帯は茶・グレー・空色と素材ごとに地色を変える。
• 金色は小ラベル、細い罫線、帯の境界線に限定する。
• 色帯上の文字は白。白地の文字は濃いグレー。
• 原色の赤や派手な強調色は使わない。
• ingredient-tag は文字 #B79A63 × 背景 #FFFFFF のコントラスト比が 2.69:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#8D7241、4.55:1）を使う。

Typography

• 情緒的なリードは縦書きの明朝で大きく置く。
• 本文は細めのゴシックで字間広め、行間 2 前後。
• コンセプト文は中央揃えで、段落ごとに 1 行空ける。
• セクション見出しは筆記体の英単語 1 語だけにする。
• 特長は金ラベル→金罫線→太字見出し→本文の順。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真と縦書きコピーは左右にずらして重ねる
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 90px、基本単位 8px、カード内 20px（375px 幅換算）
• 余白を大きく取り、1 画面の情報は少なくする。
• 特長帯は画面幅いっぱいに広げ、文字は左寄せ。
• 商品カードは縦に並べ、間隔は約 16px。
• 縦書きコピーの両脇に小さな料理写真を互い違いに置く。
• 最後は料理写真 3 枚を隙間なく横に並べて締める。

Elevation & Depth

• 影は使わない。
• カードは細い 1px の枠線で区切る。
• 奥行きは写真と色帯を斜めに重ねて出す。

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角の切り抜き。商品写真は余白の多い白背景。帯の写真は斜めに切る。
• セクション境界: 約 3〜5 度傾けた斜め帯と、金色の細い斜めライン
• 角丸はつけない。
• 円は素材タグだけに使う。
• 斜め帯は傾きをそろえ、交互に向きを変えてもよい。

Components

• 筆記体見出し（script-heading）: 中央または左寄せに細い筆記体の英単語を置き、帯に一部重ねる。
• 縦書きリード（vertical-lead）: 明朝の縦書き 3 行。左右に小さな写真をずらして置く。
• 斜め特長帯（feature-band）: 全幅の写真に斜めの色面を重ね、金ラベル・罫線・白見出し・本文を載せる。
• 金ラベルと罫線（gold-label-rule）: 金色の小さな文字の下に、幅 7 割ほどの金色細線を引く。
• 商品カード（product-card）: 細い黒枠の中に大きな商品写真、金ラベル、商品名、説明文、MORE を縦に並べる。
• 素材タグ（ingredient-tag）: 写真右上に置く白い円。中に産地と素材名を 2 行の小さな金色文字で入れる。
• MORE リンク（more-link）: 中央揃えの英字と、黒い円の矢印アイコン。
• 月桂冠エンブレム（premium-emblem）: 金色の月桂樹と星で囲んだ英字のバッジ。写真の右上角に重ねる。

Do's and Don'ts

Do - 余白を大きく取り、静かな高級感を保つ。 - 金色は細い線と小さい文字に限って使う。 - 特長帯は斜めに切り、写真を画面いっぱいに見せる。 - 素材が主役の写真を明るく爽やかに見せる。 - 見出しの英単語は筆記体 1 語にとどめる。

Don't - 大きな塗りボタンや派手な CTA を置かない。 - 角丸や影を多用しない。 - 太いゴシックで本文を詰め込まない。 - 赤や黄色の値引きバッジを使わない。 - 斜め帯の角度をバラバラにしない。

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ファーストビュー（商品と世界観を一目で伝える）: 空色の全面に商品ボトルを中央に置き、素材の切り抜きを散らす。ロゴ、明朝のキャッチ、SCROLL を添える。
2. 商品集合写真（シリーズ全体を見せる）: 白背景に 3 本並べた写真。右上に金のエンブレムを重ねる。
3. コンセプト（開発の思いを情緒的に語る）: 縦書きの明朝リードと料理写真 2 枚を互い違いに置く。続けて中央揃えの本文と料理写真を置く。
4. 特長（こだわりを 3 つ示す）: 筆記体見出しのあと、茶・グレー・空色の斜め写真帯を 3 枚重ねる。
5. 商品ラインナップ（各商品の味と素材を伝える）: 筆記体見出しの下に、細枠のカードを縦に 3 枚並べる。カードには素材タグと MORE を入れる。
6. 料理写真ギャラリー（使用シーンで締める）: 料理写真 3 枚を隙間なく横に並べた帯。

Imagery

• 素材（柑橘・玉ねぎ・根菜）は切り抜きで、色面の上に浮かせて散らす。
• 商品は白〜薄グレーの布背景で、柔らかい自然光で撮る。
• 料理は真俯瞰か斜め上から撮る。明るく彩度高めで、淡い色の器を使う。
• 特長帯は畑・オイル・果樹など素材の背景を広角で撮る。
• 装飾は金の月桂冠と細線のみ。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC の FV は 3 色（空色・黄緑・山吹）の縦 3 分割にし、各色に商品を 1 本ずつ置く。
• PC の特長帯は写真を右、文字を左に置き、金ラベルは縦書きにする。
• PC の商品カードは 3 カラム横並び。
• PC のコンセプトは写真と縦書き・本文を左右 2 列に分ける。
• PC はコンテンツ幅を約 70% に絞り、余白を広げる。

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 行書くと起動時に読み込まれる。