--- version: alpha name: Teal and Gold Retro Lemon Sour LP description: ターコイズと金色を左右に分けた地に、白い円や吹き出しを重ねた酒類の商品 LP。紙のようなザラつきのある質感と、黒い枠線の見出しでレトロな定番感を出している。写実的なレモンの輪切りを散らして、爽やかさと果実感を伝える。 colors: primary: '#4CBBB5' secondary: '#B39A45' background-alt: '#D9D1AC' accent-1: '#E1C65F' dark-section: '#231914' on-dark: '#D3BF70' surface: '#FEFEFE' background: '#FEFDE9' text: '#231815' accent-2: '#B5121B' tint-1: '#D1CBAA' line: '#231815' text-muted: '#B8AC78' typography: display: fontFamily: Shippori Mincho fontSize: 64px fontWeight: 500 lineHeight: 1.1 headline-lg: fontFamily: Dela Gothic One fontSize: 40px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.05em headline-md: fontFamily: Noto Sans JP fontSize: 30px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 2.1 letterSpacing: 0.08em accent: fontFamily: Shippori Mincho fontSize: 26px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.1em note: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.05em rounded: sm: 0px md: 4px lg: 9999px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' heading-ribbon-frame: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 80px section-nav-bar: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 40px hero-circle: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 420px store-buttons: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' height: 44px lemon-point: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 170px voice-bubble: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 130px article-card: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 420px badge-round: backgroundColor: '{colors.accent-2}' textColor: '{colors.surface}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 52px label-tab: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 36px --- # DESIGN.md — ターコイズ×金のレトロなレモン酒類 LP（Teal and Gold Retro Lemon Sour LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 酒類 ／ **雰囲気**: レトロ、清潔・爽やか、信頼・誠実、親しみ・手作り感 - **キーワード**: ターコイズ×金・紙の質感・白い円と吹き出し・黒枠の見出し・レモンの輪切り・縦書きの明朝コピー - **地の質感**: ザラついた紙やマットな金箔のようなノイズ地。罫線ノートの面も入る - **形**: 大きな正円、吹き出し、黒い太線で囲んだリボン型の見出し枠 - **温度感**: 爽やかでやや温かい。冷たい青緑を金とクリームで和らげる ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#4CBBB5` | ブランドのターコイズ地（お客様の声・FV 下の左半分） | 15% | 画素の実測 | | `secondary` | `#B39A45` | 金色の地（商品セクションの外枠・FV 下の右半分） | 10% | 推定 | | `background-alt` | `#D9D1AC` | 商品セクション内側のベージュ地 | 11% | 画素の実測 | | `accent-1` | `#E1C65F` | 黄色の帯・強調マーカー・記事カードの面 | 7% | 画素の実測 | | `dark-section` | `#231914` | セクション内ナビの黒い帯 | 1% | 画素の実測 | | `on-dark` | `#D3BF70` | 黒帯上の金色の文字・枠 | 0% | 画素の実測 | | `surface` | `#FEFEFE` | 白い円・吹き出し・カード | 13% | 画素の実測 | | `background` | `#FEFDE9` | 読み物セクションのクリーム地 | 6% | 画素の実測 | | `text` | `#231815` | 見出し・本文の濃い文字 | 2% | 推定 | | `accent-2` | `#B5121B` | 前編・後編の赤い丸バッジ | 0% | 推定 | | `tint-1` | `#D1CBAA` | 後編カードのオリーブベージュ面 | 2% | 画素の実測 | | `line` | `#231815` | 黒の太い枠線・区切り線 | 0% | 推定 | | `text-muted` | `#B8AC78` | 商品情報の英字透かし | 1% | 推定 | - 地はターコイズ・金・ベージュ・クリームをセクションごとに切り替える - FV 直後は左ターコイズ/右金の 2 分割地に白い大円を重ねる - 白は円・吹き出し・カードの面にだけ使い、地には使わない - 黄色は帯・マーカー線・記事カードに限定する - 赤は前編・後編などの小さな丸バッジだけに使う - 文字は黒に近い焦げ茶で統一し、黒帯の上だけ金文字にする ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の縦書きキャッチコピー | 明朝 | Shippori Mincho | 500 | 64px | 1.1 | 0.0em | | `headline-lg` | 黒枠リボン内のセクション見出し | 装飾・ディスプレイ | Dela Gothic One | 400 | 40px | 1.2 | 0.05em | | `headline-md` | 白円内のリード見出し・小見出し | ゴシック | Noto Sans JP | 900 | 30px | 1.3 | 0.02em | | `headline-sm` | カードやブロックの見出し | ゴシック | Noto Sans JP | 700 | 20px | 1.4 | 0.02em | | `body-md` | 中央揃えのリード本文 | ゴシック | Noto Sans JP | 500 | 14px | 2.1 | 0.08em | | `accent` | 黄色い帯の明朝コピー | 明朝 | Shippori Mincho | 500 | 26px | 1.3 | 0.1em | | `note` | ※付きの注釈・年齢性別 | ゴシック | Noto Sans JP | 500 | 12px | 1.6 | 0.05em | - FV は大きな縦書き明朝で、余白を広く取る - セクション見出しは極太のレトロなゴシックを黒枠で囲む - リード本文は中央揃えにし、行間を 2 倍程度に広げる - 本文中の大事な語だけ一回り大きな太字にする - お客様の声は左揃えにし、末尾に（年齢／性別）を添える - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。商品セクションの円形ポイントは 2+1 の配置 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - 商品セクションは金の外枠の内側にベージュ面を置く入れ子構造 - 白い大円は画面幅より少しはみ出す大きさで中央に置く - 吹き出しは左右に交互に寄せ、隙間にレモンの輪切りを置く - 購入リンクは 3 つのロゴボタンを横に並べる - 商品情報は 2 列の定義表にする ## Elevation & Depth - 基本はフラット。紙の質感で奥行きを出す - 記事カードだけ右下に柔らかい影を付ける - 缶の写真は落ち影で浮かせる ## Shapes - **角丸**: 小 0px ／ 中 4px ／ 大 9999px。ボタンは角丸の長方形。 - **写真の切り抜き**: 缶は切り抜き。人物写真は角丸なしの長方形。レモンは輪切りの円形 - **セクション境界**: 直線で色を切り替える。白い大円が境界をまたぐ - ボタン・カードは角丸なしの四角にする - 見出し枠は黒の太線で、下辺が中央でへこむリボン型にする - 装飾は正円と吹き出しを主に使う ## Components - **黒枠リボン見出し**（`heading-ribbon-frame`）: 黒の太線で囲み、下辺が V 字にへこむ枠の中に極太の見出しを置く - **黒帯のページ内ナビ**（`section-nav-bar`）: 黒い帯の上に金色の細枠ボタンを 4 つ並べる - **白い大円のリード**（`hero-circle`）: 2 色に分けた地の上に白い正円を置き、見出しと中央揃えの本文を入れる - **EC ロゴ購入ボタン**（`store-buttons`）: 白地に金色の細枠を付けたロゴボタンを 3 つ横に並べる。上に線つきのラベルを置く - **レモン輪切りのポイント**（`lemon-point`）: レモンの輪切り画像の中に太字の短い特長を書き、下に V 字の矢印を付ける - **お客様の声の吹き出し**（`voice-bubble`）: ターコイズ地の上に白い楕円の吹き出しを置き、しっぽを下に付ける - **記事カード**（`article-card`）: 上に写真、下に黄色の面。日付の小さな枠、マーカー線付きのタイトル、サブ文を置く - **前編/後編の丸バッジ**（`badge-round`）: カードの右上角に重ねる赤い円に白い太字を入れる - **黄色の斜めラベル**（`label-tab`）: 囲み枠の左上に重ねる黄色い傾いたラベル。中に太字のタイトル ## Do's and Don'ts **Do** - ターコイズと金を 1 画面の中で隣り合わせて使う - 地にはザラついた紙のノイズを薄くかける - レモンの輪切りを画面の端で切れるように散らす - 見出しは必ず黒枠のリボン型でそろえる - 本文は中央揃えで行間を広く取る **Don't** - ピル型やネオン系のボタンを使わない - 白一色の地を広く使わない - グラデーションの強いポップな配色にしない - 赤をバッジ以外に広げない - 細い欧文フォントで見出しを作らない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品を印象付ける）: 明るいグレーの地。上に縦書きの明朝コピー、下に缶のアップを置く 2. **キャッチ帯**（一言で定番感を伝える）: 黄色の帯に明朝のコピーと共同開発のロゴを置く 3. **ページ内ナビ**（各セクションへ移動させる）: 黒帯に金色の枠ボタンを 4 つ並べる 4. **コンセプト**（商品の狙いを伝える）: ターコイズと金に分けた地に白い大円。中に見出しと中央揃えの本文 5. **商品紹介**（商品の価値と購入先を見せる）: 金枠とベージュ面。円形の背景に缶とグラス、本文、EC ボタン 3 つ 6. **特長**（こだわりを 3 点で示す）: 罫線ノート風の面に、レモン輪切りのポイントを 3 つ置く 7. **開発パートナー紹介**（専門性で信頼を得る）: 黒い細枠の箱に黄色ラベル、ロゴ、本文、注釈を入れる 8. **限定商品**（期間限定品を告知する）: 淡いオレンジのグラデーション写真に、見出し・本文・缶・黄色の丸バッジ 9. **お客様の声**（評判で後押しする）: ターコイズ地に白い吹き出しを左右交互に並べ、レモンを散らす 10. **読み物**（開発ストーリーへ誘導する）: クリーム地に黒ラベルと、写真＋黄色面の記事カードを 2 枚 11. **商品情報**（仕様を示す）: 金のグラデーション地に 2 列の定義表と缶 2 本。下に大きな英字の透かし 12. **フッター**（サイト内の導線と注意表示）: 淡いグレー地にロゴ、SNS、リンク一覧、飲酒の注意表示 ## Imagery - 缶は水滴の付いた写実的な切り抜き写真にし、柔らかい落ち影を付ける - レモンの輪切りは真上から撮った鮮やかな黄色で、画面の端で切る - 氷入りのグラスは缶の後ろに並べて爽快感を出す - 地は紙やキャンバスのようなノイズ質感にする - 人物写真は社員や開発者の自然なポートレート - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC の FV は缶を中央に置き、縦書きコピーを左右に分ける - PC の商品紹介は写真を左、本文を右の 2 カラムにする - 特長の 3 ポイントは PC で横 1 列に並べる - 吹き出しは PC で 3 列ほどに散らして配置する - 記事カードは PC で写真を左、テキストを右の横長カードにする - 商品情報は PC で缶を左、表を右に置く ## 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-750e8a9f`（元 LP の URL から採番） - **元 LP**: https://www.sapporobeer.jp/shin-lemon_sour/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（8/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。