DESIGN.md — ラズベリー×焦げ茶のレトロ喫茶店 LP（Retro Kissaten Raspberry Cafe LP）

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

Overview

• 業種: 飲食店・レストラン ／ 雰囲気: レトロ、親しみ・手作り感、かわいい、やさしい・柔らかい
• キーワード: 昭和喫茶・ラズベリーピンク・焦げ茶・和紙テクスチャ・スクリプト英字・時間帯メニュー
• 地の質感: 生成りの和紙風ノイズ地、焦げ茶のダイヤ柄地、白ドット柄ラベル、ピンク地に線画アイコン柄
• 形: 角を斜めに落とした八角形カード、半円・円弧の境界、波形の帯、角丸の白カード
• 温度感: 暖色寄りで温かい。ピンクと茶で甘さと落ち着きを両立

Colors

• 地は白・淡ピンク・生成り・焦げ茶をセクションごとに切り替え、隣り合うセクションで同じ地を続けない
• ラズベリーピンクは英字見出し・ボタン枠・矢印・白抜き見出し帯・フッター最下部に限定する
• 焦げ茶はお知らせなど情報帯の地と、見出し・本文の文字色に使う。真っ黒は使わない
• 濃色地上はラテ色見出しと白カードの組み合わせにする
• タグや飾り線はラテブラウンの細線で控えめに

Typography

• 見出しは大きい英字と小さい日本語の2段で組む
• 日本語は太めのゴシックで字間を広めにとる
• 筆記体英字は写真カードの角に斜めに重ね、ピンクで入れる
• 本文は行間2倍前後でゆったり組む
• 英字ラベルは全て大文字＋広めの字間
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。フッターのリンクだけ 2 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算）
• カードは左右 22px 前後の余白で中央に置く
• メニューカードは縦に積み、カード間 24px
• 見出しの上下は 32〜48px 空ける
• ボタンは幅 80% 程度の横長で縦に並べる
• FV は写真を3段に積み、時間帯ラベルを交互に左右へ置く

Elevation & Depth

• 白カードはごく薄い影（0 2px 8px rgba(0,0,0,.06)）
• 枠線ボタンは影なしで下辺だけ太い線にして立体感を出す
• 写真背景リンクは暗めの半透明を重ね、白の点線枠を内側に入れる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸の長方形。FVは全幅の横長、こだわり訴求はPCでアーチ型
• セクション境界: 波形の帯・大きな円弧のピンク線・半円ラベル・ひし形付きの飾り線
• お知らせカードは四隅を斜めに切った八角形
• 時間帯ラベルは白ドット柄の大きい円を写真の端から出す
• 丸矢印ボタンは直径28px 前後の正円
• セクション境界は直線より円弧や波を優先する

Components

• 枠線ボタン（button-outline）: 白地にピンク2px枠、下辺だけ太い線。左寄せの文字と右端の小さな矢印
• 丸矢印（circle-arrow）: ピンクの正円に白の山形矢印。カード右端に置く
• 一覧リンク（text-link-more）: 太字テキストの右に線画の丸矢印を添える
• 時間帯ラベル（time-label）: 白ドット柄の大きい円に、セリフ英字の時間帯と時刻を下線付きで入れる
• お知らせカード（news-card）: 焦げ茶地の上の八角形白カード。日付・ラテ色枠タグ・2行タイトル・右矢印
• メニューカード（menu-card）: 白の角丸カードに写真と太字の名前、右に丸矢印。角に筆記体英字を斜めに重ねる
• 英字＋和文見出し（heading-en-ja）: 点線の弧の下に、カトラリーアイコンで挟んだピンク英字と小さい和文
• 白抜き見出し帯（highlight-band）: 1行ずつピンク地の帯に白文字を載せて重ねる
• 写真リンクカード（photo-link-card）: ぼかし写真に暗いオーバーレイ、白点線枠、線画アイコン＋和文＋英字、右に白丸矢印
• フッターナビ（footer-nav）: 2カラム。和文の下にピンク英字、下に淡ピンクの区切り線

Do's and Don'ts

Do - 料理写真は暖色の木のテーブルで大きく見せる - 見出しは英字と和文を必ず組み合わせる - ドット柄・和紙調・ダイヤ柄など、地に軽い質感を入れる - ピンクと焦げ茶の2軸で色数を絞る - 円弧や波でセクションのつなぎを柔らかくする

Don't - 寒色や蛍光色を主役にしない - 純黒の文字や地を使わない - 角ばったフラットな箱だけで組まない - 筆記体を本文や長い見出しに使わない - ピンクの面を広く使いすぎない（帯・ボタン程度に抑える）

Page Structure

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

1. ヘッダー（ブランド表示と導線）: 淡ピンク地。左に丸ロゴ、SNSアイコン、右にピンク3本線メニュー
2. ファーストビュー（時間帯ごとの看板メニュー訴求）: 料理写真を3段に積み、ドット柄の円ラベルを交互に配置。下にアイコン柄のピンク波形帯と白キャッチ
3. 新商品・キャンペーン（最新の施策告知）: 淡ピンク地。角かっこ付きの英字ラベルと和文見出し、バナースライダー、一覧リンク
4. お知らせ（ニュースの一覧）: 焦げ茶のダイヤ柄地に八角形の白カードを3枚。上下にひし形付きの飾り線
5. メニュー紹介（時間帯別メニューへの誘導）: 生成り和紙地。英字見出し、リード文、筆記体付き写真カードを4枚、枠線ボタンを2つ
6. こだわり（店づくりと味の価値を伝える）: 店内・接客写真2枚の上に大きな白の円弧。ピンクの白抜き帯見出し、ピンク本文、線画の豆イラスト
7. 企業・店舗導線（会社紹介と店舗検索へ誘導）: 背景に大きな白抜き英字。ぼかし写真＋点線枠のリンクカード2枚
8. フランチャイズ募集（加盟希望者の獲得）: クリーム地にドットの地図、レンガ風ブロック、円で切り抜いた店内写真、大きなセリフ英字
9. フッター（採用バナーとサイトマップ）: 淡ピンク地。ロゴ、斜め分割の採用バナー、2カラムのナビ、説明文、ピンクの最下帯

Imagery

• 料理は斜め上から自然光で、木目テーブルと店のロゴ入り白食器を写す
• 色味は暖かく、少し彩度高めで焼き色やソースのつやを強調
• 店内写真は木と暖色照明。スタッフは制服で笑顔の接客
• 線画イラスト（コーヒー豆・カップ・カトラリー）をピンクの細線で添える
• ドット柄、白線アイコンの柄、レンガ風ブロック、点描地図を装飾に使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は FV 写真を横3列に並べ、時間帯ラベルを各写真の上下に配置
• キャンペーンは左に見出し、右にバナー2枚の横並び
• お知らせは左に縦書き見出し、右にカード一覧
• メニューは 2×2 カードの左に、右側へ見出しとボタン
• こだわりは中央の円の左右にアーチ型の写真。導線カードは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 行書くと起動時に読み込まれる。