DESIGN.md — 生成り×深緑×木目のレトロ焼肉店 LP（Retro Editorial Yakiniku Restaurant LP）

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

Overview

• 業種: 飲食店・レストラン ／ 雰囲気: レトロ、親しみ・手作り感、力強い・インパクト、ナチュラル
• キーワード: 雑誌風レイアウト・斜体の大きな欧文・二重罫線・木目テクスチャ・手書きのライン・市松模様
• 地の質感: 生成りの紙のような地、方眼紙の背景、木目の板、モノクロ写真で質感を重ねる
• 形: 角ばった写真と二重線の枠が中心。ボタンはピル型か楕円の線ボタン
• 温度感: 温かい。焼き色の茶とオレンジに深緑を合わせて落ち着かせる

Colors

• 基本の地は生成り。純白は使わない
• 深緑はブランド色。インフォ枠、地図、フッターの面に使う
• 店のこだわりは木目の焦げ茶地に白文字で見せる
• オレンジは手書き風の線と飾りだけに使い、文字には使わない
• 主 CTA は黒地に白文字の斜体で目立たせる
• 雰囲気を伝える写真はモノクロにして、中のカラー写真を際立たせる

Typography

• 欧文の大見出しは斜体の超太字にし、写真の端にはみ出して重ねる
• 和文の見出しは明朝で字間を広く取る。強調語は文字を大きくして傍点や括弧で目立たせる
• 本文は小さめのゴシックで行間を 2.0 にする
• PC のこだわりセクションは縦組みの見出しを使う
• ナビの英字は縦に並べる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真とテキストは縦に積む
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真は左右にずらして重ね、雑誌のコラージュのように配置する
• セクションの区切りに、ブランド名を流す英字の帯を入れる
• 店舗情報は点線区切りの 2 列の表にする
• メニュー紹介は写真とグレー地のテキストを半分ずつ並べ、交互に入れ替える
• 余白は広めに取り、欧文の大見出しで余白を締める

Elevation & Depth

• 影は基本的に使わず、フラットに仕上げる
• 立体感は写真の重なりと二重線の枠で出す
• モノクロ写真の上に、白枠付きのカラー写真を浮かせて置く

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 角丸なしの長方形。重ねたり裁ち落としたりする
• セクション境界: 直線の二重罫線、英字の帯、市松模様の帯
• 枠は太線と細線の二重線にし、角は大きく丸めた角丸か切り欠きにする
• アクセス図は円と点線で駅をつなぐ
• 線ボタンは細い線の楕円にする
• フッターの深緑の面は下の角を丸くする

Components

• 予約ボタン（button-primary）: 黒のピル型。白い斜体の文字に矢印を付ける
• 楕円の線ボタン（button-outline）: 細い黒線の楕円に英字と→。一覧・メニューへの誘導に使う
• お知らせ枠（info-card）: 深緑の見出しバーと深緑の線の角丸枠。中に中央揃えの告知を入れる
• 二重線の枠（double-frame）: 角を丸めた二重線の枠。上辺に英字の見出しを乗せる
• 英字の帯（marquee-band）: 上下を罫線で挟み、ブランド名の斜体英字を繰り返す
• 店舗情報の表（info-table）: 左に項目名、右に内容。行は点線で区切る
• アクセス図（access-circles）: 駅と店を太線の円で示し、足跡のアイコンと所要分数でつなぐ
• 手書き風の線（brush-line）: 見出しの下や写真の上に、オレンジの手書き風の曲線を引く

Do's and Don'ts

Do - 欧文の大見出しは斜体の超太字にし、写真に重ねる - セクションごとに地を変える（生成り・方眼・木目・モノクロ写真・グレー・深緑） - 二重罫線と英字の帯でレトロな印刷物らしさを出す - 手書き風のオレンジの線を見出しに添える - 和文は明朝で字間を広く取り、落ち着かせる

Don't - 純白の地やビビッドな原色を使わない - 影の強いカードやグラデーションのボタンは使わない - 写真に角丸を付けない - オレンジを面や文字の色に広げない - 欧文見出しを細い書体にしない

Page Structure

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

1. ファーストビュー（店の新しさと雰囲気を一目で伝える）: 店内写真を大きく置き、斜体の欧文 3 行を左端からはみ出して重ねる。上部に明朝のコピーとロゴ
2. お知らせ（最新情報を伝える）: 二重罫線で挟み、白抜きの大きな英字見出し、斜めに置いた写真、日付を並べる
3. ピックアップ情報（期間限定の告知を目立たせる）: 深緑の見出しバーが付いた角丸枠に、放射線の飾りを添える
4. コンセプト（ちょうどいい日常使いの店だと伝える）: 料理写真のコラージュと斜体の英字コピー、方眼紙の地に明朝の見出しと本文
5. こだわり（熟成肉）（商品の強みを説明する）: 二重線の角丸枠の中に肉の写真、注記、本文を入れる
6. 店の想い（丁寧な仕事ぶりを伝える）: 木目の焦げ茶地に縦長の写真 3 枚。縦組みの白い英字と和文の見出しを添える
7. 利用シーン（使い方をイメージさせる）: モノクロ写真の上に白枠のカラー写真を浮かせ、斜体の英字見出しと円形の回転テキストを置く
8. メニュー紹介（ディナーとランチの内容を伝える）: 写真とグレー地のテキストを半分ずつ並べ、交互に配置。楕円の線ボタンを付ける
9. 店舗情報（予約と基本情報を伝える）: ロゴ、二重線で挟んだ電話番号、黒の予約ボタン、点線区切りの表、二重線枠のキャンセル規定
10. アクセス（駅からの道のりを示す）: 斜体の太字見出し、円と足跡でつないだ駅の図
11. 地図（場所を確認させる）: 深緑の地に地図を埋め込み、大きな黒い斜体英字を重ねる。白線のピル型ボタン
12. フッター（住所・連絡先・営業時間をまとめる）: 深緑の面に白文字の情報を段組し、生成りの地に大きな英字のブランド名、最下部に市松模様

Imagery

• 暖色の照明で撮った店内と料理の写真。少し暗めにして温かみを出す
• 黒手袋の調理の手元、湯気、乾杯など、人の手が写るシーンを使う
• 背景に置く写真はモノクロにして、カラー写真を重ねる
• 木目の板のテクスチャを地に敷く
• 手書き風のオレンジの曲線、放射線、足跡のアイコンを飾りに使う
• 市松模様と方眼紙のパターンで装飾する
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は写真とテキストを左右に分けた 2 カラムのコラージュ。SP は 1 カラムに縦に積む
• PC の縦組み見出しは、SP では横組みにするか小さくする
• PC の縦並びナビは、SP ではハンバーガーメニューにまとめる
• 欧文の大見出しは SP で 40〜48px 程度にし、画面端からのはみ出しは残す
• メニューの半分ずつのレイアウトは、SP では写真→テキストの順に積む
• 店舗情報の表は SP でも 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 行書くと起動時に読み込まれる。