DESIGN.md — 氷のような青白さの美容家電 LP（Icy Blue Premium Beauty Device LP）

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

Overview

• 業種: 家電・ガジェット ／ 雰囲気: 上品・高級、清潔・爽やか、クール・先進的、信頼・誠実
• キーワード: 氷・冷却・メタリック・濃紺・明朝・透明感
• 地の質感: 霜や氷の結晶が淡く広がる青白いテクスチャ背景。光の筋が差すグラデーション。
• 形: 角丸なしの四角いカードと帯。白い正円の吹き出しだけが丸い。
• 温度感: 寒色寄りで冷たく澄んだ印象

Colors

• 地は氷テクスチャの淡い青白で通し、FAQ だけ白地に切り替える。
• 強調は濃紺のみ。番号帯・POINT 帯・見出し文字に使う。
• ロイヤルブルーは冒頭のコンセプト帯だけに使う。
• 暖色は使わない。製品写真や肌の色だけに任せる。
• 黒は STEP ラベルと最下部 CTA 帯だけに絞る。

Typography

• 見出しは明朝で字間を広めにとり、静かで上品に見せる。
• 見出しの中で強調語だけを一回り大きくする。
• 番号は細いセリフ数字にし、斜線を添える。
• 本文はゴシックで字間 0.1em。
• ※注釈は小さく、各ブロックのすぐ下に置く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。部位一覧だけ 4 列、特長タグは 2 列。
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真は左右どちらかの端まで広げ、本文パネルは逆側へずらして重ねる。
• 機能リストは左に濃紺の番号ブロック、右に白い文字欄の横帯。
• POINT は全幅の濃紺帯で区切る。
• 詳細カードは白地に細い青灰枠で縦に積む。

Elevation & Depth

• 影はほぼ使わない。
• 奥行きは半透明パネルを写真に重ねて出す。
• 正円の吹き出しにだけ、ごく淡い光彩を付ける。

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの長方形。左右どちらかの端まで広げる。
• セクション境界: 直線で切り替える。背景はテクスチャで連続させる。
• カード・帯・ボタンは直角。
• 特長タグは白い正円。
• 手順イラスト内の吹き出しのみ小さな角丸。

Components

• 番号付き機能帯（number-feature-row）: 左に濃紺の番号ブロック、右に白地の小見出しと大見出し。細い枠付き。
• POINT 帯（point-band）: 全幅の濃紺帯に白い欧文セリフで POINT.0X と入れる。
• ずらし本文パネル（offset-text-panel）: 写真の下端に半透明の淡青パネルを重ね、本文を載せる。
• 正円の特長タグ（circle-tag）: 白い正円に明朝の短い単語を入れ、千鳥状に 4 つ並べる。
• 細枠の詳細カード（outline-card）: 白地に青灰の細枠。中央見出しの下に区切り線、本文、製品画像を並べる。
• STEP ラベル（step-label）: 黒地に白文字の小さな四角ラベル。右に手順名を置く。
• Q&A（faq-item）: 濃紺の太い Q と灰色の A を左に置き、白地に余白を広くとって並べる。
• 下部固定 CTA 帯（sticky-cta）: 画面幅いっぱいの黒帯。2 段の白文字と右端に矢印。

Do's and Don'ts

Do - 背景に氷や霜のテクスチャを薄く敷き、冷たさを出し続ける。 - 見出しは濃紺の明朝で、強調語だけ大きくする。 - 機能は 01〜04 の番号で構造化し、各詳細の冒頭で同じ番号を繰り返す。 - 根拠となる主張には※注釈をすぐ下に付ける。 - 使い方はモノクロの線画イラストで描く。

Don't - 暖色やビビッドな色をボタンや帯に使わない。 - 角丸の大きいピル型ボタンにしない。 - ポップな丸ゴシックを使わない。 - 影の強いカードを使わない。 - 文字を詰め込みすぎない。字間と余白は広めにとる。

Page Structure

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

1. ファーストビュー（製品の高級感を一目で伝える）: 青白い光の筋の中に、メタリックな製品をアップで中央に置く。
2. コンセプト（2 つの価値の掛け合わせを示す）: ロイヤルブルー地に白の明朝 2 行を「×」でつなぐ。下に 2×2 の番号タグ。
3. モデルイメージと導入文（使う場面と製品の位置づけを伝える）: 横顔のモデル写真のあと、淡青地の中央揃え本文と注釈。
4. 選ばれる理由の一覧（4 つの機能を一覧で見せる）: 大きな明朝コピーのあとに番号付き機能帯を 4 本積む。
5. 機能詳細 01〜04（各機能の根拠を見せる）: 斜線付きの番号、明朝見出し、写真、ずらし本文パネルを繰り返す。試験結果は前後比較の枠で見せる。
6. 使用部位（全身に使えることを示す）: POINT 帯の下に 4 列の部位写真と全身線画。禁止部位は白枠の注意カードで示す。
7. 仕様比較表（アタッチメントの違いを整理する）: 灰色見出しの表で、○と－を使って比較する。
8. オプション品（別売品を紹介する）: 細枠カードに価格・説明・製品画像を左右に並べる。
9. こだわり機能（安全性と操作性を伝える）: 細枠カードを縦に積み、図解・矢印型のモード表示・レベルアイコンで見せる。
10. 使い方（手順を見せて不安を減らす）: 大枠の中に STEP1〜6 の淡灰カードと線画イラスト。
11. よくある質問（購入前の疑問に答える）: 白地に明朝の見出しと区切り線。下に Q&A を並べる。
12. 固定 CTA（比較ページへ送る）: 最下部に黒帯の全幅リンク。

Imagery

• 製品はメタリックな質感を強調する。青白い背景と光の筋で撮る。
• モデルは白い服で、淡いブルーグレーのスタジオ背景。肌は明るく透明感を出す。
• 機能図解は 3D CG で描き、光線・肌断面・粒子で科学っぽさを出す。「※イメージ」を添える。
• 使い方や部位図はグレーの細い線画で描き、陰影は付けない。
• 背景は氷や霜の結晶テクスチャを淡く敷く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像はないため推奨として書く。中央 960px 程度の幅にし、左右も氷テクスチャで埋める。
• 機能帯は PC で 2×2 のグリッドにする。
• 写真と本文パネルは PC で左右に並べ、少し重ねる。
• 部位写真は PC で 8 列 1 行にする。
• 固定 CTA は 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 行書くと起動時に読み込まれる。