--- version: alpha name: Pastel Ice Cream Grid Loungewear LP description: 生成りの方眼紙を地にし、両脇をミントグリーンの太枠で挟んだルックブック型のアパレル LP。見出しと価格は苺色の太い欧文サンセリフ。人物写真はパステルの不定形ブロブに切り抜いたり、斜めに傾けた白フチのポラロイド風にしたりして、アイスクリームのような甘くポップな雰囲気を出す。 colors: primary: '#CF3E51' background: '#FAF5EA' secondary: '#B8CEC3' line: '#EBC4C0' tint-1: '#CFDCCB' tint-2: '#D4E2E2' accent-1: '#CEC8D6' accent-2: '#ECDFCE' accent-3: '#F8DBDD' surface: '#F9F5EC' background-alt: '#E0ECEC' primary-accessible: '#CD384B' typography: display: fontFamily: Inter fontSize: 44px fontWeight: 800 lineHeight: 1.1 headline-lg: fontFamily: Inter fontSize: 22px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.01em headline-md: fontFamily: Inter fontSize: 19px fontWeight: 800 lineHeight: 1.15 letterSpacing: 0.02em headline-sm: fontFamily: Inter fontSize: 11px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 500 lineHeight: 2.1 letterSpacing: 0.1em note: fontFamily: Inter fontSize: 11px fontWeight: 400 lineHeight: 1.7 accent: fontFamily: Inter fontSize: 17px fontWeight: 800 lineHeight: 1.0 letterSpacing: 0.05em rounded: sm: 0px md: 0px lg: 40px full: 999px spacing: unit: 8px card: 0px section: 90px components: page: backgroundColor: '{colors.background}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' grid-paper-frame: backgroundColor: '{colors.background}' textColor: '{colors.primary}' blob-portrait: backgroundColor: '{colors.tint-1}' rounded: '{rounded.lg}' height: 360px tilted-name: textColor: '{colors.primary}' typography: '{typography.headline-md}' height: 60px price-list: textColor: '{colors.primary}' typography: '{typography.note}' height: 70px tilted-photo: backgroundColor: '{colors.surface}' height: 300px marquee-heading: textColor: '{colors.primary}' typography: '{typography.display}' height: 60px arc-cta: textColor: '{colors.primary}' typography: '{typography.accent}' height: 220px --- # DESIGN.md — ミント枠×方眼紙のパステル部屋着 LP（Pastel Ice Cream Grid Loungewear LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ファッション・アクセサリー ／ **雰囲気**: かわいい、ポップ・元気、やさしい・柔らかい - **キーワード**: 方眼紙・ミント枠・パステルブロブ・傾いた写真・苺色の欧文・アイスクリーム - **地の質感**: 生成りの紙に細い赤の方眼罫を引いた、ノートのような平らな質感 - **形**: 有機的な不定形ブロブ、少し傾けた白フチ写真、円弧に沿わせた文字 - **温度感**: パステル寄りで、ひんやりと甘い ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#CF3E51` | 見出し・人名・価格の苺色 | 2% | 画素の実測 | | `background` | `#FAF5EA` | 方眼紙の生成り地 | 45% | 画素の実測 | | `secondary` | `#B8CEC3` | 左右のミント太枠 | 20% | 画素の主要色に補正 | | `line` | `#EBC4C0` | 方眼の罫線 | 1% | 推定 | | `tint-1` | `#CFDCCB` | ミントのブロブ | 3% | 画素の実測 | | `tint-2` | `#D4E2E2` | 水色のブロブ・FV背景 | 8% | 画素の実測 | | `accent-1` | `#CEC8D6` | ラベンダーのブロブ | 2% | 画素の実測 | | `accent-2` | `#ECDFCE` | ベージュのブロブ | 2% | 画素の実測 | | `accent-3` | `#F8DBDD` | ピンクのブロブ | 2% | 画素の実測 | | `surface` | `#F9F5EC` | 写真の白フチ | 1% | 画素の主要色に補正 | | `background-alt` | `#E0ECEC` | PC外側の淡いブルーグレー地 | 10% | 画素の実測 | | `primary-accessible` | `#CD384B` | AA を満たす補正値（計算） | | 計算 | - 地は生成りと赤い細罫の方眼で統一し、両サイドにミントの太枠を常に出す - 文字は見出し・本文・価格すべて苺色の 1 色だけにする - 人物ごとにブロブの色をミント・水色・ラベンダー・ベージュ・ピンクで変える - パステルは彩度を低く抑え、苺色だけを強い色にする - 黒文字や濃い色の面は使わない - `grid-paper-frame` は文字 `#CF3E51` × 背景 `#FAF5EA` のコントラスト比が 4.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#CD384B`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 横に流れる大見出しのマーキー | 欧文サンセリフ | Inter | 800 | 44px | 1.1 | 0.0em | | `headline-lg` | FVのロゴ風タイトル・コレクション名 | 欧文サンセリフ | Inter | 800 | 22px | 1.2 | 0.01em | | `headline-md` | 斜めに配置したモデル名 | 欧文サンセリフ | Inter | 800 | 19px | 1.15 | 0.02em | | `headline-sm` | 英文のスローガン（大文字2行） | 欧文サンセリフ | Inter | 700 | 11px | 1.5 | 0.02em | | `body-md` | コンセプトの日本語本文（中央揃え） | ゴシック | Noto Sans JP | 500 | 10px | 2.1 | 0.1em | | `note` | アイテム名と価格のリスト | 欧文サンセリフ | Inter | 400 | 11px | 1.7 | 0.0em | | `accent` | 円弧に沿わせたCTA文字 | 欧文サンセリフ | Inter | 800 | 17px | 1.0 | 0.05em | - 欧文は太いグロテスク体を大文字で組む - モデル名は約 -30〜+30° 傾けて写真の横に置く - 日本語は小さく、字間を広めにとって中央揃え - 価格は「アイテム名 ¥価格」を 1 行ずつ並べ、写真と反対側に左揃えか右揃えで置く - 大見出しは画面からはみ出す横スクロールのマーキーにする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。左右にミント枠（各約 22px）を置き、中を方眼紙エリアにする - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 90px、基本単位 8px、カード内 0px（375px 幅換算） - 方眼のマス目は約 47px 角 - 人物ブロブは左右交互に寄せ、ミント枠の上まではみ出させる - 価格リストはブロブの下で反対側に寄せる - グループ写真は左右に交互に傾けて縦に重ね、枠からはみ出させる - 余白を大きくとり、詰め込まない ## Elevation & Depth - 影はほぼ使わない - 傾けた写真にだけ白フチと、ごく淡い影を付けて紙を貼ったように見せる ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 40px。ボタンは角丸の長方形。 - **写真の切り抜き**: 人物は不定形ブロブに切り抜いて頭が外にはみ出す形、グループ写真は白フチ付きの長方形を約 3〜5° 傾ける - **セクション境界**: FV の下で直線的に方眼エリアへ切り替える。FV 上端は大きく角丸 - ブロブは円をベースに少し歪ませる - 写真の傾きは左右交互にする - 四角いボタンは置かない ## Components - **ミント枠つき方眼紙**（`grid-paper-frame`）: 生成り地に赤い細罫の方眼を引き、両脇にミントの太帯を置く - **ブロブ切り抜き人物**（`blob-portrait`）: パステルのブロブに人物の上半身を重ね、頭がブロブから飛び出す - **斜めの人名ラベル**（`tilted-name`）: 太い大文字の人名を苺色で斜めにしてブロブ横に置く - **価格リスト**（`price-list`）: アイテム名と価格を 2〜3 行で並べる - **傾いたポラロイド写真**（`tilted-photo`）: 白フチの集合写真を傾けて重ねて並べる - **横流れ大見出し**（`marquee-heading`）: 太い大文字と小さなアイコンを横に流す - **円弧文字のアイコンCTA**（`arc-cta`）: アイスのイラストの上に円弧状の誘導文字を載せ、全体を一覧へのリンクにする ## Do's and Don'ts **Do** - 文字は苺色の 1 色だけにする - 方眼とミント枠はページ最後まで続ける - ブロブの色はモデルごとに変える - 写真は傾けたり、はみ出させたりして遊びを出す - モチーフのイラストは水彩風にする **Don't** - 黒や濃紺の文字を使わない - 角丸の四角ボタンを置かない - 写真をきっちりしたグリッドに整列させない - 彩度の高いパステルにしない - 日本語の大見出しを多用しない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（コラボの告知と全員の集合写真）: 淡い水色背景の上部中央に苺色の欧文 2 行。下に全身の集合写真。上端は角丸 2. **コンセプト**（コレクションの世界観を伝える）: 方眼紙の上に、小道具と一緒に切り抜いた集合写真。下に中央揃えの短い日本語 3. **モデル別ルック**（着用アイテムと価格を見せる）: ブロブ切り抜き＋斜め人名＋価格リストを、左右交互に繰り返す 4. **フォトギャラリー**（着こなしの雰囲気を伝える）: 傾けた白フチ写真を 3 枚重ねて並べる 5. **マーキー見出し**（テーマを印象づける）: 太い大文字が横に流れる帯 6. **ビジュアル＋スローガン**（世界観の締め）: 大きなアイスのイラストと人物の合成。下に英文スローガン 2 行 7. **CTA**（商品一覧へ誘導）: 傾けた集合写真の下に、円弧文字と重ねアイスのイラスト ## Imagery - 淡いグレーブルーのスタジオ背景で撮った、柔らかい自然光の人物写真 - アイスを手に持つなど、テーマの小道具を使ったポーズ - 水彩タッチで描いたアイスクリームのイラスト - 人物は背景を抜いて合成しやすくする - 服の色はくすんだパステルでそろえる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央に約 70% 幅の SP レイアウトをそのまま置き、外側は淡いブルーグレーで塗る - 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-dbc44089`（元 LP の URL から採番） - **元 LP**: https://gelatopique.com/Page/feature/250530/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（8/11 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。