--- version: alpha name: Bright Yellow Museum Exhibition LP description: 鮮やかな黄色のヘッダー・フッターで白地の本文を挟む、展覧会の告知 LP。キービジュアルは全面の合成写真とイラストで迫力を出す。お知らせは水色の線と影を付けた角丸カードで並べる。見出しは水色か紫の太字ゴシックにして、親しみやすさと公共施設らしい信頼感を両立させる。 colors: primary: '#FFF33F' background: '#FFFFFF' secondary: '#239DC9' accent-1: '#7A1A8C' accent-2: '#E8559A' accent-3: '#D81E5B' text: '#222222' line: '#7ACAE9' tint-1: '#D3ECFB' surface: '#FFFFFE' text-muted: '#545454' typography: display: fontFamily: Dela Gothic One fontSize: 56px fontWeight: 400 lineHeight: 1.1 headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 13px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em accent: fontFamily: Montserrat fontSize: 10px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.08em label-button: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0.05em rounded: sm: 4px md: 12px lg: 16px full: 999px spacing: unit: 8px card: 12px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' header-bar: backgroundColor: '{colors.primary}' textColor: '{colors.text}' height: 36px section-heading: textColor: '{colors.secondary}' typography: '{typography.headline-lg}' height: 44px news-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 76px notice-box: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 36px button-more: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 24px character-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 215px footer-bar: backgroundColor: '{colors.primary}' textColor: '{colors.text}' typography: '{typography.note}' height: 130px --- # DESIGN.md — 黄×水色のポップな博物館特別展 LP（Bright Yellow Museum Exhibition LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ポップ・元気、力強い・インパクト、親しみ・手作り感 - **キーワード**: 鮮やか黄色・水色の線・全面キービジュアル・キャラクター・角丸カード・白地 - **地の質感**: ベタ塗りのフラットな面。カードにだけ少しずらしたハードめの影を付ける - **形**: 角丸 12px 前後のカードと黒い細枠の囲み - **温度感**: 明るく暖かい。子ども向けの元気さがある ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FFF33F` | ヘッダー・フッターの黄色 | 7% | 画素の実測 | | `background` | `#FFFFFF` | 本文の白地 | 48% | 画素の実測 | | `secondary` | `#239DC9` | 見出し・カード枠の水色 | 2% | 画素の実測 | | `accent-1` | `#7A1A8C` | 見出し・英字ラベルの紫 | 0% | 推定 | | `accent-2` | `#E8559A` | 注意喚起見出しのピンク | 0% | 推定 | | `accent-3` | `#D81E5B` | お知らせ囲みの赤枠 | 0% | 推定 | | `text` | `#222222` | 本文の黒文字 | 3% | 推定 | | `line` | `#7ACAE9` | カードの区切り線・影 | 1% | 画素の主要色に補正 | | `tint-1` | `#D3ECFB` | ボタン矢印の薄水色 | 0% | 画素の実測 | | `surface` | `#FFFFFE` | カード面 | 10% | 画素の実測 | | `text-muted` | `#545454` | 日付・注釈のグレー | 0% | 画素の実測 | - 黄色はヘッダーとフッターの帯だけに使い、本文は白地で通す - リンクと「お知らせ」見出しは水色にする - 「本展について」の見出しと英字ラベルは紫にする - 注意喚起の見出しはピンク、重要なお知らせは赤い細枠で囲む - カードは白地にし、水色または黒の線と影で縁取る ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | キービジュアル内のタイトルロゴ | 装飾・ディスプレイ | Dela Gothic One | 400 | 56px | 1.1 | 0.0em | | `headline-lg` | セクション見出し | ゴシック | Zen Kaku Gothic New | 700 | 20px | 1.4 | 0.05em | | `headline-sm` | 注意喚起の小見出し | ゴシック | Zen Kaku Gothic New | 700 | 13px | 1.5 | 0.05em | | `accent` | 見出し上の英字ラベル | 欧文サンセリフ | Montserrat | 700 | 10px | 1.2 | 0.05em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 500 | 10px | 1.8 | 0.05em | | `note` | 日付・コピーライト | ゴシック | Noto Sans JP | 700 | 9px | 1.5 | 0.08em | | `label-button` | もっと見るボタン | ゴシック | Noto Sans JP | 500 | 10px | 1.0 | 0.05em | - 見出しの上に英字の小さなラベルを置き、その下に日本語の太字見出しを左寄せで置く - 本文は小さめで、行間を 1.8 前後と広くとる - 極太のディスプレイ書体はロゴとキャラクター名だけに使う - 本文中のリンクは水色の太字にする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム - **本文ブロックの幅**: 画面幅の約 94% - **余白**: セクション間 56px、基本単位 8px、カード内 12px（375px 幅換算） - キービジュアルは画面幅いっぱいに置く - 本文は左右 8px ほどの狭い余白で置く - お知らせカードは 12px 間隔で縦に積む - 動画は幅 75% ほどで中央に置く - フッター前に大きめの余白をとる ## Elevation & Depth - カードには右下へ 3〜4px ずらした影を付ける。ぼかしは少なめ - 動画枠にも同じずれた影を付ける - ヘッダーは影なしのベタ塗りにする ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: キービジュアルは角なしの全面。動画は角丸 12px - **セクション境界**: 直線。色の切り替えだけで区切る - カードは角丸 12px＋1px の線で作る - もっと見るボタンは小さなピル型＋右に矢印アイコン - 重要なお知らせは角なしの赤い細枠で囲む ## Components - **黄色ヘッダー**（`header-bar`）: 左にロゴ、右に SNS アイコンとメニューボタンを置く - **英字ラベル付き見出し**（`section-heading`）: 小さな英字ラベルの下に、太字の日本語見出しを置く - **お知らせカード**（`news-card`）: 上段に日付、区切り線、下段に本文。水色の枠とずらした影を付ける - **赤枠お知らせ**（`notice-box`）: 中央揃えの 1〜2 行。強調語だけ水色にする - **もっと見るボタン**（`button-more`）: 白いピル型。右に薄水色の矢印を付け、影も付ける - **キャラクター紹介カード**（`character-card`）: 黒い細枠の角丸カード。上にイラストと黄色帯のタイトル、下に紹介文を置く - **黄色フッター**（`footer-bar`）: ロゴ、規約リンク、SNS、コピーライトを並べ、右下にキャラクターの「TOP へ」ボタンを置く ## Do's and Don'ts **Do** - 黄色の帯でページの上下を挟む - カードは白地に色線＋ずらした影で作る - キャラクターのイラストで親しみやすさを出す - 見出しの色はセクションごとに水色・紫で使い分ける **Don't** - 本文の背景に黄色を広く敷かない - 暗い色やグラデーションの背景を使わない - ぼかしの大きいソフトな影を使わない - 明朝体を使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（ロゴと SNS への導線）: 黄色ベタの帯。右側に丸い SNS アイコンとメニューを置く 2. **ファーストビュー**（展示の迫力と会期を伝える）: 動物を大集合させた合成ビジュアルに、極太ロゴと日付を重ねて全面に置く 3. **注意喚起**（来場時のお願い）: ピンクの見出しを中央に置き、その下に小さな本文を続ける 4. **重要なお知らせ**（受賞などのトピックを強調）: 赤い細枠のボックスで中央揃え 5. **お知らせ**（最新の更新情報を伝える）: 水色の見出しの下に日付付きカードを縦に並べ、最後にもっと見るボタンを置く 6. **概要**（展示の趣旨を説明）: 紫の見出しと本文の段落。続けて影付きの動画を埋め込む 7. **キャラクター紹介**（親しみやすさを出す）: 黒い枠のカードにイラスト、黄色帯のタイトル、紹介文を収める 8. **フッター**（規約・SNS・ページトップへの導線）: 黄色ベタの帯にロゴとリンクを置き、キャラクターの TOP ボタンを付ける ## Imagery - 写実的な動物の切り抜きを青空・虹・草原にぎっしり重ねたコラージュにする - キャラクターは太い輪郭線のフラットなイラストにする - 手描き風の吹き出し文字と集中線を添える - タイトル帯は黄色の平行四辺形にする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はヘッダーにグローバルナビを横並びで表示する - PC のキービジュアルは横長の構図に差し替える - PC のお知らせカードは日付と本文を横 1 行に並べる - PC の本文は幅 75% ほどで中央に寄せる - 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-20a6725d`（元 LP の URL から採番） - **元 LP**: https://ikimonoworld.jp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（6/11 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。