--- version: alpha name: Crimson Serif Seasonal Fair Gourmet LP description: 深い赤一色の地に、白い細線と明朝体、黒の斜めフレームを組み合わせた商業施設の季節フェア LP。黒背景に料理写真を置いた FV から始まり、ほぼ同じ形のメニューカードを縦に並べ続ける。装飾は抑え、写真と細い罫線で高級感を出す。 colors: primary: '#940E15' dark-section: '#000000' on-primary: '#FCFBF9' line: '#E6DBCE' surface: '#FEFEFE' cta: '#FFFEFE' on-cta: '#A51E23' accent-1: '#010000' background-alt: '#0D151D' background: '#940E15' typography: display: fontFamily: Shippori Mincho fontSize: 64px fontWeight: 600 lineHeight: 1.1 headline-lg: fontFamily: Cinzel fontSize: 40px fontWeight: 700 lineHeight: 1.1 letterSpacing: 0.05em headline-md: fontFamily: Noto Serif JP fontSize: 22px fontWeight: 500 lineHeight: 1.45 letterSpacing: 0.06em headline-sm: fontFamily: Noto Serif JP fontSize: 17px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.02em body-md: fontFamily: Noto Serif JP fontSize: 13px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.06em note: fontFamily: Noto Serif JP fontSize: 10px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.04em accent: fontFamily: Playfair Display fontSize: 28px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.02em label-button: fontFamily: Noto Serif JP fontSize: 12px fontWeight: 400 lineHeight: 1.0 letterSpacing: 0.2em rounded: sm: 0px md: 10px lg: 12px full: 999px spacing: unit: 8px card: 12px section: 64px components: page: backgroundColor: '{colors.background}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' menu-card: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' height: 640px photo-frame-diagonal: backgroundColor: '{colors.accent-1}' height: 220px button-detail: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 24px tag-limited: textColor: '{colors.on-primary}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 26px ribbon-label: backgroundColor: '{colors.surface}' textColor: '{colors.on-cta}' typography: '{typography.note}' height: 20px heading-triangle: textColor: '{colors.on-primary}' typography: '{typography.headline-lg}' height: 160px nav-contents: textColor: '{colors.on-primary}' typography: '{typography.headline-lg}' height: 50px book-banner: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-lg}' height: 300px --- # DESIGN.md — 深紅×黒×白線の季節グルメフェア LP（Crimson Serif Seasonal Fair Gourmet LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 飲食店・レストラン ／ **雰囲気**: 上品・高級、ラグジュアリー・ダーク、力強い・インパクト - **キーワード**: 深紅一色の地・白い細線・明朝体・幅広の欧文セリフ見出し・黒の斜めフレーム・シズル写真 - **地の質感**: 質感のないフラットな単色面。立体感は写真と黒白の斜めフレームだけで出す - **形**: 四角が基本。角丸はタグだけ。写真枠の角を斜めに切った黒白フレームと、三角形の線画を飾りに使う - **温度感**: 温かく情熱的。ただし黒が入るので甘くなりすぎず、大人の夜っぽい落ち着きがある ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#940E15` | ページ全体の深紅の地 | 55% | 画素の実測 | | `dark-section` | `#000000` | FV の背景と注意書きフッター | 8% | 画素の実測 | | `on-primary` | `#FCFBF9` | 赤地の上の本文・見出し | 3% | 画素の主要色に補正 | | `line` | `#E6DBCE` | カードの外枠と区切り線（白の細線） | 1% | 画素の主要色に補正 | | `surface` | `#FEFEFE` | 詳細ボタンの白い面と写真フレーム | 4% | 画素の実測 | | `cta` | `#FFFEFE` | 詳細ボタン（白地）の面 | 2% | 画素の実測 | | `on-cta` | `#A51E23` | 白ボタン上の赤い文字とプラスアイコン | 0% | 画素の主要色に補正 | | `accent-1` | `#010000` | 写真フレームの黒い斜め帯 | 2% | 画素の実測 | | `background-alt` | `#0D151D` | FV の濃紺がかった黒の写真背景 | 4% | 画素の実測 | | `background` | `#940E15` | 基本の地（primary と同じ深紅） | 3% | 画素の実測 | - 地は深紅一色で通し、セクションごとに地の色を切り替えない - 黒は FV、写真フレームの斜め帯、注意書きフッターの 3 か所だけに使う - 文字と罫線は白だけで、赤地の上にほかの色は足さない - 白い面はボタンと写真フレームに限る。ボタンの上の文字は赤にする - 強調色を増やさない。強調は文字の大きさと明朝のウェイトで付ける ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV のフェア名ロゴ（縦組みの大きな漢字） | 明朝 | Shippori Mincho | 600 | 64px | 1.1 | 0.0em | | `headline-lg` | 欧文のセクション見出し（幅広のスモールキャップ） | 欧文セリフ | Cinzel | 700 | 40px | 1.1 | 0.05em | | `headline-md` | リード文の見出しとメニュー名 | 明朝 | Noto Serif JP | 500 | 22px | 1.45 | 0.06em | | `headline-sm` | 店舗名（和文と欧文が混在） | 明朝 | Noto Serif JP | 400 | 17px | 1.4 | 0.02em | | `body-md` | リード本文、キャッチ、価格 | 明朝 | Noto Serif JP | 500 | 13px | 1.9 | 0.06em | | `note` | フロア表記、業態、＊付きの注記 | 明朝 | Noto Serif JP | 500 | 10px | 1.6 | 0.04em | | `accent` | FV の縦書きキャッチと日付の数字 | 欧文セリフ | Playfair Display | 700 | 28px | 1.0 | 0.02em | | `label-button` | 白ボタンのラベル | 明朝 | Noto Serif JP | 400 | 12px | 1.0 | 0.2em | - 和文はすべて明朝体で揃え、ゴシック体は使わない - 欧文の見出しは幅広のセリフ体のスモールキャップにし、頭文字を大きくする - リード文は中央揃えにし、短い行を連ねて段落の間を広く空ける - カード内は左揃えにし、フロア → 業態 → 店名 → キャッチ → メニュー名 → 価格の順で文字を大きくしたり小さくしたりして階層を作る - 業態は和文の下に欧文を小さく併記する - 注記は先頭に＊を付けて小さく並べる - 書体は画像からの推定で、フォント名は近い印象の 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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-771808a0`（元 LP の URL から採番） - **元 LP**: https://www.umekiki.jp/strawberryfair2026/sp=1 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（7/10 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。