--- version: alpha name: Sky Cyan Anime Collab Sports LP description: 空色シアンを主役に、斜めに切った帯見出しとグラデーションボタンを組み合わせたアニメ×スポーツ用品のコラボ LP。グッズ部分は薄紫、店舗企画部分は深緑と黄色ドットにして、セクションごとに地色を変えている。 colors: primary: '#2DC3D5' background: '#FFFFFF' cta: '#04BCFA' on-cta: '#FFFFFF' background-alt: '#EEE8F2' secondary: '#B6A5C9' accent-1: '#01633D' accent-2: '#FFF27C' accent-3: '#F39293' text: '#5A5A5A' text-body: '#666666' accent-1-text: '#000000' cta-accessible: '#037EA7' secondary-accessible: '#866AA6' accent-3-accessible: '#E72123' typography: display: fontFamily: Dela Gothic One fontSize: 20px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.25em headline-lg: fontFamily: Roboto fontSize: 28px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em headline-sm: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.4 body-md: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Montserrat fontSize: 13px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.6em label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em rounded: sm: 6px md: 10px lg: 20px full: 999px spacing: unit: 8px card: 20px section: 60px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' slanted-band-heading: backgroundColor: '{colors.primary}' typography: '{typography.display}' height: 80px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 56px anchor-nav: backgroundColor: '{colors.primary}' typography: '{typography.label-button}' height: 44px goods-card: textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 560px button-buy: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 40px tab-switch: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 40px badge-coming: backgroundColor: '{colors.accent-3}' textColor: '{colors.on-cta}' typography: '{typography.note}' rounded: '{rounded.full}' height: 46px dot-label-band: backgroundColor: '{colors.accent-2}' textColor: '{colors.accent-1}' typography: '{typography.accent}' height: 44px accordion-green: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 36px speech-bubble: backgroundColor: '{colors.background}' textColor: '{colors.accent-1}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 80px --- # DESIGN.md — 空色シアン×斜め帯のアニメコラボ LP（Sky Cyan Anime Collab Sports LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ポップ・元気、清潔・爽やか、かわいい、情報量多め・訴求型 - **キーワード**: 空色・斜め帯・アニメイラスト・ドット・ストライプ装飾・グラデーションボタン・コラボ - **地の質感**: 雲の質感を入れた空色の面に、細かいドットや斜めストライプ、紙吹雪のような線を散らす - **形**: セクション見出しは斜めにカットした帯。カードは大きな角丸、ボタンは中くらいの角丸 - **温度感**: 明るく爽やかで涼しげ。グッズ部分だけ淡い紫でやわらかくする ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#2DC3D5` | 斜め帯・ブランドの空色 | 12% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白地 | 46% | 画素の実測 | | `cta` | `#04BCFA` | グラデーションCTA（青→シアン） | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTA上の文字 | 0% | 画素の主要色に補正 | | `background-alt` | `#EEE8F2` | グッズ部分の薄紫の地 | 7% | 画素の実測 | | `secondary` | `#B6A5C9` | 購入ボタン・タブの藤色 | 2% | 画素の実測 | | `accent-1` | `#01633D` | 店舗企画の深緑（帯・アコーディオン） | 4% | 画素の実測 | | `accent-2` | `#FFF27C` | 英字ラベル帯の黄色ドット | 1% | 画素の実測 | | `accent-3` | `#F39293` | 「近日公開」バッジのサーモンピンク | 0% | 画素の実測 | | `text` | `#5A5A5A` | 見出しの濃いグレー | 1% | 画素の実測 | | `text-body` | `#666666` | 本文のグレー | 2% | 推定 | | `accent-1-text` | `#000000` | | | 推定 | | `cta-accessible` | `#037EA7` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#866AA6` | AA を満たす補正値（計算） | | 計算 | | `accent-3-accessible` | `#E72123` | AA を満たす補正値（計算） | | 計算 | - 地は白が基本。章の頭には空色の斜め帯を置く - グッズ物販のブロックは薄紫の地に白カードを並べ、購入ボタンは藤色にする - 店舗企画のブロックは深緑を主色にし、英字ラベルの帯は黄色ドットにする - 主CTAは青からシアンへの横グラデーションに白文字を乗せる - ピンク・黄色・水色は装飾の紙吹雪や小さいバッジにだけ使う - 小見出しや強調文字は空色の文字で入れる - `button-primary` は文字 `#FFFFFF` × 背景 `#04BCFA` のコントラスト比が 2.19:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#037EA7`、4.62:1）を使う。 - `button-buy` は文字 `#FFFFFF` × 背景 `#B6A5C9` のコントラスト比が 2.28:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#866AA6`、4.54:1）を使う。 - `tab-switch` は文字 `#FFFFFF` × 背景 `#B6A5C9` のコントラスト比が 2.28:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#866AA6`、4.54:1）を使う。 - `badge-coming` は文字 `#FFFFFF` × 背景 `#F39293` のコントラスト比が 2.25:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-3-accessible`（`#E72123`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 斜め帯の中の章タイトル（字間を広げる） | 装飾・ディスプレイ | Dela Gothic One | 400 | 20px | 1.4 | 0.25em | | `headline-lg` | 店舗企画の英字大見出し | 欧文サンセリフ | Roboto | 700 | 28px | 1.2 | 0.02em | | `headline-md` | 商品名・ブロック見出し | ゴシック | Noto Sans JP | 700 | 16px | 1.5 | 0.03em | | `headline-sm` | 空色の小見出し・ルビのような副題 | ゴシック | Noto Sans JP | 700 | 13px | 1.4 | 0.0em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 11px | 1.8 | 0.02em | | `note` | ※から始まる注釈・型番・価格 | ゴシック | Noto Sans JP | 400 | 9px | 1.6 | 0.0em | | `accent` | 字間を広げた英字ラベル（CAMPAIGN など） | 欧文サンセリフ | Montserrat | 700 | 13px | 1.2 | 0.6em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 13px | 1.3 | 0.05em | - 章タイトルは装飾的な角張った書体にし、字間を 0.2em 以上あける - 本文は小さめの 11px 前後。中央揃えと左揃えを使い分ける - 英字ラベルは大文字にして字間を大きくあける - 商品ブロックは空色の文字 2〜3 行で連名を表し、その下にグレーの太字で商品名を置く - 注釈は ※ 始まりの小さい文字で、本文の直下に置く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。ナビは 4 分割の横並び、ギャラリーは横スクロール、店舗イベントは画像と文字の 2 カラム - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 60px、基本単位 8px、カード内 20px（375px 幅換算） - 章の頭には小さなアイコンを中央に置き、その下に斜め帯の見出しを置く - グッズは薄紫の外枠の中に白カードを縦に積む - 各カードは画像→連名→商品名→型番と価格→説明文→購入ボタンの順に並べる - 応募手順は STEP ラベルを細い横線で挟んで区切る - 店舗一覧は深緑のアコーディオンを縦に並べる ## Elevation & Depth - 影はほとんど使わず、面の色の差で階層を作る - 白カードは薄紫の地の上に影なしで置く - ボタンにも影は付けず、平面のまま ## Shapes - **角丸**: 小 6px ／ 中 10px ／ 大 20px。ボタンは角丸の長方形。 - **写真の切り抜き**: 写真やアニメのカットは角丸なしの長方形。キャラクターは切り抜きで重ねる - **セクション境界**: 右上がり・左上がりに斜めにカットした帯と面 - 見出し帯の上下辺は 5〜8 度傾ける - カードは大きな角丸 20px - ボタンは角丸 8〜10px の横長 - バッジは正円 ## Components - **斜め帯の見出し**（`slanted-band-heading`）: 画面幅いっぱいに斜めにカットした空色の帯。雲の質感を入れ、字間の広い白文字を中央に置く - **グラデーションCTA**（`button-primary`）: 青からシアンへのグラデーション。上に小さな前置きを 1 行、下に大きく行動を書く 2 段構成 - **旗アイコンの4分割ナビ**（`anchor-nav`）: シアンの帯を 4 分割し、各マスにゴルフの旗の線画とラベルを入れる - **グッズカード**（`goods-card`）: 薄紫の地に置く白い角丸カード。中は商品画像・情報・藤色の購入ボタン - **購入ボタン**（`button-buy`）: 藤色の面に白文字。左にかごのアイコンを付ける - **販路切替タブ**（`tab-switch`）: 左のタブは藤色、右のタブは深緑。上側だけ角丸にしてアイコンを付ける - **近日公開バッジ**（`badge-coming`）: サーモンピンクの正円に白い太字を入れ、画像の右上に重ねる - **黄色ドットの英字帯**（`dot-label-band`）: 黄色のドット柄の帯の中央に、深緑で字間の広い英字ラベルを置く - **深緑アコーディオン**（`accordion-green`）: 深緑の角丸バーに、中央の白いラベルと右端の＋アイコン - **丸い吹き出し**（`speech-bubble`）: 白地に深緑の線の円形吹き出しで、短いコメントを手書き風に書く ## Do's and Don'ts **Do** - 章ごとに斜め帯の見出しを入れ、リズムを作る - 空白部分に紙吹雪・ドット・ストライプの小さな装飾を散らす - キャラクターは切り抜きで大きく見せ、商品と重ねる - ブロックごとに地色を空色・薄紫・深緑と切り替え、内容のまとまりを示す - 価格・型番・注釈は商品のすぐ下に小さく添える **Don't** - 暗い背景や重い影を使わない - 見出し帯を水平の長方形だけにしない - CTA を単色のくすんだ色にしない - 本文を大きく太くしすぎない - 装飾色を広い面に使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（コラボであることを一目で伝える）: 空色の背景に大きなキャラクターを切り抜きで置き、ロゴ同士を×でつなぐ。下辺は斜めにカット 2. **導入文とナビ**（企画の要約とページ内の案内）: 中央揃えの 2 行の文と、旗アイコン付きの 4 分割ナビ 3. **商品紹介**（キャラクターが使う商品を見せる）: 斜め帯の見出しの下に、商品とキャラクターの合成ビジュアル、男女モデルの 2 ボタン、場面カット、横スクロールのギャラリー、グラデーションCTA 4. **コラボグッズ**（物販への誘導）: 薄紫の地に白カードを縦に積み、藤色の購入ボタンを置く 5. **限定ノベルティ**（購入特典の訴求）: 販路切替タブ、2 列の特典画像、近日公開バッジ、注釈、線だけのボタン 6. **SNSキャンペーン**（フォローとリポストでの応募を促す）: 斜めの空色バナーに賞品を集めたビジュアル。STEP 区切りの手順と、グラデーションのアコーディオン 7. **店舗イベント**（実店舗での企画を案内する）: 深緑の斜め帯、ボール柄の背景にイラスト、英字の大見出し、黄色ドットの英字帯、吹き出し付きの対象商品 8. **対象店舗一覧**（地域別の店舗情報）: 深緑のアコーディオンを地域ごとに縦に並べる 9. **イベント詳細**（開催店舗ごとの告知）: 左に店舗写真、右に店名・説明・リンク・グレーの準備中ボックス 10. **作品紹介**（原作アニメへの送客）: 空色の斜めの面にキービジュアルと中央揃えのあらすじ、グラデーションCTA 11. **フッター**（権利表記とSNS）: 白地にSNSアイコン、小さなリンクとコピーライト ## Imagery - アニメ調のキャラクターを全身で切り抜き、動きのあるポーズで使う - 商品写真は白背景の切り抜きで、斜めのアングルにする - 背景は雲が流れる空色の水彩調の面 - 装飾は細いピンク・黄色・水色のストライプ、ドットの集まり、三角や円の線画 - ゴルフボールの線画を並べたパターン背景 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はファーストビューを横長にし、ロゴをキャラクターの左右に振り分ける - PC の商品紹介は合成ビジュアルと説明文の 2 カラム - PC のグッズカードは 2 列で横に並べる - PC の作品紹介はキービジュアルとあらすじの 2 カラム - コンテンツ幅は PC で最大 1000px 前後を中央に置き、斜め帯だけは画面幅いっぱいに広げる ## 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-3f837c88`（元 LP の URL から採番） - **元 LP**: https://golf.yamaha.com/sorairo-utility/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。