DESIGN.md — 深緑×生成り和紙の手書き風サンドイッチ店 LP（Deep Teal & Washi Handwritten Sandwich Shop LP）

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

Overview

• 業種: 飲食店・レストラン ／ 雰囲気: ナチュラル、上品・高級、親しみ・手作り感、やさしい・柔らかい
• キーワード: 和紙テクスチャ・深緑ティール・手書きコピー・縦書き明朝・斜めレイアウト写真・カフェ
• 地の質感: 淡い生成りの紙の質感。ざらつきのあるマットな地
• 形: 角丸なしの四角が基本。写真は少し傾けて重ね、台形に切り抜く
• 温度感: 温かみのある中間色。深緑で引き締める

Colors

• 地は生成りの紙色を基本にし、セクションの切り替えに灰がかった地や深緑の帯を使う
• 深緑はヘッダー・カフェ紹介帯・フッター情報・ボタンだけに使う
• 強い色の面は使わない。暖色は料理写真のパンの焼き色にまかせる
• 文字は真っ黒にせず、紺がかった墨色にする
• 濃色の上では白文字と細い白線のボタンを使う

Typography

• 本文は明朝体で字間を広めに、行間は2倍前後にする
• 店の紹介文は縦書きにする
• 手書き風コピーは写真の端に重ねて置く
• 欧文スクリプト見出しは日本語見出しの上に重ね、少し傾けてもよい
• 太字は使いすぎず、ウエイト差より大きさで階層をつける
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は写真と文字の左右 2 カラム、カードは 3 列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• 左右の端に細い縦線を引き、ページ全体を枠で囲む
• 写真は画面端まで出したり、左右にずらしたりして非対称に置く
• 余白を広く取り、文字量は少なめにする
• カードは縦長の写真と小さな View more ボタンを組み合わせる
• 要所に丸い回転テキストのスタンプ（予約誘導）を浮かせる

Elevation & Depth

• 影はほぼ使わず、平面的にする
• 写真を重ねるときだけ、ごく弱い影を落としてよい
• お知らせ枠は白地と細い線だけで浮かせる

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角か台形に切り抜き、少し傾けたり重ねたりする
• セクション境界: 直線。斜めに切った写真や濃色帯で区切る
• 角丸は使わない
• ボタンは細長い長方形で、右端に矢印を付ける
• 写真は2〜5度傾けて置いてもよい
• 枠の角にL字の細線を添える

Components

• 深緑の長方形ボタン（button-primary）: 小さめの長方形で、白い明朝体の文字と右端の矢印を入れる
• 濃色帯の白線ボタン（button-outline-dark）: 深緑の上に置く、白い細線の枠だけのボタン
• 欧文スクリプト見出し（heading-script-overlay）: 大きな筆記体の英字に、手書きの日本語や小さな明朝体の日本語を重ねる
• お知らせパネル（news-panel）: 白地の枠の角にL字線を添え、電話番号の帯と日付リストを入れる
• 商品ラインナップカード（lineup-card）: 白地に縦長の写真を入れ、縦書きの商品名と筆記体のラベルを重ね、下に View more を置く
• 回転テキストの丸スタンプ（stamp-circle）: 円に沿って英字を回し、中央に予約誘導の小さな文字を入れる
• 番号付きサービスカード（numbered-card）: 手書き風の数字と英字の大見出しの下に写真を置き、縦書きの説明を添える
• 店舗情報テーブル（info-table）: 深緑の地に、項目名と内容を2列で並べる白文字の表

Do's and Don'ts

Do - 紙のような質感の生成り地を全体に敷く - 手書き風コピーを写真の角に重ねる - 縦書きの明朝体で店の紹介をする - 深緑を締め色として少しだけ使う - 写真はずらし、傾け、はみ出させて手作り感を出す

Don't - 角丸のボタンやポップな原色を使わない - 太いゴシック体で大きく売り込まない - 写真をきっちり揃えたグリッドに並べすぎない - 強い影やグラデーションの面を使わない - 本文の行間を詰めない

Page Structure

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

1. ヘッダー（ナビゲーションと予約電話への導線）: 深緑の帯に白いロゴ、ナビ、電話番号、SNSアイコンを並べる
2. ファーストビュー（看板商品のシズル感で引き込む）: 商品を大きく写した写真を台形に切り、手書きコピーと縦書きの英字を重ねる
3. お知らせ（最新情報と予約方法を伝える）: 生成り地の上に白いパネルを置き、電話番号の帯、日付リスト、採用ボタンを入れる
4. 店の紹介（スタッフと店の歴史で親しみを伝える）: 横長のスタッフ写真に欧文スクリプトを重ね、下に縦書きの紹介文と線画のイラストを添える
5. こだわり（素材と製法の品質を伝える）: 左に写真を縦に3枚積み、右に手書きの見出し、本文、ボタンを置く
6. ラインナップ（定番商品を紹介する）: 灰がかった地に縦長のカードを3枚並べ、筆記体のラベルとメニューボタンを入れる
7. カフェ紹介（イートインの利用を案内する）: 斜めに切った写真の下に深緑の帯を敷き、白文字と白線のボタンを置く
8. デリバリー案内（宅配と大口注文へ誘導する）: 大きな筆記体の見出しの下、左に文章とボタン、右にはみ出す写真を置く
9. サービス導線（カフェと宅配の詳細ページへ送る）: 番号と英字の見出しを付けたカードを2枚並べる
10. 写真ギャラリー（店の雰囲気を見せる）: 大きさの違う写真を散らして重ね、画面端にもはみ出させる
11. 地図・店舗情報（アクセスと営業情報を伝える）: 全幅の地図の下に、左は白地のロゴと連絡先、右は深緑の情報テーブルを置く

Imagery

• 自然光で撮った料理写真。断面を寄りで撮り、パンの焼き色を活かす
• 笑顔で働くスタッフの店内写真
• ショーケースや仕込みの様子など、手仕事が伝わるカット
• 食材を描いた細い線画のイラストを余白に散らす
• 写真は彩度を少し抑え、温かい色味にそろえる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP では写真と文字のカラムを縦に積み、写真を先に置く
• 縦書きの本文は SP では短く区切るか、横書きに切り替える
• 3列のカードは SP では横スクロールにするか、1列に積む
• ヘッダーのナビは SP ではハンバーガーメニューにし、電話ボタンを固定する
• 写真の傾きやはみ出しは SP では控えめにする

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