--- version: alpha name: Vivid Orange Brand Story Beer LP description: ページ全体をビビッドなオレンジ一色で塗り、白い手書き風の文字と、金色のアーチ状英字見出しでつなぐブランドストーリー型のビール LP。人物写真や商品写真を大きく切り抜いて配置し、白カードとピル型ボタンで参加導線をつくる。 colors: primary: '#FF5100' background: '#FF5100' on-primary: '#FEFFFA' accent-1: '#FCE591' secondary: '#E8C27A' surface: '#FEFEFE' text: '#CA5F2F' text-body: '#5A4A40' cta: '#FDFDFD' on-cta: '#CB6B3F' background-alt: '#FF6118' line: '#FFD6BF' accent-2: '#F5D11E' background-accessible: '#FFAA82' on-cta-accessible: '#B55B31' text-accessible: '#BC582C' primary-accessible: '#D44300' background-alt-accessible: '#D54300' typography: display: fontFamily: Klee One fontSize: 40px fontWeight: 600 lineHeight: 1.6 letterSpacing: 0.08em headline-lg: fontFamily: Josefin Sans fontSize: 40px fontWeight: 700 lineHeight: 1.1 letterSpacing: 0.05em headline-md: fontFamily: Klee One fontSize: 21px fontWeight: 600 lineHeight: 1.6 letterSpacing: 0.08em headline-sm: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em body-lg: fontFamily: Klee One fontSize: 15px fontWeight: 600 lineHeight: 2.0 letterSpacing: 0.1em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.5 label-button: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.03em accent: fontFamily: Montserrat fontSize: 32px fontWeight: 700 lineHeight: 1.1 letterSpacing: 0.02em rounded: sm: 4px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 16px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-pill: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 36px arch-heading: textColor: '{colors.accent-1}' typography: '{typography.headline-lg}' height: 70px white-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 330px video-thumb: textColor: '{colors.on-primary}' typography: '{typography.body-lg}' rounded: '{rounded.sm}' height: 230px step-card: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 300px outline-frame: textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 240px spec-panel: backgroundColor: '{colors.background-alt}' textColor: '{colors.on-primary}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 170px badge-circle: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.note}' rounded: '{rounded.full}' height: 100px --- # DESIGN.md — 全面オレンジ×手書き風文字のビールブランド LP（Vivid Orange Brand Story Beer LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 酒類 ／ **雰囲気**: ポップ・元気、力強い・インパクト、親しみ・手作り感 - **キーワード**: 全面オレンジ・手書き風の白文字・アーチ状の金色英字見出し・大きな人物写真・ブランドストーリー・動画サムネイル - **地の質感**: 平塗りのオレンジ地に、水滴付きの缶や泡の立つグラスなど艶のある写真を重ねる。セクション境目には薄い斜線を入れる程度。 - **形**: 写真は角丸の小さい長方形か全幅。ボタンはピル型の白。カードは白で角丸中くらい。 - **温度感**: 暖色一色の高彩度で明るく陽気。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FF5100` | 全面背景のブランドオレンジ | 60% | 画素の実測 | | `background` | `#FF5100` | ページ地色（オレンジと同色） | 10% | 画素の実測 | | `on-primary` | `#FEFFFA` | オレンジ地上の白文字 | 3% | 画素の主要色に補正 | | `accent-1` | `#FCE591` | アーチ英字見出しのクリーム金 | 2% | 画素の主要色に補正 | | `secondary` | `#E8C27A` | FV帯の金色グラデーション帯 | 1% | 推定 | | `surface` | `#FEFEFE` | 寄付方法などの白カード | 5% | 画素の実測 | | `text` | `#CA5F2F` | 白カード上のオレンジ見出し | 0% | 画素の実測 | | `text-body` | `#5A4A40` | 白カード上の本文グレー | 0% | 推定 | | `cta` | `#FDFDFD` | 白いピル型ボタン面 | 0% | 画素の実測 | | `on-cta` | `#CB6B3F` | ボタン文字とアイコンのオレンジ | 0% | 画素の実測 | | `background-alt` | `#FF6118` | 商品情報の半透明明るめオレンジ板 | 3% | 画素の実測 | | `line` | `#FFD6BF` | 枠線・区切り線の薄白 | 0% | 推定 | | `accent-2` | `#F5D11E` | イラストの黄色 | 2% | 推定 | | `background-accessible` | `#FFAA82` | AA を満たす補正値（計算） | | 計算 | | `on-cta-accessible` | `#B55B31` | AA を満たす補正値（計算） | | 計算 | | `text-accessible` | `#BC582C` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#D44300` | AA を満たす補正値（計算） | | 計算 | | `background-alt-accessible` | `#D54300` | AA を満たす補正値（計算） | | 計算 | - 地色はほぼ全面同じオレンジ一色で通し、セクション毎の色替えはしない。 - オレンジ地の文字は白、英字の大見出しだけクリーム金。 - 白はカード・ピル型ボタン・動画再生ボタンに限定して使う。 - 白カード内の見出しはオレンジ、本文はこげ茶グレー。 - スペック表は地色より少し明るいオレンジの板で差をつける。 - 黄色・ピンク・水色はイラストや写真内のみで、UIには使わない。 - `page` は文字 `#5A4A40` × 背景 `#FF5100` のコントラスト比が 2.58:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `background-accessible`（`#FFAA82`、4.55:1）を使う。 - `button-pill` は文字 `#CB6B3F` × 背景 `#FDFDFD` のコントラスト比が 3.61:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `on-cta-accessible`（`#B55B31`、4.58:1）を使う。 - `white-card` は文字 `#CA5F2F` × 背景 `#FEFEFE` のコントラスト比が 4.01:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-accessible`（`#BC582C`、4.56:1）を使う。 - `step-card` は文字 `#FEFFFA` × 背景 `#FF5100` のコントラスト比が 3.25:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#D44300`、4.54:1）を使う。 - `spec-panel` は文字 `#FEFFFA` × 背景 `#FF6118` のコントラスト比が 3.0:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `background-alt-accessible`（`#D54300`、4.51:1）を使う。 - `badge-circle` は文字 `#FEFFFA` × 背景 `#FF5100` のコントラスト比が 3.25:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#D44300`、4.54:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのリードや大きなメッセージの手書き風コピー | 手書き・筆 | Klee One | 600 | 40px | 1.6 | 0.08em | | `headline-lg` | アーチ状に曲げた英字セクション見出し | 欧文セリフ | Josefin Sans | 700 | 40px | 1.1 | 0.05em | | `headline-md` | 各特長の和文見出し | 手書き・筆 | Klee One | 600 | 21px | 1.6 | 0.08em | | `headline-sm` | カード見出し・サブ見出し | ゴシック | Noto Sans JP | 700 | 17px | 1.5 | 0.03em | | `body-lg` | ストーリー本文（中央揃え） | 手書き・筆 | Klee One | 600 | 15px | 2.0 | 0.1em | | `body-md` | 説明文・カード本文 | ゴシック | Noto Sans JP | 500 | 12px | 1.7 | 0.02em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.0em | | `label-button` | ピル型ボタンの文字 | ゴシック | Noto Sans JP | 700 | 11px | 1.2 | 0.03em | | `accent` | INTERVIEW等のサンセリフ英字見出し | 欧文サンセリフ | Montserrat | 700 | 32px | 1.1 | 0.02em | - 情緒的なコピーと本文は手書き風書体で、字間を広くとる。 - 機能的な情報（寄付・手順・スペック）はゴシックに切り替える。 - 英字の章見出しはアーチ状に曲げて、写真の上端にかぶせる。 - 本文は中央揃えで、短く改行して詩のように並べる。 - 注釈は※付きで小さく、白で入れる。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム、中央揃え - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算） - 写真は左右6%の余白で幅いっぱい近くに置く。 - 人物の顔写真やホップ写真は全幅で大きく見せる。 - 章は「アーチ英字→写真→和文見出し→本文」の順で繰り返す。 - 動画サムネイルは縦に並べ、下にタイトルを中央で置く。 - 寄付手順は横スクロールのカード列にする。 ## Elevation & Depth - 基本はフラットで影を使わない。 - 商品缶やグラスの写真にだけ、オレンジ地に落ちる濃い影をつける。 - 白カードは影なしで、面の色差だけで浮かせる。 ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。 - **写真の切り抜き**: 長方形で角は小さく丸める。人物は切り抜きや下端フェードで地色になじませる。 - **セクション境界**: 直線のまま地色を続け、薄い白の斜線で区切りを暗示する。 - ボタンは白のピル型で、右端に丸いオレンジのアイコンを置く。 - 動画再生ボタンは白丸にオレンジの三角。 - 囲み枠は細い白線の角丸長方形。 - 吹き出しは白線の角丸枠に小さな三角をつける。 ## Components - **白ピル型ボタン**（`button-pill`）: 白地にオレンジ太字。右端にオレンジ丸の外部リンクアイコン。幅は画面の約4割。 - **アーチ英字見出し**（`arch-heading`）: クリーム金の大文字英字を円弧状に並べ、下の写真上端に少し重ねる。 - **白い説明カード**（`white-card`）: オレンジ見出し、中央に商品画像、下に太字の説明と小さな補足文。 - **動画サムネイル**（`video-thumb`）: 16:9の写真に右下の白丸再生ボタン、下に白の手書き風タイトル。 - **手順カード**（`step-card`）: 白丸番号＋見出し、細い白線枠の中に画面キャプチャ、下に説明。カード間に「>」。 - **白線囲み枠**（`outline-frame`）: 細い白線の角丸枠で、キービジュアルやQR導線をまとめる。 - **商品情報パネル**（`spec-panel`）: 明るめオレンジの板に太字見出しと白線の区切り、ラベルと値の2列表。 - **円形エンブレム**（`badge-circle`）: オレンジ丸に白線の円と円周上の英字。写真の角にかぶせる。 ## Do's and Don'ts **Do** - 地色はオレンジ一色で最後まで通す。 - 情緒的なコピーは白の手書き風書体で中央揃え・広めの行間で入れる。 - 章の頭はアーチ状の金色英字見出しで始める。 - 商品写真は大きく傾け、濃い落ち影をつける。 - UIの白はボタン・カード・再生ボタンにだけ使う。 **Don't** - セクション毎に別の背景色に変えない。 - 寒色やダークの面をUIに使わない。 - 本文を左揃えでぎっしり詰めない。 - ボタンをオレンジ塗りの四角にしない。 - 影やグラデーションをカードにつけすぎない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（ブランドと出演者で一目で惹きつける）: アーチ状のロゴ英字、中央に缶、前に笑顔の人物を並べ、下に金帯の一言コピー。 2. **動画カルーセル**（CMや配信動画へ誘導）: 角丸サムネイルの横スライダー。左右に白丸矢印、下にドット。 3. **ブランドメッセージ**（新商品の誕生と想いを伝える）: 大きな手書き風コピーとイラスト、その後に中央揃えの詩的な本文、傾けた缶の写真。 4. **出演者メッセージ**（人物の言葉で共感をつくる）: 顔のアップを下端フェードで地色になじませ、下に中央揃えの語り、手書きサイン、動画ボタン。 5. **製法ストーリー**（原料と製法のこだわりを示す）: グラス写真にアーチ英字を重ね、全幅の原料写真、円形エンブレム、写真のずらし配置。 6. **特長ポイント**（4つの特長を順に説明）: 番号付きアーチ英字→写真→手書き見出し→短い本文を4回繰り返す。 7. **社会貢献活動**（参加型の取り組みを紹介）: 白線枠のキービジュアル、白カード2枚で方法を説明、白ピルボタン。 8. **参加手順**（参加の流れを示す）: 番号付き手順カードを横スクロールで並べ、下にCTAボタン。 9. **ドキュメンタリー・インタビュー**（関連コンテンツへの誘導）: 角丸写真に縦書きコピー、作品タイトルを大きな手書き風で、詳細ボタン。 10. **テーマソング**（音楽タイアップを紹介）: アーチ英字見出し、全幅の写真、白太字の曲名と短い説明。 11. **TVCM一覧**（CM動画をまとめて見せる）: 16:9サムネイルを縦に並べ、それぞれ再生ボタンと手書き風タイトル。 12. **商品情報**（仕様と栄養成分を示す）: 明るめオレンジのパネル3枚に表形式で記載、容量パネルに缶画像。 13. **クロージングビジュアル**（余韻を残して締める）: グラスを掲げる人物の笑顔と手書きの一言、イラストを添える。 ## Imagery - 人物は白シャツで、オレンジ背景の前で自然な笑顔。明るい日中光。 - 商品缶は水滴付きで斜めに置き、上から光を当てて濃い影を落とす。 - グラスは泡が盛り上がり、背面から光が透ける黄金色。 - 原料畑や工場は青空・夕日の暖かい色調の実写。 - 和柄調の伝統的な霊獣を黄・黒・水色・ピンクの線画イラストで描き、筆記体の英字を添える。 - 人物写真は下端を地色にフェードさせて背景に溶け込ませる。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はコンテンツ幅を約1000pxにし、地色オレンジは全幅のまま。 - メッセージと写真は左右2カラムで交互に配置する。 - 特長ポイントは写真とテキストを左右に並べ、左右を交互に入れ替える。 - 白カードや動画サムネイルは2カラム、手順カードは4つを横一列に並べる。 - 商品情報パネルは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-e8372de2`（元 LP の URL から採番） - **元 LP**: https://www.kirin.co.jp/alcohol/beer/goodale/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（7/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。