DESIGN.md — 生成りと焦げ茶のレトロ喫茶作業カフェ LP（Retro Kissaten Workspace Cafe LP）

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

Overview

• 業種: 飲食店・レストラン ／ 雰囲気: レトロ、上品・高級、ナチュラル、やさしい・柔らかい
• キーワード: 純喫茶・アーチ窓・縦書き・生成り紙・焦げ茶・ステンドグラス
• 地の質感: うっすら粒感のある生成り紙のような背景。写真は暗めで温かい色調の店内写真。
• 形: 上が半円のアーチ型写真、角を内側にえぐった額縁型のメイン写真、ピル型ボタン
• 温度感: 暖色寄り。ベージュと焦げ茶が中心で、オレンジ寄りの茶色をアクセントに使う

Colors

• 地は生成りベージュ1色で通し、白い面はカードとボタンに限る
• 見出しは茶色、本文は茶黒にして、純黒は使わない
• 主CTAは焦げ茶の面にオレンジ茶の縁取りと右向き矢印をつける
• アクセスは濃いこげ茶、フッターはモカ色にして、ページの終わりを暗く落ち着かせる
• 鮮やかなオレンジはインラインのリンク強調だけに使う
• 写真は暗めで温かい色を基本にし、色鮮やかなドリンクで差し色を入れる

Typography

• 導入文は縦書きにして右から左へ段を並べ、和の喫茶店らしさを出す
• セクション見出しは、英字ラベル＋短い下線＋茶色の2行和文の3段で組む
• 本文は太めのゴシックで行間を広く取り、左揃えにする
• 画面の左右端に店情報を小さな縦書きで置き、余白の飾りにする
• 字間はやや広めにとり、詰めた組み方はしない
• 写真上の商品名と価格は白い縦書きで端に寄せる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真はほぼ全幅、本文は左右に約20pxの余白
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 120px、基本単位 8px、カード内 24px（375px 幅換算）
• セクションの間は100〜140pxと大きく空け、ゆったりさせる
• 見出し→アーチ写真→ページ送りドット→本文→CTA の順を繰り返す
• 写真の下に小さなドットを置き、スライダーであることを示す
• CTAボタンは中央に置き、幅は画面の約75%
• アクセスは左に縦長の写真帯、右に濃色面の情報を置く2分割にする

Elevation & Depth

• 影はほぼ使わず、平面で組む
• カードは白い面と大きめの角丸だけで地から浮かせる
• ボタンは影ではなく縁取りで立体感を出す

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 上が半円のアーチ型（下の角は小さな角丸）。メイン写真は四隅を内側に丸くえぐった額縁型にし、ゴールドの枠で囲む
• セクション境界: 直線で切り替え、色の面を変えるだけ（波線や斜線は使わない）
• 写真はアーチ窓の形を基本にする
• ボタンは完全なピル型にする
• バッジは小さな角丸で、細い枠線だけにする
• 背景には大きな淡い文字や曲線の図形をうっすら敷いてよい

Components

• 主CTAボタン（button-primary）: 焦げ茶のピル型に、オレンジ茶の太い縁取り。白い太字のラベルと、右端にオレンジの矢印をつける
• 外部サービス参加ボタン（button-outline-brand）: 白いピル型にオレンジ茶の太い枠線。左にサービスのロゴ、縦の区切り線、右にラベルを置く
• 濃色面の白ボタン（button-white）: 濃いこげ茶の面の上に置く白いピル型ボタン。茶黒の文字と右矢印
• 英字ラベル見出し（section-label）: 字間を広げた英字の小見出しの下に、約70pxの短い横線を引き、その下に茶色の2行和文見出しを置く
• 準備中バッジ（badge-status）: 見出しの下に置く、細い枠線だけの小さな角丸ラベル
• アーチ写真スライダー（arch-photo）: 上が半円の縦長写真。下にページ送りのドットを並べ、今のページだけオレンジ茶にする
• 箇条書きカード（list-card）: 白い角丸カードに、茶色の点つき箇条書きを5項目ほど並べる
• 写真上の縦書きタグ（vertical-tag）: 写真の右端に重ねる白い小さな縦長札。茶色の縦書きで機能を書き、段違いに並べる

Do's and Don'ts

Do - 地は生成りベージュで通し、純白の背景にしない - 写真はアーチ窓か額縁の形で切り抜く - 導入文は縦書き、本文は太めのゴシックで行間を広くする - 見出しは英字ラベル＋短い線＋茶色の和文の3段にする - CTAは焦げ茶のピル型に、オレンジ茶の縁と矢印をつける - セクション間の余白はたっぷり取る

Don't - 青や緑などの寒色をUIの色に使わない（写真の中だけにする） - 純黒の文字や、くっきりした影を使わない - 四角い写真をそのまま並べない - セクションの間を詰め込まない - ポップな丸ゴシックや手書き文字を使わない - 鮮やかなオレンジを広い面に使わない

Page Structure

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

1. ファーストビュー（店の世界観とロゴを最初に見せる）: 中央に線画のレトロなロゴ。その下に額縁型の店の写真を置き、左右の端に営業時間と所在地を小さな縦書きで添える
2. コンセプト導入（どんな店かを短く伝える）: 太字の1行見出しの下に、縦書きの本文を2つのブロックに分けて置き、その下に小さなアーチ写真を1枚置く
3. 特長1（一番の強みを伝える）: POINTの英字ラベルと見出し、全幅のアーチ写真スライダー、ドット、左揃えの本文
4. 特長2（2つ目の強みと準備中の機能を伝える）: 同じ見出しの型に準備中バッジを足し、アーチ写真・本文・主CTAを並べる
5. メニュー（飲み物の魅力を見せて来店したくさせる）: アーチ写真に縦書きで商品名と価格を重ね、本文とメニューCTAを置く
6. オンラインコミュニティ（常連向けのオンラインの場に誘う）: 背景に大きな淡い装飾文字を敷き、写真に縦書きタグを重ね、白い箇条書きカードと外部サービスのボタンを置く
7. アクセス（場所と営業情報を伝える）: 左に店頭写真の帯、右に濃いこげ茶の面。淡い色の英字見出しと住所・電話番号、白い地図ボタン
8. フッター（ブランドの印象で締めくくる）: モカ色の面の中央に、ステンドグラス風のイラストロゴと線画ロゴを大きく置き、端に縦書きのコピーライト

Imagery

• 店内やカウンターを暗めの露出で撮り、ペンダントライトの温かい光を生かす
• 木の質感、レンガ、黒い機材など、落ち着いた素材のアップを撮る
• クリームソーダなど色鮮やかなドリンクで、写真の中だけに差し色を入れる
• ロゴやイラストはステンドグラス風の太い線の幾何学模様にする
• 人物は横顔や手元にとどめ、主役は空間と商品にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC も 1 カラムの中央揃えで、本文の幅は約600pxに絞る
• PC のアーチ写真は中央に1枚、左右に次の写真がはみ出して見えるカルーセルにする
• PC のファーストビューは横長の額縁写真にし、左右の端に縦書きの飾りを残す
• PC のアクセスは、写真と濃色面を左右半分ずつの2分割にする
• PC のボタンは小さめで、幅およそ250pxにする

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