DESIGN.md — 深緑×生成り和紙の静かな洋菓子カフェ LP（Quiet Forest Green Patisserie Cafe LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: 上品・高級、ナチュラル、シンプル・ミニマル、和風
• キーワード: 和紙テクスチャ・深緑・大きな余白・縦書き見出し・互い違いの写真・手描きの線
• 地の質感: 生成りの地に和紙や紙のような細かいざらつきとムラを乗せる。深緑の面にもかすかなノイズを入れる。
• 形: 写真は角丸なしの長方形。ボタンだけピル型。装飾は細い手描きの楕円線と小さな点。
• 温度感: やや温かい中間色。彩度を落としたくすみ系。

Colors

• 地は生成り（和紙風）と白を交互に使い、セクションの切り替わりを色の差だけで見せる。
• 強い色は深緑の 1 色だけ。ボタン・ヘッダー下帯・フッターに限って使う。
• 本文は黒にせずグレーにして、柔らかい印象を保つ。
• 深緑の面では文字を白か生成りにし、項目ラベルは少し明るい緑の帯に載せる。
• 鮮やかな赤や青の装飾色は足さない。色味は写真に任せる。

Typography

• 本文は字間を広く（0.1em 以上）、行間を 2 倍以上とってゆったり読ませる。
• 英字は細めのセリフ体にして、和文ゴシックと組み合わせる。
• セクション見出しは大きくしない。小さな縦書きの英字ラベルで静かに示す。
• ファーストビューのコピーは縦書きで写真の右上に置く。
• 背景に、薄い大きな英字を透かしで敷くことがある。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。左端の約 15% を縦書きラベル用の帯にする
• 本文ブロックの幅: 画面幅の約 83%
• 余白: セクション間 120px、基本単位 8px、カード内 16px（375px 幅換算）
• コンテンツは左に約 50px 寄せ、右端は画面端まで写真をはみ出させる。
• ストーリーの写真は大きさと左右位置を変えて互い違いに配置する。
• 写真の下に本文 2〜3 行、その下にピル型ボタンを置く流れを繰り返す。
• セクションの上下には 100px 以上の大きな余白をとる。
• 写真グリッドは大 1 枚＋小 2〜3 枚をすき間なしで組む。

Elevation & Depth

• 影は使わずフラットにする。
• 奥行きは写真の重なり、地色の切り替え、テクスチャで出す。

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 999px。ボタンはピル型。
• 写真の切り抜き: 角丸なしの長方形。片側を画面端まで裁ち落とす
• セクション境界: 直線で地色を切り替える。境界にまたがる手描きの楕円線を置く
• 写真に枠線や角丸は付けない。
• ボタンだけを完全なピル型にする。
• 装飾は細い手描きの線と散らした小さな点に限る。

Components

• メニューボタン（button-primary）: 深緑のピル型。英字セリフのラベルの右に外部リンクのアイコンを付ける。
• 深緑の上の枠線ボタン（button-outline-dark）: フッターに置くオンラインショップ用。白の細い枠線のピル型。
• 縦書きセクションラベル（vertical-section-label）: 左端に縦書きで置く。小さな葉のアイコン、英字、和文小ラベルの順に並べる。
• お知らせ・営業情報の帯（info-bar）: ファーストビュー直下の深緑の帯。お知らせ、営業時間、住所をアイコン付きで並べる。
• 店舗情報テーブル（shop-info-table）: 明るい緑の帯に項目名、その下に値を白文字で書く。これを縦に積む。
• 写真モザイク（photo-mosaic）: 大きな写真 1 枚と小さな写真 2〜3 枚を、すき間なしで組む。
• フッター目次（footer-index）: 縦書きの INDEX と縦線を置き、英字のナビを縦に並べる。ページトップに戻るボタンは丸いアイコン付き。
• 丸いメニューボタン（menu-toggle）: 白い円に、深緑の二本線を入れたハンバーガーボタン。

Do's and Don'ts

Do - 余白は削らず、写真 1 枚ごとに呼吸する間をとる。 - 地に和紙のテクスチャをかすかに敷く。 - 見出しは縦書きの小さな英字ラベルにする。 - 写真は自然光でくすんだ色味にそろえる。 - 強調色は深緑 1 色だけに絞る。

Don't - 太く大きな訴求見出しや価格バッジを置かない。 - ドロップシャドウやグラデーションのボタンは使わない。 - 原色・蛍光色を使わない。 - 写真を角丸カードに入れて整列させない。 - 本文を純黒・字間ゼロで詰めない。

Page Structure

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

1. ファーストビュー（商品の世界観を一瞬で伝える）: 全面にスライド写真を敷く。右上に縦書きコピー、左下に細い英字ロゴ、右下にドットのページ送りを置く。
2. お知らせ・営業情報の帯（最新情報と来店情報を示す）: 深緑の帯にお知らせのティッカー、営業時間、住所を置き、右に丸いメニューボタンを付ける。
3. ストーリー（立地とブランドの想いを語る）: 生成りの地に大小の写真を互い違いに並べ、短い詩的な文を挟む。背景には透かしの英字と手描きの線を入れる。
4. こだわり（素材へのこだわりを伝える）: 素材の写真の後に右寄せの短文を置き、商品のアップ写真で締める。
5. イートイン（店内での飲食を案内する）: 白い地に写真モザイクを組み、本文 2 行とメニューボタンを置く。
6. お土産（ギフト商品を紹介する）: 生成りの地に、箱と商品の写真でモザイクを組む。下に本文とボタンを置く。
7. テイクアウト（持ち帰りメニューを案内する）: 白い地に横長の写真の組み合わせを置き、本文とボタンを続ける。手描きの線の装飾も入れる。
8. 店舗情報（来店に必要な情報を示す）: 深緑の地に項目ラベルの帯を積み重ねたテーブルを置き、その下に注意書きを並べる。
9. フッター（回遊と外部ショップへ誘導する）: ロゴ、縦線付きの目次、ページトップ、SNS アイコン、枠線のピル型ボタン、コピーライトを並べる。

Imagery

• 自然光で撮り、彩度をやや落としたフィルム調で、ブルーグレーとベージュに寄せる。
• 商品はくすんだ灰色の陶器皿に載せ、斜め上から浅い被写界深度で撮る。
• 竹林や木造の店構え、店内、来店客の後ろ姿など、場所の空気感を伝える写真を混ぜる。
• 素材（卵・粉・ナッツ）は布の上に器ごと並べて俯瞰で撮る。
• 装飾は灰色の手描きの楕円線と、散らした小さな点だけにする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC ではファーストビューを横長にし、左上にロゴと縦並びのナビを置く。
• PC のストーリーは写真を左右へ大きく散らし、余白を広くとった自由な配置にする。
• PC の写真モザイクは横に広げ、テイクアウトの写真は 4 枚横並びにする。
• PC の店舗情報はロゴとテーブルを 2 カラムで並べる。
• 縦書きのセクションラベルは PC でも左端に残す。

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