--- version: alpha name: Trustworthy Purple and Gold OTC Medicine LP description: 濃い紫を主色に、金の差し色と淡い黄色のマーカーを合わせた市販薬の LP。白地とごく淡いグレーの帯を交互に置き、明朝の大見出しとゴシック本文で信頼感を出す。斜めカットの帯や、角に三角を付けた枠線カード、紫一色の線画イラストで生活習慣の提案をやわらかく見せる。 colors: primary: '#4F3886' secondary: '#35285A' cta: '#4F3885' on-cta: '#FCF5FE' background: '#FEFFFE' background-alt: '#F6F7FB' accent-1: '#B8902A' marker: '#FDF3C4' tint-1: '#E3D6FE' text: '#232223' text-muted: '#666666' line: '#6B5A9E' dark-section: '#333333' accent-2: '#FEE2E3' typography: display: fontFamily: Noto Serif JP fontSize: 30px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0.08em headline-lg: fontFamily: Noto Serif JP fontSize: 22px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.05em headline-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.7 accent: fontFamily: Shippori Mincho fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.1em label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 0px md: 0px lg: 0px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-detail: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 44px button-store: backgroundColor: '{colors.primary}' typography: '{typography.headline-md}' height: 60px button-ec: textColor: '{colors.text}' height: 62px slash-lead: textColor: '{colors.accent-1}' typography: '{typography.accent}' height: 32px corner-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 340px label-tab: backgroundColor: '{colors.dark-section}' typography: '{typography.headline-md}' height: 36px faq-card: textColor: '{colors.secondary}' typography: '{typography.headline-md}' height: 110px series-band: backgroundColor: '{colors.primary}' typography: '{typography.headline-md}' height: 100px bar-chart: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.note}' height: 400px badge-category: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 20px --- # DESIGN.md — 紫×金の誠実な市販薬シリーズ LP（Trustworthy Purple and Gold OTC Medicine LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 医療・クリニック・ヘルスケア ／ **雰囲気**: 信頼・誠実、清潔・爽やか、上品・高級、情報量多め・訴求型 - **キーワード**: 濃紫・金のスラッシュ装飾・明朝見出し・斜めカット・線画イラスト・黄色マーカー - **地の質感**: フラットな面。影はごく弱く、通販ボタンにだけ薄い影を付ける - **形**: 角丸は使わず直角が基本。ボタンや帯は斜めにカットし、カードの左上に三角を付ける - **温度感**: やや寒色で落ち着いた印象。金と黄色のマーカーで温かみを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#4F3886` | ブランドの濃紫（帯・ボタン・見出し） | 6% | 画素の実測 | | `secondary` | `#35285A` | 見出しや線画に使う濃い紫の文字・線 | 3% | 画素の実測 | | `cta` | `#4F3885` | 詳細ボタンの紫の面 | 2% | 画素の実測 | | `on-cta` | `#FCF5FE` | ボタン上の白文字 | 0% | 画素の実測 | | `background` | `#FEFFFE` | ページの基本の白地 | 56% | 画素の実測 | | `background-alt` | `#F6F7FB` | 購入エリアや Q&A の淡いグレー地 | 12% | 画素の実測 | | `accent-1` | `#B8902A` | 金色のスラッシュ装飾と Q 記号 | 0% | 推定 | | `marker` | `#FDF3C4` | 強調文の黄色マーカー | 1% | 画素の実測 | | `tint-1` | `#E3D6FE` | イラスト背景の淡いラベンダー | 2% | 画素の実測 | | `text` | `#232223` | 見出し・本文の濃いグレー | 4% | 画素の実測 | | `text-muted` | `#666666` | 注釈や調査概要のグレー文字 | 1% | 推定 | | `line` | `#6B5A9E` | カードの紫系の枠線 | 0% | 推定 | | `dark-section` | `#333333` | ラベル帯の濃いチャコール | 0% | 画素の実測 | | `accent-2` | `#FEE2E3` | 上部のお知らせ帯の淡いピンク | 0% | 画素の実測 | - 地は白を基本にし、購入エリア・補足・Q&A は淡いグレーの地に切り替える - 濃紫は見出し文字・ボタン・帯・線画に限って使い、ブランドの色として統一する - 金はスラッシュ装飾や Q 記号など小さな面だけに使う - 強調したい本文には黄色のマーカーを下半分ではなく文字全体に引く - シリーズの商品帯だけは、商品ごとの色（赤・橙・緑）を使ってよい - グラフで強調する項目は紫の棒と紫の点線枠、その他はグレーにする ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV のキャッチ・大見出し | 明朝 | Noto Serif JP | 600 | 30px | 1.5 | 0.08em | | `headline-lg` | セクションの訴求見出し（紫・中央揃え） | 明朝 | Noto Serif JP | 700 | 22px | 1.6 | 0.05em | | `headline-md` | カードの見出し・Q の問い | ゴシック | Noto Sans JP | 700 | 15px | 1.6 | 0.02em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.9 | 0.03em | | `note` | 注釈・調査概要 | ゴシック | Noto Sans JP | 400 | 11px | 1.7 | 0.0em | | `accent` | 金のスラッシュで挟む導入語・Q 記号 | 明朝 | Shippori Mincho | 700 | 18px | 1.4 | 0.1em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.4 | 0.05em | - 訴求見出しは明朝で中央揃えにし、2〜3 行に改行する - 本文・カード・ボタンはゴシックで統一する - 見出しの強調語は紫、または黄色マーカーで目立たせる - 注釈は※印と番号を付け、小さなグレー文字にする - 導入語は「＼ ／」の形の金スラッシュで挟む - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC の購入ボタンは 4 列、予防カードは 3 列 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - 左右の余白は約 20px - 商品ブロックは見出し→バッジ→ロゴ→注釈→商品画像→ボタンの順に縦へ積む - 予防カードは枠線を共有し、縦に連結する - 購入エリアはグレーの地に白いロゴボタンを縦に並べる - Q&A は白いカードを 16px 間隔で並べる ## Elevation & Depth - 基本は影なし。境界は枠線か地の色の差で作る - 通販ロゴのボタンだけに、薄いぼかし影（0 2px 6px 程度、透明度 10%）を付ける - 商品パッケージの写真には自然な落ち影を付ける ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。 - **写真の切り抜き**: 商品は背景を切り抜いて置く。人物は FV で右側に切り抜いて配置する - **セクション境界**: 直線で地の色を切り替える。シリーズ帯は右上がりの斜めカット。フッター上は斜線の点線 - 詳細ボタンは平行四辺形にし、左端に金の斜め帯、右端に横矢印を付ける - カードの左上に紫の直角三角形を付ける - ラベル帯は右端を斜めにカットする - 吹き出しは丸型で紫の線で描く ## Components - **斜めカットの詳細ボタン**（`button-detail`）: 紫の平行四辺形。左端に金の斜め帯、右端に細い横矢印を付ける - **販売店検索ボタン**（`button-store`）: 幅いっぱいの紫ボタン。斜めにグラデーションの陰影を入れ、右に矢印を付ける - **通販ロゴボタン**（`button-ec`）: 白い長方形の中央にロゴを置き、薄い影を付ける - **金スラッシュの導入語**（`slash-lead`）: 短い導入語を金の太い斜線で左右から挟む - **角三角付きの枠線カード**（`corner-card`）: 紫の 1px 枠。左上に三角を置き、紫の見出し・線画・本文を中央揃えで並べる - **斜めカットのラベル帯**（`label-tab`）: 左端から伸びる黒い帯に白文字。右端を斜めにカットする - **Q&A カード**（`faq-card`）: グレーの地に白いカード。金の明朝で Q を付け、問いは紫の太字、答えは本文で書く - **シリーズの商品帯**（`series-band`）: 商品の色で塗った斜めカットの帯。左に効能と商品名、右に商品写真を置く - **強調付きの横棒グラフ**（`bar-chart`）: グレーの棒の中で、強調する項目だけを紫の棒と点線枠で目立たせる - **医薬品区分バッジ**（`badge-category`）: 黒枠の小さなボックスと、黒い丸の対象マークを並べる ## Do's and Don'ts **Do** - 見出しは明朝、本文はゴシックで役割を分ける - 紫を主に、金は少量の差し色に留める - ボタンや帯は斜めカットにして動きを出す - 注釈と根拠データを近くに添えて誠実さを示す - イラストは紫一色の線画に淡紫の面を少しだけ入れて統一する **Don't** - 角丸やピル型のボタンを使わない - 派手なグラデーションや強い影を多用しない - 金を広い面に使わない - 見出しに丸ゴシックやポップな書体を使わない - 効能を誇張するような装飾（爆発マークなど）を使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー・お知らせ帯**（ブランドの表示と購入への導線）: 白いヘッダーの右に紫の購入ボタンとメニューを置き、下に淡いピンクのお知らせ帯を敷く 2. **ファーストビュー**（主力商品と効能を伝える）: 明るい室内写真の上に明朝のキャッチを置き、右に人物、左下に紫の斜め帯と商品を配置する 3. **シリーズの商品帯**（症状別の商品を一覧で見せる）: 商品の色ごとに斜めカットの帯を縦に重ね、左に効能、右に商品写真を置く 4. **市場背景・データ**（ニーズを根拠と一緒に示す）: 明朝の大見出し、マーカー付きの本文、強調付き横棒グラフ、調査概要の順に置く 5. **商品紹介**（各商品の特長と詳細への導線）: 金スラッシュの導入語、紫の明朝見出し、区分バッジ、ロゴ、商品写真、斜めの詳細ボタンの順に置く 6. **付加機能の紹介**（パッケージの工夫を伝える）: 淡いグレーのボックスに見出しと三角マーカーの箇条書きを入れ、下に淡紫グラデーションのイラストを置く 7. **購入先**（通販と店舗への導線）: 黒いラベル帯の下のグレー地に、白い通販ロゴボタンを縦に並べ、最後に紫の販売店検索ボタンを置く 8. **予防・生活提案**（症状のケアを啓発して好感を得る）: マーカー付きの導入文と明朝見出しの下に、角三角付きの線画カードを縦に連結する 9. **マナーの提案**（せきエチケットを示す）: 同じ型のカードに吹き出し付きの線画を入れる 10. **よくある質問**（服用の不安を解消する）: グレー地に白い Q&A カードを並べる。見出しはロゴと金の明朝を組み合わせる 11. **フッター**（企業情報とリンク）: 右端に紫の正方形の TOP ボタン、斜線の区切り、ロゴ、矢印付きのテキストリンクを置く ## Imagery - 商品パッケージは正面やや斜めの切り抜きにし、落ち影を付ける - 人物は清潔な白シャツの中年男性。明るくぼかした室内を背景にする - イラストは濃紫一色の線画にし、服だけ淡いラベンダーで塗る - 説明図は灰色の箱とスマホを手に持つ図にし、淡紫のグラデーション地に金の効果線を添える - アイコンは金の地球と家の小さなシンボルを使う - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央に約 960px のコンテンツ幅を取り、左右に余白を設ける - PC のシリーズ帯は上段に主力商品、下段に 3 商品を横に並べる - PC の市場背景は本文とグラフを左右 2 カラムにする - PC の商品紹介はロゴと商品写真を左右に並べる - PC の通販ボタンは 4 列、予防カードは 3 列のグリッドにする - 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-7714452c`（元 LP の URL から採番） - **元 LP**: https://www.shionogi-hc.co.jp/medicon.html - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（11/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。