--- version: alpha name: Retro Cartoon Collab Loungewear LP description: 濃紺・真紅・くすみブルーの単色ブロックに、白フチで切り抜いた商品写真を載せたアパレルのコラボ告知 LP。太い欧文スラブ体の見出しとカートゥーンキャラで、アメリカンレトロ雑誌のようなポップさを出す。生成りの細かいドット地と、かすれた筆跡柄のグレー地が紙っぽい質感を加える。 colors: primary: '#31405F' accent-1: '#E31B23' secondary: '#6480A8' background: '#FFFFFF' background-alt: '#F5F4F2' tint-1: '#CBCBCB' tint-2: '#F4F4F4' marker: '#FDF227' text: '#222222' text-muted: '#A9A0A8' cta: '#31405E' on-cta: '#FFFFFF' accent-1-accessible: '#DC1A22' typography: display: fontFamily: Alfa Slab One fontSize: 34px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.02em headline-md: fontFamily: Alfa Slab One fontSize: 28px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.01em headline-sm: fontFamily: Alfa Slab One fontSize: 13px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.02em body-lg: fontFamily: Cooper Hewitt, Rokkitt fontSize: 13px fontWeight: 700 lineHeight: 2.0 letterSpacing: 0.04em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 2.1 letterSpacing: 0.02em accent: fontFamily: Libre Baskerville fontSize: 15px fontWeight: 400 lineHeight: 1.5 label-button: fontFamily: Alfa Slab One fontSize: 20px fontWeight: 900 lineHeight: 1.0 letterSpacing: 0.03em rounded: sm: 0px md: 16px lg: 200px full: 999px spacing: unit: 8px card: 24px section: 60px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' topics-label: backgroundColor: '{colors.primary}' typography: '{typography.headline-sm}' height: 30px color-block-photo: backgroundColor: '{colors.primary}' height: 375px bilingual-desc: backgroundColor: '{colors.background-alt}' textColor: '{colors.primary}' typography: '{typography.body-lg}' height: 420px marquee-band: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 90px red-frame-photo: height: 240px arch-card: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 560px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 75px section-title: backgroundColor: '{colors.tint-2}' textColor: '{colors.accent-1}' typography: '{typography.display}' height: 80px --- # DESIGN.md — 紺×赤×グレーのレトロ漫画風アパレルコラボ LP（Retro Cartoon Collab Loungewear LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ファッション・アクセサリー ／ **雰囲気**: レトロ、ポップ・元気、力強い・インパクト - **キーワード**: アメリカンレトロ・カートゥーン・単色ブロック・白フチ切り抜き・太字スラブ見出し・コラボ告知 - **地の質感**: 生成りの細かいドット地と、かすれた筆跡のグレー柄地。光沢感はなく、印刷物のようなマットな質感 - **形**: 基本は直角のブロック。赤い太枠の写真フレーム、上が半円のアーチ型カード、ピル型ボタンがアクセント - **温度感**: 紺と赤のコントラストが強いけれど、生成り地で少し温かみを加えた中間の温度 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#31405F` | メインの濃紺ブロック・見出し・ボタン | 11% | 画素の実測 | | `accent-1` | `#E31B23` | アクセントの赤（見出し・枠線・ブロック地） | 9% | 推定 | | `secondary` | `#6480A8` | くすみブルーのブロック地 | 6% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白地 | 13% | 画素の実測 | | `background-alt` | `#F5F4F2` | 生成りのドット地（商品の説明エリア） | 18% | 画素の実測 | | `tint-1` | `#CBCBCB` | ファーストビューのライトグレー地 | 5% | 画素の実測 | | `tint-2` | `#F4F4F4` | 筆跡柄の淡いグレー地 | 12% | 画素の実測 | | `marker` | `#FDF227` | 黄色の英字見出し（紺地の上に使用） | 0% | 画素の実測 | | `text` | `#222222` | 黒の本文・マーキー文字 | 1% | 推定 | | `text-muted` | `#A9A0A8` | 区切り線・補助線 | 0% | 画素の主要色に補正 | | `cta` | `#31405E` | 一覧へ誘導するピル型ボタン | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタンの文字 | 0% | 画素の主要色に補正 | | `accent-1-accessible` | `#DC1A22` | AA を満たす補正値（計算） | | 計算 | - 写真ブロックの地は商品ごとに紺・赤・くすみブルーを切り替え、その下の説明文も同じ色で書く - 説明エリアは生成りのドット地で統一し、写真ブロックとの明度差でリズムをつける - セクション見出しは赤で書き、筆跡柄のグレー地や白地の上に置く - 黄色は紺地の上の短い英字だけに使い、他では使わない - 写真フレームとアーチ型カードの太枠は赤で統一する - CTA ボタンは濃紺のベタ塗りに白抜き文字 - `section-title` は文字 `#E31B23` × 背景 `#F4F4F4` のコントラスト比が 4.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#DC1A22`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューとセクションの大見出し（斜体の太いスラブ体） | 装飾・ディスプレイ | Alfa Slab One | 900 | 34px | 1.2 | 0.02em | | `headline-md` | 商品名やノベルティの見出し | 欧文セリフ | Alfa Slab One | 900 | 28px | 1.2 | 0.01em | | `headline-sm` | 番号つきラベル（項目名＋番号） | 欧文セリフ | Alfa Slab One | 700 | 13px | 1.2 | 0.02em | | `body-lg` | 英文の説明文（両端揃えの太いスラブ体） | 欧文セリフ | Cooper Hewitt, Rokkitt | 700 | 13px | 2.0 | 0.04em | | `body-md` | 和文の説明文 | ゴシック | Noto Sans JP | 400 | 12px | 2.1 | 0.02em | | `accent` | 価格表記（細めのセリフ体） | 欧文セリフ | Libre Baskerville | 400 | 15px | 1.5 | 0.0em | | `label-button` | ボタンの英字 | 装飾・ディスプレイ | Alfa Slab One | 900 | 20px | 1.0 | 0.03em | - 見出しはすべて英字にし、太い斜体のスラブ体を使う - 説明は英文を先に置いて区切り線で区切り、その下に和文を続ける 2 段構成にする - 英文は両端揃えにして、ブロック状の塊に見せる - 説明文の文字色は、その商品のブロック地の色に合わせる - 価格は「品名＋金額＋yen」を欧文セリフ体で横に並べる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。写真ブロックは全幅 - **本文ブロックの幅**: 画面幅の約 87% - **余白**: セクション間 60px、基本単位 8px、カード内 24px（375px 幅換算） - 写真ブロックは全幅のベタ色地にして、その中央に切り抜き写真を置く - 説明エリアは左右 25px 前後の余白を取り、ラベル→英文→線→和文→価格の順に並べる - ブランド名を横スクロールするマーキーの帯で、セクションの間を区切る - グッズの紹介は全幅の赤枠写真の下に見出しと本文を中央揃えで置く - 最後にピル型ボタン、作家プロフィールの順に置く ## Elevation & Depth - 影は使わず、フラットな面と太い枠線で階層をつける - 切り抜き写真は太い白フチで、ステッカーのように浮かせて見せる ## Shapes - **角丸**: 小 0px ／ 中 16px ／ 大 200px。ボタンはピル型。 - **写真の切り抜き**: 商品写真は白い太フチ付きで切り抜く。グッズ写真は赤い太枠の長方形、ノベルティ写真は上側が半円のアーチ型に収める - **セクション境界**: 色面を直線で切り替える。斜めや波形は使わない - ラベルは角丸なしの長方形の色ベタにする - ノベルティのカードは赤い太枠で、上が半円、下の角は 16px 程度の角丸 - ボタンは完全なピル型にする ## Components - **番号つき項目ラベル**（`topics-label`）: 四角い色ベタの中に、白抜きの斜体英字と大きな番号を入れる。色は商品ブロックに合わせる - **単色ブロックと切り抜き写真**（`color-block-photo`）: 全幅の紺・赤・ブルーの地に、白フチで切り抜いた商品写真を置く - **英和 2 段の説明文**（`bilingual-desc`）: 太字英文と和文を細い線で区切り、最後に価格を添える - **ブランド名のマーキー帯**（`marquee-band`）: 白地に黒の斜体英字を大きく横に流す帯 - **赤い太枠の写真**（`red-frame-photo`）: 全幅に近い写真を 3px ほどの赤枠で囲む - **アーチ型のキャンペーンカード**（`arch-card`）: 上が半円で赤い太枠の白カード。写真の下に紺の見出しと本文を置く - **ピル型の CTA**（`button-primary`）: 濃紺のピル型ボタンに、白い太字スラブ体の英字を入れる - **赤の斜体の大見出し**（`section-title`）: 筆跡柄のグレー地の上に、赤い斜体スラブ体で中央揃えに置く ## Do's and Don'ts **Do** - 商品ごとに地の色を変え、ラベルと本文の色もそれに揃える - 切り抜き写真には必ず白い太フチをつける - 見出しは太い斜体のスラブ体の英字にする - 生成りのドット地と筆跡柄の地で、紙のような質感を出す - 赤・紺・ブルー以外の色は最小限にする **Don't** - グラデーションやドロップシャドウを使わない - 細い明朝や丸ゴシックの見出しにしない - パステル調やビビッドな多色を足さない - 写真を角丸のカードに入れて、ありふれた EC 風にしない - 黄色を広い面に使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（コラボの世界観を一目で伝える）: 上半分はグレー地にキャラロゴ、下半分は紺地に白の英字ロゴとキャラの一部。最後に黄色の英字をあしらう 2. **告知見出し**（新作の発表を知らせる）: 白地に赤い斜体英字を 2 行、中央揃えで大きく置く 3. **コラボの概要**（企画の内容と型数を伝える）: 筆跡柄のグレー地に、赤の英文と和文を細い赤線で区切って並べる 4. **マーキー帯**（ブランド名を印象づけて区切る）: 白地に黒の斜体英字を横に流す 5. **注目アイテム 1〜3**（主力商品を順に紹介する）: 色ブロックに切り抜き写真、その下の生成り地にラベル・英和の説明・価格。紺→赤→ブルーの順に色を変える 6. **グッズ紹介**（小物を紹介する）: 筆跡柄の地に赤の大見出し、赤枠の写真、赤字の見出しと本文、価格を中央揃えで置く 7. **ノベルティ・キャンペーン**（購入特典で後押しする）: 赤枠のアーチ型カードに、写真・紺の見出し・条件の本文と注釈を入れる 8. **CTA**（商品一覧へ誘導する）: 白地の中央に濃紺のピル型ボタン 9. **アーティスト紹介**（作家の経歴で信頼性を補う）: 白地に黒の和文の本文だけをシンプルに置く ## Imagery - 白背景で撮った平置きの商品写真を切り抜き、太い白フチをつけてステッカー風にする - カートゥーン調のキャラクターは、太い黒の主線と赤・白・紺の配色で描く - 小物は明るいグレー背景で、斜めに散らして撮る - 背景には、かすれた筆跡やペンキのような淡いグレーの柄を敷く - 生成り地には細かい網点のテクスチャを敷く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は注目アイテムを 2 カラムにし、説明と色ブロックの写真を左右交互に並べる - PC のファーストビューは、グレー地の左上にロゴ、中央にキャラを大きく置く - PC の概要は英文と和文を縦線で区切って左右に並べる - 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-a943a7e3`（元 LP の URL から採番） - **元 LP**: https://gelatopique.com/Page/feature/250206_KOUSUKESHIMIZU/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（8/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。