DESIGN.md — 杏色ベージュの余白系洋菓子店 LP（Apricot Beige Minimal Confectionery Shop LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: 上品・高級、シンプル・ミニマル、やさしい・柔らかい、ナチュラル
• キーワード: 杏色ベージュ・広い余白・縦書きコピー・パステル商品写真・細い欧文見出し・カプセル型写真
• 地の質感: フラットな単色面。影もグラデもなく、紙のようなマットな質感
• 形: 角丸正方形の商品写真、カプセル型・楕円の写真、細い罫線、ピル型の線のボタン
• 温度感: 暖かく穏やか。焼き菓子のような淡い暖色

Colors

• 地色は杏色ベージュ 1 色で通し、ブランド紹介だけ淡いピーチに切り替える
• 文字はほぼ黒の 1 色だけを使い、色付きの見出しは作らない
• 色は写真と商品写真の背景のパステル単色で足す
• 季節限定バッジだけに小さな円で彩度の高いピンク・黄・くすみ茶を使う
• 白は人物プロフィールのカードだけに使う
• CTA 用の目立つ色は置かず、線のボタンで控えめに誘導する

Typography

• 見出しは英小文字で書き、すぐ下に小さな和文ラベルを中央揃えで添える
• コンセプトのキャッチは縦書きにし、横に小さな英字のサブコピーを縦に添える
• 本文は小さめにし、行間 2.0・字間 0.1em で軽く見せる
• 太字はほとんど使わず、400〜500 のウェイトに留める
• 商品番号は 01, 02 の 2 桁で小さく添える
• サブ見出しは文字幅だけの細い下線で装飾する
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC の商品紹介は写真と説明の 2 カラム
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 96px、基本単位 8px、カード内 24px（375px 幅換算）
• セクションの上下に大きな余白を取り、密度を低くする
• 本文ブロックは幅を狭くし、行の長さを短く保つ
• 写真ギャラリーは余白なしで画面いっぱいに 3×2 のグリッドで敷く
• 商品は写真と説明を 1 セットにして縦に等間隔で並べる
• 後半のセクションは全幅の細い罫線で区切る
• お知らせは日付とタイトルの 2 列のテキストリストにする

Elevation & Depth

• 影は使わず、すべてフラットに組む
• 奥行きは色面の重なりで出す（楕円の写真に白カードを重ねる）
• 透かしの欧文文字は地色よりわずかに濃い色で背景に沈める

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 商品は角丸の正方形、ヒーローはカプセル型、人物は楕円、ギャラリーとメインビジュアルは角なしの全幅
• セクション境界: 直線の色面切り替えか、全幅の細い罫線
• 商品写真は角丸 20px 前後の正方形でそろえる
• ヒーロー写真は左右が半円のカプセル型に抜く
• ボタンは細い線のピル型で、塗りは使わない
• 季節限定バッジは写真の左上に置く小さな円

Components

• カプセル型ヒーロー写真（hero-capsule）: カプセル型に抜いた写真の上に、線画のロゴマークを白い線で重ねる
• 縦書きキャッチ（vertical-copy）: 右寄せに置く縦書きの和文キャッチと、縦向きの英字サブコピー
• 英小文字のセクション見出し（section-title）: 中央に英小文字の見出しを置き、下に小さな和文ラベルを添える
• 商品紹介セット（product-card）: パステル単色背景の角丸正方形写真に、番号・欧文名・和名・下線付きサブ見出し・説明文を組み合わせる
• 季節限定バッジ（season-badge）: 写真の左上に置く直径 32px ほどの色付きの円。中に小さな黒文字
• 下線付きサブ見出し（underline-subhead）: 文字幅だけの 1px 黒線を下に引いた短い見出し
• 人物プロフィールカード（profile-card）: 楕円の人物写真に白い角丸カードをずらして重ね、肩書きを縦書きで添える
• 線のピル型ボタン（button-outline）: 黒の細い線だけで描くピル型のボタン。SNS などへのリンクに使う
• お知らせリスト（news-list）: 左に日付、右にタイトルを並べたテキストのみの行。最後に下線付きの「もっと見る」リンクを右寄せで置く

Do's and Don'ts

Do - 地色は杏色ベージュ 1 色にし、余白をたっぷり取る - 商品写真は商品ごとにパステル単色の背景で撮り、角丸の正方形でそろえる - 見出しは英小文字＋和文の小ラベルの 2 段で組む - 文字は小さく細く、字間を広めに取る - ブランド名の欧文は巨大な透かし文字として背景に使う

Don't - 赤やオレンジの塗りつぶし CTA ボタンを置かない - 影・グラデーション・太い枠線を使わない - 太字の大きな和文見出しで煽らない - 価格訴求のバッジやアイコンを詰め込まない - 写真の背景に柄や複数の色を入れない

Page Structure

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

1. ファーストビュー（素材感と世界観を一枚で伝える）: ベージュの地にカプセル型の写真を置き、白い線のロゴマークを重ねる
2. コンセプト（贈り物としての価値と作り方を語る）: 右側に縦書きのキャッチ、左下に短い行の本文を広い余白の中に置く
3. 素材ギャラリー（原材料と店舗の空気感を見せる）: 素材と店舗の写真を全幅 3×2 のグリッドに隙間なく敷く
4. 商品ラインナップ（味の種類と特徴を伝える）: 角丸写真と番号付きの説明を縦に 6 セット並べ、限定品にはバッジを付ける
5. 作り手紹介（監修者の顔と経歴で信頼を作る）: 淡いピーチ地に巨大な透かし欧文、楕円の人物写真、白カードを重ねる
6. メインビジュアル（商品断面のシズル感を見せる）: 断面のアップ写真を全幅で大きく置く
7. 店舗情報（来店を促す）: 地図を埋め込み、下に店名・住所・営業時間を中央揃えで置き、線のボタンを添える
8. お知らせ（最新の動きを伝える）: 罫線で区切り、日付とタイトルのテキストリストにする
9. メディア掲載（第三者からの評価で信頼を補う）: 黒の単色ロゴを横一列に並べる
10. フッター（規約などへの導線）: 罫線の下に小さなテキストリンクとコピーライトを左右に置く

Imagery

• 商品は真横から撮り、無地のパステル単色を背景にして柔らかい影だけを付ける
• 素材写真は真上や斜め上からのクローズアップ。ナッツ・蜂蜜・メレンゲなど質感が伝わるもの
• 店舗写真はグレーの壁と植物で、低い彩度の落ち着いたトーンにする
• 人物は自然光で撮った横顔の笑顔。ガラス越しの映り込みでやわらかく見せる
• ロゴマークは鳥のような細い一筆書きの線画
• 断面写真は寄りで撮り、具材の色が見えるようにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP では商品の写真と説明を縦に積み、写真幅は 80% 前後にする
• 縦書きのキャッチは SP でも縦書きのまま中央寄りに置く
• ギャラリーは SP で 2 列にする
• 透かしの欧文文字は SP で画面幅いっぱいまで縮める
• PC は中央寄せの狭い本文幅を保ち、余白をさらに広げる
• お知らせの日付とタイトルは SP で 2 段に分けてもよい

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