DESIGN.md — 濃茶×ビビッド六角形のチョコ菓子 LP（Dark Chocolate Hexagon Pop Confectionery LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: ポップ・元気、かわいい、上品・高級
• キーワード: チョコレートの濃茶・六角形キューブ・溶けるドリップ・水彩イラスト・斜体ワイド英字・ギフト
• 地の質感: 淡いざらつきのある紙風テクスチャと水彩タッチのイラスト。濃茶地には薄い六角形の透かし柄や縦ストライプを敷く。
• 形: 六角形・アイソメトリックの立方体と、チョコが垂れるドリップ曲線が主役。カードは角丸なしの矩形。
• 温度感: 暖色寄り。濃茶の重さをビビッドなパステル系の色で明るく中和する。

Colors

• 地は濃茶を基本とし、白・淡グレーのセクションと交互に置いて明暗のリズムをつくる。
• 商品ごとに地色（淡ピンク・紫・淡グレー）を割り当て、商品名の文字色も対応させる。
• ビビッドイエローとターコイズはノベルティなど楽しい要素に限定して大面積で使う。
• 濃茶地の文字は白、白地の文字は濃茶。純黒は使わない。
• 濃茶地には少し明るい茶で六角形の透かしや縦ストライプを重ね、平坦に見せない。
• story-band は文字 #FFFFFF × 背景 #EA5569 のコントラスト比が 3.5:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#E4253F、4.53:1）を使う。
• product-card は文字 #D73E54 × 背景 #F9DCDC のコントラスト比が 3.46:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#BF283D、4.54:1）を使う。

Typography

• セクション見出しは英字の斜体で、字間を 0.3em 前後に大きく空ける。
• 商品名は手書きスクリプトの英字と幾何学的なサンセリフのロゴ文字を組み合わせる。
• 和文本文は小さめ・行間広め・中央揃えで、やわらかく見せる。
• 和文見出しは太字でも 18px 前後に抑え、英字見出しを主役にする。
• ノベルティのアイテム名は斜体の英字サンセリフにする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品・情報カードは左右に約 6% の余白をとって中央に置く。
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• 商品カードは余白なしで縦に積み、地色を切り替えて区切る。
• INFORMATION は濃茶地の上に白い細線の枠で囲む。
• ノベルティは番号付きの大きな六角形を 1 点ずつ縦に並べ、下に短い説明文を置く。
• セクション間はたっぷり空け、1 画面に要素 1 つを目安にする。
• ヘッダーは濃茶の細い帯で、ロゴを中央・ハンバーガーを右に置く。

Elevation & Depth

• 基本はフラットで、影は使わない。
• 商品カードのまとまりにだけ、濃茶地へごく弱い影を落として浮かせる。
• チョコのイラストは枠やセクションの境界にはみ出させ、奥行きを出す。

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角丸なしの矩形。バッジやアイテムは六角形でくり抜く。
• セクション境界: 溶けたチョコが垂れるドリップ曲線（濃茶→白、白→濃茶）。
• 装飾の基本形は六角形とアイソメトリックの立方体にする。
• 角丸は使わず、シャープな矩形と六角形で構成する。
• ドリップ形状は濃茶の地と白の地が切り替わる境目に使う。
• 番号バッジは暗いワイン色の六角形を、黄色い六角形の左上に重ねる。

Components

• 濃茶ヘッダー（header-bar）: 濃茶の帯の中央にロゴ、右に白いハンバーガーメニューを置く。
• 六角形告知バッジ（hex-badge）: 半透明のターコイズの六角形に、斜体の英字で告知を 3 行入れて写真に重ねる。
• ストーリー帯（story-band）: コーラルピンクの地に六角形の透かし柄を敷き、白文字の短い詩的な文を中央揃えで並べる。
• 商品カード（product-card）: スクリプト英字→水彩のチョコイラスト→ロゴ英字の商品名→和名→説明 3 行の順に縦に積む。地色は商品ごとに変える。
• 白線枠のお知らせ（info-frame）: 濃茶地に白い 2px の枠と六角形の透かし柄。英字見出し・本文・線画イラストを入れる。
• 番号付きノベルティ六角形（novelty-hex）: 大きな黄色の六角形にターコイズのフラットなアイテムアイコンと斜体の名前を入れ、左上にワイン色の番号六角形を重ねる。
• チョコドリップ区切り（drip-divider）: チョコが垂れる不規則な曲線で、色の違う地どうしをつなぐ。
• SNS 画像グリッド（sns-grid）: 縦ストライプのワイン地に、正方形の画像を 2 列で隙間なく並べる。

Do's and Don'ts

Do - 六角形・立方体のモチーフを、FV・バッジ・透かし柄・ノベルティで一貫して使う。 - 濃茶の地と白・パステルの地を交互に置き、境目にドリップ曲線を入れる。 - 英字見出しは斜体で字間を広くとる。 - チョコは水彩タッチのイラストにし、セクションの境界にはみ出させる。 - 商品ごとに地色と文字色をセットで変える。

Don't - 角丸のピル型ボタンや柔らかいカードを多用しない。 - 純黒や寒色系のグレーを地に使わない。 - ビビッドイエローを文字色や小さな要素に散らさない。 - 長文を詰め込まない。本文は 3〜4 行に収める。 - 写真ばかりで構成しない。イラストとフラットなアイコンを主役にする。

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ファーストビュー（ブランドの世界観を一目で伝える）: 淡いグレーの紙地に、色とりどりの半透明立方体を散らす。中央にスクリプトとロゴ英字、太字の和文キャッチを 2 行、縦書きの Scroll 表示を置く。
2. 告知バナー（期間限定の出店を告知する）: 濃茶の地に、チョコ粒を並べた写真を横長で置き、右側に六角形の告知バッジを重ねる。
3. ストーリー（贈り物としての想いを伝える）: コーラルピンクの帯に、斜体の英字見出しと短い文を中央揃えで 5 行並べる。
4. 商品紹介（フレーバーごとの特徴を見せる）: 濃茶地の上に、色違いのカードを 3 枚縦に積む。各カードはスクリプト・水彩のチョコ・商品名・説明で構成する。
5. お知らせ（出店の日程と場所を伝える）: 白い線の枠の中に、斜体の英字見出し・小見出し・本文・売り場の線画イラストを入れ、角にチョコを添える。
6. ノベルティ（購入特典で購買を後押しする）: ドリップで白地に切り替え、条件を 1 文で示したあと、番号付きの黄色い六角形でアイテムを 3 点並べる。
7. SNS 誘導（最新情報のフォローを促す）: 縦ストライプのワイン地に、英字見出し・案内文・2 列の画像グリッドを置き、チョコのイラストを飛ばす。
8. フッター（ページ内を移動しやすくする）: ドリップで白地に戻し、英字のナビを中央に縦に並べ、最下部にコピーライトを置く。

Imagery

• チョコは水彩で描いた丸い粒にし、表面に細い線がけを斜めに入れる。
• アイソメトリックの半透明立方体の中に、ハート型のチョコを入れて描く。
• 店舗や人物は白地に黒の細い線画で描き、ブランド色だけを差す。
• ノベルティはターコイズ 1 色のフラットなシルエットアイコンにする。
• 写真は暗い石目の背景に、カラフルなチョコを俯瞰で並べて撮る。
• 背景には六角形の透かし柄と、紙のざらつきテクスチャを重ねる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はヘッダーを左ロゴ・右テキストナビの横並びにする。
• PC の商品紹介は 3 枚のカードを横 3 列に並べる。
• PC のノベルティは 3 点を横に並べ、説明文をその下に置く。
• PC の SNS 画像は横 4 列の 1 段にする。
• PC の英字見出しは大きく薄い色にし、背景透かしのように扱う。
• PC のフッターナビは横 1 列にする。

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 行書くと起動時に読み込まれる。