--- version: alpha name: Navy and Cream Classic Beer Brand LP description: クリームの地に白い角丸パネルを積み重ね、深い紺の見出しと金茶のアクセントでまとめたビールブランドのLP。ファーストビューの下に紺帯のプロジェクト紹介とカルーセルを置く。下層ではムービー・キャスト・歴史・ラインアップを、明朝の本文で落ち着いて読ませる構成。 colors: primary: '#01125D' background: '#FFF6D9' surface: '#FFFFFF' secondary: '#A18B62' cta: '#021F63' on-cta: '#F0F9FF' text: '#092F6C' tint-1: '#FFF6D9' accent-1: '#FEE06B' background-alt: '#EDF4FC' dark-section: '#064193' on-dark: '#FCFDF1' secondary-accessible: '#877451' typography: display: fontFamily: Zen Maru Gothic fontSize: 26px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.15em headline-lg: fontFamily: Zen Maru Gothic fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.2em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.1em headline-sm: fontFamily: Shippori Mincho fontSize: 18px fontWeight: 800 lineHeight: 1.5 letterSpacing: 0.05em body-md: fontFamily: Shippori Mincho fontSize: 11px fontWeight: 600 lineHeight: 2.0 letterSpacing: 0.05em note: fontFamily: Shippori Mincho fontSize: 10px fontWeight: 600 lineHeight: 1.7 letterSpacing: 0.05em label-button: fontFamily: Zen Maru Gothic fontSize: 14px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.15em accent: fontFamily: Shippori Mincho fontSize: 14px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.1em rounded: sm: 4px md: 12px lg: 28px full: 999px spacing: unit: 8px card: 24px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-product: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 52px button-outline: backgroundColor: '{colors.surface}' textColor: '{colors.secondary}' typography: '{typography.label-button}' height: 36px nav-grid: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 34px panel-section: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 600px carousel-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 260px photo-card-vertical: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.accent}' rounded: '{rounded.lg}' height: 540px intro-banner: backgroundColor: '{colors.tint-1}' textColor: '{colors.secondary}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 125px external-banner: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 50px --- # DESIGN.md — 紺×クリーム×金茶のビールブランド LP（Navy and Cream Classic Beer Brand LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 酒類 ／ **雰囲気**: やさしい・柔らかい、信頼・誠実、レトロ、上品・高級 - **キーワード**: クリーム地・深い紺・金茶アクセント・白い角丸パネル・明朝本文・字間の広い見出し - **地の質感**: 平塗り中心のフラットな面。写真は暖色の電球光で、ノスタルジックなぬくもりがある - **形**: 大きな角丸の白パネル、紺帯の下端だけ波形、細い金茶の枠線ボタン - **温度感**: 暖かい（クリームと金茶）を紺で引き締める ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#01125D` | ブランド紺（帯・見出し・商品ボタン） | 8% | 画素の実測 | | `background` | `#FFF6D9` | クリームのページ地 | 20% | 画素の実測 | | `surface` | `#FFFFFF` | 白い角丸コンテンツパネル | 45% | 画素の実測 | | `secondary` | `#A18B62` | 金茶のアクセント（小見出し・枠線・ボタン） | 4% | 画素の実測 | | `cta` | `#021F63` | 商品情報ボタンの紺 | 2% | 画素の実測 | | `on-cta` | `#F0F9FF` | ボタン上の白文字 | 0% | 画素の実測 | | `text` | `#092F6C` | 見出し・本文の紺文字 | 3% | 画素の主要色に補正 | | `tint-1` | `#FFF6D9` | 淡いベージュ（ナビの枠・イラスト地） | 3% | 画素の実測 | | `accent-1` | `#FEE06B` | 外部リンクバナーの黄色 | 1% | 画素の主要色に補正 | | `background-alt` | `#EDF4FC` | フッターSNS枠の淡い青灰 | 5% | 画素の実測 | | `dark-section` | `#064193` | フッター最下部の青 | 2% | 画素の実測 | | `on-dark` | `#FCFDF1` | 紺帯上の白文字 | 0% | 画素の実測 | | `secondary-accessible` | `#877451` | AA を満たす補正値（計算） | | 計算 | - ページの地はクリーム。各セクションは白い角丸パネルに入れて浮かせる - 大見出しと本文は紺。小見出し・サブタイトルは金茶にして二色の階層をつける - 紺のベタ面は、ファーストビュー直下の帯と商品ボタンだけに使う - 金茶は細い枠線ボタン・ピル型ボタン・ナビ枠に使う - 黄色は外部リンクバナー1か所だけに使う - 原色の赤や緑は使わない。SNSアイコンは例外 - `button-outline` は文字 `#A18B62` × 背景 `#FFFFFF` のコントラスト比が 3.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#877451`、4.52:1）を使う。 - `photo-card-vertical` は文字 `#FCFDF1` × 背景 `#A18B62` のコントラスト比が 3.2:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#877451`、4.59:1）を使う。 - `intro-banner` は文字 `#A18B62` × 背景 `#FFF6D9` のコントラスト比が 3.04:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#877451`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 紺帯上のプロジェクト名 | 丸ゴシック | Zen Maru Gothic | 700 | 26px | 1.4 | 0.15em | | `headline-lg` | セクション見出し（紺） | 丸ゴシック | Zen Maru Gothic | 700 | 20px | 1.4 | 0.2em | | `headline-md` | 金茶のサブ見出し・人名 | ゴシック | Zen Kaku Gothic New | 700 | 16px | 1.5 | 0.1em | | `headline-sm` | 商品名 | 明朝 | Shippori Mincho | 800 | 18px | 1.5 | 0.05em | | `body-md` | プロフィール・歴史の本文 | 明朝 | Shippori Mincho | 600 | 11px | 2.0 | 0.05em | | `note` | 容量表記・注釈 | 明朝 | Shippori Mincho | 600 | 10px | 1.7 | 0.05em | | `label-button` | ボタン・ナビ文字 | 丸ゴシック | Zen Maru Gothic | 700 | 14px | 1.3 | 0.15em | | `accent` | 写真上の縦書きコピー | 明朝 | Shippori Mincho | 700 | 14px | 1.6 | 0.1em | - 見出しは丸ゴシックで、字間を0.15em以上あけて柔らかく見せる - 本文は太めの明朝を紺で組み、中央揃えの短い改行で読ませる - 人名の敬称は小さく添える - 写真の上のコピーは、金茶の地に白文字の縦書き帯にする - 英字見出しは細めのサンセリフを金茶で入れる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。カルーセルは左右に次のカードを少し見せる - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 48px、基本単位 8px、カード内 24px（375px 幅換算） - 白パネルは画面幅いっぱいに置き、上下の角を大きく丸める - パネルとパネルの間にクリーム地を約40px見せる - 見出しは中央揃え。見出しの上下に広い余白を取る - 商品は画像→商品名→容量→説明→ボタンの順に縦に積む - ナビは金茶枠のボタンを3列×2段で並べる ## Elevation & Depth - 影はほぼ使わず、地色の差で階層を作る - フッターのピル型ボタンだけ、薄い影で浮かせる ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 28px。ボタンは角丸の長方形。 - **写真の切り抜き**: 人物写真は四角。コンテンツカードは大きな角丸で縦長に切り抜く - **セクション境界**: 紺帯の下端だけゆるい波形。それ以外は白パネルの角丸で区切る - 枠線ボタンは角丸なしか小さい角丸で、線幅は細い金茶にする - プロジェクト導線のボタンは金茶のピル型にする - カルーセル矢印は金茶の円形ボタンにする ## Components - **商品情報ボタン**（`button-product`）: 紺の横長帯。左端に商品画像をはみ出させ、白文字と▶を置く - **金茶枠ボタン**（`button-outline`）: 白地に細い金茶の枠線と金茶の文字。右端に矢印を付ける - **ページ内ナビ**（`nav-grid`）: クリーム地に金茶の太枠ボタンを3列×2段で並べる。文字は紺 - **白角丸パネル**（`panel-section`）: クリーム地の上に置く、大角丸のセクション容器 - **代表カードカルーセル**（`carousel-card`）: 紺帯の上に白カードを置き、紺の見出し・金茶の人名・バナー画像・枠ボタンを並べる。ドットのインジケーター付き - **縦書きコピー写真カード**（`photo-card-vertical`）: 縦長の角丸写真。右上に金茶地の縦書き白文字、下部に金茶ボタンを重ねる - **プロジェクト紹介枠**（`intro-banner`）: ベージュ地に金茶の角丸枠。左に地図イラスト、右に見出し・本文・ピル型ボタンを置く - **外部リンクバナー**（`external-banner`）: 黄色地のバナー。黒文字と右端の矢印で外部サイトへ誘導する ## Do's and Don'ts **Do** - クリーム地に白い角丸パネルを交互に見せ、柔らかい区切りにする - 見出しは紺、補助の見出しは金茶の二色で統一する - 本文は明朝で行間を広く取り、クラシックな品を出す - 商品は白地に切り抜き画像で、サイズ違いを並べて見せる - 飲酒に関する注意表記をフッターに入れる **Don't** - 鮮やかな原色や蛍光色を広い面に使わない - 金茶をベタ塗りの大面積に使わない - 強い影やグラデーションのボタンにしない - 本文を細いゴシックで組まない - パネルの角を直角にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（ブランドと全国展開の世界観を一目で伝える）: 中央に商品と紺の縦帯ロゴを置き、左右に乾杯する人物を地域タグ付きで配置。暖色のクリーム地 2. **プロジェクト紹介**（地域代表の企画への導線）: 紺帯に白い丸ゴシックの見出しと説明を置き、白カードのカルーセルを入れる。下端は波形 3. **コンセプト導線とナビ**（企画の詳細とページ内移動）: 金茶枠のイラストバナーの下に、3列×2段の枠ボタンナビを置く 4. **コンテンツ紹介**（記事コンテンツへの誘導）: 縦長の角丸写真カードを横スクロールで並べ、縦書きコピーと金茶ボタンを重ねる 5. **ムービー**（CM動画の紹介）: 白パネルに紺の見出しと金茶の英字小見出しを置き、動画サムネのカルーセルとキャプションを並べる 6. **キャスト**（出演者の紹介）: 金茶の人名、正方形に近い写真、明朝のプロフィール文を縦に積む 7. **ヒストリー**（ブランドの歴史で信頼を伝える）: 中央揃えの明朝文と古い広告画像。最後に枠ボタンで続きを開く 8. **キャンペーン**（キャンペーン情報の告知）: クリーム地に見出しと一行の告知だけを置く 9. **ラインアップ**（商品の紹介と詳細への導線）: 商品ごとに切り抜き画像・明朝の商品名・容量・説明・紺の帯ボタンを並べる 10. **インフォメーション**（飲める店舗への外部誘導）: クリーム地に黄色のバナーを1つ置く 11. **フッター**（サイト内リンク・SNS・注意表記）: 白地に2列のリンク一覧、青灰の枠にSNSを入れ、最下部は青帯に白文字 ## Imagery - 人物はグラスを掲げる笑顔の乾杯ポーズ。暖かい照明で撮る - 飲食店の店主などのドキュメンタリー風写真。暗めの暖色トーン - 商品は白背景の切り抜きで、サイズ違いを階段状に並べる - 日本地図や屋台は、ベージュ単色の線画イラストで描く - 歴史パートには、当時の新聞広告風のモノクロ寄りの画像を使う - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はクリーム地の中央に幅約60%の白パネルを置き、周囲の余白を広く取る - PC のキャストは写真を左、プロフィールを右にした2カラムにする - PC のコンテンツカードは2枚を横に並べる - PC のナビは白帯の上に1行のテキストリンクで並べる - PC のフッターは、リンクとSNS枠を左右に並べる ## 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-217c54dd`（元 LP の URL から採番） - **元 LP**: https://www.asahibeer.co.jp/2025/asahinamabeer/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。