--- version: alpha name: Mode Editorial Color Contact Lens LP description: 白地に黒文字、ワンポイントの深紅を差すモード誌風のカラコン LP。カラーごとに背景色を変えたファッション写真を全幅で並べ、傾けた写真コラージュと帯状の英字ラベルで誌面のような動きを出す。 colors: background: '#FFFFFF' primary: '#AA0027' on-primary: '#FFFFFF' text: '#060609' accent-1: '#8E0627' dark-section: '#010101' background-alt: '#F2F2F2' accent-2: '#620510' accent-3: '#C6AA7A' secondary: '#1A3774' tint-1: '#E2A3B3' text-muted: '#6D6D6D' tint-1-accessible: '#C64C6B' typography: display: fontFamily: Montserrat fontSize: 46px fontWeight: 600 lineHeight: 1.1 letterSpacing: 0.2em headline-lg: fontFamily: Jost fontSize: 36px fontWeight: 500 lineHeight: 1.2 headline-md: fontFamily: Montserrat fontSize: 22px fontWeight: 800 lineHeight: 1.2 headline-sm: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 900 lineHeight: 1.5 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Jost fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.05em label-button: fontFamily: Montserrat fontSize: 16px fontWeight: 700 lineHeight: 1.2 rounded: sm: 0px md: 0px lg: 0px full: 999px spacing: unit: 8px card: 24px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' color-title: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 50px spec-bar: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-primary}' typography: '{typography.note}' height: 20px tilted-label: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' height: 24px feature-badge: backgroundColor: '{colors.tint-1}' textColor: '{colors.on-primary}' typography: '{typography.note}' height: 16px eye-compare-tile: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' height: 200px lens-circle: backgroundColor: '{colors.background}' textColor: '{colors.text-muted}' typography: '{typography.note}' rounded: '{rounded.full}' height: 180px feature-list: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.body-md}' height: 700px logo-plate: textColor: '{colors.text}' typography: '{typography.accent}' height: 64px --- # DESIGN.md — 白地×深紅のモード系カラコン LP（Mode Editorial Color Contact Lens LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: クール・先進的、力強い・インパクト、上品・高級、シンプル・ミニマル - **キーワード**: モード誌・エディトリアル・全幅写真・深紅アクセント・コラージュ・カラー別背景 - **地の質感**: フラットな白地とスタジオ撮影写真。グラデーションや影はほぼ使わず、写真の質感で見せる - **形**: 角丸なしの四角が基本。レンズ画像だけが正円。写真を数度傾けて重ねる - **温度感**: 白と黒はクールで、カラー別背景（深紅・キャメル・ロイヤルブルー）が温度を切り替える ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#FFFFFF` | ページの地色 | 25% | 画素の実測 | | `primary` | `#AA0027` | ブランドの深紅（機能セクションの面・ラベル） | 6% | 画素の実測 | | `on-primary` | `#FFFFFF` | 深紅の面の上の文字 | 1% | 画素の主要色に補正 | | `text` | `#060609` | 見出しと本文の黒 | 3% | 画素の主要色に補正 | | `accent-1` | `#8E0627` | カラー名頭文字・英字コピーの赤 | 0% | 画素の実測 | | `dark-section` | `#010101` | スペック帯・英字ラベル帯の黒 | 4% | 画素の実測 | | `background-alt` | `#F2F2F2` | 写真スタジオのライトグレー | 7% | 画素の実測 | | `accent-2` | `#620510` | カラー別背景（ワインレッド） | 7% | 画素の実測 | | `accent-3` | `#C6AA7A` | カラー別背景（キャメル） | 7% | 画素の実測 | | `secondary` | `#1A3774` | カラー別背景（ロイヤルブルー） | 6% | 画素の実測 | | `tint-1` | `#E2A3B3` | 機能バッジのくすみピンク | 0% | 画素の実測 | | `text-muted` | `#6D6D6D` | 注釈・スペック区切りのグレー | 0% | 画素の実測 | | `tint-1-accessible` | `#C64C6B` | AA を満たす補正値（計算） | | 計算 | - 地は白、文字は黒が基本。赤は小面積の差し色に限る - 英字カラー名は頭文字 1 字だけを赤にする - カラー別ブロックは、そのカラーを象徴する単色の背景で撮った写真に切り替える - 機能説明は深紅のベタ面に白文字でまとめ、ページ後半の締めにする - 黒い帯は細く、スペック表示や英字ラベルに使う - ピンクは機能バッジだけに使う - `feature-badge` は文字 `#FFFFFF` × 背景 `#E2A3B3` のコントラスト比が 2.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `tint-1-accessible`（`#C64C6B`、4.52:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ブランドロゴ風の英字タイトル | 欧文サンセリフ | Montserrat | 600 | 46px | 1.1 | 0.2em | | `headline-lg` | イタリック英字のキャッチ（新色告知・締めの一言） | 欧文サンセリフ | Jost | 500 | 36px | 1.2 | 0.0em | | `headline-md` | カラー名の英字見出し | 欧文サンセリフ | Montserrat | 800 | 22px | 1.2 | 0.0em | | `headline-sm` | 和文の見出し・機能名 | ゴシック | Noto Sans JP | 900 | 22px | 1.5 | 0.05em | | `body-md` | 説明本文（中央揃え） | ゴシック | Noto Sans JP | 500 | 13px | 1.8 | 0.03em | | `note` | 注釈・カナ読み・スペック | ゴシック | Noto Sans JP | 400 | 9px | 1.6 | 0.0em | | `accent` | 細身で字間を広くとった英字のサブコピー・カラー一覧 | 欧文サンセリフ | Jost | 400 | 16px | 1.5 | 0.05em | | `label-button` | 斜めに貼る英字ラベル帯 | 欧文サンセリフ | Montserrat | 700 | 16px | 1.2 | 0.0em | - 英字を主役に、和文は脇役として小さめに添える - カラー名は英字の太字見出しの下に小さなカナ読みを置く - 和文本文は中央揃えで、2〜3 行の短い文にする - 英字キャッチはイタリックにし、単語の頭文字を赤くする - 写真の上のコピーは白文字で右寄せにする - 数値スペックは数字を大きく、単位を小さく組む - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。写真は全幅 - **本文ブロックの幅**: 画面幅の約 85% - **余白**: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算） - カラーごとに見出し→レンズ画像→スペック→写真群の順を繰り返す - 写真は余白なしで全幅に積む - コラージュは写真を 3〜5 度傾けて重ね、端をはみ出させる - 白地のテキストブロックは上下に 80px 前後の広い余白をとる - 目元のアップは横長の全幅にトリミングする ## Elevation & Depth - 影はほぼ使わない - 傾けた写真はわずかな影か白縁で重なりを見せる - 奥行きはレイヤーを重ねて表現する ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。 - **写真の切り抜き**: 人物は全幅の四角。レンズは正円の切り抜き。コラージュ写真は傾けた四角 - **セクション境界**: 直線で切り替える。背景色の面がそのまま接する - 角丸は使わない - レンズのサムネイルは灰色の縁取りをつけた正円 - ラベル帯は細長い長方形を斜めに置く ## Components - **カラー名見出し**（`color-title`）: 英字の太字で頭文字だけ赤。下にカナ読みを小さく添える - **スペック帯**（`spec-bar`）: 黒い細帯に白文字で、仕様を縦線で区切って並べる - **斜め英字ラベル**（`tilted-label`）: 深紅や黒の帯に白い英字を載せ、写真コラージュに斜めに貼る - **機能バッジ**（`feature-badge`）: ピンクの小さな四角に白文字。上に小さな英字と矢印をのせる - **目元比較タイル**（`eye-compare-tile`）: 目元アップを 2 列に並べ、下の黒帯にレンズの丸サムネイルとカラー名を置く - **レンズ画像**（`lens-circle`）: 白地の中央に正円のレンズを大きく置き、下にスペックを添える - **機能リスト**（`feature-list`）: 深紅の面に白い線画アイコンを 4 つ並べ、下に番号付きの英字と和文の説明を置く - **ロゴプレート**（`logo-plate`）: 深紅の面の上に白い長方形を置き、黒い英字ロゴを入れる ## Do's and Don'ts **Do** - 写真を主役にし、文字は最小限にする - カラーごとに背景色を変えて世界観を切り替える - 赤は頭文字やラベルなど小さな面に限る - 目元のアップでレンズの発色を見せる - 傾けたコラージュで誌面のような動きを出す **Don't** - 角丸のボタンやパステル調のかわいい装飾を使わない - 和文を大きく詰め込まない - 赤を広い面に多用しない（機能セクションだけにする） - ドロップシャドウやグラデーションのボタンを使わない - イラストやアイコンを多用しない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（ブランドの世界観とラインナップを一目で伝える）: 顔のアップを全幅に置き、白い英字ロゴ、レンズの丸 4 つ、黒いスペック帯を重ねる 2. **キャッチコピー**（仕上がりのイメージを宣言する）: 白地に太い和文 2 行。冒頭の語を深紅のマーカーで囲む 3. **新色告知**（展開するカラーを紹介する）: 左右に小さな英字、イタリックの大見出し、大きなレンズ画像とカラー名一覧 4. **目元比較**（カラーごとの発色を比べてもらう）: 2 列の目元タイルと黒帯を 2 段。間に短い説明文 5. **カラー別紹介（繰り返し）**（各カラーの個性を見せる）: 背景色の違う全身写真、写真の上のコピー、目元アップ、カラー名、レンズ、スペック、コラージュの順に並べる 6. **構造の説明**（レンズが回らない設計を説明する）: ピンクのバッジと対象カラー、大きなレンズ図、太字見出しと中央揃えの本文、注釈 7. **機能一覧**（素材と快適さを伝える）: 深紅のベタ面にロゴプレート、白い線画アイコン 4 つ、番号付きリスト 8. **ブランドメッセージ**（世界観で締める）: 頭文字が赤のイタリック英字キャッチ、中央揃えの和文、白いパッケージの写真 ## Imagery - スタジオで撮った単色背景のファッションポートレート。モデルは強い目線でモードなメイク - 目元は極端にアップにして横長に切り、まつ毛と虹彩の模様を見せる - レンズは白地に正円の切り抜きで、ドットの模様がわかるくらい高精細に - カラーのイメージに合わせて背景と衣装をそろえる（赤×スポーティ、キャメル×レオパード、青×メタリック） - 傾けた顔アップの写真に英字ラベル帯を重ねたコラージュ - パッケージは白い箱を白背景で正面から撮り、床に映り込みを入れる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央に SP 幅（約 750px）のカラムを置き、左右の余白は白かライトグレーにする - PC では写真を 2 枚横に並べたり、コラージュを横長に広げたりしてもよい - 目元比較は PC で 4 列に並べられる - 見出しの文字サイズは PC で 1.3〜1.5 倍にする ## 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-320e5c2a`（元 LP の URL から採番） - **元 LP**: https://hotellovers.jp/hlcateb2lxr0001 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（10/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。