DESIGN.md — チョコ茶×ミルクティー色のレトロ喫茶コラボLP（Vintage Chocolate Cafe Collaboration LP）

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

Overview

• 業種: 飲食店・レストラン ／ 雰囲気: レトロ、上品・高級、やさしい・柔らかい
• キーワード: クラシック喫茶・チョコレートブラウン・ミルクティーベージュ・レース縁・月桂樹・セリフ数字
• 地の質感: 斜めストライプ地と、薄い葉の線画を散らしたテクスチャ。ベタ一色の面は使わない
• 形: 両端を矢羽型に切ったリボン帯の見出し、細い二重罫の外枠、波形のスカラップ境界
• 温度感: 暖色。茶系のトーンだけでまとめ、彩度を抑えたやわらかな温かみ

Colors

• 地はミルクティーとモカを交互に置き、上下はチョコ茶で締める
• 見出し帯・ボタン・バッジはすべてチョコ茶に白文字で統一
• 色相は茶系だけにする。差し色は植物の緑とリンクの水色だけ
• ベージュ地にはストライプか葉柄を薄く重ねる
• 注意事項は暗いモカ地に白文字で目立たせる
• 黒は使わず、いちばん濃い色もチョコ茶にする

Typography

• 英字はクラシックなセリフ体、日本語はゴシック体で組む
• 日付は「年・月日・曜日」を三段に組み、月日を大きく見せる
• セクション見出しは英字を大きく、日本語を小さく下に添える
• 見出しの左右には「• •」の小さな点飾りを付ける
• 本文は中央揃えで短い行にする。注意事項だけ左揃えの箇条書きにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。フッターのリンクだけ 2 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 60px、基本単位 8px、カード内 12px（375px 幅換算）
• 画面の両端に細い二重罫の縦枠を通し、額縁に見せる
• FV のキービジュアルは上下にレース縁を付けた額装にする
• セクション見出しの上に小さなロゴ型のエンブレムを置く
• ニュースは日付・カテゴリバッジ・本文・右矢印を罫線で区切ったリストにする
• セクションの左右に植物の装飾をはみ出させて置く

Elevation & Depth

• 影はほとんど付けず、平面的にする
• 奥行きは地色の濃淡と柄の重ねで出す
• 注釈ボックスは半透明の濃い面で、わずかに沈んで見せる

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: キービジュアルは長方形で、上部にレースのカーテン縁を重ねる
• セクション境界: ベージュとモカの境界は波形のスカラップ。フッターとの境界は直線
• 見出し帯は両端を矢羽型に切り込んだリボン形
• ボタンはピル型の濃茶面か、二重線で縁取ったピル型
• カテゴリバッジは角丸の小さな濃茶タグ
• 四隅に星の飾りを付けた二重罫の枠を使う

Components

• リボン帯見出し（ribbon-heading）: 両端を矢羽型に切った濃茶の帯。白いセリフ英字を点飾りで挟み、下に罫線で挟んだ日本語を添える
• 開催期間ブロック（date-block）: 大きなセリフ数字で開始日〜終了日を組み、左右を月桂樹の飾りで挟む。地名は小さなリボン帯にのせる
• 濃茶ピルボタン（button-pill-dark）: 横長の細いピル型。白文字の後ろに小さな三角矢印を付ける
• 二重線ピルボタン（button-outline）: ベージュ地の上に置く、濃茶の二重線で縁取ったピル型ボタン。右端に三角矢印を付ける
• ニュースリスト（news-list）: 日付と濃茶のカテゴリタグを横に並べ、その下に本文を置く。行は細い罫線で区切り、右端に矢印を付ける
• 注釈ボックス（note-box）: やや濃いベージュの面に、小さな文字の箇条書きを入れる
• 左右罫線タイトル（line-title）: 中央の見出し語を、左右の二重横線で挟む
• フッターリンク群（footer-links）: 濃茶地に、白いセリフ見出しと下線を置く。その下にハイフン付きのリンクを 2 列で並べる

Do's and Don'ts

Do - 地色・ボタン・文字を茶系のグラデーション段階で統一する - 見出しはリボン帯と点飾りの型を必ず繰り返す - ベージュ地には斜めストライプか葉柄を薄く敷く - 両端の縦罫と縦書きの英字で額縁感を出す - 日付は大きなセリフ数字で主役にする

Don't - 原色や蛍光色を使わない - 角丸の大きいカードや強い影を使わない - ポップな丸ゴシックで見出しを組まない - 無地のベタ面だけのセクションを作らない - ボタンを太く大きくしすぎない。細身で控えめにする

Page Structure

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

1. ヘッダー（ロゴとナビを示す）: 濃茶の帯の中央にエンブレム型ロゴを置き、右にハンバーガーメニューを置く。下端はレース縁にする
2. ファーストビュー（キャラクターと世界観を見せる）: ストライプ地の上に、額装したキービジュアルを大きく置く
3. 開催概要（会場と開催期間を伝える）: 店舗名のセリフ見出し、地名リボン、月桂樹で挟んだ大きな日付を会場ごとに縦に並べる
4. 安全への取り組み導線（補足ページへ誘導する）: 横長の濃茶ピルボタンを 1 本置く
5. ニュース（最新情報を伝える）: スカラップで区切ったモカ地にリボン見出しを置き、罫線区切りのリスト 4 件と MORE ボタンを並べる
6. 予約案内（予約方法と受付状況を伝える）: ベージュ地に中央揃えの案内文を置く。罫線見出しで受付期間を示し、二重線ボタンと注釈ボックスを続ける
7. 注意事項（来店時のルールを伝える）: 暗いモカ地に、左右罫線のタイトルと白文字の箇条書きを置く
8. フッター（シェア・リンク・SNS をまとめる）: 濃茶地に白いロゴ、SHARE アイコン、2 列リンク、埋め込みタイムライン、コピーライトを並べる

Imagery

• メインはアニメ調のキャラクター集合イラスト。レンガ壁と階段のある洋館の室内を背景にする
• 四隅や両端に、写実的な観葉植物の葉をはみ出させて置く
• レースのカーテン縁、月桂樹のシルエット、星の飾りを装飾に使う
• 背景には葉の線画を、地色より少し濃い色で散らす
• ロゴは手描き風の飾り文字と星を組んだエンブレム型にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はヘッダーのロゴ左右に、英字と日本語を二段にしたナビを並べる
• PC の開催概要は、会場を左右 2 カラムに並べて縦罫で区切る
• PC のニュースは日付・タグ・本文を 1 行の横並びにする
• PC のフッターは、ロゴ・リンク・SNS の 3 カラムにする
• 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 行書くと起動時に読み込まれる。