DESIGN.md — 白×薄グレー×焦茶の和モダン茶カフェ LP（Modern Japanese Tea Cafe Brand Site）

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

Overview

• 業種: 飲食店・レストラン ／ 雰囲気: シンプル・ミニマル、上品・高級、和風、ナチュラル
• キーワード: 和モダン・余白・欧文見出し・円形矢印ボタン・焦茶フッター・写真主体
• 地の質感: フラットな単色面と写真。木目・レンガ写真をバナー背景に使う
• 形: 角丸なしの四角い写真と面。ボタンだけ正円の枠線
• 温度感: やや暖かいニュートラル。グレーとベージュに焦茶を合わせる

Colors

• 地は白。セクションの片側に薄グレーやベージュの帯を敷いて区切る
• 文字は黒見出しとグレー本文の 2 段階のみ
• 有彩色は写真に任せる。UI に色はほぼ使わない
• フッターとお問い合わせは焦茶グレーの暗い面で締める
• 緑は SNS（LINE）や FV のアクセントに限定する
• 金の細線はギフト系バナーの枠だけに使う

Typography

• 見出しは欧文の大文字で書き、和文は添える程度にする
• 和文本文は細めにし、字間をやや広く取る
• 本文はグレーにして黒見出しとの差をつける
• 装飾の欧文は字間を極端に広げ、写真と帯の境目にまたがせる
• 日付は欧文数字にし、本文より小さい灰色にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。メニューは 3 列、写真は 2〜3 列の横並び
• 本文ブロックの幅: 画面幅の約 89%
• 余白: セクション間 64px、基本単位 8px、カード内 0px（375px 幅換算）
• 左右余白は 21px 前後
• 見出し左・スライダー矢印右の配置で揃える
• カードは枠なし。写真の下に日付と文字を置く
• VIEW MORE はセクション右下に置く
• グレー帯は画面端から裁ち落としで敷き、反対側に余白を残す

Elevation & Depth

• 影は基本使わない
• 奥行きは帯の重なりと写真の裁ち落としで作る
• 写真上の文字には暗いオーバーレイを敷いて読ませる

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの矩形。正方形〜4:3 で裁ち落とす
• セクション境界: 直線。背景色の切り替えと全幅写真で区切る
• 丸は矢印ボタンとスライダードットだけ
• タグは細い線の四角枠にする
• 四角い枠線ボタンは写真の境目に重ねて置く

Components

• 円形矢印ボタン（button-circle-more）: 欧文ラベルの右に、細い線の正円と小さな三角を置く
• 四角い枠線ボタン（button-outline-box）: 白地に黒の細枠を付け、欧文を中央に置く。写真の下端にまたがせる
• スライダー送り矢印（slider-arrows）: 見出しの右に小さな正円を 2 つ並べる。前へはグレー、次へは黒
• カテゴリタグ（tag-outline）: 細いグレー枠の小さな四角に、カテゴリ名を入れる
• 絞り込みタブ（filter-tabs）: 選択中のタブだけ薄グレーで塗る。ほかは文字のみ
• イベント記事行（event-list-item）: 左にタイトル・タグ・日付・本文、右に正方形の写真を置き、下に区切り線を引く
• 写真背景バナー（photo-banner）: 暗い写真の上に字間の広い白い欧文タイトルを置く
• フッターナビ（footer-nav）: 焦茶の面に白い欧文メニューを並べ、細い白線で区切る

Do's and Don'ts

Do - 余白を広く取り、写真に語らせる - 見出しは欧文大文字にし、和文は小さく添える - ボタンは細い線の円形か四角枠に統一する - セクションの片側だけに薄グレー帯を敷き、リズムを作る - 最下部は焦茶の暗い面で締める

Don't - 鮮やかな塗りボタンや角丸カードを多用しない - 影やグラデーションの装飾を付けない - 本文を太字や大きな文字にしない - UI に複数の有彩色を使わない - 文字を写真の上に詰め込まない

Page Structure

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

1. ヘッダー（ロゴとメニューへの導線）: 白地の中央にロゴ、右にハンバーガーメニューを置く
2. ファーストビュー（商品と空間の世界観を伝える）: 全幅の写真スライダーにドットを付け、下にメッセージを 2 行で中央揃えにする
3. お知らせ（最新情報を伝える）: 欧文見出しと矢印を置き、横スクロールのカードと円形 VIEW MORE を並べる
4. コンセプト（ブランドの思想を伝える）: 全幅写真に白い欧文見出しと 1 行コピー、円形ボタンを重ねる
5. メニュー紹介（提供する商品の柱を示す）: ベージュ帯に字間の広い欧文装飾と中央揃えの本文を置き、写真 3 列の下にラベルを付ける
6. イベント（体験企画への誘導）: 絞り込みタブの下に、線で区切ったテキストと写真の記事リストを並べる
7. 店舗案内（実店舗への誘導）: 写真 2 枚を横に並べ、下端に枠線ボタンを重ねる
8. ギフト・EC 誘導（ノベルティとオンラインショップへ誘導する）: 金線で囲んだ淡色のバナーと、暗い商品写真に欧文を載せたバナーを置く
9. 新商品（商品を紹介する）: 薄グレー帯の上で、商品写真カードを横スクロールさせる
10. SNS（SNS への導線）: 小さな欧文見出しの下に、埋め込みフィードとギャラリーグリッドを置く
11. バナー群（LINE・予約・採用への導線）: 写真や単色のバナーを縦に並べる
12. お問い合わせ・フッター（連絡先とサイトマップを載せる）: レンガ写真に欧文見出しと円形ボタンを置き、焦茶の面にロゴ・電話番号・ナビを並べる

Imagery

• 自然光で撮った落ち着いた店内や庭の写真に、人物が茶を淹れる所作を入れる
• 料理と菓子は器ごと斜め上から撮り、木の卓に載せた実物感を出す
• 商品は白や淡いグレーの背景で物撮りする
• バナーの背景には暗い木目・レンガ・店内写真を使う
• イラストは使わず、写真と欧文タイポで構成する
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はヘッダーに横並びのグローバルナビを置く
• PC の FV は右寄せの写真にし、左に縦書きのメッセージを置く
• PC のイベントは左に見出しとタブ、右に記事リストの 2 カラムにする
• PC の新商品カードは 5 列、SNS は 2 列に並べる
• PC はコンテンツ幅を約 80% にし、余白をさらに広く取る

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