DESIGN.md — 青空×鮮やかオレンジの姿勢ケア製品 LP（Sky Blue and Vivid Orange Posture Care LP）

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

Overview

• 業種: 家電・ガジェット ／ 雰囲気: 清潔・爽やか、信頼・誠実、シンプル・ミニマル、クール・先進的
• キーワード: 青空・ビビッドオレンジ・線画図解・白い余白・中央揃え・アコーディオン FAQ
• 地の質感: フラットな面と写真。オレンジ帯だけ斜めのグラデーションと光のにじみを入れる
• 形: ピル型の線ボタン、角丸ほぼなしのカード、円形のタイプバッジ、FV 下端のゆるい波線
• 温度感: 暖かいオレンジと涼しい青空の対比。全体の印象は明るく前向き

Colors

• 地は白が基本。製品バリエーションの説明だけ、オレンジから赤茶への斜めグラデーション帯にする
• 見出し・強調語・注釈ラベルはブランドオレンジの文字で書く。本文は濃いグレーにする
• オレンジ帯の上には白カードを置き、その下部に生成りの説明エリアを付ける
• 青は FV の空の写真だけに使い、UI には使わない
• 図解の強調ポイントは、オレンジのぼかした円と細いオレンジの線の円で示す
• button-outline-pill は文字 #DF6118 × 背景 #FDFDFD のコントラスト比が 3.52:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら on-cta-accessible（#C15415、4.54:1）を使う。
• type-badge は文字 #FFFFFF × 背景 #DF6118 のコントラスト比が 3.58:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#C35515、4.54:1）を使う。

Typography

• 本文と見出しは基本的に中央揃えにする。カード内の説明文だけ左揃え
• 文字間は 0.05〜0.15em と広めにとり、静かで丁寧な印象にする
• 見出しは短い 2 行に改行し、行末を揃える
• カード見出しでは強調したい語だけをオレンジにする
• 太字はオレンジの見出しに限定する
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードは左右に約 30px の余白をとって配置
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• 写真と製品画像は全幅で大きく見せる
• 各ブロックは見出し・本文・ピル型ボタンの順に縦に積む
• オレンジ帯の中で白カードを約 60px 間隔で縦に並べる
• FAQ はカテゴリ見出しの下に、全幅の薄グレー項目を 8px 間隔で並べる

Elevation & Depth

• 基本はフラット
• インソール FAQ のカードにだけ、柔らかく広い薄い影を付ける
• 白カードはグラデーション帯の上に影なしで置く

Shapes

• 角丸: 小 4px ／ 中 6px ／ 大 8px。ボタンはピル型。
• 写真の切り抜き: 全幅の矩形。製品画像は白背景の切り抜きで画面外まではみ出させる
• セクション境界: FV 下端だけゆるい波線。それ以外は直線で区切る
• ボタンは 1px 線のピル型で、右向き矢印を付ける
• タイプバッジはカード左上にはみ出す円形のオレンジ塗り
• カードは角丸ほぼなし（0〜2px）

Components

• 詳しく見るボタン（button-outline-pill）: 白地にオレンジの細い線と文字、右矢印付きのピル型。写真上では白線と白文字の透過版にする
• タイプ番号バッジ（type-badge）: 直径約 50px のオレンジの円。小さな欧文と大きなローマ数字を白で入れ、カード左上に重ねる
• 線画図解カード（diagram-card）: 白カードに製品の線画を 3 方向から並べ、オレンジのぼかし円と注釈ラベルで特長を示す。下部に生成りの説明エリアを付ける
• カード説明エリア（card-footer）: 生成り地にオレンジの中央見出しと左揃えの本文を置く
• FAQ カテゴリ項目（faq-category）: 薄グレーの全幅バーに中央揃えの項目名を置き、右端にオレンジの下向きシェブロンを付ける
• Q 付き FAQ カード（faq-q-card）: 白カードに柔らかい影を付け、左にオレンジの太字 Q、右にシェブロンを置く
• 受賞ラベル（award-badge）: ロゴの下に置く薄グレーの横長の帯

Do's and Don'ts

Do - 白地の中央揃えと広い行間で余白を大きくとる - オレンジは見出し・ボタン線・図解の強調に限定して使う - 製品は線画で図解し、強調点はオレンジのぼかし円で示す - セクションの終わりには必ずピル型の線ボタンを置く

Don't - オレンジのベタ塗りボタンを多用しない - 本文を太字や大きな文字で詰め込まない - 青を UI 部品に使わない - 角丸の大きいポップなカードにしない - 影を強くしない

Page Structure

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

1. ヘッダー（ブランドの提示とメニュー）: 白地の左にオレンジのロゴ、右にオレンジ線のハンバーガーメニュー
2. ファーストビュー（前向きなイメージで惹きつける）: 青空と跳躍する人物の全幅写真。上部に白のキャッチ、下部に透過のピル型ボタン、下端は波線
3. お知らせ（告知）: オレンジの小見出しと中央揃えの短文
4. コンセプト（サービスの全体像を伝える）: 2 つのロゴを×でつなぎ、受賞ラベル、オレンジの 2 行見出し、中央揃えの本文を置く
5. 製品ビジュアル（アプリと製品の組み合わせを見せる）: オレンジ背景の物撮り写真を全幅で置き、白のピル型ボタンを重ねる
6. 製品特長（製品の価値を説明）: セリフ体のロゴ、オレンジ見出し、本文、はみ出させた大きな製品の切り抜き、線ボタン
7. タイプ比較（3 タイプの違いを図解する）: オレンジグラデーション帯に白見出しを置き、共通点カードと番号バッジ付きの図解カードを 3 枚縦に並べる
8. よくある質問（不安を解消する）: オレンジ見出しの下に区切り線とカテゴリ名。グレーのアコーディオンと影付きの Q カードを並べる
9. フッター（締め）: 上に区切り線、中央にロゴとコピーライト

Imagery

• 青空と雲を背景に、人物が軽やかに跳ぶ様子をローアングルで撮る
• 製品とスマホは鮮やかなオレンジの背景に並べ、真上に近い角度から物撮りする
• 製品単体は白背景に切り抜き、大きく斜めに配置して画面外へはみ出させる
• 図解は細いグレーの線画にし、オレンジの放射状のぼかし円で効果の部位を示す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP は 1 カラムの中央揃え。PC ではコンテンツ幅を 960px 程度で中央に置く
• PC では FV 写真を横長にトリミングし、キャッチを左側に置く
• PC ではタイプ比較カードを 3 列に並べてもよい
• PC の FAQ は幅 800px 程度に収める

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