--- version: alpha name: Holiday Pastel Pet Apparel Lookbook LP description: くすみ水色・水色とクリームの斜めストライプ・ローズレッドの3つの地色を、シリーズごとに切り替えて見せるペット服のホリデールックブック型 LP。見出しは欧文のイタリックセリフだけで書き、写真は角丸・アーチ・楕円に切り抜いて、雑誌の誌面のような構成にしている。 colors: primary: '#8F2B45' background: '#ADC5D1' dark-section: '#B9515C' on-dark: '#FDF1E1' background-alt: '#F5F2EB' tint-1: '#F3EEE5' surface: '#FFFFFF' accent-1: '#7F2839' accent-2: '#DADCDC' secondary: '#FFFDF4' background-accessible: '#AFC6D2' typography: display: fontFamily: Playfair Display fontSize: 72px fontWeight: 400 lineHeight: 1.0 headline-lg: fontFamily: Playfair Display fontSize: 54px fontWeight: 400 lineHeight: 0.95 headline-sm: fontFamily: Playfair Display fontSize: 28px fontWeight: 400 lineHeight: 1.1 letterSpacing: 0.02em accent: fontFamily: Playfair Display fontSize: 28px fontWeight: 400 lineHeight: 1.1 letterSpacing: 0.02em headline-md: fontFamily: Playfair Display fontSize: 26px fontWeight: 400 lineHeight: 1.2 body-md: fontFamily: Playfair Display fontSize: 16px fontWeight: 400 lineHeight: 1.6 note: fontFamily: Montserrat fontSize: 10px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.2em rounded: sm: 8px md: 12px lg: 999px full: 999px spacing: unit: 8px card: 0px section: 120px components: page: backgroundColor: '{colors.background}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' series-heading: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 260px photo-card: textColor: '{colors.primary}' typography: '{typography.accent}' rounded: '{rounded.md}' height: 460px arch-frame: textColor: '{colors.primary}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 480px oval-frame: rounded: '{rounded.full}' height: 450px marquee-text: textColor: '{colors.primary}' typography: '{typography.headline-md}' height: 40px stripe-section: backgroundColor: '{colors.background-alt}' textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 1500px view-all-link: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 180px credit-block: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.body-md}' height: 160px --- # DESIGN.md — くすみ水色×ローズレッドのペット服ホリデー LP（Holiday Pastel Pet Apparel Lookbook LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ペット ／ **雰囲気**: かわいい、上品・高級、やさしい・柔らかい - **キーワード**: ホリデー・ルックブック・欧文イタリックセリフ・アーチ切り抜き・斜めストライプ・ふわふわ素材 - **地の質感**: ボアやニットのふわふわ感と雪の白。ストライプ地は刷毛で塗ったような筆致になっている - **形**: 角丸の長方形、アーチ型、楕円形の写真枠。曲線に沿わせた欧文を添える - **温度感**: 冬らしい冷たい水色の地に、ローズレッドの温かみを効かせる ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#8F2B45` | 見出しの欧文とアクセントになるローズワイン色 | 2% | 画素の実測 | | `background` | `#ADC5D1` | セクションの基本地のくすみ水色 | 30% | 画素の実測 | | `dark-section` | `#B9515C` | 後半シリーズの地のローズレッド | 22% | 画素の実測 | | `on-dark` | `#FDF1E1` | ローズ地に置く見出しのクリーム色 | 1% | 画素の実測 | | `background-alt` | `#F5F2EB` | ストライプのクリーム側 | 12% | 画素の実測 | | `tint-1` | `#F3EEE5` | ストライプの水色側 | 12% | 画素の実測 | | `surface` | `#FFFFFF` | フッター（クレジット）の白い地 | 6% | 画素の実測 | | `accent-1` | `#7F2839` | 写真に出る深いワインレッド | 4% | 画素の主要色に補正 | | `accent-2` | `#DADCDC` | オーナメントの銀色 | 1% | 画素の実測 | | `secondary` | `#FFFDF4` | PC 版の外側の余白に敷くアイボリー | 5% | 画素の実測 | | `background-accessible` | `#AFC6D2` | AA を満たす補正値（計算） | | 計算 | - 地色は全幅ベタ塗りにし、シリーズごとに水色→ストライプ→ローズへ切り替える - 見出しは水色地や白地ではローズワイン色、ローズ地ではクリーム色にする - 強調色はローズワイン系の 1 色に絞る - ストライプは 45 度前後の斜めで、刷毛で塗ったような質感にする - 最後は白地で締め、余白を多めに取る - `series-heading` は文字 `#8F2B45` × 背景 `#ADC5D1` のコントラスト比が 4.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `background-accessible`（`#AFC6D2`、4.55:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | メインビジュアルの大見出し（欧文） | 欧文セリフ | Playfair Display | 400 | 72px | 1.0 | 0.0em | | `headline-lg` | シリーズ名の見出し（2 行） | 欧文セリフ | Playfair Display | 400 | 54px | 0.95 | 0.0em | | `headline-sm` | シリーズ見出しの下に添える小さな語 | 欧文セリフ | Playfair Display | 400 | 28px | 1.1 | 0.02em | | `accent` | 写真の上に斜めや弧に沿わせて置くアイテム名 | 欧文セリフ | Playfair Display | 400 | 28px | 1.1 | 0.02em | | `headline-md` | 横に流れるテキスト帯 | 欧文セリフ | Playfair Display | 400 | 26px | 1.2 | 0.0em | | `body-md` | クレジット表記 | 欧文セリフ | Playfair Display | 400 | 16px | 1.6 | 0.0em | | `note` | ロゴ下の小さなサブ表記 | 欧文サンセリフ | Montserrat | 500 | 10px | 1.4 | 0.2em | - 見出しはすべてイタリックのセリフ体にし、日本語の見出しは置かない - シリーズ見出しは大きな 2 行と、その下の小さな 1 語で組み、中央揃えにする - アイテム名は写真の隅に斜めや弧に沿わせて置く - 太字は使わず、細めのウェイトで上品さを保つ - 本文はほとんど置かず、写真で語らせる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 120px、基本単位 8px、カード内 0px（375px 幅換算） - 写真は左右に約 18px の余白を取るか、全幅で裁ち落とす - シリーズ見出しの上下に 100px 前後のたっぷりした余白を取る - 写真同士は 16px ほどの間隔で縦に並べる - 切り抜いた犬の写真は枠なしで地色の上に浮かせる - 写真を次のセクションの地色にまたがらせ、重なりを作る ## Elevation & Depth - 影は使わず、フラットに仕上げる - 奥行きは写真の重なりと切り抜きで出す ## Shapes - **角丸**: 小 8px ／ 中 12px ／ 大 999px。ボタンは角丸の長方形。 - **写真の切り抜き**: 角丸の長方形、上が半円のアーチ型、縦長の楕円を混ぜる - **セクション境界**: 直線で地色を切り替える - アーチ型の上に欧文を弧状に沿わせる - 角丸は 12px 前後の控えめな大きさにする - 楕円やアーチは 1 セクションにつき 1 つまでにする ## Components - **シリーズ見出し**（`series-heading`）: イタリックの欧文 2 行と小さな 1 語を中央揃えにし、オーナメントの切り抜き写真を添える - **角丸の写真カード**（`photo-card`）: 雪の上の犬の写真を角丸で切り、隅にアイテム名の欧文を重ねる - **アーチ型の写真枠**（`arch-frame`）: 上が半円の写真枠。上部に欧文を弧状に沿わせる - **楕円の写真枠**（`oval-frame`）: 縦長の楕円に切り抜いた写真をストライプ地に置く - **流れるテキスト帯**（`marquee-text`）: アイテム名を繰り返し、画面からはみ出す 1 行の欧文帯にする - **ストライプ地のセクション**（`stripe-section`）: 水色とクリームの刷毛風の斜めストライプを敷いた地 - **一覧へのリンク**（`view-all-link`）: 淡いキャンディケーンのイラストに欧文 2 行を重ねたテキスト型のボタン - **クレジット欄**（`credit-block`）: 白地に中央揃えで、制作スタッフの欧文を並べる ## Do's and Don'ts **Do** - シリーズごとに地色を変え、章立てを見せる - 見出しはイタリックのセリフ体の欧文で統一する - 写真の切り抜き方（角丸・アーチ・楕円）を変えてリズムを作る - オーナメントやキャンディケーンの切り抜きを散らす - 余白を広く取り、雑誌の誌面のように見せる **Don't** - 太いゴシック体や派手な CTA ボタンを置かない - 原色の赤や緑を広い面に使わない - 写真に影やフチを付けない - テキストを詰め込まない - 地色を 4 色以上にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（季節コレクションの世界観を伝える）: 雪景色の全幅写真に大きなイタリック欧文の見出しを重ね、下に小さくロゴを置く 2. **シリーズ紹介 1**（1 つ目のシリーズを見せる）: くすみ水色の地にシリーズ見出しを置き、角丸の写真カードを 2 枚縦に並べる 3. **単品紹介**（小物を 1 点だけ見せる）: アーチ型の写真の上に、アイテム名を弧状に沿わせる 4. **シリーズ紹介 2**（2 つ目のシリーズを見せる）: ストライプ地に見出しとアーチ型の写真を置き、切り抜いた犬の写真や楕円の写真へ続ける 5. **流れるテキスト帯と写真**（おもちゃとの組み合わせを見せる）: 流れるテキスト帯で角丸の写真をはさむ 6. **シリーズ紹介 3**（3 つ目のシリーズを見せる）: ローズ地にクリーム色の見出しを置き、全幅の写真を入れる 7. **切り抜き写真の展開**（小物を見せる）: ローズ地に切り抜いた犬の写真を浮かせ、オーナメントを散らし、写真を重ねて置く 8. **一覧への誘導**（商品一覧へ送客する）: 白地に、淡いイラストと欧文 2 行を重ねたリンクを置く 9. **クレジット**（制作情報を載せる）: 中央揃えの欧文を 3〜4 行並べる ## Imagery - ふわふわの白い敷物の上に小型犬を座らせ、明るいハイキーで撮る - 背景は淡い水色の空か雪景色にする - 小道具は銀のオーナメント、赤いギフトボックス、スノーツリー、キャンディケーン - 犬の写真を背景ごと切り抜き、地色の上に浮かせる - ストライプ地は刷毛で塗ったような手描き風にする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では SP の構成をそのまま中央に約 30% の幅で置き、左右をアイボリーの余白にする - PC の左の余白にロゴ入りの見出し、右の余白に一覧へのリンクを固定する - 要素の並び順は SP と同じにする ## 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-584ab24f`（元 LP の URL から採番） - **元 LP**: https://gelatopique.com/Page/feature/251110CDHOLIDAY/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/10 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。