--- version: alpha name: Refined White Mincho Restaurant Brand Story LP description: 白い地に明朝体を細く置き、食材や料理の写真を大きく見せるブランドストーリー型のLP。章ごとに色の違う斜線付き番号を使い、最後はクリーム〜ピンクのグラデーションのフッターで締める。 colors: background: '#FFFFFF' primary: '#DE3417' text: '#232328' text-body: '#3A3A3A' text-muted: '#666666' line: '#888888' accent-1: '#38A54D' accent-2: '#E68C2B' accent-3: '#138B73' secondary: '#E44168' marker: '#3D9ADE' tint-1: '#FFFAE6' tint-2: '#FDE9E7' surface: '#FFFFFF' typography: display: fontFamily: Shippori Mincho fontSize: 34px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.2em headline-lg: fontFamily: Shippori Mincho fontSize: 24px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.12em headline-md: fontFamily: Shippori Mincho fontSize: 20px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.12em headline-sm: fontFamily: Noto Serif JP fontSize: 14px fontWeight: 600 lineHeight: 2.0 letterSpacing: 0.15em body-md: fontFamily: Noto Serif JP fontSize: 13px fontWeight: 400 lineHeight: 2.2 letterSpacing: 0.12em accent: fontFamily: Cormorant Garamond fontSize: 30px fontWeight: 400 lineHeight: 1.0 letterSpacing: 0.05em label-button: fontFamily: Cormorant Garamond fontSize: 14px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0.08em note: fontFamily: Noto Serif JP fontSize: 11px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.1em rounded: sm: 0px md: 0px lg: 0px full: 999px spacing: unit: 8px card: 14px section: 90px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' vertical-hero-title: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.display}' height: 440px chapter-number: textColor: '{colors.accent-1}' typography: '{typography.accent}' height: 60px more-link: textColor: '{colors.text}' typography: '{typography.label-button}' height: 50px photo-card-carousel: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 270px carousel-arrow: backgroundColor: '{colors.surface}' textColor: '{colors.text}' rounded: '{rounded.full}' height: 40px content-index: backgroundColor: '{colors.background}' textColor: '{colors.text-muted}' typography: '{typography.note}' height: 200px gradient-footer: backgroundColor: '{colors.tint-2}' textColor: '{colors.text}' typography: '{typography.note}' height: 560px --- # DESIGN.md — 白地と明朝の上品なファミレスこだわり紹介 LP（Refined White Mincho Restaurant Brand Story LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 飲食店・レストラン ／ **雰囲気**: 上品・高級、シンプル・ミニマル、ナチュラル、信頼・誠実 - **キーワード**: 白地・明朝体・縦書きタイトル・斜線付き章番号・フルブリード写真・余白多め - **地の質感**: フラットな白地。影は白いカードのごく淡い影だけにする - **形**: 角のない四角い写真と白いカード。リンクは下線付きのテキストリンク - **温度感**: やや暖かい。食材写真の彩りと朱色のタイトルで温かみを出す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#FFFFFF` | ページ地色 | 62% | 画素の実測 | | `primary` | `#DE3417` | 縦書きメインタイトルの朱色 | 0% | 画素の実測 | | `text` | `#232328` | 見出し・本文の墨色 | 3% | 画素の実測 | | `text-body` | `#3A3A3A` | リード文の濃いグレー | 2% | 推定 | | `text-muted` | `#666666` | ナビ・小見出しのグレー | 0% | 推定 | | `line` | `#888888` | Moreリンクの下線・区切り線 | 0% | 推定 | | `accent-1` | `#38A54D` | 章番号01の緑 | 0% | 画素の実測 | | `accent-2` | `#E68C2B` | 章番号02・04のオレンジ | 0% | 画素の実測 | | `accent-3` | `#138B73` | 章番号03のティール | 0% | 画素の実測 | | `secondary` | `#E44168` | 章番号06のローズピンク | 0% | 画素の実測 | | `marker` | `#3D9ADE` | 章番号05のスカイブルー | 0% | 画素の実測 | | `tint-1` | `#FFFAE6` | フッター上部のクリーム | 3% | 画素の実測 | | `tint-2` | `#FDE9E7` | フッター下部の淡いピンク | 4% | 画素の実測 | | `surface` | `#FFFFFF` | 写真カード・丸ボタンの白 | 4% | 画素の実測 | - 地色はほぼ白一色にする。色は写真が担う - ブランドの朱色はファーストビューの縦書きタイトルだけに使う - 章番号は章ごとに緑・オレンジ・ティール・青・ピンクを1色ずつ割り当て、見出し文字は墨色のままにする - 濃い色の面や派手なCTAボタンは使わない - フッターだけはクリームから淡いピンクへのグラデーションにする - 線は中間グレーの細線で、Moreリンクと区切りに限って使う ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの縦書きタイトル | 明朝 | Shippori Mincho | 400 | 34px | 1.4 | 0.2em | | `headline-lg` | 章タイトル | 明朝 | Shippori Mincho | 500 | 24px | 1.5 | 0.12em | | `headline-md` | コンセプト見出し | 明朝 | Shippori Mincho | 400 | 20px | 1.9 | 0.12em | | `headline-sm` | 章サブコピー・カード見出し | 明朝 | Noto Serif JP | 600 | 14px | 2.0 | 0.15em | | `body-md` | 中央揃えのリード文 | 明朝 | Noto Serif JP | 400 | 13px | 2.2 | 0.12em | | `accent` | 章番号の数字・欧文ラベル | 欧文セリフ | Cormorant Garamond | 400 | 30px | 1.0 | 0.05em | | `label-button` | Moreリンク | 欧文セリフ | Cormorant Garamond | 600 | 14px | 1.2 | 0.08em | | `note` | フッターナビ・コピーライト | 明朝 | Noto Serif JP | 400 | 11px | 1.8 | 0.1em | - 全体を明朝体でそろえ、ゴシック体は使わない - 字間は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 ```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-c27665a1`（元 LP の URL から採番） - **元 LP**: https://www.dennys.jp/anniversary/quality/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（11/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。