--- version: alpha name: Icy Blue Premium Beauty Device LP description: 氷や霜のテクスチャを敷いた淡い青白の地に、濃紺の明朝見出しと濃紺帯ラベルを重ねた、冷たく上品な光美容デバイスの LP。番号付きの機能紹介、白枠カード、手順イラスト、Q&A を縦一列に並べる。 colors: primary: '#064477' secondary: '#3466C2' background: '#EBF3F9' background-alt: '#FFFFFF' surface: '#D4E2EB' tint-1: '#F5F6FA' text: '#254767' text-body: '#333333' text-muted: '#9A9EA6' line: '#788AA9' dark-section: '#010101' on-dark: '#DCDCDC' accent-1: '#020202' typography: display: fontFamily: Shippori Mincho fontSize: 44px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.05em headline-lg: fontFamily: Shippori Mincho fontSize: 28px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0.08em headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.08em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.1em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em accent: fontFamily: Cormorant Garamond fontSize: 26px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.1em label-button: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.15em rounded: sm: 0px md: 4px lg: 12px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' number-feature-row: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 64px point-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.accent}' height: 28px offset-text-panel: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 160px circle-tag: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 95px outline-card: backgroundColor: '{colors.background-alt}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 250px step-label: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.note}' height: 18px faq-item: backgroundColor: '{colors.background-alt}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 110px sticky-cta: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' height: 64px --- # DESIGN.md — 氷のような青白さの美容家電 LP（Icy Blue Premium Beauty Device LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 家電・ガジェット ／ **雰囲気**: 上品・高級、清潔・爽やか、クール・先進的、信頼・誠実 - **キーワード**: 氷・冷却・メタリック・濃紺・明朝・透明感 - **地の質感**: 霜や氷の結晶が淡く広がる青白いテクスチャ背景。光の筋が差すグラデーション。 - **形**: 角丸なしの四角いカードと帯。白い正円の吹き出しだけが丸い。 - **温度感**: 寒色寄りで冷たく澄んだ印象 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#064477` | 濃紺の見出し・番号帯 | 4% | 画素の実測 | | `secondary` | `#3466C2` | コンセプト帯のロイヤルブルー | 6% | 推定 | | `background` | `#EBF3F9` | 氷テクスチャの淡い青白地 | 35% | 画素の実測 | | `background-alt` | `#FFFFFF` | FAQ の白地 | 20% | 画素の実測 | | `surface` | `#D4E2EB` | 本文を載せる半透明の淡灰青パネル | 8% | 画素の実測 | | `tint-1` | `#F5F6FA` | 手順カードの淡いグレー面 | 6% | 画素の実測 | | `text` | `#254767` | 見出し文字の濃紺 | 2% | 画素の実測 | | `text-body` | `#333333` | 本文の墨色 | 3% | 推定 | | `text-muted` | `#9A9EA6` | A マークと注釈のグレー | 1% | 推定 | | `line` | `#788AA9` | カード枠の青灰線 | 1% | 画素の主要色に補正 | | `dark-section` | `#010101` | 最下部固定 CTA の黒帯 | 1% | 画素の実測 | | `on-dark` | `#DCDCDC` | 黒帯・濃紺帯上の白文字 | 1% | 画素の実測 | | `accent-1` | `#020202` | STEP ラベルの黒 | 0% | 画素の実測 | - 地は氷テクスチャの淡い青白で通し、FAQ だけ白地に切り替える。 - 強調は濃紺のみ。番号帯・POINT 帯・見出し文字に使う。 - ロイヤルブルーは冒頭のコンセプト帯だけに使う。 - 暖色は使わない。製品写真や肌の色だけに任せる。 - 黒は STEP ラベルと最下部 CTA 帯だけに絞る。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | コンセプトの大見出し | 明朝 | Shippori Mincho | 500 | 44px | 1.3 | 0.05em | | `headline-lg` | セクション見出し | 明朝 | Shippori Mincho | 600 | 28px | 1.5 | 0.08em | | `headline-md` | カード見出し | ゴシック | Noto Sans JP | 700 | 18px | 1.5 | 0.08em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.9 | 0.1em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.6 | 0.02em | | `accent` | 01〜04 の番号・POINT ラベル | 欧文セリフ | Cormorant Garamond | 400 | 26px | 1.2 | 0.1em | | `label-button` | CTA 帯の文字 | ゴシック | Noto Sans JP | 500 | 22px | 1.4 | 0.15em | - 見出しは明朝で字間を広めにとり、静かで上品に見せる。 - 見出しの中で強調語だけを一回り大きくする。 - 番号は細いセリフ数字にし、斜線を添える。 - 本文はゴシックで字間 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 ```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-fc2931f6`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/mtgec-beauty/4008420101/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（9/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。