--- version: alpha name: Ocean Blue Eco Campaign Cosmetics LP description: 濃いロイヤルブルーと、海や空を思わせる水色グラデーションを交互に重ねた、化粧品ブランドの環境保護キャンペーンLP。明朝の大見出し、細い青線の吹き出し枠、斜線で挟む強調コピー、カウンター表示で、透明感と信頼感を両立させている。 colors: primary: '#00249C' background: '#FFFFFF' background-alt: '#CCEAF4' secondary: '#68C2E4' surface: '#F6FAFD' text: '#1A1A1A' text-body: '#333333' accent-1: '#F5B565' cta: '#02249C' on-cta: '#EFF9FD' tint-1: '#EDEDED' dark-section: '#010101' accent-2: '#F2A3A8' line: '#002A9D' typography: display: fontFamily: Josefin Sans fontSize: 36px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Shippori Mincho fontSize: 34px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.08em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 26px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.08em headline-sm: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.08em body-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.1em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.05em accent: fontFamily: Playfair Display fontSize: 52px fontWeight: 400 lineHeight: 1.1 label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em rounded: sm: 8px md: 14px lg: 24px full: 999px spacing: unit: 8px card: 24px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 42px button-outline-white: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 46px button-dark: backgroundColor: '{colors.dark-section}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 68px button-product: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.full}' height: 24px speech-bubble-line: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 80px slash-headline: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 110px counter-box: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.accent}' rounded: '{rounded.md}' height: 200px circle-badge: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 100px tag-pill: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.note}' rounded: '{rounded.full}' height: 26px label-pill-badge: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 40px --- # DESIGN.md — 深海ブルー×水色グラデの環境キャンペーン化粧品LP（Ocean Blue Eco Campaign Cosmetics LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: 清潔・爽やか、上品・高級、信頼・誠実、やさしい・柔らかい - **キーワード**: 海・透明感・ロイヤルブルー・サンゴ・社会貢献・グラデーション - **地の質感**: 水中光や空の柔らかいグラデーション写真に、半透明の白パネルを重ねたガラス調 - **形**: 波形のセクション境界、角丸カード、ピル型ボタン、しっぽ付き吹き出し - **温度感**: 涼しげな寒色。ところどころにサンゴのピンクとオレンジ ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#00249C` | ブランドの濃いロイヤルブルー。帯セクション・見出し文字に使う | 14% | 画素の実測 | | `background` | `#FFFFFF` | 商品一覧の白地 | 13% | 画素の実測 | | `background-alt` | `#CCEAF4` | 淡い水色の地 | 10% | 画素の実測 | | `secondary` | `#68C2E4` | 海の中くらいの水色 | 7% | 画素の主要色に補正 | | `surface` | `#F6FAFD` | 半透明の白パネル・カウンター枠 | 6% | 画素の実測 | | `text` | `#1A1A1A` | 大見出しの墨色 | 1% | 推定 | | `text-body` | `#333333` | 本文の濃いグレー | 2% | 推定 | | `accent-1` | `#F5B565` | 青帯の上で強調する文字のオレンジ | 0% | 推定 | | `cta` | `#02249C` | 主CTAボタンの塗り | 1% | 画素の実測 | | `on-cta` | `#EFF9FD` | CTAボタンの文字 | 0% | 画素の実測 | | `tint-1` | `#EDEDED` | 商品リンクボタンの薄いグレー | 1% | 画素の実測 | | `dark-section` | `#010101` | 外部キャンペーンへの黒ボタン | 1% | 画素の実測 | | `accent-2` | `#F2A3A8` | サンゴのピンク（装飾・アイコン） | 0% | 推定 | | `line` | `#002A9D` | 吹き出し・枠・点線の細い青線 | 0% | 画素の主要色に補正 | - 地は「水色グラデ写真」と「ロイヤルブルーの帯」を交互に置き、白地は商品一覧だけに使う - 見出し・枠線・リンクは同じロイヤルブルーでそろえる - 青帯の上では白文字にし、最も大事な語だけオレンジにする - ピンク・オレンジはサンゴやギフトのアイコンに限って少しだけ使う - 黒の塗りは外部キャンペーンのボタン1か所だけにする - 白パネルは不透明度80〜90%にして、背景の海がうっすら透けるようにする ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのロゴ風英字・キャンペーン名 | 欧文サンセリフ | Josefin Sans | 400 | 36px | 1.2 | 0.02em | | `headline-lg` | 斜線で挟む強調コピー・セクション大見出し | 明朝 | Shippori Mincho | 500 | 34px | 1.5 | 0.08em | | `headline-md` | 青文字の太い企画名 | ゴシック | Zen Kaku Gothic New | 700 | 26px | 1.5 | 0.08em | | `headline-sm` | 期間・小見出し・カード内見出し | ゴシック | Noto Sans JP | 700 | 17px | 1.6 | 0.08em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 15px | 2.0 | 0.1em | | `note` | 注釈・商品容量 | ゴシック | Noto Sans JP | 400 | 11px | 1.7 | 0.05em | | `accent` | 日付や数値カウンターの大きな数字 | 欧文セリフ | Playfair Display | 400 | 52px | 1.1 | 0.0em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0.08em | - 感情に訴える大コピーは細めの明朝、情報はゴシックと役割で書体を分ける - 本文は字間0.1em・行間2.0とゆったり組む - 大きな数字は太めのゴシック、単位は小さく添える - 英字のキャンペーン名はジオメトリックな細めのサンセリフで、ロゴのように使う - 見出しはすべて中央揃え。本文は左揃えにする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。商品とSNS投稿は 2 カラムのグリッド - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算） - 左右の余白は約22px - 見出し→期間→斜線コピーの順に、中央に縦に積む - 情報ブロックは青線の角丸枠か半透明の白パネルで囲む - 枠内の見出しの下に青い点線を引いて区切る - 商品カードは画像・名前・グレーのピル型ボタンを縦に積む ## Elevation & Depth - 影はほとんど使わず、平らに見せる - 半透明の白パネルで背景から浮かせる - SNS投稿カードは角丸と写真だけで区別する ## Shapes - **角丸**: 小 8px ／ 中 14px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 商品は白地に切り抜き。SNS投稿は角丸の矩形。サンゴは切り抜きの装飾 - **セクション境界**: FVと青帯の境目はゆるい波形。その他は直線で切り替え、写真のグラデーションでつなぐ - 吹き出しは細い青線の角丸枠に、下向きの三角しっぽを付ける - 青帯の角丸ボックスにも、下向きの三角しっぽを付ける - 強調コピーは左右の斜めの細線で「＼ ／」のように挟む - 国名タブは細い線のピル型。選択中だけ塗りつぶす ## Components - **主CTAボタン**（`button-primary`）: ロイヤルブルーのピル型。白の太字に▶を添える - **白抜きハッシュタグボタン**（`button-outline-white`）: 青帯の上に置く白いピル型ボタン。青文字を大きめに - **外部キャンペーン用の黒ボタン**（`button-dark`）: 黒いピル型で2行の文字を入れる - **商品リンクボタン**（`button-product`）: 薄いグレーの小さなピル型。商品カードの下に置く - **線の吹き出し**（`speech-bubble-line`）: 青線の角丸枠に、下向きのしっぽ。左右にサンゴやギフトのアイコンを重ねる - **斜線で挟む強調コピー**（`slash-headline`）: 明朝の大きなコピーを、左右の斜めの細線で挟む - **数値カウンターの枠**（`counter-box`）: 青線の角丸枠の中に、点線の区切りと、大きな数字を入れた白いパネル - **円形のつなぎバッジ**（`circle-badge`）: 白い円にしっぽと青文字。左右に白い点を3つずつ並べる - **国名タブ**（`tag-pill`）: 青線の小さなピル型。選択中は青で塗り、文字を白にする - **見出しラベル**（`label-pill-badge`）: 枠の上辺にまたがる白いピル型ラベル。両側にアイコンを置く ## Do's and Don'ts **Do** - 色はロイヤルブルー・水色・白の3つを軸にする - 感情を動かすコピーは明朝で、大きく中央に置く - 情報の塊は青線の枠か半透明パネルで囲む - サンゴや泡など海のモチーフを、セクションのつなぎに置く - 数値は大きく見せ、実績として目立たせる **Don't** - 暖色を地の色に使わない - 濃い影や立体的なボタンにしない - 太いゴシックの大見出しを多用しない - 線の太さを変えない（1〜1.5pxに統一する） - 背景写真を不透明な白で完全に隠さない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（キャンペーン名と期間を伝える）: 水中の幻想的な写真の上に、青い明朝とサンセリフのタイトルを置く。期間はピル型ラベルと大きなセリフ数字で示す 2. **コンセプトと動画**（理念を短く伝え、動画を見せる）: 波形で切り替わる青帯に、白い一文コピーと16:9の動画を置く 3. **参加の仕組み1**（購入するとどう貢献できるかを示す）: 線の吹き出し→ロゴ→期間→斜線で挟む明朝コピーの順に並べる 4. **追加企画**（SNSシェア企画を告知する）: 円形バッジでつなぎ、青太字の企画名、ギフトアイコン付きの吹き出し、黒ボタンを置く 5. **シェアカウンター**（参加状況をリアルタイムで見せる）: 青線の枠に点線見出しを付け、白パネルに大きな数字を入れる 6. **対象商品**（対象になる商品を一覧で見せる）: しっぽ付きの青い角丸ボックスで説明し、白地に2カラムの商品カードと注釈を並べる 7. **SNS投稿ギャラリー**（世界中の参加者の投稿を見せる）: 青帯にSNSアイコンを置き、白ボタンの下に大1枚・小2列の角丸投稿カードを並べる 8. **活動紹介**（活動の背景と実績を伝える）: 南国の海の写真に明朝見出しを置き、本文と半透明パネル、ラベル付きの実績カウンターを続ける 9. **メッセージとCTA**（応援を呼びかけ、詳細ページへ誘導する）: 点線見出しと本文の下に、青のピル型CTAを置く 10. **世界展開マップ**（活動が世界に広がっていることを示す）: 半透明パネルに斜線見出し、国名タブ、ピン付き世界地図、左右の矢印カルーセルを入れる 11. **フッター画像**（余韻を残して締める）: サンゴ礁と熱帯魚の写真を全幅で置く ## Imagery - 水中の光や揺らぐ布のような青いCGに、サンゴと泡を散らしたキービジュアル - 空と雲、エメラルドの海の明るい写真を、セクション背景として薄く使う - サンゴは切り抜きで、ピンク・黄・白のパステル系にする - 商品は白背景で正面から撮った切り抜き - アイコンはギフトや小さなサンゴなど、シンプルなフラットイラスト - 地図はグレーの大陸に、対象国を水色で塗り、紺のピンを立てる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでは中央に最大幅900〜1000pxのコンテンツを置き、背景写真は全幅に伸ばす - 商品グリッドは3〜4列、SNS投稿は3列に増やす - 大見出しは1.3倍程度にし、明朝のゆとりは保つ - 波形の境界と青帯は全幅のまま維持する ## 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-e4b23442`（元 LP の URL から採番） - **元 LP**: https://sekkisei.jp/savetheblue/index.html?__lt__cid=4a7d48a4-68bb-47b5-954b-49abbe3fd516/sp=1 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（8/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。