--- version: alpha name: Indigo-to-Orange Gradient Recovery Wear LP description: 黒いウェアの写真を主役にしたLP。紫がかった藍色からオレンジへのグラデーションを帯・見出し・背景に繰り返し使う。六角形バッジ、ジグザグ線、極細の波線、方眼グリッドなどの装飾でスポーティかつ先進的な印象に寄せる。明るいグレーの地とダークグレーの帯を交互に置き、機能の解説を図解でテンポよく見せる。 colors: primary: '#ED8302' secondary: '#7E8BB3' background: '#FFFFFF' surface: '#FAFAFA' dark-section: '#4B4F52' accent-1: '#212E53' text: '#424242' on-dark: '#FEFEFD' text-muted: '#8F93A0' line: '#BDBFC0' accent-2: '#D2582A' tint-1: '#FAF5F0' marker: '#ECDAC9' primary-accessible: '#B06101' secondary-accessible: '#6474A4' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 40px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.12em headline-lg: fontFamily: Montserrat fontSize: 44px fontWeight: 500 lineHeight: 1.1 letterSpacing: 0.12em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 26px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.1em headline-sm: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.08em body-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.06em accent: fontFamily: Montserrat fontSize: 12px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.4em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.1em rounded: sm: 2px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 20px section: 72px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' hex-badge: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' height: 90px gradient-band: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 52px check-list: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 68px point-number: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' height: 80px diagram-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 400px detail-number: textColor: '{colors.secondary}' typography: '{typography.headline-lg}' height: 60px voice-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 340px faq-item: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 106px speech-balloon: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 56px --- # DESIGN.md — 紫紺×オレンジのグラデ機能ウェアLP（Indigo-to-Orange Gradient Recovery Wear LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ファッション・アクセサリー ／ **雰囲気**: クール・先進的、スポーティ、情報量多め・訴求型、信頼・誠実 - **キーワード**: 藍→橙グラデーション・六角形バッジ・極細の波線・方眼グリッド・ワイド字間の欧文見出し・黒ウェア写真 - **地の質感**: ほぼフラット。写真の上にグラデーション帯を重ね、背景には細いワイヤー状の曲線と方眼を薄く敷く - **形**: 六角形・斜めカット・角が直角の帯とカード。角丸は小さく、ピル型は使わない - **温度感**: クールな藍・グレーが基調。オレンジで温かさ（血行・熱）を差す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#ED8302` | ブランドの橙。見出しの強調・帯・バッジに使う | 8% | 画素の実測 | | `secondary` | `#7E8BB3` | 藍紫。グラデーションの起点、口コミ背景 | 6% | 画素の実測 | | `background` | `#FFFFFF` | 基本の明るいグレー地 | 30% | 画素の実測 | | `surface` | `#FAFAFA` | カード・図解パネルの白 | 18% | 画素の実測 | | `dark-section` | `#4B4F52` | FAQ・解説帯のダークグレー | 10% | 画素の実測 | | `accent-1` | `#212E53` | 技術解説帯の濃紺 | 5% | 画素の実測 | | `text` | `#424242` | 見出し・本文の濃いグレー | 3% | 画素の実測 | | `on-dark` | `#FEFEFD` | 暗い面の上の白文字 | 2% | 画素の実測 | | `text-muted` | `#8F93A0` | 注釈・英字サブコピーの灰 | 1% | 画素の主要色に補正 | | `line` | `#BDBFC0` | カードの細枠・区切り線 | 1% | 画素の主要色に補正 | | `accent-2` | `#D2582A` | 技術解説の血行強調の朱色 | 1% | 推定 | | `tint-1` | `#FAF5F0` | 方眼背景の淡いクリーム | 4% | 画素の主要色に補正 | | `marker` | `#ECDAC9` | 本文強調の淡橙マーカー | 0% | 画素の主要色に補正 | | `primary-accessible` | `#B06101` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#6474A4` | AA を満たす補正値（計算） | | 計算 | - 地は明るいグレーと白にする。区切りにダークグレーや濃紺の帯をはさむ - 強調は藍紫→橙の横グラデーションで統一する。英字見出しにもグラデを文字色として使う - オレンジは機能（熱・血行）と強調語に限る。広い面に使うのはグラデ帯だけにする - 暗い面では文字を白、強調語を橙にする - 比較表は一般品をダークグレー、自社品を橙で塗り分ける - `hex-badge` は文字 `#FEFEFD` × 背景 `#ED8302` のコントラスト比が 2.65:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#B06101`、4.57:1）を使う。 - `gradient-band` は文字 `#FEFEFD` × 背景 `#7E8BB3` のコントラスト比が 3.34:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#6474A4`、4.55:1）を使う。 - `point-number` は文字 `#FEFEFD` × 背景 `#ED8302` のコントラスト比が 2.65:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#B06101`、4.57:1）を使う。 - `speech-balloon` は文字 `#FEFEFD` × 背景 `#7E8BB3` のコントラスト比が 3.34:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#6474A4`、4.55:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのキャッチ・大見出し | ゴシック | Zen Kaku Gothic New | 700 | 40px | 1.4 | 0.12em | | `headline-lg` | 英字セクション見出し（グラデ文字） | 欧文サンセリフ | Montserrat | 500 | 44px | 1.1 | 0.12em | | `headline-md` | 和文の小見出し・帯の見出し | ゴシック | Zen Kaku Gothic New | 700 | 26px | 1.5 | 0.1em | | `headline-sm` | カードタイトル・悩み項目 | ゴシック | Noto Sans JP | 500 | 20px | 1.5 | 0.08em | | `body-md` | 本文・口コミ | ゴシック | Noto Sans JP | 400 | 15px | 1.9 | 0.06em | | `accent` | 字間を大きく取った英字サブコピー | 欧文サンセリフ | Montserrat | 400 | 12px | 1.4 | 0.4em | | `note` | 注釈・届出表記 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.02em | | `label-button` | バッジ・比較ラベル | ゴシック | Noto Sans JP | 700 | 16px | 1.4 | 0.1em | - 和文見出しは字間を0.1em前後まで広げ、静かで端正に見せる - 英字見出しは幾何学的なサンセリフを大きく置き、藍→橙のグラデ文字にする - 見出しの中の強調語だけを橙にするか、サイズを上げる - 縦書きの大見出しを写真の横に白帯付きで組んでもよい - 英字の補助コピーは小さく、字間を極端に広げる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。ディテールは写真と文の2分割、パッケージは横スライダー - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算） - 写真は画面幅いっぱいに置き、見出し帯を重ねる - カードと表は左右に約6%の余白を取る - 番号付きのディテールは写真と文を左右交互に並べる - セクションの終わりに▼を3つ縦に並べて流れを示す - 背景に方眼グリッドを敷くゾーンをつくる ## Elevation & Depth - カード・図解パネルには薄いドロップシャドウ（0 4px 12px rgba(0,0,0,.15)）をつける - 帯・バッジは影なしのフラットにする - 写真の上の見出し文字に軽いテキストシャドウを付けてもよい ## Shapes - **角丸**: 小 2px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。 - **写真の切り抜き**: 矩形の写真を全幅または横に並べる。商品は切り抜いて置く - **セクション境界**: 下向きの山形（V字）カットと直線を併用する - 効能バッジやPOINT番号は六角形にする - 見出しの上下にL字のコーナー線を添える - ジグザグ（XXXX状）の線を装飾に使う - 口コミカードは角丸8px＋細い色枠にし、上辺にタブ型ラベルを付ける ## Components - **六角形効能バッジ**（`hex-badge`）: 橙グラデの六角形に白文字2行。3つを横に並べる - **グラデ見出し帯**（`gradient-band`）: 藍紫→橙の横長帯に白い大きな文字を置き、端にジグザグを添える - **悩みチェックリスト**（`check-list`）: 半透明の白い帯にチェックアイコンと悩みを並べ、強調語を太字にする - **POINT番号バッジ**（`point-number`）: 六角形の中に小さい英字POINTと大きな数字を入れる - **図解パネル**（`diagram-card`）: 白いパネルに丸数字・図・引き出し線のラベルを置き、影を付ける - **ディテール番号**（`detail-number`）: グラデの細い大きな数字と縦線の横に、2行の小見出しを置く - **口コミカード**（`voice-card`）: 白カードの上辺にグレーのタブ型ラベルを付け、人物イラスト・タイトル・属性・本文を入れる - **FAQアコーディオン**（`faq-item`）: 暗い地に明るいグレーの箱を置き、質問文と橙の＋アイコンを入れる - **吹き出しラベル**（`speech-balloon`）: グラデ地の四角い吹き出しで短い一言を写真に重ねる ## Do's and Don'ts **Do** - 藍紫→橙のグラデーションを帯・英字見出し・背景に繰り返し使う - 六角形のモチーフをバッジ・番号・背景の透かしで統一する - 機能説明は図解パネルにまとめ、ビフォー/アフターを矢印でつなぐ - 黒いウェアが映えるよう、背景は明るいグレーか淡いグラデにする - 背景に極細の波線や方眼を薄く敷いて先進的に見せる **Don't** - ピル型ボタンや大きな角丸を使わない - 原色の赤・緑を足さない - オレンジの単色で広い面を塗りつぶしすぎない - 太すぎる丸ゴシックや手書き文字を使わない - 装飾線を濃くして本文の読みやすさを損なわない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（着用イメージと効能を一目で伝える）: 人物写真を全幅に置き、縦書きのサブコピー、大きな白い見出し、六角形バッジを3つ並べ、商品の切り抜きと実績バッジを続ける 2. **悩みの提起**（悩みに共感させる）: 暗い写真の上に大きく薄い英字を置き、半透明のチェック帯を4つ並べ、V字カットで次へつなぐ 3. **ブランド・コンセプト**（日常着として使えることを示す）: 街を歩く写真に縦書きの白帯見出しを重ね、グラデ帯の大見出しで締める 4. **商品紹介**（商品の全体像を見せる）: 商品を平置きした写真に商品名を重ね、ライフスタイル写真をずらして配置する 5. **特長1：機能素材**（技術的な根拠を示す）: POINT六角形、繊維のアップ写真、濃紺の帯、図解パネル、方眼地の効能バッジの順に並べる 6. **効果のビジュアル**（効果を印象づける）: 橙の全面背景にポリゴン調の人体イラストを置き、縦書きの大見出しを添える 7. **特長2：デザイン・着心地**（普段着としての良さを伝える）: 大きな縦の英字グラデ見出しと写真を組み、グラデ帯で着心地を見せる 8. **速乾比較**（他製品との差を見せる）: タイマー付きの2分割写真に、グレーと橙のラベルを付けて比べる 9. **ディテール**（細部のこだわりを列挙する）: 方眼地に番号01〜04を置き、写真と文を左右交互に並べる 10. **洗濯・耐久性**（手入れの不安を消す）: 水滴の写真、吹き出し、洗濯表示アイコン、縦書きの帯見出しを組み合わせる 11. **コーディネート**（着こなしの例を見せる）: 枠線付きの写真スライダーとScroll矢印を置く 12. **お客様の声**（信頼を補う）: 藍→橙グラデの地に、タブ付きの白い口コミカードを3枚並べる 13. **よくある質問**（疑問を解消する）: ダークグレーの地にグレーの箱の質問アコーディオンを並べる 14. **パッケージ・サイズ・商品情報**（購入前の情報をまとめる）: グラデの英字見出し、ギフト用のグラデ帯、サイズ図のスライダー、ダークのサイズ表、商品写真のギャラリーと仕様を並べる ## Imagery - 黒・濃紺のウェアを着た30〜40代の男女を、自然光の街並みや室内で撮る - 商品は平置きやハンガー掛け、切り抜きで見せる - 素材はマクロで撮り、暖色の光を当てる - 装飾には極細のワイヤー状の波線、方眼、ジグザグ線、大きく薄いロゴの透かしを使う - 図解はフラットで、熱は赤橙のぼかし、作用は矢印で表す - 人物イラストは藍紫と橙を使ったフラットなものにする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央に幅 750px 前後のカラムを置き、両側に淡いグレーかグラデの背景を敷く - 全幅の写真と帯はカラム幅内で全幅に保つ - ディテールの2分割とスライダーはそのまま維持する - 英字見出しは最大64px程度まで拡大する ## 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-81afdc5e`（元 LP の URL から採番） - **元 LP**: https://www.amepla.jp/f/recovery-core-set-up_secret-line/sp=1 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 中（8/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。