--- version: alpha name: Lab Notebook Grid Idol Music Release LP description: 生成りの紙色と方眼を背景に、黒の細い線で区切るアイドルCD発売LP。極太の欧文見出しと中抜き文字の帯、チェッカー柄、化学をモチーフにした線画を組み合わせる。発色の強いキャラクターイラストが主役になるよう、色は青と水色の星の飾りだけに絞っている。 colors: background: '#F5F2ED' background-alt: '#FAF9F5' primary: '#160C0A' text-body: '#483F3E' line: '#4A4446' text-muted: '#C8C7C4' surface: '#C5BAB4' cta: '#FEFEFE' on-cta: '#332524' accent-1: '#3F5BC8' accent-2: '#AEDDE5' accent-3: '#E2C77A' text-muted-accessible: '#6F6D68' typography: display: fontFamily: Lexend fontSize: 52px fontWeight: 700 lineHeight: 1.0 headline-lg: fontFamily: Lexend fontSize: 44px fontWeight: 700 lineHeight: 1.0 accent: fontFamily: Saira Condensed fontSize: 60px fontWeight: 600 lineHeight: 1.0 letterSpacing: 0.02em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 20px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.04em headline-sm: fontFamily: Lexend fontSize: 16px fontWeight: 600 lineHeight: 1.3 letterSpacing: 0.02em body-md: fontFamily: Zen Kaku Gothic New fontSize: 13px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.08em label-button: fontFamily: Lexend fontSize: 13px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0.04em note: fontFamily: Lexend fontSize: 8px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.06em rounded: sm: 0px md: 4px lg: 20px full: 999px spacing: unit: 8px card: 14px section: 0px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' button-more: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 26px section-heading: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.display}' height: 130px outline-marquee: backgroundColor: '{colors.background}' textColor: '{colors.text-muted}' typography: '{typography.accent}' height: 70px news-row: backgroundColor: '{colors.background-alt}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 100px product-card: backgroundColor: '{colors.background-alt}' textColor: '{colors.primary}' typography: '{typography.headline-md}' height: 295px tag-oval: backgroundColor: '{colors.cta}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 40px emblem-badge: backgroundColor: '{colors.cta}' textColor: '{colors.primary}' typography: '{typography.note}' rounded: '{rounded.full}' height: 150px callout-box: backgroundColor: '{colors.cta}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' height: 95px footer-nav: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.body-md}' height: 32px --- # DESIGN.md — 生成り方眼×黒線の実験ノート風アイドルCD LP（Lab Notebook Grid Idol Music Release LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: クール・先進的、シンプル・ミニマル、ポップ・元気 - **キーワード**: 実験ノート・方眼紙・黒の細線フレーム・中抜き文字の帯・チェッカー柄・星形の飾り - **地の質感**: 生成りの紙地に薄い方眼を敷く。ノイズやグラデーションは使わず、平たい印刷物のような質感にする。 - **形**: 四角い枠線で区切るのが基本。ボタンとタグだけをピル型・楕円にし、尖った星形を飾りに散らす。 - **温度感**: 生成りと黒による中間〜やや冷たい色温度。青と水色の飾りで透明感を足す。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#F5F2ED` | ページ全体の生成りの地色 | 45% | 画素の実測 | | `background-alt` | `#FAF9F5` | 方眼を敷いたコンテンツ面 | 18% | 画素の実測 | | `primary` | `#160C0A` | ブランドを表す墨黒。見出し・線・ロゴに使う | 6% | 画素の実測 | | `text-body` | `#483F3E` | 本文の濃いグレー | 3% | 画素の実測 | | `line` | `#4A4446` | セクションやカードを区切る細い罫線 | 2% | 推定 | | `text-muted` | `#C8C7C4` | 中抜き文字の帯・方眼線の淡いグレー | 9% | 画素の主要色に補正 | | `surface` | `#C5BAB4` | 動画サムネイル枠のグレージュ | 4% | 画素の実測 | | `cta` | `#FEFEFE` | 線で囲んだピル型ボタンの白い面 | 2% | 画素の実測 | | `on-cta` | `#332524` | ボタンの文字・矢印 | 0% | 画素の実測 | | `accent-1` | `#3F5BC8` | 星形の飾りの鮮やかな青 | 1% | 推定 | | `accent-2` | `#AEDDE5` | 飛び散った水しぶき・星の水色 | 1% | 画素の実測 | | `accent-3` | `#E2C77A` | エンブレムの縁取りに使う淡い金色 | 0% | 推定 | | `text-muted-accessible` | `#6F6D68` | AA を満たす補正値（計算） | | 計算 | - 地は生成り（background）、方眼を敷く本文エリアは一段明るい background-alt にして、2トーンで交互に切り替える。 - 文字・罫線・アイコンは墨黒（primary）1色に統一する。 - 有彩色は青と水色の星・しぶきの飾りだけに使い、文字や面には使わない。 - セクションの間には淡いグレーの中抜き文字の帯を入れ、目立たせすぎない。 - ボタンは白地に黒枠・黒文字にし、色で塗りつぶさない。 - 色はキャラクターイラストに任せ、UI側は無彩色に徹する。 - `outline-marquee` は文字 `#C8C7C4` × 背景 `#F5F2ED` のコントラスト比が 1.51:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-muted-accessible`（`#6F6D68`、4.63:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクション見出しの極太欧文（英単語1語） | 欧文サンセリフ | Lexend | 700 | 52px | 1 | 0em | | `headline-lg` | 発売日の大きな数字 | 欧文サンセリフ | Lexend | 700 | 44px | 1 | 0em | | `accent` | セクション区切りの中抜き文字の帯 | 装飾・ディスプレイ | Saira Condensed | 600 | 60px | 1 | 0.02em | | `headline-md` | 商品カードの名前（和文） | ゴシック | Zen Kaku Gothic New | 700 | 20px | 1.3 | 0.04em | | `headline-sm` | 日付・発売表記・キャッチの欧文 | 欧文サンセリフ | Lexend | 600 | 16px | 1.3 | 0.02em | | `body-md` | 本文・お知らせ本文 | ゴシック | Zen Kaku Gothic New | 500 | 13px | 1.9 | 0.08em | | `label-button` | ピル型ボタンの文字 | 欧文サンセリフ | Lexend | 500 | 13px | 1 | 0.04em | | `note` | 見出し下の小さな英字サブラベル・コピーライト | 欧文サンセリフ | Lexend | 600 | 8px | 1.4 | 0.06em | - セクション見出しは英単語1語の極太サンセリフにし、左に揃える。 - 見出しの下には、小さなアイコン・2行の英字サブラベル・チェッカー柄を横に並べる。 - 本文は字間を広めにとった和文ゴシック。行間は1.9前後で、短く改行する。 - 日付・番号・括弧は欧文書体で書き、番号は「( 01 )」のように丸括弧で囲む。 - 中抜き文字は画面幅からはみ出させ、端で切れるようにする。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム（商品一覧のみ 2 カラム） - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 0px、基本単位 8px、カード内 14px（375px 幅換算） - 画面の左右から約18pxの位置に縦の罫線を引き、ページ全体を枠で囲んだような構成にする。 - セクションの間に余白はとらず、中抜き文字の帯（高さ約70px）と横罫線で区切る。 - 見出しブロックは方眼なしの生成り地、中身のブロックは方眼地に分ける。 - お知らせは横罫線で区切ったリストにし、右端に丸いスタンプ風のリンクアイコンを置く。 - 商品一覧は罫線で区切った2列のグリッドにし、空いたマスには対角線の×を引く。 ## Elevation & Depth - 影は使わず、すべて線で表現する。 - ジャケット画像は細い枠を二重にずらし、少しだけ浮いて見せる。 - 動画枠は内側に細い枠線を重ね、モニターのように見せる。 ## Shapes - **角丸**: 小 0px ／ 中 4px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 正方形のジャケット画像を細い黒枠で囲む。メインビジュアルは二重枠にする。 - **セクション境界**: 直線の罫線と、中抜き文字の帯で区切る。 - 枠は角を立てた矩形を基本にする。 - ボタンとタグは完全なピル型・楕円にする。 - エンブレムは円形にし、縁に文字を沿わせる。 - 飾りは鋭い星形・ひし形のきらめきに限る。 - 注目させたい囲みは角を1つだけ斜めに切り落とす。 ## Components - **ピル型の詳細ボタン**（`button-more`）: 白地に黒の細枠。左に英字ラベル、右端に小さな斜め矢印を置く。 - **英字の極太見出しブロック**（`section-heading`）: 極太の英単語の下に、アイコン・2行の英字サブラベル・チェッカー柄を並べる。 - **中抜き文字の区切り帯**（`outline-marquee`）: 淡いグレーの中抜き英字を、画面幅いっぱいにはみ出させて上下を罫線で挟む。 - **お知らせの行**（`news-row`）: 日付と曜日の括弧、楕円のタグ、本文2〜3行を並べ、右に丸いスタンプ風アイコンを置く。 - **商品グリッドのカード**（`product-card`）: 番号、正方形のジャケット、名前、日付、発売表記、ボタンを縦に並べる。罫線で囲んだマスにする。 - **斜めの楕円タグ**（`tag-oval`）: 白地を黒枠の楕円で囲み、少し傾けて英字を書く。見出しの飾りやカテゴリー表示に使う。 - **円形のエンブレム**（`emblem-badge`）: 二重の円に文字を沿わせ、中央にフラスコの線画を描く。縁取りは金色または灰色。 - **角を切った囲み**（`callout-box`）: 白地に黒枠で、角を1つ斜めに切り落とす。右下に分子構造の線画を添え、欧文のキャッチを2行で書く。 - **罫線区切りのメニュー**（`footer-nav`）: 中央揃えの項目を横罫線で区切ってリストにする。その下にシェア用アイコンと、ピル型の外部リンクを置く。 ## Do's and Don'ts **Do** - UIは無彩色の線画で作り、色はイラストに任せる。 - ブロックはすべて細い黒の罫線で囲み、方眼紙のノートのように見せる。 - セクションごとに英字の極太見出しとサブラベルを同じ型で繰り返す。 - フラスコ・分子構造・星など、化学をモチーフにした線画を飾りに使う。 - 日付・番号は欧文書体で書き、括弧で囲む。 **Don't** - ボタンを青などの色で塗りつぶさない。 - 影・グラデーション・ぼかしを使わない。 - 見出しに明朝体や手書き風の書体を使わない。 - 背景を真っ白にしない。生成りにする。 - セクションの間に大きな空白をとらない。罫線と帯でつなげる。 - 角丸のカードを多用しない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（シリーズのロゴ、主役ジャケット、発売日を伝える）: ロゴの下に二重枠の正方形ジャケットを置き、キャラクター名の英字と大きな発売日を続ける。周りに青と水色の星を散らす。 2. **サムネイル切替帯**（シリーズの全タイトルへの導線を作る）: 六角形の小さなエンブレムを横一列に並べ、選択中のものを大きく濃い枠で囲む。 3. **区切り帯**（セクション同士をリズムよく区切る）: 中抜き英字の帯を画面端からはみ出させて置く。 4. **企画概要**（企画の趣旨を説明する）: 斜めの楕円タグと円形エンブレム2つを方眼地に置く。続けて短く改行した本文と、角を切った囲みのキャッチを入れる。 5. **お知らせ**（最新情報を伝える）: 日付・タグ・本文の行を罫線で区切って3件並べ、リンク付きの行にはスタンプ風アイコンを置く。 6. **商品ラインナップ**（シリーズ各作品の発売情報を一覧にする）: 2列の罫線グリッドに番号付きのカードを並べる。最後の空きマスには×を描く。 7. **動画**（プロモーション動画へ誘導する）: 括弧で囲んだ小見出しの下にグレージュの動画枠を置き、中央に円形の再生ボタンを重ねる。ボタンの縁には英字を沿わせる。 8. **フッター**（ナビゲーション、共有、関連リンクを置く）: ロゴ、罫線区切りのメニュー、シェア用アイコン、ピル型の外部リンク3つ、権利表記の順に中央揃えで並べる。 ## Imagery - キャラクターはセル調のアニメイラスト。白い衣装を基調に、メンバーごとの色を差し色にする。 - ジャケットは正方形。白い背景に、線画の星・しぶき・メンバーカラーの星形スタンプを散らす。 - 飾りは青と水色の鋭い星、きらめき、絵の具のしぶき。 - フラスコ・分子構造・惑星の輪などの化学モチーフは、黒の細い線画で描く。 - 白黒のチェッカー柄を、小さな帯として見出しに添える。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでは左端に縦長のメニューを固定し、その右にメインビジュアルとロゴ・発売日を横並びにする。 - PCでは見出しの右に、縦線をはさんでサブラベルを並べる。 - PCの企画概要は、エンブレムと本文を左右2カラムにする。 - PCのお知らせは1行に詰めた横長のリストにする。 - PCの商品一覧も2列で、各カードはジャケット画像と情報を横並びにする。 - 中抜き文字の帯はPCでは文が全部見え、横に繰り返す。 ## 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-64341275`（元 LP の URL から採番） - **元 LP**: https://sp.utapri.com/shuffle_duet/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（8/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-13、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、掲載削除を希望される場合、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。