--- version: alpha name: Aqua Bubble Eco Coffee Tech LP description: 淡い水色のグラデーション地に、しずく型・泡の円・波線の境界を重ねた清涼感のある技術訴求 LP。青のピル型見出し帯と白い角丸カードで図解を見せ、写真は円形トリミングで柔らかくまとめる。 colors: primary: '#018CCB' background: '#E5F6FE' background-alt: '#CEEDFF' tint-1: '#A2DFFE' surface: '#FEFFFE' tint-2: '#F3F2F3' text: '#304147' text-body: '#4A4F55' text-muted: '#8A8A8A' line: '#E5E5E5' marker: '#EEFD02' dark-section: '#0176B4' accent-1: '#D7261E' primary-accessible: '#017CB4' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 30px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.2em accent: fontFamily: Lato fontSize: 24px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.08em headline-lg: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.08em headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.06em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em label-button: fontFamily: Montserrat fontSize: 15px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.06em rounded: sm: 8px md: 16px lg: 32px 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}' pill-heading: backgroundColor: '{colors.primary}' textColor: '{colors.surface}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 44px button-read: backgroundColor: '{colors.primary}' textColor: '{colors.surface}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 38px button-store: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 32px splash-label: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.accent}' height: 60px drop-icon: backgroundColor: '{colors.primary}' textColor: '{colors.surface}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 90px diagram-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 400px point-list: textColor: '{colors.text}' height: 56px dotted-quote: textColor: '{colors.primary}' typography: '{typography.headline-md}' height: 40px callout-bubble: backgroundColor: '{colors.marker}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.full}' height: 44px --- # DESIGN.md — 水色の泡としずくのエコ技術コーヒー LP（Aqua Bubble Eco Coffee Tech LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 食品・飲料 ／ **雰囲気**: 清潔・爽やか、やさしい・柔らかい、信頼・誠実、クール・先進的 - **キーワード**: 水色・しずく・泡の円・波形境界・図解・環境配慮 - **地の質感**: フラットな淡色面に半透明の白い円を散らし、水面の写真で上下を挟む - **形**: しずく型アイコン、円形写真、ピル型見出し帯、大きめ角丸カード、波打つセクション境界 - **温度感**: 涼しく軽やか。青系で統一し、写真の焦げ茶だけが温度を足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#018CCB` | 見出し文字・ピル帯・アイコンの青 | 6% | 画素の実測 | | `background` | `#E5F6FE` | 基本の淡い水色地 | 14% | 画素の実測 | | `background-alt` | `#CEEDFF` | 技術・声セクションの一段濃い水色地 | 15% | 画素の実測 | | `tint-1` | `#A2DFFE` | 環境セクションの濃いめ水色地 | 11% | 画素の実測 | | `surface` | `#FEFFFE` | 図解カード・ボタン地の白 | 16% | 画素の実測 | | `tint-2` | `#F3F2F3` | 後半技術セクションの薄グレー地 | 7% | 画素の実測 | | `text` | `#304147` | 強調見出しの濃いチャコール | 2% | 画素の実測 | | `text-body` | `#4A4F55` | 本文のグレー | 2% | 推定 | | `text-muted` | `#8A8A8A` | 比較対象の灰色アイコン・図 | 2% | 推定 | | `line` | `#E5E5E5` | 点線区切り・グレー床 | 8% | 画素の実測 | | `marker` | `#EEFD02` | 「ここが違う」吹き出しの黄色 | 0% | 画素の実測 | | `dark-section` | `#0176B4` | ショップ部のしずく形の濃い青 | 4% | 画素の実測 | | `accent-1` | `#D7261E` | 外部リンク矢印の赤 | 0% | 推定 | | `primary-accessible` | `#017CB4` | AA を満たす補正値（計算） | | 計算 | - 地は淡い水色の3〜4段階を章ごとに切り替え、波形境界で区切る - 見出しと強調語は青文字、本文はグレー文字にする - 比較の『従来』はグレー、『新技術』は青で対比させる - ピル型の見出し帯とボタンは青地に白文字 - 黄色は小さな吹き出しだけに使う - 背景に白い半透明の円を散らして泡を表現する - `pill-heading` は文字 `#FEFFFE` × 背景 `#018CCB` のコントラスト比が 3.73:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#017CB4`、4.61:1）を使う。 - `button-read` は文字 `#FEFFFE` × 背景 `#018CCB` のコントラスト比が 3.73:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#017CB4`、4.61:1）を使う。 - `drop-icon` は文字 `#FEFFFE` × 背景 `#018CCB` のコントラスト比が 3.73:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#017CB4`、4.61:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの縦組み風キャッチ | ゴシック | Zen Kaku Gothic New | 700 | 30px | 1.6 | 0.2em | | `accent` | セクションの英字ラベル | 欧文サンセリフ | Lato | 400 | 24px | 1.2 | 0.08em | | `headline-lg` | 章のリード見出し（青） | ゴシック | Noto Sans JP | 700 | 22px | 1.6 | 0.08em | | `headline-md` | ピル帯・カード見出し | ゴシック | Noto Sans JP | 700 | 18px | 1.5 | 0.06em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.9 | 0.04em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.02em | | `label-button` | 英字ボタン・アイコン内ラベル | 欧文サンセリフ | Montserrat | 800 | 15px | 1.2 | 0.06em | - 見出しは中央揃え、字間を広めに取る - 英字ラベルは細めで大きく、日本語見出しは太字 - 数値は特大の太字で主役にする - 本文は左揃え、注釈は小さく下にまとめる - 強調語だけ青文字にして文中で目立たせる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム、図解の比較は縦積み - **本文ブロックの幅**: 画面幅の約 86% - **余白**: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算） - 各章は英字ラベル→青見出し→本文の順 - 比較は従来→下向き矢印→新技術で縦に並べる - 白カードの上にピル帯見出しを吹き出し状に重ねる - 人物紹介は円形写真→所属→名前→一言→READボタン ## Elevation & Depth - 影はほぼ使わずフラットにする - 白カードは地色との差だけで浮かせる - 英字ラベルの背後に白い不定形の水しぶき形を敷く ## Shapes - **角丸**: 小 8px ／ 中 16px ／ 大 32px。ボタンはピル型。 - **写真の切り抜き**: 人物は正円、素材写真は全幅で上下を緩い曲線で切る - **セクション境界**: 大きく波打つ曲線、または緩いアーチ - アイコンはしずく型に収める - ピル帯の下中央に小さな三角しっぽを付ける - 背景の泡は大小の正円をランダムに配置 ## Components - **ピル型見出し帯**（`pill-heading`）: 青地白文字のピル帯。下に三角のしっぽを付け、白カードを指す - **READボタン**（`button-read`）: 青地に白い英字の横長ピルボタン - **ストア誘導ボタン**（`button-store`）: 白地に黒い英字と色付き矢印のピルボタン。濃い青地の上に縦2つ並べる - **水しぶき英字ラベル**（`splash-label`）: 白い不定形のしぶきの上に細い英字を重ねた章タイトル - **しずくアイコン**（`drop-icon`）: 青いしずく形の中に白い線画アイコンと英字ラベル - **図解カード**（`diagram-card`）: 大きな角丸の白カード。グラフ・数値・図を中央に配置 - **番号付きポイント**（`point-list`）: しずく型の青いPOINT番号と点線区切りで3項目並べる - **点線付き一言**（`dotted-quote`）: 青文字の一言の下に、中央が下向きに折れた点線を敷く - **黄色の吹き出し**（`callout-bubble`）: 図中で違いを指す小さな黄色の丸吹き出し ## Do's and Don'ts **Do** - 青系の濃淡だけで章ごとの地色を切り替える - 境界は波形の曲線にする - 比較図は従来をグレー、新方式を青にする - 大きな数値で効果を見せる - 泡の円を背景に散らして軽さを出す **Don't** - 暖色や原色を面に使わない - 角張った四角い区切りや直線の境界にしない - 濃い影や立体的なボタンにしない - 本文を黒で太く詰めない - 写真を四角いまま並べない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品の新しさを一目で伝える）: 水面写真の上に白い不定形シルエットと泡を重ね、カップ写真と3行キャッチを中央に置く 2. **概要**（技術の価値を2点で要約）: 英字ラベル、青い2行見出し、本文、補足、しずくアイコン2つと台座状の円柱 3. **技術の比較**（従来との違いを示す）: 灰色アイコン→白矢印→青い大アイコンを縦に並べ、二重下線で結論 4. **味の特長**（おいしさの理由を語る）: 波形の境界の後、見出しと本文。続けて全幅の豆写真に青いしずくカードと点線の吹き出し 5. **根拠の図解**（仕組みをデータで示す）: 引用符付き見出し、ピル帯、白カードにグラフと黄色吹き出し 6. **開発者の声**（専門家の言葉で信頼を出す）: 円形人物写真、所属と名前、青い一言と点線、READボタンを人数分縦に並べる 7. **環境貢献**（続けやすい環境行動として訴求）: 濃い水色地に泡。見出し、本文、ピル帯付き白カードで数値比較と1日→1年の円環イラスト 8. **設備・技術詳細**（量産体制の信頼性を示す）: 薄グレー地。注釈付き見出し、ピル帯、番号ポイント3つと機械の線画図 9. **購入導線**（購入先へ誘導）: 水面写真に濃い青のしずく形を敷き、商品パッケージと白いピルボタン2つ ## Imagery - 水面を上から写した淡い青の写真に、白い円をボケのように重ねる - 商品は真上から撮り、白い背景に置いてやわらかい影をつける - 素材写真は画面いっぱいに敷き詰めた接写で質感を見せる - 人物は無地の背景で作業中の様子を撮り、正円で切り抜く - アイコンは青一色の線画とベタで、しずく・葉・木など自然のモチーフ - 図解は青と灰色の2色にし、炎や矢印を単純な形で描く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央約900px幅で、FVは横長にしてキャッチをカップの右に置く - 比較図は PC で左右に並べ、中央に横矢印を置く - 人物紹介は PC で2人横並びにする - 数値比較・1日→1年図も PC では横並びのカードにする - ポイントリストと機械図は PC で左右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-dbc33b15`（元 LP の URL から採番） - **元 LP**: https://www.ucc.co.jp/company/sustainability/nature/carbon_neutral/hydrogen_roasting/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。