--- version: alpha name: Pastel Aqua Inflated Type Character Collab Loungewear LP description: 淡い水色とミントの地に、風船のように膨らんだ3D欧文見出しとキャラクターイラストを散らしたキャラクターコラボのルームウェア LP。傾けた写真カードとストライプ背景で、遊び心とやわらかさを出している。 colors: primary: '#8BC8E0' background: '#FEFEFE' background-alt: '#E4F2F5' tint-1: '#D7E8E2' tint-2: '#D8EAFE' secondary: '#017A70' accent-1: '#2C5C92' text: '#222222' text-muted: '#354A6D' accent-2: '#518976' accent-3: '#5AA9C4' marker: '#F2A9C4' cta: '#64809E' on-cta: '#E4F2F5' cta-accessible: '#566E89' accent-2-accessible: '#4B7F6E' typography: display: fontFamily: Dela Gothic One fontSize: 56px fontWeight: 400 lineHeight: 1.0 headline-md: fontFamily: Dela Gothic One fontSize: 30px fontWeight: 400 lineHeight: 1.1 body-md: fontFamily: Zen Kaku Gothic New fontSize: 13px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.03em accent: fontFamily: Nunito fontSize: 14px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em headline-sm: fontFamily: Montserrat fontSize: 34px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.1em note: fontFamily: Nunito fontSize: 9px fontWeight: 600 lineHeight: 1.4 rounded: sm: 8px md: 16px lg: 40px full: 999px spacing: unit: 8px card: 0px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' balloon-heading: textColor: '{colors.primary}' typography: '{typography.display}' height: 110px tilted-photo-card: backgroundColor: '{colors.background}' rounded: '{rounded.md}' height: 380px price-label: textColor: '{colors.text-muted}' typography: '{typography.accent}' height: 40px stripe-backdrop: backgroundColor: '{colors.tint-1}' height: 1600px character-sticker: height: 100px arch-photo: backgroundColor: '{colors.tint-1}' rounded: '{rounded.lg}' height: 420px check-all-banner: backgroundColor: '{colors.on-cta}' textColor: '{colors.cta}' typography: '{typography.display}' rounded: '{rounded.full}' height: 340px limited-photo-panel: backgroundColor: '{colors.background}' textColor: '{colors.accent-2}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 470px --- # DESIGN.md — 水色×ミントのぷっくり文字コラボ部屋着 LP（Pastel Aqua Inflated Type Character Collab Loungewear LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ファッション・アクセサリー ／ **雰囲気**: かわいい、やさしい・柔らかい、清潔・爽やか、ポップ・元気 - **キーワード**: パステルアクア・ぷっくり3D文字・傾いた写真カード・ミントのストライプ・キャラクター散らし - **地の質感**: フラットな淡色の面に、光沢のあるバルーン文字と水面のようなテクスチャ写真を重ねる - **形**: 角丸の大きいカード、片側だけ大きく丸めたアーチ形、少し回転させた写真 - **温度感**: 涼しげでひんやりした寒色寄り。差し色に淡いピンク ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#8BC8E0` | セクション見出しのバルーン文字・水色系の主調 | 4% | 推定 | | `background` | `#FEFEFE` | 導入文・限定色セクションの白地 | 16% | 画素の実測 | | `background-alt` | `#E4F2F5` | 淡い水色のセクション地 | 22% | 画素の実測 | | `tint-1` | `#D7E8E2` | ストライプ・ミントの帯 | 8% | 画素の実測 | | `tint-2` | `#D8EAFE` | グッズセクションのブルー地 | 7% | 画素の実測 | | `secondary` | `#017A70` | 写真背景のディープティール | 6% | 画素の実測 | | `accent-1` | `#2C5C92` | 写真背景のネイビーブルー | 5% | 画素の実測 | | `text` | `#222222` | 本文の濃色 | 1% | 推定 | | `text-muted` | `#354A6D` | 商品名・価格のくすみブルー | 0% | 画素の実測 | | `accent-2` | `#518976` | ミント緑の価格文字 | 0% | 画素の実測 | | `accent-3` | `#5AA9C4` | セクション名の水色ラベル文字 | 0% | 推定 | | `marker` | `#F2A9C4` | ×記号の淡いピンク | 0% | 推定 | | `cta` | `#64809E` | 全商品へ誘導するバナーの青文字 | 1% | 画素の実測 | | `on-cta` | `#E4F2F5` | CTA地の淡色 | 4% | 画素の実測 | | `cta-accessible` | `#566E89` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#4B7F6E` | AA を満たす補正値（計算） | | 計算 | - 地は白・淡水色・ミント・淡ブルーをセクションごとに切り替え、境界は直線で区切る - 濃い色は写真背景（ティール・ネイビー）にだけ使い、地には使わない - 見出しはパステルの水色やミントのバルーン文字にし、セクション地に合わせて色相を変える - 価格・商品名は地に合わせてくすみブルーかミント緑の小さめ文字にする - ピンクは×記号やキャラの頬など点でだけ使う - カードは白の細いフチで写真を囲み、地から浮かせる - `check-all-banner` は文字 `#64809E` × 背景 `#E4F2F5` のコントラスト比が 3.58:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#566E89`、4.59:1）を使う。 - `limited-photo-panel` は文字 `#518976` × 背景 `#FEFEFE` のコントラスト比が 4.01:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#4B7F6E`、4.57:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクション見出しの膨らんだ3D欧文 | 装飾・ディスプレイ | Dela Gothic One | 400 | 56px | 1.0 | 0.0em | | `headline-md` | 限定色などの斜め配置の小見出し | 装飾・ディスプレイ | Dela Gothic One | 400 | 30px | 1.1 | 0.0em | | `body-md` | 導入文（中央揃え） | ゴシック | Zen Kaku Gothic New | 400 | 13px | 2.0 | 0.03em | | `accent` | 商品名と価格の欧文 | 欧文サンセリフ | Nunito | 700 | 14px | 1.5 | 0.03em | | `headline-sm` | ロゴ風のワードマーク | 欧文サンセリフ | Montserrat | 700 | 34px | 1.0 | 0.1em | | `note` | コピーライト表記 | 欧文サンセリフ | Nunito | 600 | 9px | 1.4 | 0.0em | - 見出しは英語だけで、光沢と影のある風船のような立体文字にする（画像で作る） - 見出しは少し傾けたりアーチ状に曲げたりして、写真に重ねる - 日本語は導入文だけ。細めのゴシックで中央揃え、行間を広くとる - 価格は『商品名 数字yen』の欧文一行。太めの丸い欧文で - 本文に太字や色を足して強調しない - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。写真は左右にずらして交互に配置 - **本文ブロックの幅**: 画面幅の約 86% - **余白**: セクション間 64px、基本単位 8px、カード内 0px（375px 幅換算） - 1セクションは『バルーン見出し→写真カード→価格』の順 - 写真カードは左右どちらかに寄せ、画面端まで出すか余白を少し空ける - 背景に写真やテクスチャ片を傾けて重ね、コラージュに見せる - キャラクターイラストをカードの角やセクションの境目に小さく置く - セクションの上下余白は60〜90pxとたっぷりとる ## Elevation & Depth - 影はほとんど使わず、白フチと背面にずらした色板で奥行きを出す - 写真の背面に水色テクスチャやミント色の板を数px〜十数pxずらして重ねる - バルーン文字だけに内側ハイライトと柔らかい影をつける ## Shapes - **角丸**: 小 8px ／ 中 16px ／ 大 40px。ボタンはピル型。 - **写真の切り抜き**: 角丸の長方形を2〜5度傾けて白フチで囲む。片側だけ大きく丸めたアーチ形も使う - **セクション境界**: 直線で区切って地の色を切り替える。境目にキャラクターを重ねる - 写真は必ず角丸にし、真四角のままにしない - 傾ける角度は小さく、隣の写真と逆向きにする - ボタンはピル型で細い線のフチにする ## Components - **バルーン文字見出し**（`balloon-heading`）: パステル水色の膨らんだ立体欧文。写真カードの上端に重ねて置く - **傾き写真カード**（`tilted-photo-card`）: 白フチの角丸写真を少し回転させ、背面に色板かテクスチャをずらして重ねる - **商品名・価格ラベル**（`price-label`）: カード下に置く欧文の商品名と価格。1〜2行で中央か左揃え - **ストライプ背景**（`stripe-backdrop`）: ミントと白の縦ストライプ。写真コラージュの下地にする - **キャラクターステッカー**（`character-sticker`）: 白フチ付きのキャラクターイラスト。カードの角や境目に小さく置く - **アーチ形写真**（`arch-photo`）: 上部が大きく丸いアーチ枠の写真。ミントの線で縁取る - **全商品誘導バナー**（`check-all-banner`）: アーチ状の青いバルーン文字・キャラ・ロゴをまとめたリンク画像。PCでは下にピル型ボタンを付ける - **限定色の平置きパネル**（`limited-photo-panel`）: 淡グレー地の角丸パネルに商品の平置き写真。斜めのミント色バルーン文字を対角に置く ## Do's and Don'ts **Do** - 見出しは英語のバルーン文字で統一する - 写真は角丸にして傾け、背面に色板を重ねる - 地の色はパステル寒色のどれかにし、セクションごとに切り替える - キャラクターを各セクションに1体ずつ散らす - 価格は小さな欧文で控えめに添える **Don't** - 濃い色やビビッドな色を地に使わない - 日本語の太いゴシック見出しを置かない - 写真を傾けずに格子状に並べない - 影を濃くつけない - ピンクを面で広く使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（コラボの世界観を一目で伝える）: ティール地のモデル写真全面に、バルーン文字のタイトルと×記号、キャラを散らす 2. **コンセプト紹介**（コレクションの内容と限定品を短く説明する）: 白地に中央揃えの日本語を3段落。下にキャラを1体置く 3. **商品紹介1（セットアップ）**（主力商品を見せる）: 淡水色地にバルーン見出し、傾けた写真2枚を左右交互に、価格を添える 4. **商品紹介2（カットソー）**（部屋着のバリエーションを見せる）: ミントストライプ地にアーチ形の写真と、傾けた写真やテクスチャ片のコラージュ 5. **グッズ紹介**（小物を見せる）: 淡ブルー地にバルーン見出し、ネイビーやティール背景の物撮りを角丸カードに 6. **限定カラー**（特定店舗の限定品を伝える）: 白地に角丸パネルの平置き写真。斜めのミント文字を上下に 7. **全商品CTA**（商品一覧へ誘導する）: 淡水色地にアーチ状の青いバルーン文字とキャラ・ロゴのリンクバナー 8. **フッター**（権利表記）: 淡水色地に小さな欧文のコピーライト ## Imagery - モデルは無地の色背景（ティール・ネイビー・アクア）の前でリラックスした姿勢をとる - 寝具やビーチチェアなど、くつろぐ場面の明るい写真 - 小物は色背景の上に置いて真正面から撮る - 水面や氷のような淡い水色テクスチャを切り抜いて、傾けて添える - キャラクターは白フチ付きのイラストステッカーにする - 見出しは光沢のある風船風の3Dレタリングにする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では中央右寄りに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-a236a434`（元 LP の URL から採番） - **元 LP**: https://gelatopique.com/Page/feature/260722_Hangyodon/?plan=GP260722Hangyodon - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。