--- version: alpha name: Iridescent Pastel Editorial Cosmetics LP description: ライム・ピンク・水色が混ざるオーロラ調のグラデーション地に、モデル写真と銀色の細い欧文ロゴを重ねた雑誌タイアップ風のコスメ LP。白い帯に入れた小さな文字のテロップや、円形の商品カード、手書き風の欧文で、きらめきと透明感を出している。 colors: primary: '#F4A4E3' secondary: '#D8EBA8' background: '#DDEEF8' background-alt: '#ECE1E1' surface: '#FFFFFF' tint-1: '#AFC4D0' tint-2: '#C4A4C4' text: '#3A3536' on-primary: '#FFFFFF' accent-1: '#C8CAD0' accent-2: '#F7A9B4' marker: '#F4A9C0' accent-3: '#E04FA8' line: '#222222' primary-accessible: '#D61AAE' tint-2-accessible: '#996399' typography: display: fontFamily: Playfair Display fontSize: 64px fontWeight: 300 lineHeight: 1.0 headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 36px fontWeight: 400 lineHeight: 1.1 letterSpacing: -0.02em headline-md: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 500 lineHeight: 1.3 accent: fontFamily: Cormorant Garamond fontSize: 56px fontWeight: 300 lineHeight: 1.0 body-lg: fontFamily: Zen Kaku Gothic New fontSize: 14px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.15em body-md: fontFamily: Shippori Mincho fontSize: 13px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.12em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.5 rounded: sm: 2px md: 12px lg: 160px 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}' caption-strip: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-lg}' height: 30px product-circle: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 200px big-number: textColor: '{colors.accent-1}' typography: '{typography.accent}' height: 70px arch-point-panel: backgroundColor: '{colors.tint-2}' textColor: '{colors.on-primary}' typography: '{typography.body-lg}' rounded: '{rounded.lg}' height: 500px marker-underline: textColor: '{colors.marker}' typography: '{typography.body-lg}' height: 4px brand-label: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' height: 26px index-banner: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 150px footer-heading: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 40px --- # DESIGN.md — オーロラパステルの雑誌風コスメ LP（Iridescent Pastel Editorial Cosmetics LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: かわいい、やさしい・柔らかい、上品・高級、清潔・爽やか - **キーワード**: オーロラグラデーション・雑誌エディトリアル・グリッター・透明感・パステル・銀箔の欧文 - **地の質感**: ざらついたノイズを乗せた、すりガラス調のパステルグラデーション。ところどころに光のきらめき装飾を置く。 - **形**: 上だけ大きく丸めたアーチ枠、円形カード、角丸の写真枠、不定形の波状の色面 - **温度感**: 春夏らしく、少し冷たくて透き通った明るい色調 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#F4A4E3` | 商品円カードのピンク～ラベンダー系の主役色 | 10% | 画素の実測 | | `secondary` | `#D8EBA8` | ライムカラーのグラデーション地 | 12% | 推定 | | `background` | `#DDEEF8` | 水色系のすりガラス地 | 15% | 画素の実測 | | `background-alt` | `#ECE1E1` | 淡いピンクベージュのグラデーション地 | 10% | 画素の主要色に補正 | | `surface` | `#FFFFFF` | テロップ帯と巻末の白い面 | 12% | 画素の実測 | | `tint-1` | `#AFC4D0` | アーチ枠内のくすんだ青グレー面 | 5% | 画素の主要色に補正 | | `tint-2` | `#C4A4C4` | アーチ枠内のくすんだラベンダー面 | 4% | 画素の実測 | | `text` | `#3A3536` | テロップや本文の濃いグレー文字 | 2% | 推定 | | `on-primary` | `#FFFFFF` | 円カード上の白抜き文字 | 1% | 画素の主要色に補正 | | `accent-1` | `#C8CAD0` | 銀箔調の欧文ロゴと数字 | 2% | 画素の主要色に補正 | | `accent-2` | `#F7A9B4` | SNSシェアアイコンのコーラルピンク | 0% | 推定 | | `marker` | `#F4A9C0` | 強調語句の下に引くピンクの線 | 0% | 推定 | | `accent-3` | `#E04FA8` | ブランド紹介見出しに添える手書き欧文のマゼンタ | 0% | 推定 | | `line` | `#222222` | 巻末見出しの下線と枠線 | 0% | 推定 | | `primary-accessible` | `#D61AAE` | AA を満たす補正値（計算） | | 計算 | | `tint-2-accessible` | `#996399` | AA を満たす補正値（計算） | | 計算 | - 地の色は、ライム・ピンク・水色の 3 色がゆっくり移り変わるグラデーションだけを使い、単色のベタ塗りは避ける - 商品カードは、ピンク→ラベンダー、ライム→ミント、イエロー→ピンクのように 2 色のグラデーションを円に入れる - 文字は白い帯の上なら濃いグレー、グラデーションや写真の上なら白か銀を使う - 強調はピンクの下線か、白い帯で囲むかに限る。原色の赤は使わない - 巻末のクレジット部分は白地に黒文字の簡素な見た目に切り替える - `product-circle` は文字 `#FFFFFF` × 背景 `#F4A4E3` のコントラスト比が 1.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#D61AAE`、4.55:1）を使う。 - `arch-point-panel` は文字 `#FFFFFF` × 背景 `#C4A4C4` のコントラスト比が 2.22:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `tint-2-accessible`（`#996399`、4.57:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューと区切りに置く銀箔調の大きな欧文ロゴ | 欧文セリフ | Playfair Display | 300 | 64px | 1.0 | 0.0em | | `headline-lg` | ポイント見出しの、長体をかけた大きな和文 | ゴシック | Zen Kaku Gothic New | 400 | 36px | 1.1 | -0.02em | | `headline-md` | 円カード内の商品名 | ゴシック | Noto Sans JP | 500 | 17px | 1.3 | 0.0em | | `accent` | 番号や、手書き風の欧文の飾り文字 | 欧文スクリプト | Cormorant Garamond | 300 | 56px | 1.0 | 0.0em | | `body-lg` | 白い帯に入れる、字間を広げたテロップ | ゴシック | Zen Kaku Gothic New | 500 | 14px | 1.6 | 0.15em | | `body-md` | 使い方の説明文や、ブランド紹介の縦書き本文 | 明朝 | Shippori Mincho | 400 | 13px | 2.0 | 0.12em | | `note` | 取扱店の注記や、巻末のクレジット | ゴシック | Noto Sans JP | 400 | 11px | 1.5 | 0.0em | - 欧文の大見出しは細く、文字同士を重ねたり写真に被せたりして雑誌の表紙のように置く - テロップは 1 行ずつ白い帯に入れ、帯を少しずつずらして積む - 本文は字間を広くとり、ゆったり見せる - 和文の見出しは長体ぎみの細いゴシックにする。太すぎるウェイトは使わない - 番号は大きな細い数字で、カードに一部を重ねる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。写真とテキストは左右に交互に置き、互いに重ねる - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - 写真は端まで広げるか、角丸の枠に入れて少し傾けたり重ねたりする - 商品カードは左右交互にずらし、ジグザグに並べる - テロップ帯は左端か右端に寄せて配置する - セクションの間はグラデーションの色の切り替わりで区切り、余白を多めにとる ## Elevation & Depth - 影はほとんど付けない。重なりは半透明と光のにじみで表現する - 商品写真には淡い影を付けて浮かせる - すりガラス調の半透明の面を重ねて奥行きを出す ## Shapes - **角丸**: 小 2px ／ 中 12px ／ 大 160px。ボタンは角丸の長方形。 - **写真の切り抜き**: 角丸の長方形か、上辺を大きく丸めたアーチ形。モデルの切り抜き写真も重ねる - **セクション境界**: 直線ではなく、グラデーションや波状の色面で境目をぼかす - 商品情報は正円のグラデーションカードに入れる - ポイントの紹介は、上辺だけ大きく丸めたアーチ枠に入れる - テロップ帯は角丸のない長方形にする ## Components - **白帯テロップ**（`caption-strip`）: 白い長方形の帯に、字間を広げたコピーを 1 行ずつ入れて積む - **円形商品カード**（`product-circle`）: 2 色グラデーションの正円に、ブランド名・商品名・価格を白文字で入れる。大きな番号を重ねる - **大きな番号**（`big-number`）: 細い欧文の数字で 01〜04 を大きく置き、カードや写真に一部を重ねる - **アーチ型ポイント枠**（`arch-point-panel`）: 半透明のアーチ形の面に、チェックアイコン付きの特長を 3 つ並べる - **ピンク下線**（`marker-underline`）: 強調したい語句の下にピンクの線を引く - **ブランドラベル**（`brand-label`）: 白い小さな帯に字間の広い大文字の欧文を入れ、少し傾けて見出しの上に置く - **関連記事バナー**（`index-banner`）: 横長の写真バナーに、縁取りした大きなタイトルとグラデーションの帯を重ねる - **下線付き巻末見出し**（`footer-heading`）: 巻末の見出しを中央揃えにし、短い黒の下線を付ける ## Do's and Don'ts **Do** - 地の色は必ず、ライム・ピンク・水色のグラデーションに細かいノイズを乗せる - 欧文ロゴは銀か白の細い字にし、写真に重ねる - コピーは短く区切り、白帯テロップで見せる - 光のきらめきや星型の装飾を控えめに散らす **Don't** - 濃い原色やベタ塗りの太いボタンを使わない - 太いゴシックで大きく訴求しない - 写真をきっちりしたグリッドに並べない - 強い影や太い枠線を付けない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（世界観とテーマを一目で伝える）: モデルのアップを全面に置き、縦書きのコピーと銀箔調の大きな欧文、和文のタイトルを重ねる 2. **導入**（新商品の登場を知らせる）: アーチ枠の中に白帯テロップと写真を置き、上に START の表記と点線を添える 3. **商品紹介**（アイテムと価格を見せる）: 円形のグラデーションカードと商品写真をジグザグに置き、大きな番号を重ねる 4. **使い方**（メイクの手順を伝える）: 大きな筆記体の欧文とモデル写真の下に、字間を広げた説明文を置く 5. **イメージ写真**（仕上がりへの憧れを高める）: モデルが寝そべった写真を、画面幅いっぱいに置く 6. **特長ポイント**（商品の魅力を 3 つ伝える）: 長体の大見出しと傾けた商品写真を置き、アーチ枠の中にチェック付きで 3 項目を並べる 7. **締めのメッセージ**（共感を呼ぶ）: 白帯テロップと、写真を重ねたコラージュで見せる 8. **ブランド紹介**（ブランドの信頼を伝える）: ラベル見出しの下に縦書きの本文を置き、白い布の上に置いた商品写真を添える 9. **エンディング**（余韻を残して締める）: 角丸の枠に写真を入れ、大きな欧文で締めくくる 10. **巻末情報**（関連記事・シェア・クレジットを載せる）: 白地に、下線付き見出し・バナー・ピンクのSNSアイコン・テキストのクレジットを並べる ## Imagery - 自然光の入る白っぽいスタジオで撮る。モデルには透け感のあるスパンコールのラベンダー色の服を着せる - クリスタルを手に持ち、光が反射したり虹色の光が入ったりする構図にする - 商品は白い布の上か白背景で、真上や斜めから撮って透明感を出す - モデルの全身を切り抜いて小さく配置し、遊び心を出す - きらめきの星やレンズフレアのような光を加える - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 版の画像がないため推奨として記す。PC では中央に幅 420〜480px 程度の SP 版を置き、左右にグラデーションの地を広げる - PC 版を広げる場合は、写真とテキストを 2 カラムにし、商品カードは横に 2 つずつ並べる - 欧文ロゴは画面幅に合わせて拡大し、写真に重ねる配置は保つ ## 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-d0492995`（元 LP の URL から採番） - **元 LP**: https://ar-mag.jp/articles/-/16668 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 中（4/14 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。