--- version: alpha name: Retro Showa Mustard Red Liquor Campaign LP description: ざらついた紙質感のからし黄色を地に、朱赤の帯と深緑のボタンを合わせた昭和レトロ調の酒類キャンペーン LP。手書き風の極太見出し、ギザギザ星形の賞バッジ、円形に切り抜いた人物写真と吹き出しで、にぎやかで親しみのある印象を作る。後半は生成りの紙地に切り替え、応募方法・FAQ・規約を読みやすく並べる。 colors: background: '#E3CC4A' primary: '#CC330B' background-alt: '#ECEBE5' surface: '#ECEBE5' cta: '#01923C' on-cta: '#F3F2EC' secondary: '#1E6B3A' accent-1: '#F5C85C' accent-2: '#CF010A' text: '#161313' text-muted: '#4A4A4A' line: '#555555' tint-1: '#D4C5AB' cta-accessible: '#018035' primary-accessible: '#A52909' secondary-accessible: '#1C6336' typography: display: fontFamily: Dela Gothic One fontSize: 44px fontWeight: 400 lineHeight: 1.1 headline-lg: fontFamily: Dela Gothic One fontSize: 30px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0.02em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 20px fontWeight: 900 lineHeight: 1.35 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.08em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.02em accent: fontFamily: Zen Kaku Gothic New fontSize: 32px fontWeight: 900 lineHeight: 1.1 label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.05em rounded: sm: 4px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 20px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 40px section-band: backgroundColor: '{colors.primary}' textColor: '{colors.accent-1}' typography: '{typography.headline-md}' height: 36px prize-badge: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-lg}' height: 64px count-circle: backgroundColor: '{colors.secondary}' textColor: '{colors.accent-1}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 56px speech-bubble: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 32px step-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 260px faq-item: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 160px button-outline: textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 40px label-box: textColor: '{colors.text}' typography: '{typography.note}' height: 28px --- # DESIGN.md — からし黄×朱赤の昭和レトロ酒類キャンペーンLP（Retro Showa Mustard Red Liquor Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: レトロ、ポップ・元気、情報量多め・訴求型、親しみ・手作り感 - **キーワード**: 昭和レトロ・からし黄・朱赤の帯・紙のざらつき・星形バッジ・円形切り抜き - **地の質感**: 地の色全体に和紙や再生紙のような細かいムラ・ノイズを入れる。平らな単色にはしない - **形**: 角丸の赤パネル、ギザギザ星形バッジ、正円の写真、ピル型ボタン - **温度感**: 暖色寄り。黄と赤で熱気を出し、緑で落ち着かせる ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#E3CC4A` | メインの地色（からし黄・紙質感） | 35% | 画素の実測 | | `primary` | `#CC330B` | 朱赤。見出し帯・パネル・大見出し文字 | 18% | 画素の実測 | | `background-alt` | `#ECEBE5` | FAQ・規約の生成り紙地 | 25% | 画素の実測 | | `surface` | `#ECEBE5` | 赤パネル内の白いステップカード | 7% | 画素の実測 | | `cta` | `#01923C` | 主ボタン（深緑） | 2% | 画素の実測 | | `on-cta` | `#F3F2EC` | ボタン上の文字 | 0% | 画素の主要色に補正 | | `secondary` | `#1E6B3A` | 濃緑。Qアイコン・当選数の丸 | 2% | 推定 | | `accent-1` | `#F5C85C` | 帯見出し上の黄文字・STEPラベル | 1% | 画素の実測 | | `accent-2` | `#CF010A` | Aアイコン・注意文の赤 | 1% | 画素の実測 | | `text` | `#161313` | 見出し・本文の黒 | 3% | 画素の実測 | | `text-muted` | `#4A4A4A` | 回答本文のグレー | 2% | 推定 | | `line` | `#555555` | FAQ区切り線 | 0% | 推定 | | `tint-1` | `#D4C5AB` | 円形写真の背後のベージュ円 | 4% | 画素の実測 | | `cta-accessible` | `#018035` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#A52909` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#1C6336` | AA を満たす補正値（計算） | | 計算 | - 前半の訴求部はからし黄の紙地、後半の情報部は生成りの紙地に切り替える - セクション見出しは全幅の朱赤帯に黄色文字で置く - 応募方法などの手順は朱赤の角丸パネルで囲み、中に生成りカードを入れる - ボタンは必ず深緑にして、赤黄の中で目立たせる - 賞名のバッジは朱赤の星形に白文字、当選数は濃緑の丸に黄文字 - 注意文や強調語だけ赤文字にする - `button-primary` は文字 `#F3F2EC` × 背景 `#01923C` のコントラスト比が 3.62:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#018035`、4.52:1）を使う。 - `section-band` は文字 `#F5C85C` × 背景 `#CC330B` のコントラスト比が 3.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#A52909`、4.55:1）を使う。 - `count-circle` は文字 `#F5C85C` × 背景 `#1E6B3A` のコントラスト比が 4.13:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#1C6336`、4.61:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | メインのキャンペーンロゴ・大見出し | 装飾・ディスプレイ | Dela Gothic One | 400 | 44px | 1.1 | 0.0em | | `headline-lg` | セクション大見出し（朱赤の極太・レトロ書体） | 装飾・ディスプレイ | Dela Gothic One | 400 | 30px | 1.3 | 0.02em | | `headline-md` | 帯見出し・賞品名 | ゴシック | Zen Kaku Gothic New | 900 | 20px | 1.35 | 0.05em | | `headline-sm` | FAQの質問・ステップ見出し | ゴシック | Noto Sans JP | 700 | 16px | 1.5 | 0.02em | | `body-md` | 回答・規約の本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.7 | 0.08em | | `note` | ※注釈・ボタン下の補足 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.02em | | `accent` | 日付・数字の強調（太い数字） | ゴシック | Zen Kaku Gothic New | 900 | 32px | 1.1 | 0.0em | | `label-button` | ボタンのラベル | ゴシック | Noto Sans JP | 500 | 14px | 1.3 | 0.05em | - 大見出しは極太のレトロ書体を朱赤で使い、左右に斜めの短い線を添える - 日付や当選数の数字は本文より2倍以上大きく太くする - 曜日は小さめにして括弧で囲む - 本文は字間を少し広めにして読みやすくする - ボタンは主ラベルの下に小さい補足を2行目で入れる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。商品一覧だけ 4 列グリッド - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算） - 賞品は左にテキストとバッジ、右に円形写真をずらして重ねる - 各セクションの最後に同じ緑ボタンと注釈を繰り返す - 帯見出しは画面幅いっぱいにする - FAQはQとAのアイコンを左列に固定し、本文は右列に揃える - 手順カードは赤パネルの内側に縦に並べ、カード上端にSTEPラベルを重ねる ## Elevation & Depth - 基本は影なしでフラットにする - マイページ画面などの画像だけ薄い影を付けて紙のように浮かせる - 色の差と紙の質感で層を分ける ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 人物と賞品は正円に切り抜き、吹き出しをはみ出させる。商品は切り抜きで背景なし - **セクション境界**: 直線で切り替える。全幅の赤帯を境目に使う - 賞名バッジはギザギザの星形 - 当選数は正円 - STEPラベルは角丸の黄色タブで、カード上端にまたがせる - タブ切替は上側だけ角丸のタブにする ## Components - **緑の主ボタン**（`button-primary`）: 深緑のピル型。2行のラベルを入れ、下に※注釈を置く - **赤帯の見出し**（`section-band`）: 全幅の朱赤帯の中央に黄色の太字を置く - **星形の賞バッジ**（`prize-badge`）: 朱赤のギザギザ星に、白い大きなアルファベットと小さい「賞」 - **当選数の丸**（`count-circle`）: 濃緑の正円に黄色の数字と白い単位 - **吹き出し**（`speech-bubble`）: 白い楕円に黒の細線と短いセリフ。写真の上に重ねる - **手順カード**（`step-card`）: 赤パネル内の生成りカード。上端に黄色いSTEPタブと番号丸 - **FAQ行**（`faq-item`）: 緑の角丸Qアイコンと赤い極太Aの文字。行の間に細線 - **全文表示ボタン**（`button-outline`）: 白抜きのピル型で黒の細枠と「＋」 - **枠付きラベル**（`label-box`）: 細い黒枠の四角に小さな見出し語。期間や時間の上に置く ## Do's and Don'ts **Do** - 地色には必ず紙のムラ感テクスチャを重ねる - 黄・赤・緑の3色を中心に、配色を昭和レトロにまとめる - 人物写真は表情を大きくし、吹き出しを添える - 各ブロックの最後に同じ緑ボタンを繰り返し置く - 数字と日付は極太で大きく見せる **Don't** - 青やパステルなど、昭和らしくない色を足さない - グラデーションやガラス風のような現代的な効果を使わない - ボタンを赤にしない（赤パネルに埋もれる） - 細い明朝体で見出しを作らない - 写真を四角いまま並べない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **告知バー**（別の応募方法へ誘導する）: 最上部に朱赤の細い帯。白文字と丸い矢印アイコン 2. **ファーストビュー**（キャンペーン名・総当選数・期間を伝える）: 黄地に極太の赤ロゴと人物写真。左上に緑の斜めタグ、縦書きの吹き出しを左右に置き、大きな日付と緑ボタンを続ける 3. **賞品紹介**（賞品と当選数を見せる）: 斜め線つきの大見出しのあと、星形バッジ・賞品名・緑の丸を左に、円形写真を右に置き、賞ごとに縦に並べる 4. **Wチャンス**（外れた人にも賞があることを伝える）: 朱赤の角丸パネルに白と黄の極太文字。白い星形で当選数、右に賞品写真 5. **対象商品**（対象商品と点数を示す）: 赤帯見出しの下に点数の説明とシール画像。商品の切り抜き写真を4列で並べ、下に枠付きの容量ラベル 6. **応募方法**（手順を説明する）: 箇条書きの条件文、WEB/ハガキのタブ切替、赤パネルの中にSTEP1〜3のカード 7. **トラブル対処**（エラー時の対応を伝える）: 赤パネルに白文字の見出し。内側のカードに手順文とアプリ画面の画像、赤枠で操作箇所を示す 8. **よくある質問**（疑問を解消する）: 生成りの紙地。緑Qと赤Aのアイコンを使ったQ&Aを細線で区切る 9. **応募規約**（条件の概要を示す）: 赤帯見出しのあとに概要文と赤い注意文、白抜きの全文表示ボタン 10. **お問い合わせ・フッター**（問い合わせ先を示す）: フリーダイヤルを特大の数字で表示。枠付きラベルで期間と時間、最後に社名ロゴとコピーライト ## Imagery - 人物は昭和風の衣装（ニットベスト・襟付きシャツ）を着せ、大げさな表情で撮る - 人物と賞品はベージュの正円の中に収め、手や商品を円の外にはみ出させる - 商品写真は白背景から切り抜いて影なしで並べる - 吹き出しは手描き風の白い楕円に短いオノマトペを入れる - 地色には古紙のような細かい繊維ノイズを入れる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央に SP と同じ幅（約 400px）の列を置き、両側は黄色の紙地で埋める - PC の左右の余白には人物写真・ロゴ・商品ボトルを固定の装飾として置く - PC でも中の要素の並びは SP と同じ 1 カラムのまま - 帯見出しは 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-02af422a`（元 LP の URL から採番） - **元 LP**: https://cp.isanishiki.com/55cp/?fbclid=PAQ0xDSwKmUwFleHRuA2FlbQEwAGFkaWQBqyXebybxyQGnarEmt8dvwVD4nRG_TGDSwvmWykVxRSesCx6O5hMoS_ls87o0nKIPbYWrQnk_aem_ACu4nxMuh3q2wjVKsU_rXQ&utm_campaign=120221732492420777&utm_content=120231452321720777&utm_id=12022173249242 - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。