--- version: alpha name: Teal and Terracotta Elegant Beauty Device LP description: 生成り地に深いティールとテラコッタオレンジを合わせた、明朝主体の上品な美容機器 LP。斜めの切り替えやV字の境界、筆で塗ったようなテクスチャー背景、円形の写真切り抜きで、大人の女性向けの柔らかい高級感と「ながら使い」の軽やかさを両立させている。 colors: primary: '#02636D' background: '#FDF9ED' background-alt: '#F2F2EA' accent-1: '#DC6E34' cta: '#DC7234' on-cta: '#FFFEFD' text: '#3E4A48' dark-section: '#332D2D' on-dark: '#ECFDFE' marker: '#FEFDB3' accent-2: '#F3E08A' tint-1: '#FDF3C5' line: '#447873' secondary: '#957A67' accent-1-accessible: '#BF5721' cta-accessible: '#BC5A20' typography: display: fontFamily: Shippori Mincho fontSize: 40px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em headline-lg: fontFamily: Noto Serif JP fontSize: 30px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.04em headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em headline-sm: fontFamily: Noto Serif JP fontSize: 18px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.85 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 8px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Montserrat fontSize: 13px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.1em label-button: fontFamily: Klee One fontSize: 18px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 4px md: 12px lg: 200px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' secret-arch-tag: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 70px arrow-list-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 38px voice-bubble: textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 230px voice-card: textColor: '{colors.text}' typography: '{typography.body-md}' height: 170px check-list-box: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 170px highlight-band-copy: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' height: 36px feature-bubble: textColor: '{colors.primary}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 120px round-badge: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.note}' rounded: '{rounded.full}' height: 60px notice-box: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.body-md}' height: 100px --- # DESIGN.md — 深緑×テラコッタの上品な美顔器 LP（Teal and Terracotta Elegant Beauty Device LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 家電・ガジェット ／ **雰囲気**: 上品・高級、やさしい・柔らかい、情報量多め・訴求型、ナチュラル - **キーワード**: 深いティール・テラコッタ・生成り・明朝見出し・斜め切り替え・筆塗りテクスチャー - **地の質感**: 和紙や大理石のような淡いざらつき、セクションによって筆で塗った油絵風グラデーションや青海波柄を薄く敷く - **形**: V字・斜め・波形のセクション境界、円や縦長カプセル形の写真切り抜き、上がアーチ状の番号タグ - **温度感**: 生成りとオレンジで温かく、ティールで引き締めた中間〜やや暖色寄り ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#02636D` | ブランドの深いティール。見出し帯や濃色セクション | 12% | 画素の実測 | | `background` | `#FDF9ED` | 生成りの基本背景 | 20% | 画素の実測 | | `background-alt` | `#F2F2EA` | 淡いグレーベージュの切り替え地 | 10% | 画素の実測 | | `accent-1` | `#DC6E34` | テラコッタオレンジ。強調語、秘密3背景、帯コピー | 8% | 画素の実測 | | `cta` | `#DC7234` | オレンジ系ボタン・バッジ色 | 1% | 画素の実測 | | `on-cta` | `#FFFEFD` | オレンジ面上の白文字 | 1% | 画素の主要色に補正 | | `text` | `#3E4A48` | 見出し・本文の濃いグレー | 4% | 画素の主要色に補正 | | `dark-section` | `#332D2D` | 悩みセクションのチャコール地 | 4% | 画素の実測 | | `on-dark` | `#ECFDFE` | 濃色地上の白文字 | 2% | 画素の実測 | | `marker` | `#FEFDB3` | 数字訴求の淡黄マーカー | 1% | 画素の実測 | | `accent-2` | `#F3E08A` | ティール地上の黄色強調文字 | 1% | 推定 | | `tint-1` | `#FDF3C5` | 淡いクリームイエローのセクション地 | 6% | 画素の実測 | | `line` | `#447873` | 細い区切り線・注意書き枠 | 0% | 画素の実測 | | `secondary` | `#957A67` | 製品のくすんだベージュ・ブラウン | 5% | 画素の主要色に補正 | | `accent-1-accessible` | `#BF5721` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#BC5A20` | AA を満たす補正値（計算） | | 計算 | - 地は生成りと淡いグレーベージュを交互にし、要所でティールの濃色セクションを挟む - ティールは見出し文字・番号帯・ブランド締めセクションに限定する - オレンジは強調語・星評価・帯コピー・秘密3など温度を上げたい箇所に使う - ティール地上の強調語は淡黄色で抜く - お客様の声エリアはオレンジ〜ティールの筆塗りグラデーション地にする - 本文は純黒を避けグレーがかった濃色で書く - `highlight-band-copy` は文字 `#FFFEFD` × 背景 `#DC6E34` のコントラスト比が 3.3:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#BF5721`、4.53:1）を使う。 - `round-badge` は文字 `#FFFEFD` × 背景 `#DC7234` のコントラスト比が 3.21:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#BC5A20`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの縦書きキャッチ | 明朝 | Shippori Mincho | 700 | 40px | 1.3 | 0.05em | | `headline-lg` | セクション大見出し | 明朝 | Noto Serif JP | 500 | 30px | 1.4 | 0.04em | | `headline-md` | 小見出し・特長名 | ゴシック | Noto Sans JP | 700 | 20px | 1.5 | 0.03em | | `headline-sm` | 帯コピーやラベル | 明朝 | Noto Serif JP | 600 | 18px | 1.5 | 0.03em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.85 | 0.02em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 8px | 1.5 | 0.0em | | `accent` | 欧文の小見出し(英字ラベル) | 欧文サンセリフ | Montserrat | 400 | 13px | 1.4 | 0.1em | | `label-button` | 手書き風の導入語・スクリプト装飾 | 手書き・筆 | Klee One | 400 | 18px | 1.4 | 0.05em | - 大見出しは明朝で、強調語だけ色を変え字を大きくする - 本文はゴシックで行間広め - 見出しの上に細い欧文ラベルを添える - FVやイメージカットではコピーを縦書きにする - 数値訴求は太ゴシック+マーカー帯 - 注釈は※付きの極小文字で該当箇所の近くに置く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。特長の用語説明のみ 2 カラム - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - 写真は画面幅いっぱいか左右に少し余白を取って配置 - 見出しは中央揃え、本文は左揃え - セクション間に下向き三角の連続矢印を置いて流れを作る - ストーリーを悩み→原因→解決→秘密3つ→使い方の順に進める - 写真とテキストを斜めに重ねてリズムを出す ## Elevation & Depth - 基本はフラットで影なし - 口コミの円形吹き出しにだけ柔らかい影を付ける - FVの特長バブルは光沢グラデーションと淡い影で浮かせる - 口コミカードは下と右に濃いグレーの厚みを付ける ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 200px。ボタンは角丸の長方形。 - **写真の切り抜き**: 円形・縦長カプセル形・大きく角を丸めた形で切り抜き、一部は四角のまま斜め背景に重ねる - **セクション境界**: V字の切れ込み、斜めのライン、ゆるい波形を使い分ける - 番号タグは上がアーチ状の縦長枠 - 要点リストは右端が矢印形のティール帯 - 円形写真には淡黄色の太い縁を付ける - マーカーと帯コピーは角丸なしの長方形 ## Components - **アーチ型番号タグ**（`secret-arch-tag`）: 上がアーチ状の縦長枠に欧文ラベルと『秘密+数字』を入れ、下に細い線を垂らす - **矢印帯リスト**（`arrow-list-band`）: 番号と鍵アイコンの右に、右端が矢印形のティール帯を置き白文字で要点を書く - **円形口コミ吹き出し**（`voice-bubble`）: 白い大きな円に星5つ・短い感想・年代を入れ、人物の線画イラストを添える - **口コミカード**（`voice-card`）: 白い四角カードの上部に評価数値・星・年代タブを並べ、右上に円形の似顔絵 - **悩みチェックボックス**（`check-list-box`）: 半透明の濃色ボックスにオレンジのチェックアイコンと悩みを4行並べる - **帯コピー**（`highlight-band-copy`）: 写真の上に、オレンジや白の長方形帯を1行ずつずらして重ねたコピー - **特長バブル**（`feature-bubble`）: 白から黄・水色に光る球体の中に、小さい説明と大きなティール文字を入れて3つ重ねる - **円形バッジ**（`round-badge`）: 見出しの上に置くオレンジやティールの小さな円形バッジ - **注意書き枠**（`notice-box`）: ティールの細線で囲んだ注意事項ボックス ## Do's and Don'ts **Do** - 見出しは明朝、本文はゴシックで書き分ける - 強調語はオレンジ(地がティールなら淡黄)で色だけ変える - セクションの境界にV字や斜めのカットを使う - 人物写真は自然光で、目を閉じたり微笑んだりしたリラックスした表情を選ぶ - 効果に関わる表現には※注釈を添える **Don't** - 原色の赤や青を使わない - 角丸のピルボタンを多用しない - 地を純白一色にしない - 見出しを太いゴシックばかりにしない - 影を強くしすぎない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（使用シーンと商品で印象をつかむ）: 人物の使用写真に縦書き明朝コピー、波形境界の下に手書き導入語と大見出し、特長バブル3つと商品名 2. **機能の導入**（特徴を一言で伝える）: ティール地に商品のクローズアップと白文字コピー 3. **お客様の声(短)**（早めに共感を作る）: オレンジの斜め背景に円形吹き出し2つと縦書き見出し 4. **悩みの提起**（自分ごと化させる）: チャコールの写真背景にチェックリストボックスとイラスト 5. **原因の説明**（悩みの原因を示す）: 大理石風の地に人物写真、ハイライト付き本文、図解とマーカー数値 6. **解決の提示**（商品を答えとして見せる）: 円形バッジ、縦書きコピーと大きな使用写真、商品ロゴ 7. **3つの秘密(一覧)**（特長を要約する）: 矢印帯リストを3本並べる 8. **特長詳細**（根拠を一つずつ示す）: V字境界でティール・生成り・オレンジ筆塗りの地に切り替え、アーチ型タグ、引き出し線の注釈、比較写真 9. **使用シーン**（ながら使いを想像させる）: 筆塗り背景にカプセル形写真3枚と白帯コピーを交互に配置 10. **お客様の声**（信頼を補強する）: オレンジのドット地に口コミカード3枚 11. **使い方**（使い方を具体的に示す）: 人物写真に番号付きのゾーン色分け、2カラムの用語説明 12. **他の部位**（用途の広さを見せる）: 淡黄の波形地に円形写真4枚を2×2で並べる 13. **商品仕様**（スペックを伝える）: 商品写真、項目/値のリスト、注意書き枠 14. **ブランドメッセージ**（世界観で締める）: 青海波柄のティール地にロゴ、商品群写真、中央揃えの明朝文 ## Imagery - 自然光の明るい室内で、肌の柔らかい女性モデルが首や頬に機器を当てるカット - 商品は大理石や白い台の上に置き、花やコスメを添えて静物風に撮る - ベージュとブロンズの製品色が映えるよう背景は白〜生成り - 口コミや悩みには細い線画の女性イラストを使う - 背景にはオレンジ×ティールの油彩風の筆塗りテクスチャーや青海波柄を使う - 図解は淡い色分けの解剖図風イラストで - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC画像はないため推奨として記載。中央に幅480〜600pxのSPレイアウトを置き、左右は生成りのテクスチャー背景にする - PCで広げる場合も見出しは中央揃えのままにする - 使用シーンや他の部位の写真はPCでは横並び3〜4列にしてもよい - 斜め・V字の境界は画面幅いっぱいに伸ばす ## 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-1c1a86dc`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/ibiki-kenkyujyo/az-1204/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。