--- version: alpha name: Pastel Pixel Retro Game Cosmetics LP description: ピンク・ラベンダー・空色のパステル地に、ドット絵の雲・ハート・グミ・吹き出しを散らした携帯ゲーム機風のコスメ LP。商品写真は白い淡ピンクのカードにまとめ、色見本と目元写真を 2 列グリッドで並べる。 colors: primary: '#F8DBE0' background: '#E7CDE6' secondary: '#B6DBF5' surface: '#FAF0F9' background-alt: '#DFD9FF' tint-1: '#FFFFFF' text: '#0C090C' text-muted: '#595359' line: '#79444C' accent-1: '#E0306E' marker: '#F9C5CB' accent-2: '#7A62B6' accent-3: '#7CC242' dark-section: '#EC939D' typography: display: fontFamily: Dela Gothic One fontSize: 36px fontWeight: 400 lineHeight: 1.1 headline-lg: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 900 lineHeight: 1.3 headline-md: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 700 lineHeight: 1.4 body-lg: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Playfair Display fontSize: 28px fontWeight: 900 lineHeight: 1.1 note: fontFamily: Noto Sans JP fontSize: 8px fontWeight: 400 lineHeight: 1.4 rounded: sm: 0px md: 0px lg: 0px full: 999px spacing: unit: 8px card: 16px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' pixel-speech-bubble: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.body-lg}' height: 70px hashtag-bubble: backgroundColor: '{colors.primary}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 70px product-detail-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 720px swatch-strip: textColor: '{colors.text}' typography: '{typography.body-md}' height: 115px badge-revival: backgroundColor: '{colors.accent-1}' typography: '{typography.note}' height: 14px pixel-photo-frame: height: 380px ribbon-heading: backgroundColor: '{colors.dark-section}' typography: '{typography.headline-md}' height: 65px outlined-title: textColor: '{colors.tint-1}' typography: '{typography.headline-lg}' height: 60px --- # DESIGN.md — パステル×ドット絵の平成レトロコスメ LP（Pastel Pixel Retro Game Cosmetics LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: かわいい、レトロ、ポップ・元気、やさしい・柔らかい - **キーワード**: ドット絵・平成レトロ・携帯ゲーム機・パステル・グミ・ゼリー・吹き出し - **地の質感**: マットなパステル単色地に、ギザギザのピクセル枠と 8bit 風の装飾を重ねる。写真はツヤと透明感のある物撮り。 - **形**: 角丸なしの四角とピクセル段差の角。吹き出しは角が階段状のドット枠。 - **温度感**: 甘く明るい暖色寄りのパステル。空色セクションで抜け感を出す。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#F8DBE0` | ブランドを代表するピンク地 | 22% | 画素の実測 | | `background` | `#E7CDE6` | ラベンダーピンクの基本地 | 20% | 画素の実測 | | `secondary` | `#B6DBF5` | ゲーム画面風の空色セクション地 | 12% | 画素の実測 | | `surface` | `#FAF0F9` | 商品説明カードの淡い面 | 10% | 画素の実測 | | `background-alt` | `#DFD9FF` | ラベンダーの写真セクション地 | 8% | 画素の実測 | | `tint-1` | `#FFFFFF` | 白地の使い方セクション | 6% | 画素の実測 | | `text` | `#0C090C` | 見出し・商品名の文字 | 2% | 画素の実測 | | `text-muted` | `#595359` | 説明文のグレー | 1% | 画素の実測 | | `line` | `#79444C` | 写真のピクセル枠のローズブラウン | 2% | 画素の主要色に補正 | | `accent-1` | `#E0306E` | 復活バッジ・カテゴリ名の濃ピンク | 0% | 推定 | | `marker` | `#F9C5CB` | 吹き出し内強調語の下マーカー | 0% | 画素の実測 | | `accent-2` | `#7A62B6` | ピクセル枠のラベンダー紫 | 1% | 推定 | | `accent-3` | `#7CC242` | ドット草原の緑 | 0% | 推定 | | `dark-section` | `#EC939D` | 帯見出しのくすみローズ | 2% | 画素の実測 | - 地はピンク・ラベンダー・空色のパステルをセクションごとに切り替える。 - 商品詳細は必ず淡い surface カードに入れ、細いピンクの枠線で囲む。 - 濃ピンクはバッジ・カテゴリ名など小面積だけに使う。 - 写真枠はローズブラウン・赤・紫などの濃色ピクセル線にし、右下にずらした淡い影線を付ける。 - 強調語は黒太字＋淡ピンクの下マーカー。 - ロゴ風英字見出しはピンク・黄・緑・青のレインボー配色＋黒縁。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ドット感のあるレインボー英字タイトル | 装飾・ディスプレイ | Dela Gothic One | 400 | 36px | 1.1 | 0.0em | | `headline-lg` | 黒縁付きの白抜きセクション見出し | ゴシック | Noto Sans JP | 900 | 22px | 1.3 | 0.0em | | `headline-md` | カード内の 2 行の訴求見出し | ゴシック | Noto Sans JP | 700 | 17px | 1.5 | 0.02em | | `headline-sm` | 色名＋英名の小見出し | ゴシック | Noto Sans JP | 700 | 11px | 1.4 | 0.0em | | `body-lg` | 吹き出し内のキャッチ | ゴシック | Noto Sans JP | 500 | 15px | 1.5 | 0.02em | | `body-md` | 色説明・本文 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | | `accent` | 太い欧文の手書き風小見出し | 欧文セリフ | Playfair Display | 900 | 28px | 1.1 | 0.0em | | `note` | 注釈 | ゴシック | Noto Sans JP | 400 | 8px | 1.4 | 0.0em | - 見出しは中央揃えで 2 行構成。 - 吹き出しは上行を細め、下行を太字＋マーカーで強調。 - 色名は日本語＋英名を横並びにする。 - 色見本の上には色名を縦書きで重ねる。 - 本文は小さめで、文字量を抑える。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。色見本カード内は 2 列グリッド。 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算） - 商品ごとに吹き出し付き物撮り→詳細カードを繰り返す。 - カード内は見出し→横長の色見本→2×2 の目元＋質感写真の順。 - 人物写真は左右交互にずらし、少し重ねて縦に並べる。 - ドット装飾は余白の左右端に小さく散らす。 ## Elevation & Depth - ぼかし影は使わない。 - 写真枠は右下に 6px ずらした淡色のベタ影でピクセル感を出す。 - 吹き出しは黒ドット線＋右下の灰色の段差影。 ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。 - **写真の切り抜き**: 四角形。角を階段状に欠いたピクセル枠で囲む。 - **セクション境界**: 直線の色切り替え、またはチェッカー柄のドット帯。 - 角丸は使わず、角はピクセルの段差で表現する。 - 吹き出しのしっぽもドットの三角にする。 - ハート・星・グミ・雲はすべて 8bit ドット絵にする。 ## Components - **ドット吹き出し**（`pixel-speech-bubble`）: 白地に黒のピクセル枠。2 行のキャッチを入れ、下行をマーカーで強調する。 - **ハッシュタグ吹き出し**（`hashtag-bubble`）: 淡ピンク地のピクセル吹き出しを 3 つ縦に並べ、#付きの特長を太字で入れる。 - **商品詳細カード**（`product-detail-card`）: 淡い面＋細いピンク枠。見出し・色見本・2×2 の色写真グリッドをまとめる。 - **色見本ストライプ**（`swatch-strip`）: 4 色の塗り見本を横に並べ、色名を縦書きで重ねる。 - **復活バッジ**（`badge-revival`）: 写真右上に置く濃ピンク地・白文字の小さな四角ラベル。 - **ピクセル写真枠**（`pixel-photo-frame`）: 濃色の太線と段差の角、右下の淡いずらし影で人物写真を囲む。 - **帯見出し**（`ribbon-heading`）: くすみローズ地の横長パネルに白文字 3 行。端にドットのグミキャラを置く。 - **黒縁付き見出し**（`outlined-title`）: 白文字に黒の太い縁取り。英字はレインボー配色にする。 ## Do's and Don'ts **Do** - ドット絵の装飾（ハート・星・雲・グミ）を余白に散らす。 - 商品ごとに吹き出し・物撮り・詳細カードの同じ型を繰り返す。 - 色見本と目元写真をセットで見せる。 - パステル地を 2〜3 色でセクションごとに切り替える。 - 写真枠は角を段差にしたピクセル枠にする。 **Don't** - 角丸やぼかし影を使わない。 - 濃い彩度の大きな面で地を塗らない。 - 明朝体や上品すぎる書体を使わない。 - ドット絵以外のリアルなアイコンを混ぜない。 - 長い本文を入れない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（起用モデルとコレクション名で世界観を伝える）: ピンク地に集合写真、黒縁見出しとドット風ロゴを中央に置く 2. **ラインナップ紹介**（アイテムの全体像を見せる）: 空色地にドットの草原と雲。物撮りに吹き出しで商品名を添える 3. **コンセプト帯**（配色コンセプトを短く伝える）: くすみローズの帯見出しに 3 行の白文字 4. **商品詳細（繰り返し）**（各パレットの色と質感を伝える）: 吹き出し＋物撮り→色見本と 2×2 写真の淡色カード 5. **使い方のヒント**（応用の使い方を提案する）: 欧文見出しと写真 3 枚の横並び、番号付きの説明 6. **特長まとめ**（推しポイントを 3 つ示す）: 空色地にハッシュタグ吹き出しを縦に 3 つ、下に手持ち写真 7. **モデルギャラリー**（ファン向けに人物写真を見せる）: ピンク地にピクセル枠の写真を左右交互にずらして並べる 8. **使用アイテム**（メイクに使った商品を示す）: ラベンダー地にモデル写真、商品切り抜きと商品名を 3 列で並べる 9. **サイズ訴求**（携帯しやすさを伝える）: 吹き出し＋写真 2 枚、注釈を添える 10. **使い方**（塗り方を説明する）: 白地に欧文見出し、アップ写真と 1 行説明、締めの集合物撮り ## Imagery - 商品はパステルピンクのグラデ地で、ツヤのあるアクリル台に置いて撮る。 - ジェリービーンズやグミベアをカラフルに散らす。 - 目元アップは明るく均一な光で撮り、質感のクローズアップと並べる。 - 人物は単色パステル背景で、商品を手に持つ。 - 装飾は 8bit ドット絵（ハート・星のきらめき・雲・グミ・はしご・草原）にする。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 版の画像はないので推奨を書く。PC では中央 750px 幅の 1 カラムを保ち、左右はパステル地で埋める。 - 色写真グリッドは PC で 4 列にしてもよい。 - 人物ギャラリーは PC で 2〜3 列の千鳥配置にする。 - ドット装飾は左右の余白に増やして世界観を広げる。 ## 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-6b20db9b`（元 LP の URL から採番） - **元 LP**: https://www.etudehouse.com/jp/ja/products/detail/219030100/sp=1 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。