DESIGN.md — オレンジ×アイボリーのアイソメ健康イベント LP（Warm Orange Isometric Health Event LP）

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

Overview

• 業種: 医療・クリニック・ヘルスケア ／ 雰囲気: やさしい・柔らかい、信頼・誠実、親しみ・手作り感
• キーワード: ピーチオレンジ・アイソメトリック・波形区切り・白カード・健康・地域
• 地の質感: フラットな単色面。淡い紙のようなアイボリー地に、ごく薄い影の白カードを重ねる
• 形: 角丸カード、ピル型ボタン、ゆるい波形のセクション境界
• 温度感: 暖色寄りで明るく、温かい

Colors

• 地はピーチとアイボリーを交互に使い、波形でつなぐ
• お問い合わせ帯だけ濃いオレンジにして、白文字と白ボタンを置く
• 情報は白い角丸カードに入れて地から浮かせる
• ティールは矢印パネルとイラストだけに少し使う
• 文字は黒ではなく濃い茶で、暖かみを残す
• 強調はオレンジ文字か、オレンジの丸アイコンで行う
• 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

• 見出しは太めのゴシックで、中央揃えを基本にする
• 本文は小さめにして、行間 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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。