DESIGN.md — 深紅×黒×白線の季節グルメフェア LP（Crimson Serif Seasonal Fair Gourmet LP）

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

Overview

• 業種: 飲食店・レストラン ／ 雰囲気: 上品・高級、ラグジュアリー・ダーク、力強い・インパクト
• キーワード: 深紅一色の地・白い細線・明朝体・幅広の欧文セリフ見出し・黒の斜めフレーム・シズル写真
• 地の質感: 質感のないフラットな単色面。立体感は写真と黒白の斜めフレームだけで出す
• 形: 四角が基本。角丸はタグだけ。写真枠の角を斜めに切った黒白フレームと、三角形の線画を飾りに使う
• 温度感: 温かく情熱的。ただし黒が入るので甘くなりすぎず、大人の夜っぽい落ち着きがある

Colors

• 地は深紅一色で通し、セクションごとに地の色を切り替えない
• 黒は FV、写真フレームの斜め帯、注意書きフッターの 3 か所だけに使う
• 文字と罫線は白だけで、赤地の上にほかの色は足さない
• 白い面はボタンと写真フレームに限る。ボタンの上の文字は赤にする
• 強調色を増やさない。強調は文字の大きさと明朝のウェイトで付ける

Typography

• 和文はすべて明朝体で揃え、ゴシック体は使わない
• 欧文の見出しは幅広のセリフ体のスモールキャップにし、頭文字を大きくする
• リード文は中央揃えにし、短い行を連ねて段落の間を広く空ける
• カード内は左揃えにし、フロア → 業態 → 店名 → キャッチ → メニュー名 → 価格の順で文字を大きくしたり小さくしたりして階層を作る
• 業態は和文の下に欧文を小さく併記する
• 注記は先頭に＊を付けて小さく並べる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードを縦に積む
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 64px、基本単位 8px、カード内 12px（375px 幅換算）
• カードは左右に約 27px の赤い余白を残して中央に置く
• カード同士の間は約 28px で、すべて同じ形を繰り返す
• 写真は上に置き、その下の白線枠の中に情報を積む
• 情報ブロックは白い細線で 3 段に区切る（フロア / 店名 / 説明）
• ボタンはカード幅いっぱいの細長い白い帯にする

Elevation & Depth

• 影は使わず、すべてフラットに描く
• 写真の背後に黒と白の板を斜めにずらして重ね、奥行きを出す
• 前後関係は 1px の白線と色面の重なりだけで表現する

Shapes

• 角丸: 小 0px ／ 中 10px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 横長 3:2 の長方形。背後に、角を斜めに切った黒と白の板を重ねる
• セクション境界: FV の下端は黒い三角形を斜めに差し込んで赤に切り替える。それ以外は直線
• ボタンは角丸なしの長方形
• 角を丸めるのは季節限定タグだけ（約 10px）
• 見出しの上に、細線で描いた大きな三角形（山形）を置く
• 見出しのロゴ横に、下向き三角の線画アイコンを添える

Components

• メニューカード（menu-card）: 上に斜めフレーム付きの写真、下に白い 1px 枠の情報ブロックを置き、同じ形を繰り返す
• 斜めカットの写真フレーム（photo-frame-diagonal）: 写真の背後で、左上と右下を黒、それ以外を白にした板を斜めに切り替えて重ねる
• 詳細ボタン（button-detail）: 白い細長の帯。ラベルは赤で中央、右端に丸囲みのプラスアイコンを置く
• 限定タグ（tag-limited）: 白線で縁取った角丸タグ。丸囲みのアイコンと短いラベルを入れる
• 取材店舗ラベル（ribbon-label）: 写真の右上に重ねる白い帯。三角の記号と赤い文字を入れる
• 三角線画付き欧文見出し（heading-triangle）: 細線で描いた大きな山形の中に、2 段の欧文セリフ見出しを置く
• コンテンツ目次（nav-contents）: 上下を白線で挟んだ欧文ロゴのリンクを縦に並べる
• 本型のバナー（book-banner）: 白の二重線枠の上に写真と欧文見出しを重ね、下に開いた本のような曲線を描く

Do's and Don'ts

Do - 地は深紅一色にし、文字と線は白で統一する - 全カードで同じ情報の順番と区切り線の位置を守る - 写真は暗めの背景に食材の赤が際立つものを選ぶ - 明朝体で字間をやや広く取り、ゆったり組む - 欧文見出しは幅広セリフのスモールキャップにする

Don't - ゴシック体や丸ゴシック体を混ぜない - ピンクや黄色など明るいポップな色を足さない - ボタンを丸めたり影を付けたりしない - グラデーションや柄の背景を使わない - カードの形を店舗ごとに変えない

Page Structure

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

1. ファーストビュー（フェア名・期間・世界観を一目で伝える）: 黒背景に主役の料理を大きく置き、縦組みの明朝ロゴ、左に日付、右に縦書きのキャッチを配置する
2. コンセプト文（フェアの趣旨と情緒を伝える）: 深紅の地に、中央揃えの明朝見出しと 3 段落の短文を置く。左上から黒い三角形を差し込む
3. 目次（ページ内のコンテンツへ誘導する）: 白線で挟んだ欧文ロゴのリンクを縦に並べる
4. メニュー見出し（メニュー一覧の始まりを示す）: 細線の山形の中に、2 段の欧文セリフ見出しを置く
5. メニュー一覧（参加店の限定メニューを網羅して紹介する）: 斜めフレーム写真と白線枠の情報ブロックを組み合わせたカードを 15 件以上縦に積む
6. 関連コンテンツ誘導（読み物コンテンツへ回遊させる）: 本型の線枠の上に、写真と欧文見出し、短い説明文を置く
7. 注意事項（税・提供条件などの注記をまとめる）: 黒背景に白い明朝体の小さな文字をベタで組む

Imagery

• 料理写真は斜め上から寄って撮り、背景はぼかすか暗めの木やテーブルにする
• 赤い果実の艶と断面を強調し、彩度はやや高めに仕上げる
• FV は黒背景にスポットライトのような照明を当て、主役の料理を 1 品だけ大きく見せる
• イラストは使わない。装飾は白の線画（三角・本の曲線）だけにする
• 写真の背後に黒と白の斜めの板を重ねて動きを出す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像はないため、以下は推奨。PC は中央 1000px 程度に広げ、メニューカードを 2〜3 カラムのグリッドにする
• FV は横長にし、写真を右、縦組みロゴと日付を左に置く
• コンセプト文は中央揃えを保ち、1 行 30 字程度に収める
• 斜めフレームと白線枠の比率は 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 行書くと起動時に読み込まれる。