--- version: alpha name: Monochrome Crimson Editorial Cosmetics LP description: ページ全体を鮮やかな深紅一色で塗り、赤背景で撮った人物写真と製品写真を余白多めに散らしたエディトリアル型のブランド LP。文字は白の細い明朝と黒の細い欧文サンセリフに絞る。縦書きの英字ラベルと下線テキストリンクで、雑誌のようなモードな印象にまとめる。 colors: primary: '#C70015' background: '#C60014' background-alt: '#B52524' dark-section: '#920006' secondary: '#D40921' on-primary: '#FFFFFF' text: '#130000' text-muted: '#73342F' line: '#550001' cta: '#1E0E0E' on-cta: '#C70015' accent-1: '#DBBBAB' background-accessible: '#EF0018' primary-accessible: '#FF97A2' background-alt-accessible: '#D83D3C' typography: display: fontFamily: Josefin Sans fontSize: 34px fontWeight: 400 lineHeight: 1.0 letterSpacing: -0.01em headline-lg: fontFamily: Shippori Mincho fontSize: 20px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.15em headline-md: fontFamily: Josefin Sans fontSize: 22px fontWeight: 300 lineHeight: 1.0 letterSpacing: 0.02em headline-sm: fontFamily: Josefin Sans fontSize: 15px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0.05em body-md: fontFamily: Shippori Mincho fontSize: 13px fontWeight: 400 lineHeight: 2.4 letterSpacing: 0.12em note: fontFamily: Noto Serif JP fontSize: 11px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.08em label-button: fontFamily: Josefin Sans fontSize: 12px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.12em rounded: sm: 0px md: 0px lg: 0px full: 999px spacing: unit: 8px card: 0px section: 100px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' link-underline: textColor: '{colors.cta}' typography: '{typography.label-button}' height: 24px vertical-label: textColor: '{colors.text}' typography: '{typography.headline-md}' height: 200px overlay-display: textColor: '{colors.text}' typography: '{typography.display}' height: 70px photo-text-row: backgroundColor: '{colors.primary}' textColor: '{colors.text-muted}' typography: '{typography.note}' height: 220px concept-copy: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.body-md}' height: 320px section-heading-line: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 36px banner-overlay: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-primary}' typography: '{typography.body-md}' height: 110px --- # DESIGN.md — 深紅一色のモード系オーガニックコスメ LP（Monochrome Crimson Editorial Cosmetics LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: 上品・高級、力強い・インパクト、シンプル・ミニマル、クール・先進的 - **キーワード**: 深紅のワントーン・エディトリアル・非対称の写真配置・縦書き英字・細い明朝・余白の多さ - **地の質感**: フラットな赤い面に、赤背景で撮った写真をなじませる。グラデーションや影は使わない。 - **形**: 角丸なしの長方形写真だけで構成する。線は細い下線と区切り線に限る。 - **温度感**: 情熱的で温かい赤。ただし、文字が細く余白も多いので冷静で知的にも見える。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#C70015` | ページ全体の深紅の地 | 60% | 画素の実測 | | `background` | `#C60014` | メインの背景（地色と共通） | | 画素の実測 | | `background-alt` | `#B52524` | フッター寄りの定期便・店舗エリアの少しくすんだ赤 | 7% | 画素の実測 | | `dark-section` | `#920006` | ファーストビュー周辺の暗い赤 | 4% | 画素の実測 | | `secondary` | `#D40921` | 製品写真の台座となる明るい赤 | 3% | 画素の主要色に補正 | | `on-primary` | `#FFFFFF` | コピー・本文の白文字 | 1% | 推定 | | `text` | `#130000` | 大見出しや縦書き英字ラベルの黒に近い色 | 2% | 画素の実測 | | `text-muted` | `#73342F` | 説明文の暗い赤茶（赤地になじませる） | 1% | 画素の主要色に補正 | | `line` | `#550001` | セクション見出し下の細い区切り線 | 0% | 画素の主要色に補正 | | `cta` | `#1E0E0E` | 下線テキストリンクの文字 | 0% | 画素の主要色に補正 | | `on-cta` | `#C70015` | リンクの下地（赤地のまま） | | 画素の実測 | | `accent-1` | `#DBBBAB` | 肌・写真のハイライトとなるベージュ | 5% | 画素の実測 | | `background-accessible` | `#EF0018` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#FF97A2` | AA を満たす補正値（計算） | | 計算 | | `background-alt-accessible` | `#D83D3C` | AA を満たす補正値（計算） | | 計算 | - 地はほぼすべて深紅 #C70016 一色にする。白やグレーのセクションは作らない。 - セクションの切り替えは、明度の違う赤（暗い赤・くすんだ赤）で表す。 - 写真も赤背景・赤い衣装で撮り、地色とつなげる。 - 文字は、白（コピー）と黒に近い色（英字見出し・リンク）の 2 系統だけにする。 - 長い本文は暗い赤茶にして、赤地に沈むように控えめに置く。 - 強調色やボタンの塗りは使わない。CTA は下線付きの文字リンクにする。 - `page` は文字 `#130000` × 背景 `#C60014` のコントラスト比が 3.32:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `background-accessible`（`#EF0018`、4.56:1）を使う。 - `photo-text-row` は文字 `#73342F` × 背景 `#C70015` のコントラスト比が 1.52:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#FF97A2`、4.51:1）を使う。 - `section-heading-line` は文字 `#130000` × 背景 `#B52524` のコントラスト比が 3.17:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `background-alt-accessible`（`#D83D3C`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 写真に重ねる大型の英字見出し | 欧文サンセリフ | Josefin Sans | 400 | 34px | 1.0 | -0.01em | | `headline-lg` | コンセプトのキャッチコピー | 明朝 | Shippori Mincho | 400 | 20px | 1.6 | 0.15em | | `headline-md` | 縦書きの英字セクションラベル | 欧文サンセリフ | Josefin Sans | 300 | 22px | 1.0 | 0.02em | | `headline-sm` | 下部セクションの英字小見出し | 欧文サンセリフ | Josefin Sans | 400 | 15px | 1.3 | 0.05em | | `body-md` | 中央揃えのコンセプト文 | 明朝 | Shippori Mincho | 400 | 13px | 2.4 | 0.12em | | `note` | 写真横の説明文・キャプション | 明朝 | Noto Serif JP | 400 | 11px | 2.0 | 0.08em | | `label-button` | 下線付きテキストリンク | 欧文サンセリフ | Josefin Sans | 400 | 12px | 1.4 | 0.12em | - 和文は細い明朝だけで組み、太字は使わない。 - 英字は細いジオメトリックサンセリフで、すべて大文字にする。 - 英字のセクションラベルは 90 度回転させ、写真の左脇に縦に置く。 - コンセプト文は短く改行し、中央揃えで行間を 2.4 前後にたっぷり取る。 - 字間は広めの 0.1em 前後にする。 - 大きな英字見出しは写真の下端に重ね、2 行で詰めて組む。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。写真は左右にずらして非対称に配置する。 - **本文ブロックの幅**: 画面幅の約 80% - **余白**: セクション間 100px、基本単位 8px、カード内 0px（375px 幅換算） - 写真は左右交互にずらし、上下も重ならない程度に段差をつける。 - セクション間は 100px 以上空けて、余白で間を作る。 - 縦書きラベル・写真・説明文を横並びの 1 組として繰り返す。 - コンセプト文は画面中央に置き、幅を狭くする。 - 下部の小見出しは左揃えにし、下に全幅の細線を引く。 ## Elevation & Depth - 影は一切使わない。 - 奥行きは、写真の中の台座や光だけで表す。 ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。 - **写真の切り抜き**: 角丸なしの縦長長方形（およそ 3:4）。ファーストビューは正方形 2 枚を並べる。 - **セクション境界**: 直線で区切り、背景の赤の明度を変えて切り替える。 - すべての写真・バナーを直角にする。 - 円形・斜めの切り抜きや波形の区切りは使わない。 - 線は 1px の細線に限る。 ## Components - **下線テキストリンク**（`link-underline`）: 大文字英字に細い下線を引いたリンク。中央に置き、主な遷移先に使う。 - **縦書き英字ラベル**（`vertical-label`）: 写真の左脇に、90 度回転させた英字のセクション名を置く。 - **写真に重ねる大英字**（`overlay-display`）: 製品写真の左下に、黒の大型英字を 2 行で重ねる。 - **写真＋説明文ユニット**（`photo-text-row`）: 縦長写真の右側に、小さな明朝の説明文を数行置く。 - **中央コンセプトブロック**（`concept-copy`）: 白の明朝キャッチと、短く改行した本文を中央に縦に並べる。 - **下線付き英字小見出し**（`section-heading-line`）: 左揃えの英字小見出しの下に、全幅の細い区切り線を引く。 - **暗めの写真バナー**（`banner-overlay`）: 暗い赤の製品写真の右側に、白の短い説明文を重ねたリンクバナー。 ## Do's and Don'ts **Do** - 背景は深紅一色を貫き、写真も赤背景・赤衣装で統一する。 - 写真は大小をつけ、左右にずらして雑誌のように配置する。 - 文字は細く小さく保ち、余白を大きく取る。 - CTA は下線テキストリンクにして控えめに置く。 - 英字ラベルを縦書きにして、モードな印象のアクセントにする。 **Don't** - 白やグレーの背景セクションを挟まない。 - 塗りつぶしのボタンやピル型のボタンを使わない。 - 太いゴシック体、価格訴求のバッジ、吹き出しを使わない。 - 角丸・影・グラデーションの装飾を加えない。 - 赤以外の強い色（青・緑など）を入れない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（ブランドの世界観を一目で伝える。）: 人物写真と製品写真を 2 分割で並べ、境目に白い欧文ロゴを重ねる。 2. **コンセプト**（ブランドの思想と起用人物を伝える。）: 白の明朝キャッチと短く改行した本文を中央揃えにし、余白を多く取る。 3. **人物ビジュアル**（情緒的なイメージを強める。）: 縦長の人物写真 2 枚を左右に段差をつけて配置する。 4. **セレクトキット紹介**（おすすめ商品セットへ誘導する。）: 赤い台座の製品写真を 2 分割で並べ、黒の大英字を重ね、下に下線リンクを置く。 5. **ブランドストーリー**（原料・哲学を説明する。）: 縦書き英字ラベル・縦長写真・小さな説明文の組を 3 つ縦に並べる。 6. **ギャラリー**（人物と製品のビジュアルで印象を残す。）: 大きさの違う写真を千鳥状に散らし、小さなキャプションを添える。 7. **動画**（人物のメッセージを動画で届ける。）: 縦書きラベルの横に縦長の動画を置き、白の縦書きコピーを重ねる。 8. **全商品への誘導**（商品一覧へ送る。）: 中央に下線テキストリンクを 1 つだけ置く。 9. **定期便**（継続購入を案内する。）: くすんだ赤地に、英字小見出し・細線・写真バナーを並べる。 10. **店舗リスト**（販売店へ誘導する。）: 中央に下線テキストリンクを置く。 ## Imagery - 人物は赤い背景・赤い服で撮り、肌のツヤを強調したビューティーポートレートにする。 - 手を顔に添える、片目を隠すなど、モードなポーズをとらせる。 - 製品は赤い台座の上で撮り、ボトルを積み重ねたりスポットライトを当てたりして立体的に見せる。 - オイルの雫や泡のマクロ写真を、質感を伝えるカットとして使う。 - 写真の色調は赤の彩度を高く、影は深くする。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央約 70% 幅に写真を散らして配置している。SP では写真を 80〜90% 幅にし、左右にずらす。 - 縦書きラベルと写真＋説明文の横並びは、SP では「ラベル＋写真」の下に説明文を置く。 - ファーストビューの 2 分割は、SP では上下に積む。 - 大英字は SP で 34px 程度に縮め、2 行を保つ。 - セクション間の余白は SP でも 80〜100px を確保する。 ## 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-35a5f85d`（元 LP の URL から採番） - **元 LP**: https://www.cosmekitchen-webstore.jp/Page/Lp/240124CK_MEGUMI/?plan=CK240124TR_MEGUMI - **解析に使った画像**: PC（PC版） - **確度**: 色 高（7/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。