--- version: alpha name: Tropical Batik Event Festival LP description: 白地を基調に濃紺の帯とバティック柄の装飾帯でイベントらしさを出す、国際フェア告知LP。FVは都市写真とロゴ、日付ブロックのバナーで構成し、続いて濃紺のニュース帯、後援・協賛ロゴを格付け順に並べるセクションへと進む。装飾は控えめで、ロゴと情報の整理を優先する公共的なトーン。 colors: primary: '#03428F' on-primary: '#FFFFFF' background: '#FFFFFF' background-alt: '#F7F7F7' tint-1: '#AFD0DF' secondary: '#185B90' accent-1: '#D7182A' accent-2: '#2E8B8B' text: '#040304' text-body: '#333333' line: '#F7F7F7' dark-section: '#5D5D5D' cta: '#013E8A' on-cta: '#F3F6FF' tint-1-accessible: '#B4D3E1' typography: display: fontFamily: Montserrat fontSize: 30px fontWeight: 800 lineHeight: 1.1 letterSpacing: 0.01em headline-lg: fontFamily: Bebas Neue fontSize: 40px fontWeight: 400 lineHeight: 1.0 letterSpacing: 0.2em headline-md: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 8px fontWeight: 400 lineHeight: 1.5 label-button: fontFamily: Zen Kaku Gothic New fontSize: 12px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.3em rounded: sm: 0px md: 4px lg: 8px full: 999px spacing: unit: 8px card: 16px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' header-bar: backgroundColor: '{colors.background}' textColor: '{colors.primary}' height: 28px pattern-band: backgroundColor: '{colors.accent-2}' height: 16px date-banner: backgroundColor: '{colors.tint-1}' textColor: '{colors.secondary}' typography: '{typography.display}' height: 140px badge-free: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 16px news-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-lg}' height: 130px logo-grid: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.headline-sm}' height: 110px sns-icons: rounded: '{rounded.full}' height: 32px footer-contact: backgroundColor: '{colors.background-alt}' textColor: '{colors.text-body}' typography: '{typography.note}' height: 170px --- # DESIGN.md — 紺×バティック柄の国際物産イベントLP（Tropical Batik Event Festival LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 自治体・公共・団体 ／ **雰囲気**: 信頼・誠実、シンプル・ミニマル、ポップ・元気 - **キーワード**: 国際イベント・濃紺の帯・バティック柄・ロゴ羅列・大きな日付表記・白地 - **地の質感**: 白地はフラット。FVの上下に南国のバティック柄の帯を入れ、日付バナーには水色のグラデーションを敷く - **形**: 角丸はほぼ使わない矩形が中心。入場無料などのラベルだけピル型。SNSアイコンは円形 - **温度感**: 濃紺と白のクールな基調に、赤い花や柄帯の暖色を差してにぎやかさを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#03428F` | ニュース帯・ブランドの濃紺 | 8% | 画素の実測 | | `on-primary` | `#FFFFFF` | 濃紺帯の上の白文字 | 1% | 画素の主要色に補正 | | `background` | `#FFFFFF` | ページの地色 | 51% | 画素の実測 | | `background-alt` | `#F7F7F7` | フッターの薄グレー地 | 8% | 画素の実測 | | `tint-1` | `#AFD0DF` | 日付バナーの水色グラデーション | 6% | 画素の主要色に補正 | | `secondary` | `#185B90` | 日付数字・見出しの明るい青 | 2% | 画素の実測 | | `accent-1` | `#D7182A` | ロゴの花などの差し色の赤 | 1% | 推定 | | `accent-2` | `#2E8B8B` | 柄帯の黄緑・ターコイズ | 3% | 推定 | | `text` | `#040304` | 見出しの黒文字 | 2% | 画素の実測 | | `text-body` | `#333333` | 本文・団体名の濃グレー | 2% | 推定 | | `line` | `#F7F7F7` | セクション区切りの細線 | 0% | 画素の主要色に補正 | | `dark-section` | `#5D5D5D` | コピーライト帯の濃グレー | 1% | 画素の実測 | | `cta` | `#013E8A` | 入場無料ラベルの濃紺地 | 0% | 画素の主要色に補正 | | `on-cta` | `#F3F6FF` | ラベル上の白文字 | 0% | 画素の実測 | | `tint-1-accessible` | `#B4D3E1` | AA を満たす補正値（計算） | | 計算 | - 地は白にし、濃紺はニュース帯とブランド要素だけに絞る - FVの上下はバティック柄の帯で囲み、イベントの華やかさを出す - 日付と見出しは青系の2色（濃紺と明るい青）で塗る - 赤はロゴやモチーフの差し色だけにし、面には使わない - ロゴ一覧のエリアは白地のまま細いグレー線で区切る - フッターは薄グレー地、最下部のコピーライトは濃グレー帯にする - `date-banner` は文字 `#185B90` × 背景 `#AFD0DF` のコントラスト比が 4.39:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `tint-1-accessible`（`#B4D3E1`、4.54:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの英字キャッチ・大きな日付数字 | 欧文サンセリフ | Montserrat | 800 | 30px | 1.1 | 0.01em | | `headline-lg` | セクション英字見出し（NEWSなど） | 欧文サンセリフ | Bebas Neue | 400 | 40px | 1 | 0.2em | | `headline-md` | SNS誘導などの日本語見出し | ゴシック | Noto Sans JP | 700 | 16px | 1.4 | 0.02em | | `headline-sm` | 協賛ランク名・団体名 | ゴシック | Noto Sans JP | 700 | 11px | 1.5 | 0.02em | | `body-md` | 説明文・ニュース本文 | ゴシック | Noto Sans JP | 400 | 10px | 1.9 | 0.03em | | `note` | 英語の団体名・住所・コピーライト | 欧文サンセリフ | Noto Sans JP | 400 | 8px | 1.5 | 0em | | `label-button` | 入場無料のラベル | ゴシック | Zen Kaku Gothic New | 700 | 12px | 1.2 | 0.3em | - 英字の見出しは縦長の書体で字間を大きく取り、中央に揃える - 日付の数字は太い欧文で特大にし、スラッシュと矢印で期間を見せる - 日本語の本文は小さめにして行間を広く取り、中央に揃える - 団体名は日本語を太字にし、その下に英語名を細字で添える - 装飾フォントはロゴとFV以外では使わない - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。ロゴ一覧は 2 カラムのグリッド - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算） - 全要素を中央揃えにする - ロゴは協賛ランクごとにまとめて縦に並べ、ランク名を小見出しにする - 後援ロゴの最上位は1つだけ大きく置き、下位は2カラムにする - ランクのまとまりは細線で区切る - 動画埋め込みは幅いっぱいに16:9で置く ## Elevation & Depth - 影は基本的に使わず、フラットに見せる - 動画埋め込み以外の画像に枠や影を付けない ## Shapes - **角丸**: 小 0px ／ 中 4px ／ 大 8px。ボタンはピル型。 - **写真の切り抜き**: 写真は角丸なしの矩形で全幅に置く。ロゴは透過のまま並べる - **セクション境界**: FVはバティック柄の帯で上下を区切り、それ以外は色の切り替えか細線で区切る - ラベルだけピル型にする - SNSアイコンは円形で3つ並べる - カードの枠は作らず、余白でまとまりを作る ## Components - **ヘッダー**（`header-bar`）: 白地の細いバー。左にロゴ、右にハンバーガーメニュー - **バティック柄帯**（`pattern-band`）: 南国の花柄を横に繰り返す帯。FVの上下に敷く - **日付バナー**（`date-banner`）: 水色グラデーションの上に英字キャッチ、会場、特大の日付数字、開催時間を配置する - **入場無料ラベル**（`badge-free`）: 濃紺のピル型に白い太字を字間広めで入れる - **ニュース帯**（`news-band`）: 濃紺の全幅帯。英字の大見出しの下に日付と1行の記事を中央揃えで並べる - **協賛ロゴグリッド**（`logo-grid`）: ランク名の小見出しの下に、ロゴと日本語・英語の団体名を2カラムで並べる - **SNSアイコン列**（`sns-icons`）: 各サービスのブランド色をそのまま使った円形アイコンを3つ横に並べる - **フッター問い合わせ**（`footer-contact`）: 薄グレー地にロゴ、SNSアイコン、窓口名と住所を中央揃えで置く ## Do's and Don'ts **Do** - 濃紺は帯と日付に絞り、ほかは白地を広く残す - 日付は特大の数字で一番目立たせる - 後援・協賛のロゴは格付けの順に大きさを変えて並べる - 日本語名と英語名を2段で書く - 柄帯はFVまわりに限って使う **Don't** - ロゴ一覧に色付きのカードや影を足さない - 赤を広い面に使わない - 柄帯をページ全体で何度も繰り返さない - 本文を左揃えの長文にしない - パステル調やかわいい装飾を足さない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（ロゴとメニューを出す）: 白地の細いバーに、左ロゴと右ハンバーガー 2. **ファーストビュー**（イベント名と開催地の雰囲気を伝える）: 柄帯の下に都市の写真を全幅で置き、中央にロゴを重ねる 3. **開催概要バナー**（日程・会場・入場料を一目で伝える）: 水色グラデーションの上に英字キャッチ、マスコット、特大の日付、入場無料のラベル 4. **ニュース**（最新のお知らせを出す）: 濃紺の帯に英字の大見出しと、日付と記事を中央揃えで2件 5. **後援団体**（公的な信頼性を示す）: 最上位の紋章を1つ大きく、下位団体は2カラムのロゴ＋2言語の団体名 6. **協賛企業**（協力・ランク別の協賛を紹介する）: ランク名の小見出しごとにロゴを並べ、細線で区切る 7. **SNS誘導**（フォローを促す）: 太字の見出し、円形アイコン3つ、2行の説明文を中央揃えで 8. **動画**（告知動画を見せる）: YouTubeを16:9で幅いっぱいに埋め込む 9. **フッター**（問い合わせ先を出す）: 薄グレー地にロゴ、SNS、事務局の住所を置き、最下部に濃グレーのコピーライト帯 ## Imagery - 開催国の名所や高層ビル群を青空の下で引きの構図で撮った写真 - バティック柄（花・葉・唐草）を鮮やかな多色で描いた帯 - 手を振るマスコットのキャラクターイラスト - 屋台料理や民族舞踊など、イベントの様子を写したにぎやかな写真 - ロゴは透過PNGにして白地に余白を取って置く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCではFVを2分割し、左に写真とロゴ、右に日付バナーとイベント写真3枚を置く - PCのニュースは左に英字見出し、右に記事一覧の横並びにする - PCの下位後援ロゴは4カラムで1列に並べる - PCのSNS誘導と動画は左右2カラムにする - PCのフッターは左にロゴとSNS、右に問い合わせ先を置く - 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-f6b140e9`（元 LP の URL から採番） - **元 LP**: https://malaysiafair.jp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（7/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-19、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、掲載削除を希望される場合、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。