--- version: alpha name: Warm Orange Isometric Health Event LP description: 淡いピーチとアイボリーの地に、濃いオレンジのアクセントとアイソメトリックイラストを合わせた健康イベント支援サービスの LP。波形の区切りと白い角丸カードで、やわらかく親しみやすく、信頼感もある印象に仕上げている。 colors: primary: '#FEAC43' background: '#FFE3BE' background-alt: '#FFE3BE' secondary: '#FEC880' surface: '#FFFEFD' text: '#2F2D27' text-body: '#5E5045' cta: '#FDAD43' on-cta: '#FFFFFF' accent-1: '#84D4D4' accent-2: '#E7B167' line: '#FFE1BA' accent-3: '#E8851E' cta-accessible: '#AD6302' primary-accessible: '#AF6301' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 24px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.04em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 22px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em accent: fontFamily: Montserrat fontSize: 22px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.04em label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 4px md: 8px lg: 16px full: 999px spacing: unit: 8px card: 16px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px button-outline: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 40px feature-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 200px news-box: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.note}' rounded: '{rounded.md}' height: 220px achievement-list: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 360px product-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 180px link-panel: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 96px contact-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.accent}' height: 200px area-box: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 120px --- # DESIGN.md — オレンジ×アイボリーのアイソメ健康イベント LP（Warm Orange Isometric Health Event LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 医療・クリニック・ヘルスケア ／ **雰囲気**: やさしい・柔らかい、信頼・誠実、親しみ・手作り感 - **キーワード**: ピーチオレンジ・アイソメトリック・波形区切り・白カード・健康・地域 - **地の質感**: フラットな単色面。淡い紙のようなアイボリー地に、ごく薄い影の白カードを重ねる - **形**: 角丸カード、ピル型ボタン、ゆるい波形のセクション境界 - **温度感**: 暖色寄りで明るく、温かい ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FEAC43` | ブランドのオレンジ（帯・ボタン・アイコン） | 9% | 画素の実測 | | `background` | `#FFE3BE` | メインのピーチ地 | 30% | 画素の実測 | | `background-alt` | `#FFE3BE` | 淡いアイボリーの地 | 15% | 画素の実測 | | `secondary` | `#FEC880` | ファーストビューの濃いピーチ地 | 9% | 画素の実測 | | `surface` | `#FFFEFD` | カード・お知らせ枠の白 | 17% | 画素の実測 | | `text` | `#2F2D27` | 見出しの濃い茶 | 2% | 画素の実測 | | `text-body` | `#5E5045` | 本文の茶グレー | 2% | 推定 | | `cta` | `#FDAD43` | 主 CTA ボタンのオレンジ | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTA ボタン上の白文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#84D4D4` | 矢印パネルのティール | 1% | 画素の実測 | | `accent-2` | `#E7B167` | 日付・タグの小さいオレンジバッジ | 1% | 画素の主要色に補正 | | `line` | `#FFE1BA` | お知らせの区切り線 | 0% | 画素の主要色に補正 | | `accent-3` | `#E8851E` | 電話番号の強調オレンジ | 0% | 推定 | | `cta-accessible` | `#AD6302` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#AF6301` | AA を満たす補正値（計算） | | 計算 | - 地はピーチとアイボリーを交互に使い、波形でつなぐ - お問い合わせ帯だけ濃いオレンジにして、白文字と白ボタンを置く - 情報は白い角丸カードに入れて地から浮かせる - ティールは矢印パネルとイラストだけに少し使う - 文字は黒ではなく濃い茶で、暖かみを残す - 強調はオレンジ文字か、オレンジの丸アイコンで行う - `button-primary` は文字 `#FFFFFF` × 背景 `#FDAD43` のコントラスト比が 1.87:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#AD6302`、4.6:1）を使う。 - `contact-band` は文字 `#FFFFFF` × 背景 `#FEAC43` のコントラスト比が 1.88:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#AF6301`、4.56:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューのキャッチ | ゴシック | Zen Kaku Gothic New | 700 | 24px | 1.4 | 0.04em | | `headline-lg` | セクション見出し（中央） | ゴシック | Zen Kaku Gothic New | 700 | 22px | 1.4 | 0.05em | | `headline-md` | カード・実績ボックスの見出し | ゴシック | Zen Kaku Gothic New | 700 | 17px | 1.5 | 0.03em | | `headline-sm` | 特長カードの小見出し | ゴシック | Noto Sans JP | 700 | 15px | 1.5 | 0.02em | | `body-md` | 本文・説明 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.03em | | `note` | 日付・注釈・受付時間 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.02em | | `accent` | 英字見出しと電話番号 | 欧文サンセリフ | Montserrat | 700 | 22px | 1.2 | 0.04em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 13px | 1.4 | 0.05em | - 見出しは太めのゴシックで、中央揃えを基本にする - 本文は小さめにして、行間 1.8 でゆったり組む - 英字の小見出しを日本語見出しに添えることがある - 電話番号は欧文の太字にしてオレンジで大きく出す - 明朝体と装飾書体は使わない - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC では特長を 4 列、機器を 3 列、紹介を 2 列で交互に並べる - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - セクションの上下は波形か斜めの境界でつなぐ - 白カードは中央に寄せ、両側にピーチ地を見せる - 画像とテキストの 2 段組は左右を交互にする - 各セクションの最後にピル型ボタンを中央に置く - 見出しの横にアイソメの人物イラストを添える ## Elevation & Depth - カードはごく薄い影（0 2px 6px 程度、茶系で透明度 10%） - ボタンには影をつけないか、ごく弱くする - イラストは影なしのフラットにする ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 写真は角丸の長方形。イラストは背景なしで配置する - **セクション境界**: ゆるい波形カーブ - ボタンはピル型で、右端にオレンジの丸い矢印を付ける - カードの角丸は 8px 前後にする - 実績ボックスは大きな角丸の白パネルにする - タグは小さい角丸のオレンジ地にする ## Components - **主 CTA ピルボタン**（`button-primary`）: オレンジ地に白文字のピル型ボタン。右端に白丸の矢印を付ける - **一覧を見るボタン**（`button-outline`）: 白地にオレンジの細枠のピル型ボタン。右端にオレンジの丸アイコンを付ける - **特長カード**（`feature-card`）: 上にアイソメのイラスト、下に白カードを置き、太字の見出しと短い説明を入れる - **お知らせ枠**（`news-box`）: 白の角丸枠。日付とオレンジのタグとタイトルを 1 行ずつ並べ、行の間を区切り線で分ける - **実績リスト**（`achievement-list`）: 白い大きなパネルに、オレンジの十字アイコン付きの箇条書きを並べる - **機器カード**（`product-card`）: 左上にオレンジの角丸バッジ。中に機器の写真を入れ、名前と小さいタグを付ける - **矢印付きリンクパネル**（`link-panel`）: 白の横長パネルの右端にティールの矢印ブロック。左に見出しと説明を置く - **お問い合わせ帯**（`contact-band`）: オレンジの帯に、電話とメールの 2 ブロックを縦線で分けて並べる - **対応エリア枠**（`area-box`）: 白い枠の上辺にオレンジのラベル。中に地域名を太字で並べる ## Do's and Don'ts **Do** - アイソメトリックの人物と機器のイラストを多めに使う - ピーチとアイボリーの地を交互にし、波形でつなぐ - ボタンはすべてピル型にし、丸い矢印アイコンで統一する - 白カードに情報をまとめ、余白を多めにとる - 電話番号と受付時間をセットで目立たせる **Don't** - 寒色を地の色にしない - 黒と濃いグレーを大きな面に使わない - 角が鋭い四角いボタンにしない - リアルな写真を背景いっぱいに敷かない - 派手なグラデーションや強い影を使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（サービスの価値と対応エリアを伝える）: オレンジ地に大きなアイソメの街並みのイラスト。左にキャッチ、下に白の対応エリア枠と地図のシルエットを置く 2. **お知らせ**（最新情報と応援しているイベントを伝える）: バナーを中央に置き、その下に白い角丸のお知らせ枠を置く 3. **サービスの特長**（選ばれる理由を 4 つ示す）: イラストを乗せた白カードを 4 枚並べ、下に CTA ボタンを置く 4. **実績**（過去の開催実績で信頼を得る）: 大きな白パネルに十字アイコン付きの箇条書きを並べ、イラストを添える 5. **活動の写真**（実際の雰囲気を見せる）: 見出しを左に寄せ、角丸の写真を 5 枚横に並べる 6. **取扱機器**（レンタルできる機器を一覧で見せる）: カテゴリの切り替えタブと、バッジ付きの機器カード（3 列） 7. **流れ・会社案内**（下層ページへ誘導する）: ティールの矢印付き白パネルを 2 枚並べる 8. **お問い合わせ**（電話とメールでの相談を促す）: オレンジの帯を 2 分割し、電話番号を大きく出してメールボタンを置く 9. **活用提案**（社内向けと販促向けの使い方を紹介する）: 大きなイラストとテキストを左右交互に組み、一覧ボタンを置く 10. **フッター**（連絡先とサイトマップ）: ロゴと電話・FAX を置き、ピーチ地の箱にリンクを 3 列で並べる。最下部にオレンジの細い帯 ## Imagery - 人物と機器を明るい配色のアイソメトリックで描く - イラストの色はオレンジ・ティール・青・赤を使い、輪郭線は描かない - 写真は会場の自然な記録写真にし、角丸で並べる - 機器は白背景の物撮りにして、カードの中に入れる - ガーランドや小さい人物を余白に添えて、にぎやかさを出す - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - SP ではカードを 1 列か 2 列に縦積みする - SP のファーストビューはイラストを上、キャッチを下にする - 左右交互の 2 段組は SP では画像を上、テキストを下にする - お問い合わせ帯は SP では電話とメールを縦に積む - PC は 1000px 幅を中心に組み、両側はピーチ地を見せる ## 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-282cf62e`（元 LP の URL から採番） - **元 LP**: https://www.chubukasei.jp/kenkou-support/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（8/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。