DESIGN.md — ティール×水色モザイクの胃腸薬LP（Teal Pixel Mosaic OTC Digestive Medicine LP）

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

Overview

• 業種: 医療・クリニック・ヘルスケア ／ 雰囲気: 清潔・爽やか、信頼・誠実、やさしい・柔らかい
• キーワード: ティール・水色モザイク・キューブ分解・ノート風Q&A・細身ゴシック・成分表
• 地の質感: フラットな面に、正方形ピクセルのモザイクと立体キューブの粒子を重ねる
• 形: 見出しはピル型帯、吹き出しは手描き風の楕円、カードは角丸小
• 温度感: 涼しげで清潔。クリーム色の帯で少しだけ温かみを足す

Colors

• 地色は白→クリーム→水色→白→濃ティールの順に切り替え、セクションの区切りにする
• 水色地への入り口と出口には、水色系の正方形モザイクを敷いてグラデーションのようにつなぐ
• ティールは見出し帯・吹き出し・購入エリアだけに使い、本文には使わない
• 赤は訴求コピー1〜2行だけに限る
• 山吹色はサブ導線ボタン1つにだけ使う
• 成分カードは淡い青・黄・緑・ピンクの4色で色分けする
• heading-pill-bar は文字 #FFFFFF × 背景 #008999 のコントラスト比が 4.17:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#008291、4.56:1）を使う。
• speech-bubble-label は文字 #FFFFFF × 背景 #008999 のコントラスト比が 4.17:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#008291、4.56:1）を使う。
• button-secondary は文字 #FFFFFF × 背景 #FAB905 のコントラスト比が 1.75:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#966F03、4.59:1）を使う。

Typography

• 本文は細めのゴシックで、字間を0.1em前後と広めに取る
• 見出しは中央揃えで濃ティールにする
• 英字ラベルは筆記体を斜めに置き、日本語見出しの上に添える
• Q番号は大きめのゴシック数字にして、質問文を横に並べる
• 数値はmg単位で右揃えにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。成分カードは 2×2 で人体図を囲む
• 本文ブロックの幅: 画面幅の約 82%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• 本文ブロックは左右に約35pxの余白を取る
• セクション見出しの上下は40px以上空ける
• ピル帯見出しは画面幅の約90%まで広げる
• 表は全幅で使い、罫線は細い水平線だけにする

Elevation & Depth

• 影はほぼ使わない。フラットな見た目が基本
• Q&Aカードだけ、太い水色の枠とリング綴じでノートらしい立体感を出す
• 購入ボタンは白い面を濃ティールの地に置いて浮かせる

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: 料理や商品は切り抜いて四方に散らす。コラムの写真は四角いバナーにする
• セクション境界: 正方形ピクセルのモザイクで段階的に色を変える。ほかは直線で区切る
• 見出し帯はピル型（全角丸）にする
• ボタンは角丸なしか小さめの長方形にする
• 吹き出しは手描き風の楕円に尻尾をつける

Components

• ピル帯見出し（heading-pill-bar）: ティールの全角丸帯に白の太字を中央に置く
• 吹き出しラベル（speech-bubble-label）: ティールの楕円吹き出しに白文字。少し傾けてセクションの左上に置く
• チェックリスト（check-list）: ティールのチェックボックスアイコンと、ベージュの点線の下線
• Pointラベル（point-label）: 筆記体の英字と番号を中央に置き、下に日本語見出しを添える
• 成分カード（ingredient-card）: パステル色の正方形カード。成分名、量、分解対象を載せ、食材イラストを添える
• ノート風Q&A（notebook-faq）: 上辺にリング綴じを描いたクリーム色カードを水色の太枠で囲む
• 山吹ボタン（button-secondary）: 山吹色の長方形に白文字を置き、右端に矢印を付ける
• 購入先ボタン（store-button）: 濃ティール地に白い長方形を2列で並べ、ロゴを中央に置く
• 用法表（dosage-table）: 淡水色のヘッダーに細い罫線。セルは結合して中央揃えにする

Do's and Don'ts

Do - 水色モザイクやキューブ粒子で「分解」を表すモチーフを繰り返す - 本文は細字で字間を広く取り、静かに読ませる - 見出しは中央揃え、本文は左揃えにする - 医薬品の注意書きは※付きで整然と並べる - 地色を切り替えて、セクションの区切りを明確にする

Don't - 赤や山吹色を多用しない - 濃い影やグラデーションのボタンを使わない - 本文を太字や詰めた字間にしない - 丸ゴシックやポップな書体に変えない - モザイク以外の波形・斜めの区切りを混ぜない

Page Structure

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

1. ヘッダー（ロゴとメニュー）: 白地の左にロゴ、右にティールのハンバーガーアイコン
2. ファーストビュー（世界観と商品の提示）: ティールのキューブが飛び散る背景に料理の切り抜きを散らし、白抜きのキャッチと商品パッケージを置く
3. ブランド紹介（効能と想いを伝える）: 白地に小見出し、ロゴ、区分表示、細字の本文を4行ほど
4. 悩みの提起（服用シーンへの共感）: 吹き出しラベルとクリーム地。点線付きのチェックリストを4項目、最後に赤字の訴求と商品画像
5. 特長1（成分の説明）: モザイクから水色地へ移る。筆記体のPointラベルの下に、人体図を囲む4色の成分カード
6. 特長2（技術の説明）: 左に図解、右に本文の2分割
7. よくある質問（不安の解消）: ノート風カードに大きなQ番号と質問、回答を3問
8. コラム誘導（関連コンテンツへ誘導）: 木目写真のバナーに山吹色のボタン。下をモザイクで締める
9. 成分・分量／用法・用量（法定表示）: 白地にピル帯の見出し、成分の表、※注釈、用法の表
10. 購入CTA（購入先・店舗への導線）: キューブ背景の濃ティール地に、白い購入先ボタンを2×2と販売店検索ボタン
11. フッター（企業情報）: 白地に中央揃えでロゴ、リンク、コピーライト

Imagery

• ティール系の立方体が爆発するように散る3DCGで「分解」を表す
• ステーキやケーキ、パエリアなどの料理を切り抜いて、浮遊感を出して配置する
• 人体のシルエットに消化器官を光らせたフラットなイラスト
• 成分カードには食材のモノクロ線画アイコンを添える
• 水色の濃淡の正方形を並べたピクセルモザイクを装飾にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCも1カラムで中央寄せ。本文幅は約640pxに絞る
• PCのFVはキューブ背景を全幅に広げ、料理を左右に散らす
• PCでは右側に追従する丸い購入ボタン（白地に赤枠）を置く
• 購入先ボタンはPCで4つ横並びにする
• 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 行書くと起動時に読み込まれる。