DESIGN.md — 和紙地×青緑筆跡のアジア料理店 LP（Textured Brushstroke Asian Bistro LP）

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

Overview

• 業種: 飲食店・レストラン ／ 雰囲気: 上品・高級、ナチュラル、和風
• キーワード: 和紙テクスチャ・青緑の筆跡・欧文セリフの大見出し・縦書き明朝・料理写真の重ね・竹編みと木目
• 地の質感: 生成りの和紙・紙ムラ地。墨のかすれた筆跡、竹編みや木目の額縁、ハーブを散らしてボケさせた写真を重ねる
• 形: 基本は角丸なしの直線。細い罫線の額縁、筆跡のギザギザ、円形のバッジ、波打つ破れ紙の境界
• 温度感: 暖かいベージュと茶に、青緑・濃紺の寒色で異国らしい涼しさを足す

Colors

• 地は生成りの和紙が基本。料理と酒の場面だけ写真全面か焦げ茶・濃紺に切り替える
• 青緑はブランドの筆跡、横長ボタン、円形の追加料金バッジにだけ使う
• 予約ボックスは焦げ茶の地に竹編みの額縁で、ページ内に繰り返し置く
• 文字は墨色の黒にして、純黒の多用は避ける
• 暗い地の上の文字は白い明朝にして、細い白罫線を添える
• コースの出し分けボタンはグレーブラウン（#706860 前後）にする
• button-menu は文字 #EEEBE8 × 背景 #5D948E のコントラスト比が 2.9:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#47726D、4.54:1）を使う。
• badge-circle は文字 #FDFBF7 × 背景 #5D948E のコントラスト比が 3.34:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#4D7B76、4.61:1）を使う。
• notice-box は文字 #5F5A55 × 背景 #C7C6C3 のコントラスト比が 3.99:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら surface-accessible（#D3D3D0、4.54:1）を使う。

Typography

• 和文は見出しも本文もすべて明朝体で統一する
• セクション名は大きな欧文セリフを画面幅いっぱいに置き、写真と重ねてもよい
• 写真の上の欧文は白の半透明にして縦書きに配置する
• キャッチは縦書きの明朝で、字間を広めに取る
• 筆記体の英字を見出しの右上に青緑で斜めに添える
• 本文は小さめにして、行間を広く取る
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は左右どちらかに寄せて重ねる
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• 写真を画面端まで裁ち落とし、テキストブロックと互い違いに置く
• 料理写真の上に細い罫線の額縁を少しずらして重ねる
• ボタンは幅の 92% に広げた横長の帯にする
• セクションの頭に巨大な欧文見出しを置いて区切る
• 店舗情報は罫線区切りの 2 列の表組にする
• 画面下にメニュー 4 分割の固定バーを置く

Elevation & Depth

• 影はほとんど使わない
• 奥行きは写真・額縁・筆跡のレイヤー重ねで出す
• 注意書きは半透明の面と太い白枠で浮かせる
• 手前にボケたハーブ葉を配置して被写界深度の奥行きを出す

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの矩形写真と、皿だけを切り抜いた写真を組み合わせる
• セクション境界: 筆のかすれ・破れ紙のギザギザした境界と、緩やかな円弧
• ボタン・カードは直角にする
• 丸は追加料金バッジとスライダーのドットだけに使う
• 筆跡はかすれた太いストロークで斜めに走らせる
• 額縁は 1px の細線か竹編みテクスチャで作る

Components

• メニュー誘導ボタン（button-menu）: 青緑の横長帯。欧文セリフのラベルを中央に置き、右端に外部リンクアイコン
• 予約ボックス（reserve-box）: 焦げ茶地を竹編みの額縁で囲む。明朝の見出し、電話番号、罫線、枠線ボタンの順に並べる
• 欧文大見出し（heading-display）: 幅いっぱいの欧文セリフ。筆記体の英字を添えて、写真と重ねる
• 料理スライド（dish-slide）: 全面写真にベージュの半透明枠を重ねる。縦書き欧文、番号ドット、白い明朝の料理名と価格を置く
• コースカード（course-card）: 白の半透明カード。コース名と価格を中央に置き、罫線の下に品目を 2 列で並べる
• 円形バッジ（badge-circle）: 青緑の円に、追加料金の案内を白い明朝で入れる
• 注意書きボックス（notice-box）: グレーの半透明面に太い白枠。中央揃えの箇条を置く
• 固定ボトムバー（bottom-bar）: 焦げ茶地を点線で 4 分割し、予約・テイクアウト・電話・地図を並べる

Do's and Don'ts

Do - 地には和紙のテクスチャを敷く - 和文は明朝、英字は欧文セリフに統一する - 料理写真は大きく使い、額縁線や筆跡と重ねる - ハーブやスパイスを散らして手前をボカす - 予約導線を途中と末尾の 2 回以上置く - 暗いセクションは夜景・濃紺・焦げ茶で場面を切り替える

Don't - ゴシック体や丸ゴシックを使わない - 角丸のカードやピル型のボタンにしない - 彩度の高い赤やオレンジを UI の色にしない - フラットな白無地の背景にしない - 強いドロップシャドウを付けない - 青緑を本文の文字色に使わない

Page Structure

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

1. ファーストビュー（店の世界観を一目で伝える）: 料理の全面写真に、左上の青緑の筆跡とロゴを重ねる。手前にボケたハーブを置く
2. お知らせ（最新情報を出す）: 上下を罫線で挟み、欧文見出し、日付、枠線の小ボタンを置く
3. コンセプト（料理のこだわりを語る）: 縦書きキャッチと巨大な欧文見出しを置く。皿の切り抜きや調理写真と本文を互い違いに並べる
4. 料理と酒の提案（ペアリングの魅力を伝える）: 写真全面に縦書きの白い欧文と明朝のキャッチを重ね、筆跡を走らせる
5. 一品料理（看板メニューを紹介する）: 額縁付きの写真、料理名、説明、ボタンを置き、写真スライダーで品目を切り替える
6. コース（コースの内容と価格を示す）: 夕景の写真を地にして半透明のコースカードと円形バッジを重ね、グレーのボタンを置く
7. 予約 CTA（電話と WEB の予約へ誘導する）: 竹編み額縁の焦げ茶ボックスを置く
8. ドリンク（酒の品揃えを訴求する）: ボトル写真の上に半透明の欧文と明朝のリードを重ね、青緑のボタンを置く
9. ランチ・デザート（昼の利用を促す）: 竹編みの帯の上に料理写真を並べ、料理名ラベルを付ける。デザートは額縁写真と手書き風の注記で見せる
10. テイクアウト（弁当・オードブルを案内する）: 焦げ茶地に写真スライダーと注意書きボックスを置き、ボタンで締める
11. 店内紹介（空間の雰囲気を伝える）: 濃紺地に白線の間取り図と店内写真を置き、夜の外観へグラデーションでつなぐ
12. 店舗情報（アクセスと詳細を示す）: 青緑の筆跡見出し、予約ボックス、罫線の表、キャンセル規定、地図、ボタンの順に並べる
13. フッター（共有と著作権表記）: 竹の木目の地に白文字と SNS ボタンを置き、固定バーを付ける

Imagery

• 料理は暖色の自然光で寄りの俯瞰か斜めから撮り、背景は木のテーブルにする
• 皿ごと切り抜いて和紙の地に置き、余白を活かす
• 手前にボケたバジルやパクチーを置いて奥行きを出す
• ホールスパイスや乾燥ハーブを散らした素材写真を添える
• かすれた青緑の筆跡、線画の植物、竹編みのテクスチャで装飾する
• 夜景や夕景で旅の気分を演出する
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はサイドに縦並びのナビを固定し、ロゴの下に電話と予約ボタンを置く
• PC は写真とテキストを左右 2 カラムで重ね、雑誌風のコラージュにする
• 料理スライドは PC だと縦に並べて全品を見せる
• 予約ボックスは PC で電話と予約ボタンを横並びにする
• 店舗情報の表は PC で 2 列分割にする
• ボタンは PC で幅 60% 程度に縮めて中央に置く

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