--- version: alpha name: Starry Night Navy Exhibition LP description: 濃紺の夜空を地にした天文テーマの企画展 LP。星座線の装飾、明朝の縦書き見出し、黄色マーカーの強調を使う。キャラクターの切り抜きを画面の端に配置して遊び心を出す。後半はライトグレー地のグッズ一覧と、黄色い柄地の FAQ に切り替えてリズムをつけている。 colors: primary: '#010A55' background: '#F4F4F4' surface: '#FEFEFE' marker: '#FDDA71' background-alt: '#FEDA7B' secondary: '#015CA2' dark-section: '#0E1D5C' on-dark: '#FEFEFE' text: '#0E1D5C' accent-1: '#FDDA71' text-muted: '#7E7683' line: '#8A93C8' tint-1: '#CAD2E5' cta: '#FEFEFF' on-cta: '#010A57' typography: display: fontFamily: Playfair Display fontSize: 40px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.1em headline-lg: fontFamily: Shippori Mincho fontSize: 24px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.08em headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em body-lg: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 2.0 letterSpacing: 0.08em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em accent: fontFamily: Playfair Display fontSize: 22px fontWeight: 400 lineHeight: 1.0 rounded: sm: 8px md: 16px lg: 32px full: 999px spacing: unit: 8px card: 20px section: 72px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' star-heading: textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 48px marker-lead: backgroundColor: '{colors.marker}' textColor: '{colors.primary}' typography: '{typography.body-lg}' height: 28px venue-card: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 280px button-pill: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' rounded: '{rounded.full}' height: 40px goods-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.lg}' height: 220px badge-new: textColor: '{colors.on-dark}' typography: '{typography.note}' rounded: '{rounded.full}' height: 28px faq-item: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 52px app-tile: backgroundColor: '{colors.surface}' textColor: '{colors.text}' rounded: '{rounded.lg}' height: 160px --- # DESIGN.md — 濃紺の星空×月光イエローの企画展 LP（Starry Night Navy Exhibition LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ポップ・元気、上品・高級、かわいい、親しみ・手作り感 - **キーワード**: 夜空・星座線・明朝見出し・黄色マーカー・キャラクター切り抜き・角丸カード - **地の質感**: 濃紺地に小さな星の点と薄い星座柄を散らす。FAQ は黄色地にシルエット柄を敷く - **形**: 角丸の大きい白カード、ピル型ボタン、セクション境界にはギザギザのレース状ライン - **温度感**: 寒色の夜空に暖色の黄色を差して、ワクワク感を出す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#010A55` | 夜空の濃紺メイン地 | 35% | 画素の実測 | | `background` | `#F4F4F4` | グッズ一覧などのライトグレー地 | 30% | 画素の実測 | | `surface` | `#FEFEFE` | 商品カード・FAQ カード・ボタンの白 | 11% | 画素の実測 | | `marker` | `#FDDA71` | 本文キーワードの黄色マーカー | 2% | 画素の主要色に補正 | | `background-alt` | `#FEDA7B` | FAQ セクションの黄色地 | 7% | 画素の実測 | | `secondary` | `#015CA2` | 夜空の中間ブルー | 5% | 画素の実測 | | `dark-section` | `#0E1D5C` | 開催情報カード内の少し明るい紺 | 6% | 画素の主要色に補正 | | `on-dark` | `#FEFEFE` | 濃紺地上の白文字 | 2% | 画素の主要色に補正 | | `text` | `#0E1D5C` | 明るい地での濃紺見出し・本文 | 1% | 画素の主要色に補正 | | `accent-1` | `#FDDA71` | 会場ラベル・リンクの金色 | 0% | 画素の主要色に補正 | | `text-muted` | `#7E7683` | 価格・注釈のグレー | 0% | 画素の主要色に補正 | | `line` | `#8A93C8` | カード枠・区切り点線 | 0% | 推定 | | `tint-1` | `#CAD2E5` | FAQ の矢印アイコンの薄紫丸 | 0% | 画素の実測 | | `cta` | `#FEFEFF` | 白いピル型リンクボタン | 0% | 画素の実測 | | `on-cta` | `#010A57` | ボタン上の濃紺文字 | 0% | 画素の主要色に補正 | - 前半とフッター前は濃紺の星空地、グッズ一覧はライトグレー地、FAQ は黄色地にする。この 3 つでリズムをつける - 強調したいキーワードは黄色マーカー帯に濃紺文字で置き、2〜3 語ごとに区切る - 濃紺地の上の文字は白にし、補足だけ金色にする - 白カードはどの地の上でも角丸で浮かせる - 赤やピンクはキャラクターの絵柄だけに使い、UI には使わない ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクションの欧文大見出し | 欧文セリフ | Playfair Display | 400 | 40px | 1.2 | 0.1em | | `headline-lg` | 明朝の和文セクション見出し・縦書きコピー | 明朝 | Shippori Mincho | 500 | 24px | 1.5 | 0.08em | | `headline-md` | 太ゴシックの見出し（開催予定・主催など） | ゴシック | Noto Sans JP | 700 | 20px | 1.5 | 0.05em | | `headline-sm` | 会場名・FAQ の質問文 | ゴシック | Noto Sans JP | 700 | 15px | 1.5 | 0.02em | | `body-lg` | マーカー付きのリードコピー | ゴシック | Noto Sans JP | 700 | 17px | 2.0 | 0.08em | | `body-md` | 説明文・会場情報 | ゴシック | Noto Sans JP | 500 | 13px | 1.9 | 0.04em | | `note` | 価格・注釈・著作権表記 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.02em | | `accent` | FAQ の Q マーク | 欧文セリフ | Playfair Display | 400 | 22px | 1.0 | 0.0em | - 大見出しは欧文セリフに和文の小さいルビを添える - コンセプトのコピーは明朝の縦書きで 2〜3 行並べる - 見出しの左右には「・✦・」の星のきらめき記号を置く - リード文は太字で中央揃えにし、行間を広く取る - 商品名は濃紺、価格はグレーの小さい字で 2 段に組む - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。グッズは 2 列グリッド - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算） - 見出しは中央揃えにし、上下に十分な余白を取る - キャラクターの切り抜きを見出しの左右やカードの角にはみ出させる - 会場情報は角丸の枠カードの中に、左に文字・右に写真で置く - 開催予定は点線で区切ったリストにする - FAQ は白いピル型の行を縦に積み、行間は 10px ## Elevation & Depth - 影はほぼ使わず、白カードと地色のコントラストで浮かせる - 濃紺地のカードは細い薄紫の枠線で区切る - キャラクターのイラストには白フチをつけて地から浮かせる ## Shapes - **角丸**: 小 8px ／ 中 16px ／ 大 32px。ボタンはピル型。 - **写真の切り抜き**: 商品写真は角丸の大きい白い正方形カードに収める。キャラクターは白フチ付きの切り抜き、丸いバッジ内に置く場合もある - **セクション境界**: ギザギザのレース状ラインと、星空イラストのシルエットで切り替える - 商品カードは角丸約 32px の正方形 - FAQ 行とリンクボタンは完全なピル型 - NEW バッジは濃い紫の円形ワッペン - 会場ラベルは金色の小さな角丸タグ ## Components - **星飾り見出し**（`star-heading`）: 明朝または欧文セリフの見出しを、左右の「・✦・」装飾で挟む - **マーカー強調リード**（`marker-lead`）: 濃紺地の中央に置く太字リード。キーワードに黄色マーカーを敷く - **会場情報カード**（`venue-card`）: 薄紫の枠の角丸カード。左上に金色の地域タグ、会場名、会期、住所、写真を入れる - **白ピルリンクボタン**（`button-pill`）: 濃紺地に置く白い横長ピル。中央に濃紺の文字 - **グッズカード**（`goods-card`）: 白い角丸の正方形に商品写真を入れる。下にカルーセルのドット、商品名、価格を置く - **NEW バッジ**（`badge-new`）: カードの左上に重ねる紫の円形ワッペン - **FAQ アコーディオン**（`faq-item`）: 白いピル行。左にセリフ体の Q、右に薄紫の丸の下矢印 - **アプリ連携タイル**（`app-tile`）: 白い角丸の大きな正方形にアプリのロゴを入れ、右下に濃紺の丸矢印を置く ## Do's and Don'ts **Do** - 濃紺地には常に細かい星の点と星座線を薄く散らす - 見出しは星のきらめき記号で挟み、中央揃えにする - キャラクターの切り抜きは見出しの左右に 1 体ずつ配置する - 強調語は黄色マーカーで 2〜3 か所にとどめる - グッズは同じサイズの角丸カードで均一に並べる **Don't** - 濃紺の代わりに純黒を使わない - 影の強いカードやグラデーションボタンを使わない - 黄色を大きなボタンの色に使わない - 角ばったカードや細い角丸を混ぜない - 明朝見出しとポップ体を混在させない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（企画展の世界観とロゴを伝える）: 夕焼けから星空へのイラスト背景に、中央にキャラクターとロゴを置く。左に会場案内の丸バッジ、下に告知帯を入れる 2. **コンセプト説明**（企画の趣旨を伝える）: 星飾り見出し、明朝の縦書きコピー、横書き本文を左右に並べ、周りにキャラクターの丸アイコンを置く 3. **リードメッセージ**（体験への期待を高める）: 中央揃えの太字にマーカーを敷き、左右にキャラクターを置く。下は大きなイラストで区切る 4. **開催情報**（会場と会期を伝える）: 枠線の角丸カードに会場情報と白ピルボタンを入れる 5. **開催予定・開催終了**（巡回スケジュールを示す）: 点線区切りの中央揃えリストと小さな会場カード 6. **アプリ連携**（関連アプリへの誘導）: 星柄の濃紺地に、白い角丸のアプリタイルを 2 枚並べる 7. **グッズ一覧**（販売商品を紹介する）: グレー地に欧文セリフの大見出しと注釈を置き、角丸の正方形カードをグリッドで並べる 8. **よくある質問**（不安を解消する）: 黄色の柄地に白いピル型アコーディオンを 6 つ積む 9. **主催・お問い合わせ**（信頼性の提示と問い合わせ導線）: 濃紺地にラベルと値の 2 列表を置き、左右に天体キャラクター、下に白ピルボタン 10. **フッター**（公式リンクと権利表記）: グレー地に白ピルのリンク 2 つ、ロゴ、小さな著作権表記 ## Imagery - キャラクターや主役のモチーフは、太い輪郭線のアニメ調イラストに白フチをつけた切り抜きにする - 背景は夜空のイラスト。星座を細い白線と点で描く - 商品写真は白背景の物撮りで、正面かやや俯瞰から撮る - 黄色地には星・太陽・月のシルエットを同系色で敷き詰める - 会場写真は青空の建物写真を角丸で小さく入れる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 版は中央約 480px 相当の縦長カラム。右端に縦書きの固定ナビを置く - SP ではグッズを 2 列に減らす - 縦書きコピーは SP でも縦書きのまま維持し、本文は下に回す - 会場カードの写真は SP では文字の下に全幅で置く - 見出し左右のキャラクターは SP では小さくして端にはみ出させる ## 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-d4da559f`（元 LP の URL から採番） - **元 LP**: https://observatory.pokemon.jp/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（7/15 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。