--- version: alpha name: Retro Newspaper Pastel Collab Cosmetics LP description: 生成り地に紺の太字見出しを載せた、レトロ新聞のような紙面風コラボコスメ LP。カテゴリごとに地の色がピンク・ミント・ピーチと切り替わり、ドット絵キャラの透かし柄を敷く。商品は黄色地に紺枠の写真カードと、紺の角形「CHECK」ボタンで同じ形をくり返す。 colors: primary: '#023E74' background: '#F9EDDD' surface: '#FDF69E' tint-1: '#ECD5DD' tint-2: '#CCDCDB' accent-1: '#F2D2BD' accent-2: '#F4B09D' background-alt: '#CBCCEA' accent-3: '#C9E6F6' marker: '#FDF69E' cta: '#1D4683' on-cta: '#EFE8EA' text: '#425180' dark-section: '#1946BD' typography: display: fontFamily: Bebas Neue fontSize: 64px fontWeight: 700 lineHeight: 1.0 headline-lg: fontFamily: Dela Gothic One fontSize: 40px fontWeight: 900 lineHeight: 1.0 letterSpacing: 0.02em headline-md: fontFamily: Oswald fontSize: 28px fontWeight: 700 lineHeight: 1.1 headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 15px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.1em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.05em label-button: fontFamily: Oswald fontSize: 16px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.03em accent: fontFamily: Oswald fontSize: 26px fontWeight: 700 lineHeight: 1.0 rounded: sm: 0px md: 0px lg: 0px full: 999px spacing: unit: 8px card: 20px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' newspaper-masthead: textColor: '{colors.primary}' typography: '{typography.headline-sm}' height: 40px category-tab: backgroundColor: '{colors.tint-1}' textColor: '{colors.primary}' typography: '{typography.headline-md}' height: 62px date-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' height: 36px product-card: backgroundColor: '{colors.surface}' height: 230px button-check: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 36px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px heart-divider: textColor: '{colors.primary}' height: 16px bracket-frame: textColor: '{colors.text}' typography: '{typography.body-md}' height: 290px --- # DESIGN.md — 紺×パステルの新聞風コラボコスメ LP（Retro Newspaper Pastel Collab Cosmetics LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: ポップ・元気、かわいい、レトロ、情報量多め・訴求型 - **キーワード**: 新聞紙面風・紺の極太英字・パステル地色の切替・ドット絵透かし・黄色の商品カード - **地の質感**: 細かな網点・メッシュ状の紙っぽい地紋の上に、ドット絵キャラを淡く透かす - **形**: 角丸なしの四角い枠と二重罫線が基本。セクション境界はジグザグの波線 - **温度感**: 暖色寄りのパステルに紺を締め色として使う、明るく懐かしい温度感 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#023E74` | 見出し・枠線・ボタンの紺 | 9% | 画素の実測 | | `background` | `#F9EDDD` | 冒頭とイントロの生成り地 | 14% | 画素の実測 | | `surface` | `#FDF69E` | 商品写真カードの黄色地 | 15% | 画素の実測 | | `tint-1` | `#ECD5DD` | メイクセクションのピンク地 | 13% | 画素の実測 | | `tint-2` | `#CCDCDB` | スキンケアセクションのミント地 | 11% | 画素の実測 | | `accent-1` | `#F2D2BD` | その他セクションのピーチ地 | 9% | 画素の実測 | | `accent-2` | `#F4B09D` | カテゴリ目次のサーモン帯 | 1% | 画素の実測 | | `background-alt` | `#CBCCEA` | まとめ紹介のラベンダー地 | 5% | 画素の実測 | | `accent-3` | `#C9E6F6` | 最下部キャラ帯の水色地 | 4% | 画素の実測 | | `marker` | `#FDF69E` | 見出し英字の背後の黄色ハイライト | 1% | 画素の主要色に補正 | | `cta` | `#1D4683` | 全商品へ誘導するピル型ボタン | 1% | 画素の実測 | | `on-cta` | `#EFE8EA` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `text` | `#425180` | 本文・商品名の紺文字 | 2% | 画素の主要色に補正 | | `dark-section` | `#1946BD` | フッター下部の青帯 | 1% | 画素の実測 | - 文字・枠線・ボタンはすべて紺 1 色にそろえ、黒は使わない - カテゴリごとに地の色をピンク→ミント→ピーチと切り替え、目次の帯の色と対応させる - 商品カードはどのセクションでも黄色地＋紺枠に固定する - 地の上には、地より少し濃い同じ系統の色でドット絵の透かしを敷く - 白は CTA 文字とフッターだけに使う ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | カテゴリ名の巨大な英字見出し（縦長の書体） | 装飾・ディスプレイ | Bebas Neue | 700 | 64px | 1.0 | 0.0em | | `headline-lg` | 新聞の題字風の極太丸みのある英字見出し | 装飾・ディスプレイ | Dela Gothic One | 900 | 40px | 1.0 | 0.02em | | `headline-md` | 日付や商品ブランド名（縦長の太字） | 欧文サンセリフ | Oswald | 700 | 28px | 1.1 | 0.0em | | `headline-sm` | 帯見出し・英字サブコピー | ゴシック | Zen Kaku Gothic New | 700 | 15px | 1.4 | 0.05em | | `body-md` | 商品名・イントロ文 | ゴシック | Noto Sans JP | 500 | 15px | 1.8 | 0.1em | | `note` | 価格の（税込）・注意書き | ゴシック | Noto Sans JP | 500 | 11px | 1.6 | 0.05em | | `label-button` | CHECK・ALL ITEMS などボタン文字 | 欧文サンセリフ | Oswald | 700 | 16px | 1.0 | 0.03em | | `accent` | セクション番号（#1 など）の斜体 | 欧文サンセリフ | Oswald | 700 | 26px | 1.0 | 0.0em | - 英字見出しは大きく、日本語は控えめなサイズにして差をはっきり付ける - カテゴリ見出しは縦長書体で画面幅いっぱいに配置する - 日付は数字を大きく、曜日は角括弧で小さく添える - 本文は中央揃え。商品情報は左揃えで字間を広めにとる - 価格は大きく、（税込）は小さく付ける - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。商品は縦一列に並べる - **本文ブロックの幅**: 画面幅の約 84% - **余白**: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算） - 商品カードは幅 84% の正方形に近い比率で、写真カードの下に商品情報を置く - 商品名ブロックの右上に CHECK ボタンを置く - 各カテゴリの冒頭は、紙面ヘッダー→番号＋見出し→英字サブ→ドット絵アイコン 5 個→ハート区切り線の順に並べる - カテゴリの最後には透かし柄だけの余白を大きくとる ## Elevation & Depth - 影は使わず、紺の 2px 枠線で面を区切る - 立体感は網点の地紋と透かし柄で出す ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。 - **写真の切り抜き**: 黄色地の四角に紺枠。商品は切り抜きで中央に並べる - **セクション境界**: 上辺を細かいジグザグの波線にして、地の色を切り替える - 商品の CHECK ボタンは角丸なしの四角 - 全商品へ誘導するボタンだけは例外的にピル型にする - 見出し上には二重罫線を引く ## Components - **紙面ヘッダー**（`newspaper-masthead`）: 左右に二重罫線、中央に小さな英字の紙名。両端に体力ゲージ風のドット絵 - **カテゴリ目次ボタン**（`category-tab`）: 地の色付きの帯に紺枠。中央に縦長英字、右端に▼ - **期間見出し帯**（`date-band`）: 紺の帯に白い小見出し、その下に大きな日付 - **商品写真カード**（`product-card`）: 黄色地に紺 2px 枠、切り抜き商品を中央に配置 - **CHECK ボタン**（`button-check`）: 紺の四角に白い縦長英字と右矢印 - **全商品ボタン**（`button-primary`）: 紺のピル型に白い太字英字、右端に矢印 - **ハート区切り線**（`heart-divider`）: 細い紺の横線の中央にドット調のハート 4 個。塗りの数でページ進行を示す - **かぎ括弧枠**（`bracket-frame`）: 四隅だけの紺の線で囲む中央揃えの導入文 ## Do's and Don'ts **Do** - カテゴリごとに地色を変え、目次の色と一致させる - 地にはドット絵の透かし柄を全面に敷く - 商品ブロックは写真カード・ブランド名・商品名・価格・CHECK の型をくり返す - 罫線・ジグザグ・ハートなど紙面らしい装飾を入れる **Don't** - 文字や枠に黒や濃いグレーを使わない - カードに影や角丸を付けない - 商品カードの地色をセクションごとに変えない - 明朝体や細い書体を見出しに使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（コラボ企画の世界観を一目で伝える）: 紙面ヘッダーの下に、新聞を重ねたイラスト風キービジュアルを置く 2. **見出しと発売日**（新作であることと発売日を示す）: 黄色ハイライトの上に極太英字、ピンク地の四角に大きな日付。キャラを添える 3. **集合写真**（ラインナップ全体を見せる）: 黄色背景で商品を集合撮影した写真を全幅に近い幅で載せる 4. **導入文**（企画の背景を説明する）: かぎ括弧枠の中に中央揃えの紺文字を 8 行ほど 5. **販売期間**（予約期間と店頭発売日を伝える）: 紺帯の見出し＋大きな日付を 2 段組む 6. **カテゴリ目次**（各カテゴリへ移動させる）: 色違いの帯ボタンを 3 つ縦に並べ、最後に二重罫線 7. **カテゴリ1 商品一覧**（メイク商品を紹介する）: ピンク地に番号付き巨大見出しと、商品カードのくり返し 8. **カテゴリ2 商品一覧**（スキンケア商品を紹介する）: ミント地で同じ型をくり返す 9. **カテゴリ3 商品一覧**（雑貨などを紹介する）: ピーチ地で同じ型をくり返す 10. **全商品 CTA と注意書き**（一覧ページへ送り、販売条件を補足する）: 白地に薄紫の巨大な透かし英字、斜線で挟んだ誘導文、ピル型ボタン、小さな注記、キャラを横一列 11. **関連特集**（別の新作特集へ回遊させる）: ラベンダー地に題字風見出し、ピンク背景の集合写真、短い文、小さなピル型ボタン 12. **締めの CTA**（最後にもう一度一覧へ誘導する）: 水色地にピル型ボタンと、キャラが音符と並ぶ横一列のイラスト ## Imagery - 商品は白背景で切り抜き、黄色地の上に中央揃えで並べる - 集合写真はビビッドな単色背景で、正面のやや上から撮る - キャラはレトロなアニメ調。太い線とフラットな彩色で描く - 地の透かしは低解像度のドット絵（キャラ・ハート・アイテム）を大きく散らす - 見出しの下にはモノクロのドット絵アイコンを 5 個並べる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央に 600px 前後の SP 幅の紙面を置き、左右にも地色と透かし柄を広げる - PC では商品カードを 2〜3 列のグリッドにしてもよい - カテゴリ見出しは 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-4849e1a6`（元 LP の URL から採番） - **元 LP**: https://www.plazastyle.com/contents/bnc2025ss/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（11/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。