DESIGN.md — 白地と明朝の上品なファミレスこだわり紹介 LP（Refined White Mincho Restaurant Brand Story LP）

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

Overview

• 業種: 飲食店・レストラン ／ 雰囲気: 上品・高級、シンプル・ミニマル、ナチュラル、信頼・誠実
• キーワード: 白地・明朝体・縦書きタイトル・斜線付き章番号・フルブリード写真・余白多め
• 地の質感: フラットな白地。影は白いカードのごく淡い影だけにする
• 形: 角のない四角い写真と白いカード。リンクは下線付きのテキストリンク
• 温度感: やや暖かい。食材写真の彩りと朱色のタイトルで温かみを出す

Colors

• 地色はほぼ白一色にする。色は写真が担う
• ブランドの朱色はファーストビューの縦書きタイトルだけに使う
• 章番号は章ごとに緑・オレンジ・ティール・青・ピンクを1色ずつ割り当て、見出し文字は墨色のままにする
• 濃い色の面や派手なCTAボタンは使わない
• フッターだけはクリームから淡いピンクへのグラデーションにする
• 線は中間グレーの細線で、Moreリンクと区切りに限って使う

Typography

• 全体を明朝体でそろえ、ゴシック体は使わない
• 字間は0.1em以上に広げ、行間は2倍前後にする
• SPでは本文と見出しをすべて中央揃えにする
• 章番号は細い欧文セリフの数字にし、数字の左に斜線を重ねる
• 見出しは2行に改行し、短いフレーズで区切る
• 太字は避け、400〜600のウェイトで品よく見せる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は写真と文字の左右交互 2 カラム
• 本文ブロックの幅: 画面幅の約 68%
• 余白: セクション間 90px、基本単位 8px、カード内 14px（375px 幅換算）
• 章は番号→タイトル→サブコピー→全幅写真→Moreリンクの順に積む
• 写真は画面幅いっぱいに置く
• Moreリンクは幅およそ200pxの中央寄せにする
• 章と章の間は80〜100pxの余白で区切る
• カルーセルは中央のカードを大きく見せ、隣のカードを端から少し見せる

Elevation & Depth

• 白いカードにはぼかし大きめの淡い影（0 2px 10px rgba(0,0,0,.1)）を付ける
• カルーセル矢印は白い円に淡い影を付ける
• それ以外の要素は影なしのフラットにする

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 角のない長方形。全幅で横長（約16:7）に切る
• セクション境界: 直線。余白だけで区切り、フッターはグラデーション面にする
• 円は矢印ボタンとハンバーガーメニューだけに使う
• カードは角のない白い四角にする
• 装飾線は細く短い水平線にする

Components

• 縦書きヒーロータイトル（vertical-hero-title）: 小さな欧文の円弧ロゴとアイコンの下に、朱色の明朝を縦書きで置く
• 斜線付き章番号（chapter-number）: 細い斜線に重ねた2桁の数字と、線画の小アイコン。章ごとに色を変える
• 下線付きMoreリンク（more-link）: 左に欧文のMore、右に＞を置き、下に細いグレー線を引く
• 写真カードカルーセル（photo-card-carousel）: 全幅写真の下部に重ねる白カード。写真、小ラベル、2行の見出しで構成する
• 丸矢印ボタン（carousel-arrow）: 白い円に細い＜＞を入れ、カードの左右に配置する
• コンテンツ目次（content-index）: 見出しの左右に線を引いたラベルの下に、正方形サムネイルを横スクロールで並べ、下に章名タブを置く
• グラデーションフッター（gradient-footer）: クリームからピンクへのグラデーションの上に、ロゴ、縦並びのナビ、規約リンク、コピーライトを中央揃えで置く

Do's and Don'ts

Do - 写真を大きく、文字は控えめにする - 明朝体と広い字間で上品さを保つ - 章ごとの番号色で目次と内容を対応させる - 余白を惜しまずに取る

Don't - 派手なボタンや塗りの濃いCTAを置かない - ゴシック体や太い見出しを使わない - 朱色を本文や面に広げない - 写真に角丸や装飾枠を付けない - 1画面に情報を詰め込まない

Page Structure

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

1. ファーストビュー（ブランドの姿勢を一言で示す）: 白地に縦書きの朱色明朝タイトルを置き、その下に店舗と畑の写真を2分割で並べる
2. コンセプト（ブランドストーリーを導入する）: 2行の明朝見出しと、9行ほどの中央揃えリード文
3. コンテンツ目次（各章へ案内する）: 欧文ラベルの下に正方形サムネイルと章名タブを並べる
4. 章1 素材（原材料へのこだわりを見せる）: 章番号、全幅の畑写真、白カードのカルーセル、Moreリンク
5. 章2 商品（メニューの魅力を伝える）: 料理写真の上にカルーセルカードを重ねる
6. 章3 健康（健康への配慮を伝える）: 章番号、野菜の全幅写真、Moreリンク
7. 章4 店舗（空間の快適さを見せる）: 客席写真を全幅で見せ、Moreリンクを置く
8. 章5 社会貢献（持続可能性の取り組みを示す）: 木のブロックと緑のボケ写真を全幅で置く
9. 章6 注目トピック（知ってほしい話題に誘導する）: 湯気の立つドリンクの写真とMoreリンク
10. フッター（サイト内の回遊と規約の案内）: グラデーション地に中央揃えのナビを置き、その下の白地に企業ロゴを並べる

Imagery

• 自然光の明るく鮮やかな食材写真を真上や寄りで撮る
• 料理は白い皿と木のテーブルで温かく見せる
• 畑や空は青空の下の広角で爽やかに撮る
• 店内は明るく、人のいない整った空間を撮る
• 章アイコンは細い線画で、章の色に合わせる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はヘッダーに横一列のナビを置く
• PC のファーストビューは左右の写真で中央の縦書きタイトルを挟む
• PC はリード文も縦書きにする
• PC の章は写真と文字を左右交互に並べ、カードは5枚ほどを横に並べる
• 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 行書くと起動時に読み込まれる。