DESIGN.md — 柿色と紅色の秋グルメフェア LP（Autumn Gourmet Fair Menu Catalog LP）

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

Overview

• 業種: 飲食店・レストラン ／ 雰囲気: 上品・高級、やさしい・柔らかい、ナチュラル、情報量多め・訴求型
• キーワード: 秋の味覚・柿色・葉っぱシェイプ・料理写真カタログ・明朝×スクリプト
• 地の質感: フラットな単色面。紙のような淡いピーチ色パネルに写真が載る
• 形: 葉っぱやレモン形の有機的な大きな図形、角のない円形の料理写真の切り抜き
• 温度感: 暖かい（オレンジ〜赤茶系）

Colors

• 外周は柿色、内側のコンテンツ面は淡いピーチ色にして、二層の地にする
• 紅色と緑は大きな葉っぱ形の装飾と、TAKE OUTバッジだけに使う
• 文字はすべて焦げ茶系にする。純黒は小ボタンと罫線だけ
• 料理写真は赤茶の卓面で撮り、ピーチ色の地となじませる
• フッターだけ淡いグレーに切り替えて、本編と分ける
• badge-takeout は文字 #FFFFFF × 背景 #D25469 のコントラスト比が 4.03:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#CE465D、4.51:1）を使う。
• button-top は文字 #FFFFFF × 背景 #D25469 のコントラスト比が 4.03:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#CE465D、4.51:1）を使う。

Typography

• 料理名・価格・説明文は明朝で統一して、上品にする
• 店舗名や注釈など情報系の文字だけゴシックにする
• 欧文スクリプトは見出しの飾りに限り、本文では使わない
• FVの季節漢字は特大にして、ロゴのように扱う
• 価格は料理名の直下に置き、太すぎない字で示す
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム（PC はパネル内で 2 カラムのカードグリッド）
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 56px、基本単位 8px、カード内 0px（375px 幅換算）
• 外周の柿色を左右に 5〜6% 残して、パネルを中央に置く
• カードは、写真・料理名・価格・説明・注釈・罫線で挟んだ店舗情報の順で縦に積む
• カード同士の間隔は縦に 48px 以上とって、ゆったり並べる
• 写真はカード幅いっぱいに、4:3 程度で入れる
• 店舗情報は上下を細い罫線で区切り、右上に小さなボタンを置く

Elevation & Depth

• 影はほぼ使わず、フラットな面の重なりで階層を作る
• ページトップボタンにだけ、弱いドロップシャドウを付ける

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 999px。ボタンはピル型。
• 写真の切り抜き: メニュー写真は角丸なしの矩形。FVでは料理を円や葉っぱ形でくり抜く
• セクション境界: 直線。ただし大きな葉っぱシェイプがパネルの端をまたいで重なる
• 装飾は葉っぱ・レモン形の大きな有機図形にする
• TAKE OUTバッジは紅色の正円にする
• 店舗情報ボタンは小さな黒のピル型にする
• ロゴ風のマークは楕円の枠線で囲む

Components

• FVコラージュ（hero-collage）: 葉っぱシェイプの上に、円形で抜いた料理写真・縦書きコピー・特大漢字・会期を重ねる
• スクリプト付き見出し（section-heading）: 欧文スクリプトの上に、2 行の明朝リード文を置く。右側に楕円ロゴマークを添える
• メニューカード（menu-card）: 赤茶の卓面で撮った料理写真の下に、料理名・価格・説明・注釈を並べる
• テイクアウトバッジ（badge-takeout）: 料理名の右に置く、紅色の正円に白い欧文 2 行のバッジ
• 店舗情報ブロック（shop-info）: 上下を黒の罫線で挟み、店名・ジャンル・フロアと電話番号を小さなゴシックで並べる
• 店舗詳細ボタン（button-shop）: 店舗情報の右上に置く、黒の小さなピル型ボタン
• ページトップボタン（button-top）: 右下に置く、紅色の正円ボタン
• シェアフッター（footer-share）: グレー地に注釈・SNSの丸アイコン・ロゴ・コピーライトを中央揃えで並べる

Do's and Don'ts

Do - 料理写真は同じ赤茶系の卓面で、俯瞰〜斜め上から撮ってそろえる - 地は柿色とピーチ色の二層にして、パネル感を出す - 料理名と価格は明朝で、余白を多めに組む - 大きな葉っぱシェイプをFVとパネル上端に散らして、季節感を出す - テイクアウトなどの属性は、小さな円形バッジで示す

Don't - 純白の地や寒色の配色にしない - 大きな派手なCTAボタンを置かない（カタログ型を保つ） - カードに太い枠や強い影を付けない - 本文をゴシックの太字で組まない - 写真ごとに背景のトーンをばらつかせない

Page Structure

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

1. ファーストビュー（季節フェアのテーマと会期を伝える）: 柿色の地に紅色と緑の葉っぱ形、円形の料理写真、特大の明朝漢字、縦書きコピー、会期を配したコラージュ
2. メニュー導入見出し（フェア全体のコンセプトを短く伝える）: ピーチ色パネルの上部に、欧文スクリプトと 2 行の明朝リード。右に楕円ロゴを置く
3. メニュー一覧（参加店舗の限定メニューをカタログのように見せる）: 写真・料理名・価格・説明・店舗情報のカードを 2 列（SPは 1 列）で縦に繰り返す
4. 注釈（価格表記や変更の可能性を伝える）: フッター冒頭に、小さな文字で中央揃え
5. シェア・フッター（SNSでの拡散と施設ブランドの提示）: グレー地にSNSの丸アイコン、施設ロゴ、コピーライト。紅色のTOPボタンを添える

Imagery

• 料理は赤茶やテラコッタ色の卓面の上で、俯瞰〜45度から撮る
• 器は白や黒の和洋食器にして、料理の色を際立たせる
• 柔らかい自然光風のライティングで、暖色に寄せる
• 装飾は紅色と緑の大きな葉っぱ・果実形のフラット図形にする
• ロゴ風の楕円スタンプで、上品なフェア感を出す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央パネル内で 2 カラム。SPでは 1 カラムに縦積みする
• SPでもパネルの外側に柿色を 4% 程度残す
• FVのコラージュは、SPでは写真の数を減らして縦長に再構成する
• 縦書きのコピーは、SPでは横書きか短く改行して使う
• TOPボタンは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 行書くと起動時に読み込まれる。