--- version: alpha name: Playful Retro Korean Lifestyle Goods LP description: 白地にレモンイエローのラベル、深緑の吹き出し、手書きイラストの案内役を組み合わせた雑貨特集 LP。テーマごとにロゴ風の見出し色を変え、円形写真のあと角丸写真を左右交互に並べていく。 colors: primary: '#E8628E' background: '#FFFFFF' background-alt: '#FFFFFF' secondary: '#416E69' cta: '#F1EC91' on-cta: '#394D48' text-body: '#89421F' accent-1: '#D13527' accent-2: '#02A8B9' accent-3: '#8077AE' tint-1: '#F8B6D3' line: '#E4D986' marker: '#A0453A' typography: display: fontFamily: Dela Gothic One fontSize: 56px fontWeight: 700 lineHeight: 1.1 letterSpacing: 0.02em headline-md: fontFamily: Playfair Display fontSize: 40px fontWeight: 700 lineHeight: 1.05 headline-sm: fontFamily: Jost fontSize: 14px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.12em body-md: fontFamily: Zen Maru Gothic fontSize: 12px fontWeight: 700 lineHeight: 2.3 letterSpacing: 0.05em accent: fontFamily: Klee One fontSize: 11px fontWeight: 600 lineHeight: 1.9 letterSpacing: 0.15em label-button: fontFamily: Zen Maru Gothic fontSize: 12px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em note: fontFamily: Zen Kaku Gothic New fontSize: 10px fontWeight: 500 lineHeight: 2.0 letterSpacing: 0.05em rounded: sm: 8px md: 16px lg: 20px full: 999px spacing: unit: 8px card: 32px section: 100px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' label-pill: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 26px speech-bubble: backgroundColor: '{colors.secondary}' typography: '{typography.accent}' rounded: '{rounded.lg}' height: 70px guide-character: textColor: '{colors.secondary}' typography: '{typography.accent}' height: 100px photo-card: rounded: '{rounded.md}' height: 290px theme-logo: textColor: '{colors.accent-1}' typography: '{typography.display}' height: 150px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 40px profile-card: backgroundColor: '{colors.background}' textColor: '{colors.secondary}' typography: '{typography.note}' rounded: '{rounded.md}' height: 470px handwritten-aside: textColor: '{colors.marker}' typography: '{typography.accent}' height: 20px --- # DESIGN.md — ピンク×深緑吹き出しの韓国雑貨コラボ LP（Playful Retro Korean Lifestyle Goods LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 日用品・生活雑貨 ／ **雰囲気**: ポップ・元気、かわいい、レトロ、親しみ・手作り感 - **キーワード**: 白地・レモンイエローのラベル・深緑の吹き出し・手書き案内役・円形写真・ハングル風の手書き文字 - **地の質感**: フラットな白地に、切り抜いた商品写真を散らす。紙の雑誌のように軽い質感。 - **形**: 円形のメイン写真、角丸 16px の写真カード、ピル型ラベル、手描き風の吹き出し - **温度感**: 明るく温かい。遊び心がある ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#E8628E` | メインロゴの見出し(ピンク) | 2% | 推定 | | `background` | `#FFFFFF` | 本文の地 | 51% | 画素の実測 | | `background-alt` | `#FFFFFF` | 左右の余白の地 | 8% | 画素の実測 | | `secondary` | `#416E69` | 吹き出しと案内役の線画(深緑) | 4% | 画素の実測 | | `cta` | `#F1EC91` | ボタンとラベル(レモンイエロー) | 3% | 画素の実測 | | `on-cta` | `#394D48` | ボタン上の文字 | 0% | 画素の主要色に補正 | | `text-body` | `#89421F` | 本文テキスト(茶) | 1% | 画素の主要色に補正 | | `accent-1` | `#D13527` | テーマ見出し・プラスボタン(赤) | 1% | 画素の実測 | | `accent-2` | `#02A8B9` | テーマ見出し(シアン) | 1% | 画素の実測 | | `accent-3` | `#8077AE` | テーマ見出し(ラベンダー) | 1% | 画素の実測 | | `tint-1` | `#F8B6D3` | テーマ見出し(淡いピンク) | 0% | 画素の実測 | | `line` | `#E4D986` | コンテンツ枠の縦線とカード枠 | 0% | 画素の主要色に補正 | | `marker` | `#A0453A` | ハングルの手書きひとこと | 0% | 推定 | - 地は白で統一し、左右の外側は薄いグレーにする。そこに切り抜いた商品写真を散らす - ラベル・ボタン・SNS のリンク帯はすべてレモンイエロー - 吹き出しは常に深緑の塗りに白文字 - テーマ見出しは赤・シアン・ラベンダー・淡いピンクで色分けし、そのテーマ内の＋ボタンにも同じ色を使う - 本文とハングルの手書きひとことは茶系で、黒は使わない ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | メインロゴ・テーマ見出し | 装飾・ディスプレイ | Dela Gothic One | 700 | 56px | 1.1 | 0.02em | | `headline-md` | 欧文の見出し | 欧文セリフ | Playfair Display | 700 | 40px | 1.05 | 0.0em | | `headline-sm` | 欧文の小見出し(弧状に配置) | 欧文サンセリフ | Jost | 500 | 14px | 1.2 | 0.12em | | `body-md` | リード本文(中央揃え) | 丸ゴシック | Zen Maru Gothic | 700 | 12px | 2.3 | 0.05em | | `accent` | 吹き出しの文字・ハングルのひとこと | 手書き・筆 | Klee One | 600 | 11px | 1.9 | 0.15em | | `label-button` | ラベルとボタン | 丸ゴシック | Zen Maru Gothic | 700 | 12px | 1.4 | 0.08em | | `note` | プロフィールの本文・コピーライト | ゴシック | Zen Kaku Gothic New | 500 | 10px | 2.0 | 0.05em | - 本文は中央揃えで短く改行し、行間を 2 以上とる - 吹き出しは手書き風の書体で、字間を広くとる - テーマ見出しはロゴのように作り込み、毎回違う書体の印象にする - 写真の脇にハングルのひとことを手書き風で添える - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。左右 6% に黄色の縦線を引き、外側は装飾領域にする - **本文ブロックの幅**: 画面幅の約 80% - **余白**: セクション間 100px、基本単位 8px、カード内 32px（375px 幅換算） - 写真カードは幅 70% ほどにし、左寄せと右寄せを交互に置く - ラベルはピル型を 2 段に並べ、片側に寄せる - 吹き出しは写真の角に重ねるか、案内役イラストの横に置く - テーマごとに「見出し→円形写真→ラベル→写真カード群→案内役のひとこと」を繰り返す ## Elevation & Depth - 影は使わず、フラットにする - 写真の重なりと切り抜き商品で奥行きを出す ## Shapes - **角丸**: 小 8px ／ 中 16px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: テーマの最初は大きな円形(縦長の楕円)、続く写真は角丸の縦長、ときどきアーチ型 - **セクション境界**: 区切り線は使わず、余白とテーマ見出しで区切る - 吹き出しは不定形の楕円に三角のしっぽを付ける - 写真の左下には円形の＋ボタンを置く - プロフィールは深緑の細線で囲んだ角丸の枠 ## Components - **ピル型ラベル**（`label-pill`）: レモンイエローの短いフレーズを 2 段に並べる - **深緑の吹き出し**（`speech-bubble`）: 不定形の吹き出しに白い手書き文字 - **手書き案内役**（`guide-character`）: 線画の人物と吹き出しを横に並べた、テーマのまとめ - **角丸写真カード**（`photo-card`）: 縦長写真の左下にテーマ色の＋ボタンを置く - **テーマロゴ見出し**（`theme-logo`）: テーマ色の装飾文字に、欧文やハングルの添え字を付ける - **主 CTA ボタン**（`button-primary`）: 横長のレモンイエローのボタンに、文字と右矢印を添える - **プロフィール枠**（`profile-card`）: 深緑の細線で囲んだ枠に、イラスト・名前・紹介文・SNS を入れる - **手書きひとこと**（`handwritten-aside`）: 写真の脇に置く茶色のハングル短文 ## Do's and Don'ts **Do** - テーマごとに見出しの色と＋ボタンの色を揃える - 写真カードは左右交互にずらして置き、リズムを作る - 切り抜いた商品写真を余白にぽつぽつ置く - 吹き出しの文は 1〜3 行の口語にする **Don't** - 黒ベタや濃い影を使わない - 写真を四角い全幅で並べ続けない - 吹き出しの色をテーマごとに変えない(深緑で固定) - 本文を左揃えの長文にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（企画の世界観とコラボを伝える）: 案内役のイラスト・ラベル・ピンクのロゴ・円形写真を縦に積む 2. **導入文**（企画の趣旨を説明する）: 茶色の文字を中央揃えで置き、吹き出しと案内役を添える 3. **テーマ 1 特集**（食まわりの雑貨を見せる）: 赤のロゴ・円形写真・ラベル・角丸写真を交互に並べる 4. **テーマ 2 特集**（伝統色のインテリア雑貨を見せる）: シアンのロゴを文様で挟み、楕円写真と写真カードを並べる 5. **テーマ 3 特集**（カラフルなトレンド雑貨を見せる）: ラベンダーの欧文セリフ見出しと、アーチ型の写真 6. **テーマ 4 特集**（ユーモア雑貨を見せる）: 淡いピンクのロゴと、黄色背景で撮った写真カード 7. **ストア誘導**（購入ページへ送る）: 全幅の写真にロゴを重ね、各テーマの円形カルーセルと VIEW MORE ボタンを置く 8. **CTA**（全商品の一覧へ誘導する）: 横長のレモンイエローのボタン 9. **プロフィール**（コラボ相手を紹介する）: 細線の角丸枠にイラストと紹介文を入れる 10. **フッター**（ロゴと外部リンクを置く）: 商品の切り抜きを横一列に並べ、ロゴとアイコン付きのボタン 2 つを置く ## Imagery - 自然光で撮ったテーブルコーディネートの写真。レトロな柄のクロスやウッドの壁を背景にする - モデルは明るい表情でポーズをとった自然なライフスタイル写真 - 単色(黄色・白)の背景に商品を置いたフラットな俯瞰写真 - 白抜きにした商品の切り抜きを小さく散らす - 線画の人物イラストを案内役として繰り返し使う - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 画面でも中央に約 375px 幅の SP 列を置き、左右は切り抜き商品を散らした装飾面にする - PC の左右にロゴや縦書きのコラボ表記を固定表示してもよい - カルーセルは PC では 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-8005a6ac`（元 LP の URL から採番） - **元 LP**: https://www.dot-st.com/studioclip/cp/annyon_lineup - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（8/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。