--- version: alpha name: Playful Island Game Collab Ice Cream LP description: 木目の看板、草地の緑、砂浜の黄色、波模様の水色を上から順に重ねて「島」を表現した、ゲームコラボのアイス新作LP。後半はブランドのピンク・紫を使った情報パートに切り替わる。 colors: primary: '#88C79F' secondary: '#DBBA8D' background: '#C3EBF3' background-alt: '#EEE9BC' accent-1: '#6DC9E2' surface: '#FEFEFE' tint-1: '#D4EDF3' text: '#462C0B' on-dark: '#FEFFFF' cta: '#F24D99' on-cta: '#FEFFFF' accent-2: '#743BBC' accent-3: '#EEAA0F' line: '#8A5CC7' accent-1-accessible: '#1F809A' cta-accessible: '#E41172' primary-accessible: '#3E8458' typography: display: fontFamily: M PLUS Rounded 1c fontSize: 34px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 30px fontWeight: 900 lineHeight: 1.3 headline-md: fontFamily: Zen Maru Gothic fontSize: 18px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.03em accent: fontFamily: Roboto Slab fontSize: 20px fontWeight: 800 lineHeight: 1.2 body-md: fontFamily: Zen Kaku Gothic New fontSize: 13px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.08em label-button: fontFamily: Zen Kaku Gothic New fontSize: 13px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.1em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.05em rounded: sm: 6px md: 16px lg: 28px full: 999px spacing: unit: 8px card: 20px section: 60px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' wood-signboard: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 400px point-label: textColor: '{colors.on-dark}' typography: '{typography.accent}' height: 36px circle-photo: backgroundColor: '{colors.surface}' textColor: '{colors.accent-1}' typography: '{typography.note}' rounded: '{rounded.full}' height: 110px story-card: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 480px recommend-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 230px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 40px section-band: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 40px allergen-grid: backgroundColor: '{colors.surface}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 240px banner-link: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 230px --- # DESIGN.md — 木目と海色のゲームコラボ アイスLP（Playful Island Game Collab Ice Cream LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 菓子・スイーツ ／ **雰囲気**: ポップ・元気、かわいい、親しみ・手作り感、清潔・爽やか - **キーワード**: 木目看板・島の地形・波模様・丸写真・ゲームUI風・夏 - **地の質感**: 木目テクスチャ、三角の紙吹雪柄、波線パターン、ぼかしたグラデーション背景 - **形**: 角丸の看板パネル、円形の写真、波打つセクション境界、ピル型ボタン - **温度感**: 明るく暖かい夏の色。緑・水色の爽やかさに木の茶色で温かみを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#88C79F` | 草地セクションの緑地 | 12% | 画素の主要色に補正 | | `secondary` | `#DBBA8D` | 木目看板パネル | 12% | 画素の主要色に補正 | | `background` | `#C3EBF3` | 後半情報パートの水色地 | 16% | 画素の実測 | | `background-alt` | `#EEE9BC` | 砂浜セクションの黄色地 | 6% | 画素の主要色に補正 | | `accent-1` | `#6DC9E2` | 海の波模様セクション | 9% | 画素の実測 | | `surface` | `#FEFEFE` | 白カード・枠 | 9% | 画素の実測 | | `tint-1` | `#D4EDF3` | 開発話の淡い水色カード | 6% | 画素の実測 | | `text` | `#462C0B` | 見出し・本文の焦げ茶 | 3% | 画素の実測 | | `on-dark` | `#FEFFFF` | 緑地上の白文字 | 1% | 画素の主要色に補正 | | `cta` | `#F24D99` | ピンクのピル型ボタン・帯見出し | 2% | 画素の実測 | | `on-cta` | `#FEFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `accent-2` | `#743BBC` | 表のヘッダー・該当セルの紫 | 2% | 画素の実測 | | `accent-3` | `#EEAA0F` | 見出しのオレンジ破線・丸枠 | 0% | 画素の実測 | | `line` | `#8A5CC7` | 表の罫線 | 0% | 推定 | | `accent-1-accessible` | `#1F809A` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#E41172` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#3E8458` | AA を満たす補正値（計算） | | 計算 | - 前半は森→砂浜→海の順で緑・黄・水色の地を切り替え、島を下りていく構成にする - 看板や商品説明は木目ベージュのパネルに焦げ茶の文字で載せる - 緑や水色の地の上の本文は白文字にし、黄色地では焦げ茶を使う - 後半の情報パートは水色地にピンクのボタン・紫の表で企業色に寄せる - 強調見出しはピンク文字に白フチ・影をつけて浮かせる - 黒は使わず、文字は焦げ茶か濃いグレーにする - `circle-photo` は文字 `#6DC9E2` × 背景 `#FEFEFE` のコントラスト比が 1.88:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#1F809A`、4.51:1）を使う。 - `button-primary` は文字 `#FEFFFF` × 背景 `#F24D99` のコントラスト比が 3.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#E41172`、4.54:1）を使う。 - `section-band` は文字 `#FEFFFF` × 背景 `#F24D99` のコントラスト比が 3.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#E41172`、4.54:1）を使う。 - `banner-link` は文字 `#FEFFFF` × 背景 `#88C79F` のコントラスト比が 1.96:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#3E8458`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの商品名ロゴ風見出し | 丸ゴシック | M PLUS Rounded 1c | 900 | 34px | 1.3 | 0.02em | | `headline-lg` | セクション大見出し（白フチ付き） | 丸ゴシック | M PLUS Rounded 1c | 900 | 30px | 1.3 | 0.0em | | `headline-md` | リード文・カード見出し | 丸ゴシック | Zen Maru Gothic | 700 | 18px | 1.6 | 0.03em | | `accent` | Point番号の欧文 | 欧文セリフ | Roboto Slab | 800 | 20px | 1.2 | 0.0em | | `body-md` | 本文 | ゴシック | Zen Kaku Gothic New | 500 | 13px | 1.9 | 0.08em | | `label-button` | ボタン・帯見出し | ゴシック | Zen Kaku Gothic New | 500 | 13px | 1.4 | 0.1em | | `note` | 注釈・表セル | ゴシック | Noto Sans JP | 400 | 11px | 1.7 | 0.05em | - 見出しは極太の丸ゴシックでゲームの文字のように丸く太く - 大見出しは白フチと濃色の影を重ねたステッカー風にする - 本文は字間を広めに取り、行間1.9前後でゆったり組む - Pointラベルは小さなアイコンと太い欧文セリフを組み合わせ、下に破線を引く - リード文は中央揃え、本文はブロック内で左揃え - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。特長は写真と文章の左右 2 分割 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 60px、基本単位 8px、カード内 20px（375px 幅換算） - セクションごとに地の色と柄を変え、波形の境界でつなぐ - 特長は写真の左右を交互に入れ替える - キャラクターやモチーフは画面の端に小さく散らす - 情報パートは左右 24px 前後の余白で揃える - ボタン2つは横並び2カラムにする ## Elevation & Depth - 木目パネルの下に濃い茶の影をつけ、立体的な看板に見せる - 商品写真は傾けたポラロイド風の白枠と影 - 白カードの背後に薄い色付きの影をずらして重ねる - 情報パートの表やボタンは影なしのフラット ## Shapes - **角丸**: 小 6px ／ 中 16px ／ 大 28px。ボタンはピル型。 - **写真の切り抜き**: 素材の写真は円形に切り抜き、白か色の太い枠をつける。商品は切り抜き - **セクション境界**: 波形の曲線と、三角フラッグのギザギザ帯 - 看板パネルは下辺を大きく角丸に - 円形写真の縁に果物などのモチーフを重ねてはみ出させる - 情報カードは角丸16pxに白の縁取り - 表は角丸8pxの外枠に細い格子 ## Components - **木目看板パネル**（`wood-signboard`）: 木目ベージュの角丸パネル。商品名やリード文を中央揃えで載せる - **Pointラベル**（`point-label`）: 葉っぱアイコンと欧文の番号を組み合わせ、下にオレンジの破線 - **円形素材写真＋ラベル**（`circle-photo`）: 円形の写真の横に白い角丸ラベルを重ねて素材名を示す - **開発秘話カード**（`story-card`）: 波模様の海の上に置く淡い水色の大きな角丸カード。虫眼鏡アイコン付きの見出し - **おすすめ組み合わせカード**（`recommend-card`）: 白いカードに商品の切り抜き写真をはみ出させて置く。見出しの下に水色の線、水色ピル型ボタン付き - **ピンクのピル型ボタン**（`button-primary`）: ピンク地に白文字、右端に白丸の矢印アイコン - **帯見出し**（`section-band`）: ピンクで全幅の角丸の帯。情報セクションのタイトル - **アレルギー表**（`allergen-grid`）: 4列の格子。該当する項目だけ紫で塗り、白文字にする - **特設サイトバナー**（`banner-link`）: 角丸のバナー画像。下部の緑の帯にリンク文字と矢印 ## Do's and Don'ts **Do** - 森・砂浜・海の地の色を順に切り替え、物語のように下っていく - 写真は円形や白枠に収め、果物やキャラクター風のモチーフをはみ出させる - 背景に小さな三角や魚影、波線などの柄を薄く敷く - ボタンはピル型にして矢印の白丸をつける - 情報パートは表やボタンを整然と並べ、読みやすくする **Don't** - 黒や純粋なグレーの重たい面を使わない - 角ばった直線的なセクション境界にしない - 細い明朝体で見出しを組まない - 前半の地に企業のピンク・紫を多用しない - 装飾を本文の上に重ねて読めなくしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（コラボと新作を一目で伝える）: 海と砂浜の背景に木目看板の商品名、中央に大きな商品の切り抜き、周りにキャラクターを散らす 2. **商品紹介リード**（味の構成をコンセプトで説明）: 木目パネルに太字のリード4行を中央揃え、その下に本文 3. **構成図解**（素材と見た目を対応づける）: 白枠ポラロイド風の写真に引き出し線のラベル 4. **特長1**（素材のこだわり）: 緑地に円形写真3つを縦に並べ、右に白文字の解説 5. **特長2**（具材の魅力）: 黄色地に左文章、右に丸く切り抜いた大きな写真 6. **開発秘話**（作り手の思いで共感を得る）: 波模様の海の上に淡い水色の大きなカード 7. **特設サイト誘導**（コラボ企画全体へ送客）: 角丸バナーと下部のリンク帯 8. **おすすめ組み合わせ**（まとめ買いの提案）: パステルのぼかしグラデ地に白カード2枚を互い違いに、商品写真をはみ出させる 9. **動画**（CMと紹介動画を見せる）: ピンク見出しの下に白枠の動画埋め込みを2つ 10. **サブ導線**（一覧と店舗検索へ誘導）: ピンクのピル型ボタンを2つ横並び 11. **シリーズ説明**（月替わり新作の位置づけ）: グラデーションの角丸カードにバッジと破線区切りの3行 12. **アレルギー・カロリー情報**（必要な情報の開示）: ピンクの帯見出し、紫の格子表、注釈 ## Imagery - 商品は真上から少し斜めに撮った切り抜きで、霜の質感がわかる高解像度 - 素材のアップは円形にトリミング - ゲーム調の3Dキャラクターや植物・果物を画面の端に小さく配置 - 背景は水彩風の海、砂浜、草地のイラストテクスチャ - 魚影、サンゴ、ヤシの木など夏の島のモチーフを白や濃色のシルエットで散らす - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでは中央に最大幅 750px 前後のカラムを置き、左右は同じ地の色や柄で埋める - 特長セクションは PC で写真と文章の間隔を広げる - おすすめカードは PC で 2 枚を横並びにしてもよい - 表やボタンは 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-bad51fe9`（元 LP の URL から採番） - **元 LP**: https://www.br31.jp/contents/topics/260701_01.html - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（8/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。