DESIGN.md — ミント×ティールの六角形柄 歯科キャンペーンLP（Mint Teal Hexagon Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: 清潔・爽やか、ポップ・元気、情報量多め・訴求型、信頼・誠実
• キーワード: ミント・ティール・六角形パターン・赤リボン・銀プレート・ステップ説明
• 地の質感: 淡いミント地に細い線の六角形（分子構造風）パターンと小さな丸点をうっすら敷く。銀プレートは金属調グラデーション。
• 形: 両端を斜めに切った六角形プレート見出し、角丸の白カード、両端が矢羽型の赤リボン。
• 温度感: 寒色中心で清潔。赤と黄の差し色で賑やかさを足す。

Colors

• ミント柄地とティール無地帯を交互に置き、セクションの切り替わりを色で示す。
• 見出し文字は紺ティール、本文は濃グレー。純黒は応募期間の帯とボタン文字だけに使う。
• 赤は回次リボンと注意書きの帯だけに使う。
• 黄色はティール地や黒地の上で数字と誘導文を強調するときだけ使う。
• 賞品カードやステップカードは白地にしてティール地から浮かせる。
• FAQは薄グレー地に白カードを置き、落ち着いた印象にする。

Typography

• 見出しはすべて極太ゴシックで、明朝は使わない。
• 日付や数字は大きく、年や単位は小さくして差をつける。
• 強調したい語は下線または一段大きな文字にする。
• 本文は中央揃えで短く改行する（ステップ説明だけ左揃え）。
• STEP番号は黄色、ラベル名は白にしてティール帯の上に置く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。応募回次は 2 列グリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションは画面いっぱいの色帯にし、中身は左右5%の余白で収める。
• 回次スケジュールは2列で、中央に縦の区切り線を入れる。
• ステップカードは左に文章、右にイラストを置く。
• FAQカード同士は約16pxずつ離す。
• セクション見出しプレートは中央に置き、幅は約75%にする。

Elevation & Depth

• カードはほぼ影なしのフラットにし、地色との差で浮かせる。
• 銀プレートはグラデーションと細いハイライト、下側の薄い影で立体感を出す。
• ティール地の上の白カードは影なし。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は使わず、フラットなイラストを矩形の中に置く
• セクション境界: 直線で色帯を切り替える
• 見出しとCTAは両端を斜めに切った横長の六角形プレートにする。
• 回次ラベルは両端が矢羽型の赤リボンにする。
• STEPラベルは右端だけ半円の片側ピル形にする。
• コンセプト枠は四隅を斜めに欠いた緑の二重線枠にする。
• FAQとアコーディオンは角丸12〜16pxにする。

Components

• 銀の六角形応募ボタン（button-primary）: 金属調の銀グラデーションをかけた横長六角形。右に紺の丸い矢印アイコンを付ける。
• セクション見出しプレート（heading-plate）: 両端を斜めに切った帯。ティール地の上では銀、明るい地の上では深ティールに白文字にする。
• 回次リボン（round-ribbon）: 赤い矢羽リボンに白文字で書き、回次番号だけ黄色にする。下に大きな日付と、白い当選発表ボックスを置く。
• ステップカード（step-card）: 白いカードの左上に、深ティールの片側ピル形ラベル（黄色のSTEP番号＋白の見出し）を置く。本文の右に線画風イラストを添える。
• 賞品カード（prize-card）: ティール地の上の白い角丸カード。賞品名と金額を極太の紺文字で大きく見せる。
• 応募期間の黒帯（period-band）: 全幅の黒帯に銀の六角形ラベルを置き、日付を白の極太数字で大きく見せる。
• FAQアコーディオン（faq-item）: 白い角丸カードの左に深ティールの大きな「Q.」、右に山形の矢印を置く。
• 規約アコーディオン（accordion-terms）: グレーの角丸バーに白文字と下向き矢印を置く。
• 注意書き赤帯（notice-bar）: カード内に赤帯を敷き、白い小さな文字で注意を書く。
• 問い合わせ見出し（contact-label）: 白地に黒い枠線のピル形見出し。下にフリーダイヤルを大きく書く。

Do's and Don'ts

Do - ミントの六角形柄の地とティール無地の帯を交互に配置する。 - 数字（人数・金額・日付）は極太でとにかく大きく見せる。 - 見出しは六角形プレート、回次は赤リボンで型をそろえる。 - 参加方法はSTEPカードを縦に並べ、番号を黄色で目立たせる。 - 主CTAは参加方法の直後に銀プレートで置く。

Don't - 暖色の背景や、くすんだアースカラーを使わない。 - 赤を広い面積に塗らない。 - 細い明朝や手書き書体を混ぜない。 - 写真を全面に敷かない。イラストとパターンで構成する。 - カードに強いドロップシャドウを付けない。

Page Structure

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

1. ヘッダー（ブランドを示す）: 薄グレー地の左に製品ロゴ、右に企業ロゴを置く。
2. ファーストビュー（キャンペーン名を印象づける）: ミントの六角形柄の上に白い歯形シルエットを置き、中に小見出し・極太タイトル・年号入りの赤リボンを入れる。
3. ブランドの想い（企業姿勢を伝えて信頼を得る）: 四隅を欠いた緑の枠の中で、点線の罫線に沿って中央揃えの本文を書き、上部に緑のタブ見出しを付ける。
4. 賞品訴求（当選人数と賞品を伝える）: ティール帯に銀の条件帯と黄色の数字を置き、白カードに賞品を載せ、下に黄色の誘導文を入れる。
5. 応募期間（期間全体を示す）: 黒帯に銀ラベルと白の大きな日付を置く。
6. 回次スケジュール（各回の受付期間と当選発表日を示す）: ミント柄地に赤リボン・日付・白ボックスを2列で並べ、下に当選数の注記を入れる。
7. 参加方法（手順を明示する）: ティール帯に銀の見出しを置き、STEP1〜4の白カードを縦に並べる。
8. CTA（応募へ誘導する）: ティール帯の中央に銀の六角形ボタンを置く。
9. 応募規約（規約を確認してもらう）: ミント柄地にグレーのアコーディオンバーを置く。
10. よくある質問（不安を解消する）: 薄グレー地に深ティールのプレート見出しを置き、白いQカードを5つ並べる。
11. 問い合わせ（連絡先を示す）: 白地に枠線ピルの見出し、フリーダイヤルのロゴと大きな番号、受付時間の注記を置く。右下に赤い六角形のTOPボタンを付ける。

Imagery

• 写真は使わない。フラットな線画イラスト（スマホ・建物・人物）を紺ティールとグレーで描く。
• 背景は細い白線の六角形ネットワークと小さな丸点を低いコントラストで敷く。
• 当選表示などはギザギザの吹き出しで強調する。
• ロゴやサービスのアイコンは小さく添える程度にとどめる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央に約800px幅のコンテンツを置き、色帯は全幅のまま延ばす。
• 回次スケジュールはPCで3列×2段にする。
• 応募期間の帯は、PCではラベルと日付を横一列に並べる。
• STEPカードはPCで横長にし、本文の改行を減らす。
• FAQカードはPCで中央約75%の幅にする。

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