--- version: alpha name: Regional Color-Coded Idol Collaboration Campaign LP description: アイドルと地域鉄道のコラボキャンペーンサイト。生成りの地に茶色の手描き線画の列車や名所を置き、チームごとに背景色とカード色を切り替えて、メンバーのプロフィールカードを並べる。斜めのストライプとドットで動きを出した、にぎやかで親しみやすいトンマナ。 colors: primary: '#7A3E1E' background: '#FAF3E2' surface: '#FFFFFF' dark-section: '#231816' on-dark: '#FFFFF7' accent-1: '#E45395' accent-2: '#0E7A3A' accent-3: '#0175C3' secondary: '#EB0213' tint-1: '#FEE4F4' tint-2: '#E4FAEA' marker: '#FCD302' text: '#36342B' background-alt: '#715641' accent-1-accessible: '#DD2578' typography: display: fontFamily: Dela Gothic One fontSize: 36px fontWeight: 400 lineHeight: 1.2 headline-lg: fontFamily: Montserrat fontSize: 24px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.02em headline-md: fontFamily: Montserrat fontSize: 18px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 500 lineHeight: 1.5 label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.04em rounded: sm: 0px md: 0px lg: 0px full: 999px spacing: unit: 8px card: 6px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' team-label: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 40px member-card: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-dark}' typography: '{typography.note}' height: 260px section-heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 56px news-list: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 160px movie-carousel: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.note}' height: 220px dark-profile-band: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 180px legend-row: textColor: '{colors.text}' typography: '{typography.note}' height: 40px --- # DESIGN.md — 県別カラーと手描き列車のコラボ企画 LP（Regional Color-Coded Idol Collaboration Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ポップ・元気、親しみ・手作り感、情報量多め・訴求型 - **キーワード**: チーム別カラー・手描き線画イラスト・斜めストライプ背景・プロフィールカード・旅・地域 - **地の質感**: パステル地に白の斜めストライプとドット柄を重ね、スピード感を出す - **形**: 角丸なしの長方形カードとラベル。見出しの左右に斜線の飾りを入れる - **温度感**: 暖かく明るい。チームごとにパステルの背景色が変わる ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#7A3E1E` | セクション見出しの茶色・線画の色 | 2% | 推定 | | `background` | `#FAF3E2` | イントロや動画まわりの生成り地 | 12% | 画素の実測 | | `surface` | `#FFFFFF` | ニュース欄の白地 | 6% | 画素の実測 | | `dark-section` | `#231816` | グループ紹介帯・カード地の黒 | 7% | 画素の実測 | | `on-dark` | `#FFFFF7` | 黒帯上の白文字 | 1% | 画素の主要色に補正 | | `accent-1` | `#E45395` | チーム1のピンク（ラベル・カード） | 4% | 画素の実測 | | `accent-2` | `#0E7A3A` | チーム2の緑（ラベル・カード） | 3% | 推定 | | `accent-3` | `#0175C3` | チーム3の青（ラベル・カード） | 3% | 画素の実測 | | `secondary` | `#EB0213` | 赤のチームカラー・ニュースのスクロールバー | 3% | 画素の実測 | | `tint-1` | `#FEE4F4` | ピンクチームの背景 | 8% | 画素の実測 | | `tint-2` | `#E4FAEA` | 緑チームの背景 | 7% | 画素の実測 | | `marker` | `#FCD302` | 黄色チームのラベルと背景 | 5% | 画素の実測 | | `text` | `#36342B` | 本文の黒文字 | 1% | 画素の実測 | | `background-alt` | `#715641` | フッターの焦げ茶帯 | 1% | 画素の実測 | | `accent-1-accessible` | `#DD2578` | AA を満たす補正値（計算） | | 計算 | - チームごとに固有の色を 1 色決め、ラベル・カード地・背景の淡い色をその色でそろえる - 背景はチーム色を薄めたパステルにし、白の斜めストライプを重ねる - 共通部分は生成り地と茶色の文字で温かくまとめる - グループ紹介は黒帯にして、チーム群との区切りにする - 線画イラストは茶系の単色線に、薄い彩色を添える程度にする - 最後のチームは灰色の背景にカード地を黒にする - `team-label` は文字 `#FFFFF7` × 背景 `#E45395` のコントラスト比が 3.5:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#DD2578`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | メインビジュアルの手書き風コピー | 装飾・ディスプレイ | Dela Gothic One | 400 | 36px | 1.2 | 0.0em | | `headline-lg` | 英字セクション見出し | 欧文サンセリフ | Montserrat | 800 | 24px | 1.2 | 0.02em | | `headline-md` | チーム名ラベル | 欧文サンセリフ | Montserrat | 500 | 18px | 1.3 | 0.02em | | `headline-sm` | カード上部のメンバー名 | ゴシック | Noto Sans JP | 700 | 14px | 1.3 | 0.02em | | `body-md` | イントロ文・ニュース本文 | ゴシック | Noto Sans JP | 500 | 14px | 1.9 | 0.04em | | `note` | カード内のプロフィール項目・見出し下の小さな和文 | ゴシック | Noto Sans JP | 500 | 11px | 1.5 | 0.0em | | `label-button` | グローバルナビ | ゴシック | Noto Sans JP | 700 | 13px | 1.4 | 0.04em | - 英字見出しの下に小さな和文の読みを添える - 共通部分の見出しは茶色、チーム名は色の帯の上に白文字で置く - プロフィールは丸数字の番号付きで短く並べる - イントロ文は中央揃えで短めに改行する - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。カードは 2 列（PC は 3〜4 列を中央揃え） - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 48px、基本単位 8px、カード内 6px（375px 幅換算） - チームごとに 1 セクションにし、背景色を切り替える - カードの端数の列も中央に寄せる - 線画イラストはセクションの左右下に、カードからはみ出すように置く - 見出しラベルの下に、凡例（番号付き項目）を中央に置く ## Elevation & Depth - 影はほぼ使わず、平面的な色面で構成する - 写真は白枠でカード地から浮かせる ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。 - **写真の切り抜き**: 人物写真は胸から上を正方形に切り抜き、白枠を付ける - **セクション境界**: 直線で背景色を切り替える - カード・ラベルは角丸なしの長方形 - 見出しの左右に細い斜線を八の字に置く - 背景には斜めのストライプと網点ドットを使う ## Components - **チーム名ラベル**（`team-label`）: チーム色の横長の帯に英字のチーム名を白文字で置く - **メンバープロフィールカード**（`member-card`）: チーム色の地に、上に名前、中央に白枠の写真とサイン、下に番号付きの項目を4つ並べる - **斜線飾り付き見出し**（`section-heading`）: 茶色の英字見出しの下に小さな和文を添え、左右に斜線を入れる - **ニュースリスト**（`news-list`）: 日付とリンク文を横に並べ、区切り線と右端の赤いスクロールバーを付ける - **動画カルーセル**（`movie-carousel`）: 中央にサムネイルを大きく出し、左右に隣を少し見せる。下にキャプションとドットのページ送りを置く - **グループ紹介の黒帯**（`dark-profile-band`）: 黒地の左に細い線のロゴ、右に白文字の紹介文を置く - **項目凡例**（`legend-row`）: 黒丸数字とプロフィール項目名を中央揃えで並べる ## Do's and Don'ts **Do** - チームごとの色を、ラベル・カード・背景で一貫させる - 手描き線画の列車や名所を各セクションの端に置く - カードの中身は同じ構成と順番でそろえる - 背景のストライプは白で、半透明ぎみに重ねる **Don't** - カードに角丸や強い影を付けない - 1 つのセクションにチーム色を複数混ぜない - 線画を写実的なイラストや写真に置き換えない - 背景のパステルを濃くしすぎて文字を読みにくくしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（ロゴとナビゲーション）: 白地の左にロゴ、中央から右にテキストのナビを置き、下に茶色の細い線を引く 2. **ファーストビュー**（企画名と期間を伝える）: 生成り地にメンバーの写真をタイル状に敷き、中央に大きな手書き風コピーと期間、四隅に線画を置く 3. **お知らせ**（最新情報を伝える）: 白地に斜線飾りの見出しと、日付付きのリストを置く 4. **企画説明**（企画の趣旨を伝える）: 生成り地に中央揃えの短い文を4行ほど置く 5. **スペシャルムービー**（動画コンテンツを見せる）: 見出しの下に横スライドのサムネイルとドットを置く 6. **グループ紹介**（グループの概要を伝える）: 黒帯にロゴと白文字の紹介文を置く 7. **チーム別メンバー紹介（繰り返し）**（地域ごとのメンバーを紹介する）: チーム色のパステル地にストライプを敷き、ラベル、凡例、カードのグリッドを置いて、角に地域の線画を添える 8. **フッター**（権利表記）: 焦げ茶の帯に白の小さな文字を中央揃えで置く ## Imagery - 人物は制服姿の胸から上を、明るい無地の背景で撮り、手書きのサインを重ねる - 列車・城・温泉・名物を、茶色の線の手描きイラストに淡い彩色で描く - イラストはセクションの左右下に、半分ほど切れるように置く - 背景は斜めの太細ストライプと網点のグラデーションで、スピード感を出す - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - SP では、カードを 2 列にして名前と項目の文字を小さめに組む - PC のカードは 3〜4 列を中央寄せで並べ、最大幅は約 720px - SP では線画を小さくして、カードの下や間に配置する - SP ではナビをハンバーガーメニューにまとめる - 動画カルーセルは、SP では 1 枚を全幅で見せる ## 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-7cea32b9`（元 LP の URL から採番） - **元 LP**: https://www.jrkyushu.co.jp/train/hkt48_jr/ - **解析に使った画像**: PC（PC版） - **確度**: 色 中（11/14 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。