DESIGN.md — 木目と海色のゲームコラボ アイスLP（Playful Island Game Collab Ice Cream LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: ポップ・元気、かわいい、親しみ・手作り感、清潔・爽やか
• キーワード: 木目看板・島の地形・波模様・丸写真・ゲームUI風・夏
• 地の質感: 木目テクスチャ、三角の紙吹雪柄、波線パターン、ぼかしたグラデーション背景
• 形: 角丸の看板パネル、円形の写真、波打つセクション境界、ピル型ボタン
• 温度感: 明るく暖かい夏の色。緑・水色の爽やかさに木の茶色で温かみを足す

Colors

• 前半は森→砂浜→海の順で緑・黄・水色の地を切り替え、島を下りていく構成にする
• 看板や商品説明は木目ベージュのパネルに焦げ茶の文字で載せる
• 緑や水色の地の上の本文は白文字にし、黄色地では焦げ茶を使う
• 後半の情報パートは水色地にピンクのボタン・紫の表で企業色に寄せる
• 強調見出しはピンク文字に白フチ・影をつけて浮かせる
• 黒は使わず、文字は焦げ茶か濃いグレーにする
• 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

• 見出しは極太の丸ゴシックでゲームの文字のように丸く太く
• 大見出しは白フチと濃色の影を重ねたステッカー風にする
• 本文は字間を広めに取り、行間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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。